반응형 2022/0913 그냥 일기 모르면서 안다고 착각하고 있던것들이 많았음을 깨달았다. next를 리액트처럼 쓰면서 그냥 안다고 착각하고 있었다. 요새 next공식문서를 정독하고 있다. 몰랐던것을 많이 알게 된다. .. 2022. 9. 20. getStaticPaths의 fallback Nextjs는 getStaticPaths에 정의된 path들을 정적으로 프리렌더링한다. 즉, 동적라우팅을 사용할 때 어떤 페이지를 미리 Static으로 생성할지 정하는 api이다. (정적으로 프리렌더링 한다는 뜻은 빌드타임시에 만들어놓고 계속 가져다 쓴다는 뜻 SSR은 매 요청시마다 새로 만듬) //posts/[id].js export async function getStaticPaths() { // const paths = getAllPostIds(); const paths = [ { params: { id: 'ssg-ssr' } } ]; return { paths, fallback: boolean 혹은 'blocking' }; } 이때 getStaticPaths의 리턴값에 fallback은 무엇일까 .. 2022. 9. 20. next/image : next.js에서 제공하는 이미지 최적화 태그 지금까지 몰랐다. 공식문서를 흐린눈으로 보다가 우연히 알게 되었다. next.js에서 제공하는 태그의 확장 컴포넌트인 태그는 이미지 최적화 기능이 있다고 한다. Improved Performance : 언제나 디바이스 사이즈에 맞게 최적화된 이미지 제공 Visual Stability : width,height를 명시하여 이미지 만큼의 공간 확보 -> CLS방지 CLS : 현재 보고있는 페이지에 갑자기 발생하는 레이아웃의 변경 -> 잘못된 클릭의 원인이 될 수 있음 Faster Page Loads : 이미지가 뷰포트에 들어왔을 경우만 로드(Lazy load) -> 페이지 로드 속도 향상 Asset Flexibility : 외부에 저장되어 있는 이미지까지 리사이징 가능 외부링크 사용할 때 next.confi.. 2022. 9. 19. React.memo - Memoization을 이용한 불필요 리렌더링 없애기 우선 비슷한 상황을 부트캠프 4주 프로젝트때 겪은 일이 있다. 위에서 보면 메모란에 타자를 칠때마자 사진이 깜빡이는 것을 확인할 수 있다. 이때 React.memo로 해결했었다. React.memo 간단히 설명하면 props가 변하지 않는데 side effect에 의해 리렌더링 되는 컴포넌트라면 리렌더링을 막을 필요가 있다. (위 gif처럼 메모란에 타이핑할때마다 사진컴포넌트가 리렌더링 되는 경우) 이럴때는 리렌더링이 불필요한 컴포넌트의 이전 props와 다음 props를 비교하여 , props변화가 없다면 이전 props를 사용하도록 메모이제이션 할 수 있다. 이를 가능하게 하는 것이 React.memo이다. 팀원분이 타이머 업데이트와 페이지 업데이트를 분리하고 싶은데, useMemo로 해결이 안된다고.. 2022. 9. 18. 이전 1 2 3 4 다음 반응형
