도니 House 도니 House

Next.js가 어떻게 돌아가는지 부터 파악해보기 - 프로젝트를 진행하면서 hydration에러가 발생했습니다.React error 418이 Hydration에러가 발생했다라는 뜻이라고 합니다. - 근데 왜 발생했을까요 - 우선 Hydration이 뭔지 부터 저는 바로잡고자 다시한번 공부를 했습니다. Hydration? - 이번 Next.js에서 어떻게 렌더링을 하는지에 대해서 봅시다.- 유저가 브라우저에서 접속 요청을 하면 서버에서 사전 렌더링이 시작됩니다. 이때 Next.js는 서버 컴포넌트(SC)와 클라이언트 컴포넌트(CC)를 구분해서 처리합니다.- 서버 컴포넌트는 서버에서 실행된 뒤 RSC Payload 형태로 직렬화됩니다. 클라이언트 컴포넌트는 서버에서 HTML로 렌더링됩니다. 이 둘을 합쳐 ..

다시 한번- 더 해빗(TheHabit)이라는 습관 형성 챌린지 서비스를 다시 만들면서 겪은 이야기입니다.- 온보딩 페이지를 구현하면서 고려하지 못한 부분에 대해서 보완해보고자 프로젝트를 다시 시작했습니다. - 과거에 왜 하지 않았을까 생각해봤을때 딱 아래 사진과 똑같았습니다. - 예외 처리 혹은 다른 여러가지 상황을 고려하지 못했던거 같습니다. - 일단 작동하니 넘겼던 과거를 후회하면서... - 여러 예외 상황 등을 바로 잡아보고자 합니다. 과거의 구현이 어떻게 되었고 현재 어떻게 수정할지에 대해// 쿠키를 날것으로 직접 읽었음const token = req.cookies.get('next-auth.session-token')?.value;console.log('pathname', pathname..

페이지 이동시 리렌더링이 발생하는 문제🧐 개발 중 헤더의 li를 클릭하면 링크는 잘 이동되지만, active 표시가 되지 않는 문제가 발생했다. 🔍 이유가 뭘까 state가 왜 초기화 되는지 찾아보자 우선 가설을 세웠다. 라우팅이 된 후 active가 안되는 것이니 Next.js의 문제인가 그래서 Header의 라우팅이 현재 어떻게 되었는지 찾아보자 app/├── layout.tsx├── page.tsx├── _components/ │ ├── Header/ │ │ └── Header.tsx │ └── layout/ │ └── LayoutProvider.tsx└── globals.css현재 나의 헤더는 layout에 LayoutProvider 컴포넌트를 감싸서 페이지 마다 다른..

Next.js프로젝트에서 로고와 아이콘을 구현하기 위해 SVG 이미지를 사용했는데, Next.js의 컴포넌트를 적용해도 이미지 최적화가 이루어지지 않는 문제를 발견했다.PNG 이미지는 최적화가 적용되었지만, SVG는 동일한 방식으로 처리되지 않아 그 원인이 궁금해졌다. Next.js 공식문서에서의 Image Next.js 공식문서에서는 기존 img 태그를 최적화 시킨 Image 컴포넌트를 제공한다. 실제로 위 png가 img 태그를 사용했고, 아래 png가 Next.js에서 제공하는 Image 컴포넌트를 사용한 결과인데 시간차이가 꽤 크게 났다. 실제로 공식문서를 보면 크키 최적화와 이미지 로드시 레이아웃 이동(CLS)를 방지해주고 이외에 많은 기능을 제공한다. Next.js Image 까보기현재 im..