TIL: 2023-04-03

⚙️ 오늘 학습한 내용

react-virtuoso로 큰 크기의 리스트 렌더링하기 (windowing)

원티드 프리온보딩 4월 프론트엔드 첫 강의

 

🐹 오늘의 기분

일어나자마자 코테 문제 풀고 블랙커피 스터디 강의 들으면서 오전을 보냈다. 오후에는 시간 정해놓고 프로젝트 오류 해결을 했다. 가상화 관련 라이브러리를 찾다가 `react-virtuoso`를 알게 되었는데 높이를 지정해줄 필요가 없다는 것에서 현재 프로젝트에 꼭 필요한 라이브러리라고 생각되어 바로 도입했다. 씨름 끝에 렌더링에 성공해서 너무 뿌듯하다. 공식 문서랑 소스코드 보면서 해결한 부분도 있어서 이건 아예 글을 따로 작성할 생각이다. 내일은 배포도 한 번 더 해보고 이미지 크기 최적화를 해봐야지

저녁에는 프리온보딩 4월 챌린지 강의를 들었는데 react에 대한 것을 많이 알려주셔서 좋았다. 사실 그냥 쓰기만 했지 어떻게 작동하는지는 깊게 생각해본 적이 없었던 것 같은데 이 기회로 조금 엿볼 수 있게 되었다. vite라는 빌드 툴도 새로 알게 되었는데 개발 트렌드를 적극적으로 찾는 습관을 들여야겠다는 생각이 들었다.

별개로 취업 준비 시 팁들도 많이 알려주셔서 좋았당 다른 분들께서 좋은 질문을 많이 남겨주셔서 의외의 꿀팁을 얻어갈 수 있었다. 

 

🗝 키워드

render phase, commit phase, fiber, `createRoot()`, vite, reconciliation

 

🗣 스스로에게 설명

react v18부터는 업데이트에 우선순위가 생김.

 

`createRoot()` 

- virtualDOM의 tree에 root를 심어주는 역할 (`<div id="root"></div>`)

 

fiber - `work`의 가장 작은 단위 (컴포넌트보다 더 작은 단위)

 

render phase - 업데이트를 수행해서 virtual DOM 내부에서 화면을 변경하는 것

commit phase - 변경된 화면을 실제 브라우저에 나타내는 것 (virtual DOM -> 실제 DOM)

 

reconciliation - 업데이트가 발생할 때 기존 tree와 차이점을 비교하는 방법 (DFS로 tree 탐색, diffing algorithm)

전에 정리했던 글! 

TIL: 2022-11-25