Facts
- 비동기 공부를 했다.(3시간)
- 드림코딩엘리 리액트 강의를 들었다.(4시간)
Feelings & Findings
비동기 공부를 했다.
하브루타 스터디를 대비해 비동기 공부를 했다. 지하철 노선도 미션을 하면서 에러 처리에 관해 많이 공부했고, 그 과정에서 비동기는 많이 알고 있다고 생각했었다. 하지만 비동기라는 주제를 받았을 때, 비동기가 무엇인지 생각해봤고, 떠오르는 것이 많지 않았다. 잘 알지 못하고 있던 것이다.
그래서 처음부터 공부를 하기 시작했다. 책으로 공부하는 것이 좋을 것 같아서 모던 자바스크립트 Deep Dive를 보면서 공부했다. Promise, async await에 대해 공부했다.
Promise는 봐도 봐도 어렵다. 간단하게는 비동기의 데이터에 대한 에러 처리를 하거나 값을 받아오는 것이 불가능하기 때문에 Promise가 등장했다. then으로 결과를 받아올 수 있고, catch로 에러 처리를 할 수 있다. 또한 Promise에서 처리하는 콜백 함수는 마이크로태스크 큐에 담기기 때문에 비동기로 실행된다. 이 과정에서 정말 궁금한 것이 생겼다.
async await은 ES8에서 만들어진 구문인데 Promise를 기반으로 만들어졌다고 알고 있다. async await은 동기적으로 동작하는데, 어떻게 Promise를 기반으로 만든 것이 동기적으로 동작할 수 있을까라는 궁금증이 생겼다. 그리고 동기적으로 실행되는 것이 항상 좋지만은 않다는 것도 생각하게 되었다.
그럴 일이 있을진 모르겠지만 데이터를 받아오는 데 30초가 걸리는 코드에서 async await을 사용하게 되면 js가 멈출텐데, 이 경우에는 Promise를 사용해야 할 것 같다.
책에서는 async await이 동기적으로 동작하는 이유는 제너레이터 함수를 사용했기 때문이라고 한다. 제너레이터 함수를 통해 result.next()가 done이면 종료하고 아니면 Promise의 then을 사용해 결과를 받아와서 재귀적으로 done이 될 때까지 실행한다.
결국 Promise를 사용해 then으로 결과를 받을 때까지 기다렸다가 next를 실행하고, 이 과정을 반복하기 때문에 동기적으로 실행되는 것 같다.
아직 제너레이터에 관해 잘 이해하지 못했기 때문에 맞게 이해한지 모르겠다. 하지만 어느 정도 감은 잡았다고 생각한다. 하브루타가 없었으면 평생 몰랐을 수도 있었을 것 같은데... 기본기를 열심히 공부해야겠다고 느꼈다.
드림코딩엘리 리액트 강의를 들었다.(4시간)
어제 혼자 해본 Habit-tracker이 드림코딩엘리가 짠 코드와 어떤 부분이 다른지 확인해봤다.
잘한 점은 state의 불변성을 유지했다는 것이고, 살짝 부족했던 점은 불변성을 유지하기 위해 코드를 너무 더럽혔다는 것이다. 나름 최선을 다했다고 생각했는데 map안에서 구조분해할당으로 조금 더 간단하게 할 수 있었다. 새로운 시각을 배운 점에서 이미 오늘은 성공했다고 생각한다.
PureComponent, life cycle, React Hook의 useState, memo, useCallback, useRef등을 배웠고, react를 deploy하는 방법과 PostCSS에 대해서도 배웠다. 나에게 중요한 것은 React이기 때문에 다른 부분은 간단히 설명만 듣고 넘어갔다.
강의를 들으면서 의문이 생긴 것이 있는데, form의 submit 이벤트 핸들러에서 event 객체를 통해 event.target.elements[inputId]로 input을 받을 수 있음에도 불구하고 드림코딩엘리는 React.createRef를 사용해 input을 받았다. 이 부분이 이해가 가질 않았다. 리액트에서는 document.querySelector 또는 event.target.elements와 같이 DOM에 접근하면 안되는 것일까? Virtual DOM이라서 그런 것인가? 아직 리액트에 대해서 잘 알지 못해서 그럴 수도 있지만 리액트 공식 문서에 들어가보면 ref를 마구잡이로 사용하지 말라고 되어 있는데, 왜 input까지도 ref를 사용해서 받아오는지 모르겠다.(질문은 남겨놨다.)
ref부분을 읽어봤지만 아직 ref를 왜 사용해야 하는지 모르겠다.
나머지 배운 부분은 예전에도 몇 번씩은 봤던 것이라서 가볍게 듣고 넘어갔다. 여기에서 살짝 놀라웠던 점은 React Hook을 공부할 때였다. 함수형 컴포넌트는 state나 props가 변경될 때마다 함수가 다시 실행되어서 함수 안에 있는 모든 변수들이 다시 생성된다고 한다. GC가 수거해 갈 것이지만 메모리에 부담이 될 수 있는데, 이 부담을 없애기 위해 useState, useCallback, useRef와 같은 Hook들이 등장한 것이다.
여기에서 신기한 것은 다시 함수가 실행되는 것인데 useState에 저장된 값은 유지가 된다는 것이다. 예전에는 이것을 아, 리액트가 알아서 해주는구나!하고 넘겼지만 오늘은 달랐다. 어떻게 리액트가 이 값을 유지하고 있을 수 있지?라는 생각이 들었다. 고민한 끝에 클로저를 사용하면 충분히 가능할 것 같다는 생각이 들었다. 구현도 할 수 있을 것 같은데 시간이 되면 꼭 해봐야겠다.
Plans
- 비동기 공부하기
- 자바스크립트 기초 다지기
