치춘짱베리굿나이스

Hydration Failed… React Portal을 이용하여 토스트를 구현하던 중에 이런 오류를 마주했다 서버에서 렌더링한 UI와 초기 UI가 달라서 Hydration을 실패했다는 오류이다 이 이슈는 왜 발생하는 것일까? 한번 알아보도록 하자 이유와 해결법 기존 코드 const element = document.getElementById('toast-root') if (!element) return ; return ReactDOM.createPortal( ... ); 컴포넌트 내부에 document 에 접근하는 코드가 존재하는데, 서버사이드에서 document 가 존재하지 않을 경우 element가 존재하지 않을 것이기 때문에 예외를 처리해주었다 문제는 이 예외 처리에서 발생한다… 먼저 Next.j..

App 라우터, Pages 라우터 Pages 에서 App으로 넘어가기 내가 Next.js 공부를 시작한지도 어언 1달 정도가 되었는데… 5월 초쯤 (5월 5일?) v13.4.0 릴리즈부터 갑자기 앱 라우터가 stable 해 지면서 권장사항으로 바뀌었다 진행하던 미니 프로젝트 레포 초기화 할 때만 해도 App 라우터는 experimental이라 pages로 가는 것을 추천했었는데 이런 대격변이 아닐 수 없다 이렇게 갑작스럽게 바뀔 줄 알았으면 진작에 App 라우터로 초기화했지!… Next.js 공식문서엔 Next 13버전으로 업데이트되면서 변경된 사항들 몇몇개를 같이 소개하고 있지만 여기서는 App 라우터로만 변경하는 것을 적어보기로 한다 (사실상 번역만 하는 수준) 패키지 업데이트 npm install ..

Next.js Next.js by Vercel - The React Framework Next.js by Vercel - The React Framework for the Web Used by some of the world's largest companies, Next.js enables you to create full-stack Web applications by extending the latest React features, and integrating powerful Rust-based JavaScript tooling for the fastest builds. nextjs.org 를 시작해 보자 이미 만들어져 있는 노션 포트폴리오가 있긴 하지만, 너무 흔해 보여서 Next.js 프로젝트로 S..