csr3 [error] SyntaxError: Unexpected token u in JSON at position 0 at JSON.parse (<anonymous>) Next.js 13.2.4 버전 에서 클라이언트 컴포넌트 구현 시, 해당 에러 발생 error - SyntaxError: Unexpected token u in JSON at position 0 at JSON.parse () 에러 원인 next.js 13.3.1 미만의 버전의 window 환경에서 "use client" 를 사용하여 클라이언트 컴포넌트 구현 시, 일반 함수로 함수형 컴포넌트를 구현하면 해당 에러가 발생함(next.js 의 버그로 보임) 해결 방법 해당 버그는 next.js 13.3.1-canary.4 버전에서 해결되었다. 이전 버전을 사용 중이라면 클라이언트 컴포넌트 구현 시, 해당 컴포넌트를 일반 함수를 사용한 함수형 컴포넌트가 아닌, 화살표 함수를 사용한 함수형 컴포넌트로 구현하고 e.. 2023. 4. 13. [error] Hydration failed because the initial UI does not match what was rendered on the server Next.js 13.2.4 버전에서 개발 중, yarn dev 로 실행하여 캐러셀 컴포넌트를 클릭 시 발생한 에러 에러 원인 배포 전, yarn dev 로 next.js 웹 어플리케이션을 실행 후, 링크에 연결 후 빠르게 캐러셀에 클릭 등 유저 이벤트 발생 시 해당 에러 발생 해결 방법 해당 에러는 개발 중인 페이지를 yarn dev 로 실행 시, 빌드 하지 않고 ssr 이나 csr로 랜더링 되는 next.js 의 특성 상 발생하는 에러이다. yarn dev로 실행 시, 빌드되지 않은채로 ssr이나 csr 로 랜더링 된다. 이때 pre-rendering 된 요소에 hydration 이 완료되기 전에 접근하게 되면 해당 에러가 발생한다. 빌드 후 배포 시에는 pre-rendering과 hydration 사.. 2023. 2. 28. carousel 은 CSR 로 구현하자 메인 페이지의 배너를 히어로 캐러셀로 넣기 위해서 많이 쓴다는 embla 캐러셀을 사용하려 했으나 아래의 에러 발생... 해당 캐러셀의 공식 홈페이지에서 react 에서의 사용법으로 준 스켈레톤 코드 자체에 useRef 가 사용되어 있어서, hook을 사용하기 위해서는 CSR 을 적용하기 위해서 "use client" 를 사용해야만 했다.(Next.js 13버전의 CSR 구현법...) 근데, 메인 페이지 배너를 csr 로 만들고 싶지 않았으므로... 그냥 ssr 로 구현가능한 다른 라이브러리를 찾아보기로 했다 swiper slider 를 사용하였으나, 같은 에러가 발생하였다 그냥 "use client" 를 사용해서 CSR로 구현하면 된다지만, 히어로 캐러셀은 SSR로 만들고 싶었기에 더 찾아보았더니 아래.. 2023. 2. 23. 이전 1 다음
