오늘의 나는 무엇을 배웠을까?
Next.js App Router - Data Fetching(2)
가장 중요한 것은 화면 업데이트가 간단하기 때문에!
웹에서의 업데이트는 곧 상호작용 -> 사용자의 행동에 웹이 실시간 반응하는 것
리액트는 시대적 배경을 잘 반영한 기술
선언형 프로그래밍, 컴포넌트 기반의 UI 표현과
Virtual DOM(가상 돔)
DOM을 똑같이 copy한 JS 객체
동시에 발생하는 다양한 일들을 자동으로 모아 처리 -> 버퍼 역할
리액트의 VDOM은 자동으로 버퍼를 처리
업데이트가 발생할 시 VDOM에 먼저 반영, 이후 한꺼번에 처리
일종의 batching 처리를 해준다
대부분의 상황에서 VDOM을 사용하는 방식이 충분히 빠르다
하지만, 항상 그렇지는 않다…
왜? 요소의 깊이가 깊어질 수록 새로운 VDOM을 생성하고 diffing 한 뒤 업데이트 하는 시간이 오래 걸리기 때문에
두개의 VDOM을 비교하고 차이점을 분석해 업데이트 하는 과정
VDOM은 사실 리액트 컴포넌트가 반환하는 값들로 이루어진다.
-> 리액트 함수 컴포넌트는 React Element라는 객체를 반환하는 함수
-> 그리고 그 React Element는 VDOM의 구성 요소
-> 즉 VDOM은 React 컴포넌트들의 반환값들이 모인 tree
Diffing Algorithm
휴리스틱을 채택
불필요한 Element Type 업데이트를 피하자 (이 때 Element Type는 컴포넌트의 이름이 될 것임)
key에 index를 사용하지 말자 : 리스트에 업데이트가 발생할 경우 예상치 못한 동작을 발생시킬 수 있음
(내용 추가 예정)
—save-dev 옵션을 사용하는 이유
.d.ts 확장자의 d = declaration
moduleResolution 옵션
TS의 모듈 해석 방식을 결정하는 옵션
Classic 방식 : 절대 경로일 때 프로젝트의 루트에서 모듈을 찾음
Node 방식 : 절대 경로일 때 node_modules 폴더 아래에서 모듈을 찾음
어떤 변수든 any
type이 되서는 안된다 : 확실한 type 정의가 필요하다.
내일의 나는 무엇을 해야할까?
오늘 특강이 생각보다 길어서 어제 세웠던 계획을 잘 지키지 못했다. 하루에 할 수 있는 공부량을 잘 고려해서 계획을 세워야겠다.