230403 프리온보딩 - 리액트 렌더링, 면접대비 팁

vite 써야하는 이유

vite로 init한 react는 매우 빠르게 빌드 가능

=> 핫픽스에 유리함

=> 현업에서도 쓰는 편이고 현재로써는 특별히 단점도 없음

***

virtualDOM 역할

브라우저 화면에 직접적으로 반영하기 전에 업데이트를 최적화하여 사용자 경험 개선
모든 event(onClick같은)는 root로 할당되어 host root가 처리

***

react 18에서는 업데이트에 우선순위를 부여 가능하도록 함 

Fiber/work 리액트 렌더링/업데이트의 가장 작은 단위(JSX 엘리먼트 하나하나가 FIBER)
효율적인 업데이트를 위해 work를 중지, 다시시작, 제거를 더욱 기능적으로 할 수 있게 되었음.
ex) useTransition으로 현재 작업 중단 및 중요한 작업으로 전환

***

Reconciliation 

업데이트가 발생할 때 기존의 tree와 차이점을 비교하여 해당 fiber를 렌더링 하는데
DFS로 탐색하는 원리를 이해하고 렌더링되는 범위를 최소화

key로 상태변화를 감지한다.

BigO 표기법으로 이해하면 쉬움

예시) 가능하면 key를 앞에 unshift하지 말고, push로 뒤에 넣는 것

***

Render Phase

text도 하나의 (Text)Fiber로, 이 단위가 변하는데,

=> 한마디로 불필요한 element tag를 없앨 수록 성능이 올라간다
=> 프래그먼트 <></>도 Fiber이기 때문에 사용 자제
key로는 고유한 id값을 주는 것이 일반적


***

면접대비 팁

1. 면접 많이 다니며 경험치 쌓아라
2. 리스트, 링크드리스트, 세트, 맵 등 자료 구조에 대해 자세하게 공부하라
3. 네트워크는 항상 중요
4. 이력서, 포트폴리오는 F-lab 공개 이력서 참고(https://f-lab.kr/publish/resumes)
5. 마인드 컨트롤(좌절 금지)
6. 반응형 웹뷰 다양한 디바이스 적용 경험
7. 3년차도 막 지원하셈
8. 압박면접 회사는 분위기 별로일 확률이 높음
9. 이력서에 나이 안쓰기(???)
10. 오픈소스 기여 중요
11. 팀프로젝트 경험

***

기타 사항

과제할 때 css reset 굳이 안넣어도 되면 빼라
코드 아키텍쳐 참고 (https://github.com/sendbird)
프론트엔드 테스트코드는 공식문서

***
세션 스토리지 쿠키 특성 다시 공부하기

*** 도서
실전에서 바로 쓰는 next.js