오늘 새로 배운 것
훅은 컴포넌트 최상(리액트 함수 내)에서만 불러서 쓸 수 있다.
훅이 포함된 함수를 그 컴포넌트가 아닌 전역으로 쓸 수가 없음.
이 규칙을 지키면서, 이 로직을 묶어서 쓸 수 있는 커스텀 훅이 등장한다.
커스텀 훅을 만들기 위해서는 이름을 use... 로 시작해야한다.
커스텀 훅을 만들고 App.js에서 불러서 사용(이부분 확인 필요)
옵셔널 체이닝 ?.
있으면 가져오고 없으면 에러내지 말고 undefined로 처리해라
JS의 동시성
JS는 싱글 쓰레드로 동작하는 언어
(메인 쓰레드 1 + Call stack 1)
기본적으로 동기 방식으로 작업하나 비동기 방식으로도 작업할 수 있다.
JS는 한번에 하나의 일만 한다.(run to completion)
하나의 일이 끝나기 전에 다른 일을 하지 않는다는 의미이다.
그런데 어떻게 비동기로 작업을 할 수 있나?
바로 이벤트 루프 때문에 가능하다.
-
JS가 실행되는 웹 브라우저 환경 v8 엔진은 Heap과 Call stack으로 이루어져있다.
-
선언한 변수는 힙 영역으로 들어가고 alert, console.log같은 일은 Call stack으로 들어간다.
-
브라우저는 web api에 요청을 하고 네트워킹이나 setTimeout같은 작업을 대신 처리를 해준다.
-
web api는 Call stack이 하는 대신 어떤 비동기 작업을 대신 처리해준다. 그리고 web api에 쌓인 작업이 끝나면 후처리가 필요한데, 그걸 하려면 Callstack에서 해줘야된다.
-
하지만 Call stack이 어떤 다른 일을 수행하고 있는 중일 수도 있기 때문에 바로 Call stack에 넘기지 않고 Callback queue(Task Queue 또는 Event Queue 라고도 함)에 넘긴다.
-
Event loop는 Call stack을 감시하고 있다가 Call stack이 작업을 완료하면 Callback queue의 일을 Call stack에 넘겨준다.
동시성은 한번에 여러 개의 일이 처리되는 것처럼 보이는 것이다.
redux와 redux-toolkit 차이 중에서...
combineReducer에서 모듈이 여러 개일 때 rootReducer로 합쳐주고 이것을 createStore에 인자로 넣어줘서 store를 생산하는 기존 방법
configureStore로 module을 합치는 것과 store를 생성하는 것을 한번에 해결
최상위 index.js에 Provider에 store를 주입해주는 것은 redux와 redux-toolkit과 동일
웹 브라우저 주소창에 url을 입력한다는 것은
API 서버에 GET 요청을 하는 것
Network의 response
client에서 서버로 보낸 POST 요청에 대한 서버의 응답값. Status 코드처럼 자동생성되어 표시되는 값이 아니라 api 명세서대로 설정한 대로 오는 값. 어떤 개발자와 협업하냐에 따라 body가 return되는 게 아닐 수도 있다.
하루를 돌아보며...
오늘 하루는 유독 정신없이 갔던 것 같다. 아마 특강, 온라인 채용설명회, 이어서 또 바로 코드 리뷰 시간이 있어서 그런 것 같다.
오늘 계획한 것보다는 공부를 별로 못했지만 그래도 심화 강의 내용에서 어제 거의 종일 혼자 서버 쪽 구현하고 mongoDB까지 연결해본다고 삽질해봤던 axios 부분이 나와서 그래도 삽질한 보람이 있는 것 같다. 물론 axios 강의를 들었지만 아직 내용이 머리에 확 들어오지는 않는다.
그리고 오늘 채용설명회를 진행했던 트릿지라는 회사의 프론트엔드 기술 스택에 express, GraphQL도 있는 것을 알게 되었다. GraphQL이 아직 뭔지는 잘 모르지만 종종 들어봤고 전에 노마드 코더 영상에서 본 것 같다.
내일도 좀 리덕스 툴킷이나 axios 부분도 좀 봐야할 것 같다.
