공부 기록일지📚

실제 업무를 겪으면서 FE개발자가 해결해야할 보안적 이슈(권한이 없는 사용자, 웹 스토리지), 비동기 처리, JWT 토큰 refreshtoken의 특징, API 요청이 여러 개 갔을 때(비동기 처리의 연장선) 그리고 무한 스크롤 페이징 처리 시 DOM의 최적화 등 해결방법에 대해 FE개발자님과 얘기를 나눴습니다. 외에도 최근에 관심있는 툴이나 제가 개인적으로 궁금했던 점을 여쭤볼 수 있었는데요. 개인적으로 이런 기회가 쉽게 있지않아 저에게는 값진 시간이었습니다. 아 또한, Next에 대해서도 여러가지 견해를 들을 수 있었습니다. 예를 들어 Next가 제공하는 이미지 최적화가 정말 효율적인가에 대해서 얘기하였는데 제공하는 기능을 그냥 갖다쓰는 것이 아니라 어떤 방법이 베스트인가부터 비교하면서 잘 생각하고 ..

query param == query string (e.g. user?id=23) path param == path parameter (e.g. user/23 ) *용어를 섞어 쓰지만 위와 같은 의미로 해석하시면 됩니다. day에 해당하는 day word list를 삭제하는 것은 다른 툴을 추가하지 않고 순수 react로는 작업이 번잡해진다. word 컴포넌트에서 props를 받아 렌더링하고 있으므로 부모 컴포넌트인 Day에서 word의 상태가 변화됨을 감지하고 변화된 내용을 감지하려면 word의 deleteWord 함수를 역으로 올려줘야 할 거 같음 react-query를 통해 서버 데이터의 변화가 일어났을 때, 클라이언트의 state값을 변경시켜주는 게 베스트 방법일 듯 특히, wordList는 da..

우선 기존에 create-react-app 으로 만든 폴더를 TS를 적용하여 마이그레이션한다고 했을 때, 노드 패키지 매니저(npm or yarn)으로 typescript를 설치해줍니다. typescript만 추가하는게 아니라 아래와 같이 여러 개의 패키지를 추가로 설치해줍니다. npm i typescript @types/node @types/react @types/react-dom @types/jest @types/react-router-dom js확장자를 ts로 변경하고 jsx 를 tsx로 변경해줍니다. 👾컴포넌트를 .ts 확장자로 변환하면 jsx를 제대로 인식하지 못하고 에러를 토해내는 에러를 만났습니다. jsx를 반환하고 있는 컴포넌트는 tsx로 변환해주면 되고 jsx를 반환하지 않는 js파일은 ..

저번에 읽었던 [You Don't know JS 타입과 문법, 스코프와 클로저] 가 흥미로웠어서 같은 시리즈의 this와 객체 프로토타입, 비동기와 성능을 빌려왔습니다. 외에 JavaScript 자바스크립트 성능 최적화(올빼미가 그려진..) 책을 빌려와 봤는데요. 저번에 읽었던 부분은 기초적인 부분이고 (분량도 그리 많지 않음)제가 이미 여럿 접했던 내용이라 2-3일만에 독파가 가능했습니다. 이번에는 잘 모르겠네요 ㅎㅎ 시간을 크게 할애하고 싶지는 않아서 우선 빠르게 훑어보려고 합니다. 내용이 좋으면 소장해놓고 필요할 때 찾아보는 용도가 됐으면 합니다. 여담으로 면접을 보고 온 회사에서 디자인패턴, 알고리즘, 네트워크 관련 질문을 주셔서 이 부분에 대해서도 공부해야 할 것 같습니다. 저번에 유투브에서 T..

화살표 함수 ES6부터 식(expression)에 한해 화살표 함수식을 활용할 수 있다. 더 나아가 매개변수, 리턴타입을 명시적으로 선언해 컴파일 과정에서 타입 검사를 수행해 사전에 문제를 방지할 수 있다. 아래는 매개변수 url의 타입을 string으로 지정하여 명시적으로 표현하였다. //TS let corsURL = (url:string): string => `https://crossorigin.me/${url}`; corsURL('http://yamoo9.herokuapp.com/rest/ediya-menu'); Default Parameters ES6 부터 함수 매개 변수의 기본값을 설정할 수 있다. TS는 매개 변수 타입 설정 후, = 뒤에 기본값을 할당하면 된다. 컴파일된 코드를 보면 기본 값..

책이름: You don't know JS : 타입과 문법, 스코프와 클로저 주관적으로 머리에 남기고 싶은 부분들만 정리하였습니다. 자세한 내용은 책을 참고하시는게 좋습니다. 스코프란 무엇인가? 특정 장소에 변수를 저장하고 나중에 그 변수를 찾는 데는 잘 정의된 규칙이 필요하다. 이런 규칙을 스코프(scope)라 한다. 1.1 컴파일러 이론 자바스크립트는 일반적으로 동적 또는 인터프리터 언어로 분류하나 사실은 컴파일러 언어이다. 전통적인 컴파일러 언어와는 많이 다르다는 것은 자명한 사실이다. 코드를 미리 컴파일하거나 컴파일한 결과를 분산시스템에서 이용할 수 있는 것은 아니기 때문 전통적인 컴파일러 언어의 처리 과정은 보통 3단계를 거치는데 이를 컴파일레이션 이라고 부른다. 토크나이징(tokenizing)/..

책이름: You don't know JS : 타입과 문법, 스코프와 클로저 주관적으로 머리에 남기고 싶은 부분들만 정리하였습니다. 자세한 내용은 책을 참고하시는게 좋습니다. 5.4.1 너무 이른 변수 사용 ES6는 임시 데드 존 TDZ(Temporal Dead Zone)이라는 새로운 개념을 도입 TDZ는 아직 초기화를 하지 않아 변수를 참조할 수 없는 코드 영역 ES6의 let 블록 스코핑이 대표적인 예시 { a = 2; //ReferenceError let a; } -> a가 let a 선언에 의해 초기화되기 전 a = 2 할당문이 블록스코프에 있는 변수 a에 접근하였으나 a는 아직 TDZ 내부에 있으므로 에러를 발생시킨다. 재밌는 사실🙄 typeof 연산자는 선언되지 않은 변수 앞에 붙여도 오류는 나..

책이름: You don't know JS : 타입과 문법, 스코프와 클로저 주관적으로 머리에 남기고 싶은 부분들만 정리하였습니다. 자세한 내용은 책을 참고하시는게 좋습니다. 배열(Array) 자바스크립트 배열은 타입이 엄격한 다른 언어와 달리 문자열, 숫자, 객체 심지어 다른 배열(다차원 배열)이나 어떤 타입의 값이라도 담을 수 있다. 배열 크기는 미리 정하지 않고 선언가능, 원하는 값을 추가할 수 있다. (주의)배열 값에 delete 연산자를 적용하면 slot(슬롯)을 제거할 수 있찌만 마지막 원소까지 제거해도 length프로퍼티 값은 바뀌지 않는다 *빈/빠진 슬롯이 있는 구멍난 배열 예시는 아래에 있다. 배열 인덱스는 숫자이지만 배열 자체도 하나의 객체이다. 그렇기 때문에 키/프로퍼티 문자열을 추가할..