Next 2

[Next.js] Dynamic import

next.js 공부겸 토이프로젝트 진행중 window is not defined 에러를 맞닥뜨렸다 next.js 는 기본적으로 서버사이드 랜더링이기때문에 window 같은 클라이언트 전역객체는 참조할수가없다 그래서 로컬스토리지같은 기능을 사용할때 서버사이드에선 실행되지않고 클라이언트에서만 실행되게끔 typeof 로 타입체크를 해주는방법이 있다. 그 런 데 ScrollMagic 이라는 라이브러리를 사용하려고 보니 라이브러리 자체에서 window 객체를 사용한다 라이브러리를 import 해올때부터 window is not defined 에러가 나왔다 위의 타입체크 방법과 Dynamic import 를 같이사용해서 해결하였다. 타입체크로 window 객체가 undefined 가 아닐시 즉 클라이언트랜더링일시에..

Next.js 2023.05.03

[Next.js] 중첩 공통 Layout

프로젝트에서 공통으로 사용하는 Layout 안에 특정 page 에서만 다른 공통 Layout 을 사용하고싶을때 Ex: 공통 Header 를 사용중인데 특정 page 에서는 Header + SubHeader 를 사용하고싶을때 사용할수있다. SubPage SubPage.getLayout 안에 함수를 정의한다 기존 Header 안에 사용할 SubHeader 추가 subHeader 서브헤더안에는 내려받을 children 정의 _app 들어온 컴포넌트 안에 getLayout 이 있으면 geyLayout을 리턴하는 정의를 해주고 없다면 기존 Header 만 리턴하게 정의해준다

Next.js 2023.04.22