공부의 즐거움을 다시 찾아서 기쁜 한 주
React 수업
- Jest DOM 테스트 환경 설정하기
- 가상 DOM 노드 만드는 utility 함수를 만들어보고, CDN으로 React를 로드하여 React Element를 만들어보았다.
- ReactDOMServer로 ssr도 가능하다.
- React Element
- createElement API로 React element 만들어보기
- ReactDOM으로 actual DOM에 붙이기
- React.Fragment
- JSX 문법과 babel로 편리하게 React 사용하기
- JSX 사용하도록 babel standalone CDN 로드
- 모듈파일에 대해서는 경로 문제를 해결하지 못하므로 babel CLI로 배포파일 만들어 로드
- Babel polyfill로 구형 브라우저 및 IE 크로스브라우징 해주기
- 컴포넌트 분리 실습 (+ Figma 툴)
- Props 사용 및 defaultProps 설정
- 가상 DOM의 원리와 직접 구현해보기(h, createElement, diff, patch)
- h는 전달된 props와 children을 객체로 만들어주고, createElement는 전달된 가상DOM노드를 재귀호출로 순회하며 실제 DOM 노드로 만든다.
- diff를 통해 변경되었는지 여부를 체크한 후 실제 DOM tree에 변경된 부분만 업데이트한다.
느낀 점
- 가상 DOM이 뭔지에 대해서 아무리 검색하고 찾아봐도 알아듣기 어려웠는데, 이번에 제대로 알게되어서 앓던 이가 빠진 느낌이다.
- 코딩테스트와 자소서를 병행하려니 버겁긴 하지만… 그래도 공부권태기 극복한 것이 기쁘다.
