1. 문제 원인 NextJS의 경우 SSR(Server Side Rendering)으로 서버에서 미리 HTML을 준비해 클라이언트한테 응답해주는데 최초 웹 페이지를 렌더링 할때에는 window나 document 전역객체는 선언되지 않아 해당 변수를 참조할 수 없기 때문에 해당 오류가 발생한다. SSR이란? 서버에서 페이지를 그려 클라이언트(브라우저)로 보낸 후 화면에 표시하는 기법을 의미합니다. 2022.10.11 - [React] - [NextJS] Pre-Rendering, Client-Side-Rendering, Server-Side-Rendering 개념 2. 해결 방법 useEffect 사용 useEffect은 컴포넌트가 렌더링 될 때 특정 작업을 실행할 수 있도록 하는 Hook이다. 렌더링 후..

1. 문제 원인 NextJS에서 Recoil을 사용할 경우 발생하는 오류로 파일이 변경되면 다시 빌드되면서 Atoms의 State들이 재선언 되어 발생한다. NextJS에서만 발생하는 오류로 기능적으로는 문제가 없다. 2. 해결 방법(1) 고유성이 보장되는 UUID를 활용하여 key값을 생성한다. npm install uuid // TypeScript npm i --save-dev @types/uuid import { atom, selector } from "recoil"; import { IVideo } from "../api/youTubeApi"; import { IGetListResult, getPopularList } from "./../api/youTubeApi"; import { v1 } fr..

서버와 클라이언트의 클래스명이 다른 것이 원인이다. NextJS는 첫 페이지 로드가 SSR로 동작하기 때문에, 서버에서 생성된 컴포넌트와 CSR로 클라이언트에서 생성된 컴포넌트의 클래스명이 서로 달라지게 된다. * SSR / CSR 이란? 2022.10.11 - [React] - [NextJS] Pre-Rendering, Client-Side-Rendering, Server-Side-Rendering 개념 1. babel-plugin-styled-components 라이브러리 설치 환경에 따라 달라지는 className을 일관되게 해준다. npm add -D babel-plugin-styled-components 2. root경로에. babelrc파일 생성 ( .babelrc 파일) { "presets"..