전체 글 (21) 썸네일형 리스트형 React 렌더링 (feat. Reconciliation & Fiber 동작) 리액트 디자인 원칙에서 스케줄링의 내용은 다음과 같습니다.If something is offscreen, we can delay any logic related to it. If data is arriving faster than the frame rate, we can coalesce and batch updates. We can prioritize work coming from user interactions (such as an animation caused by a button click) over less important background work (such as rendering new content just loaded from the network) to avoid dropping fr.. RSC가 비동기 함수를 관리하는 방법 (feat. Observer Pattern) 옵저버 패턴 (Observer Pattern)비유하면, 구독하는 유튜버의 새 유튜브 콘텐츠 알림을 받는 것과 같습니다. 즉, 객체의 상태(유튜버 콘텐츠)를 지켜보고 싶은 관찰자(구독자)들에게 상태 변화(새 콘텐츠)를 알려주는 디자인 패턴이라고 할 수 있습니다. 이 패턴의 핵심은 관찰자들을 등록시키고, 이벤트가 발생하면 변화됨을 통지하는 거죠. 관찰자들은 변화가 일어났는지 직접 확인할 필요가 없고, 변화에 따른 적절한 행동만 수행하면 됩니다. 이는 update 메서드를 정의하여 이벤트 발생 시 동작되도록 합니다. 그럼 이 패턴을 어디에 적용하면 좋을까요?첫 번째로 (사용자에 이벤트 등) 외부에서 발생한 이벤트에 대해 대응하거나,두 번째로 객체의 속성 값이 변화할 때 사용할 수 있습니다. 자, 그럼 첫 번째.. [Next.js] 라우팅과 네비게이션의 동작 라우팅과 네비게이션 동작을 이해하는데 도움이 되고자 How Routing and Navigation Works 내용을 더 상세하게 정리했습니다. 1. 코드 분할 (code splitting) 유저가 페이지에 접속하면 최초 경로에 대한 분할된 코드만 응답합니다. 이게 가능한 이유는 Next.js 서버가 각 경로마다 코드를 별도의 청크로 코드 분할하기 때문입니다. 후속으로 경로를 탐색해도 새로 탐색한 경로에 대한 코드만 가져오게 됩니다. 따라서 요청에 따른 응답 데이터양과 전송 시간이 줄어듭니다. 2. 미리 가져오기 (prefetching) 유저가 링크로 된 경로로 이동하기 전에, Next.js는 코드를 미리 로드합니다. Link 컴포넌트의 prefetch를 설정하면, 위 이미지와 같이 사용자의 뷰포트.. 이전 1 2 3 4 5 6 7 다음
