client component 2

[Next.js] App Router 클라이언트 컴포넌트에서 발생하는 window is not defined 에러

(Next.js App Router 15 버전을 기준으로 작성한 포스팅입니다.) window is not defined (윈도우 객체가 정의되지 않았습니다.) ⨯ ReferenceError: window is not defined Next.js App Router를 사용해 본 적 있는 개발자라면 무조건 한 번은 마주쳤을 에러라고 생각합니다. 저도 여러 번 마주했지만 그때마다 이 에러의 정확한 발생 원인은 모르고 "window가 undefined이면.." 이런 조건문을 넣어서 해결했던 것으로 기억합니다. 이 에러가 왜 발생하는지 찾아보면 "SSR이 발생하기 때문이다." "리액트 컴포넌트가 마운트 되기 전에 윈도우 객체를 찾으려고 해서 그렇다."라는 이유가 주로 보입니다. 물론 이도 맞는 말이지만 좀 더 ..

FE/Next.js 2025.05.24

[Next.js] App Router의 클라이언트 컴포넌트의 자바스크립트는 서버에서 실행될 수도 있다

사실 제목 자체는 관심을 끌기 위한 문장입니다. 세부사실을 명시하지 않았죠. 결론부터 말하자면 클라이언트 컴포넌트의 “일부 자바스크립트”는 서버에서 실행될 수도 있고 실행되지 않을 수도 있다. 가 맞습니다. 무슨 소리냐고요? 같이 보시죠. (매우 깁니다!) 클라이언트 컴포넌트의 렌더링 방식저는 원래 클라이언트 컴포넌트는 서버에서 HTML+CSS를 기반으로 화면을 그리고(프리렌더링) 해당 컴포넌트의 자바스크립트 코드는 JS번들의 형태로 프리렌더링 결과물과 같이 RSC Payload의 형태로 변환된 후 클라이언트에 전송된다고 생각하고 있었습니다. 저는 클라이언트 컴포넌트의 자바스크립트 코드는 "서버"에서 전혀 실행되지 않는다고 생각했었습니다. 서버에서의 프리렌더링 과정에 자바스크립트의 실행은 절대적으로 배..

FE/Next.js 2025.05.23