seohyun han

Next.js 는 기본적으로 모든 pre-render 한다. (클라이언트 사이드의 자바스크립트가 모든 일을 하는 것이 아니라 html 파일을 사전에 만든다는 의미이다. ) 생성된 html 은 필요한 최소한의 자바스크립트 코드가 있고, 브라우저에 의해 로드될 때 그 코드가 실행되어 완전한 페이지를 표현한다. ▶ Pre-Rendering 을 했을 때와 하지 않았을 때의 차이 프리렌더링을 하지 않으면 아무것도 없다가, js 가 로드된 이후에 페이지가 채워지게 된다. Next.js 처럼 Pre-Rendering 을 하게 되면 초기에 사전에 만들어진 html 들이 나온다. 여기엔 메타 데이터들이 포함되어있다. 이후 js 가 로드된 이후 와 같은 컴포넌트들이 작동하기 시작한다. 이것을 하이드레이션이라고 한다. 하이..

▶ _app.js 페이지 전환 시 레이아웃을 유지할 수 있다 페이지 전환 시 상태값을 유지할 수 있다. componentDidCatch 를 이용해서 에러 핸들링을 할 수 있다. 추가적인 데이터를 페이지로 주입시켜주는게 가능하다. 글로벌 CSS 를 선언한다. function MyApp({ Component, pageProps }) { return ( ); } export default MyApp; Props 로 넘어온 Component 는 현재 페이지를 의미한다. 페이지 전환 시에 Component Props 가 변경된다. pageProps 는 데이터 패칭 메서드를 통해 미리 가져온 초기 객체이다. 이 메서드를 사용하지 않는다면 빈 객체가 전달된다. ▶ public public 폴더로 정적 파일들을 제공할..

Next js 는 Node 에서 실행되기 때문에 웹브라우저에서 제공하는 전역객체 (window, document 등) 에 접근할 수 없다. ▶ 코드분할 코드분할이란 서로 다른 URL 에서 접근할 수 있는 여러 페이지로 분할하는 것이다. 이렇게 분할된 각 페이지는 응용프로그램에 대한 고유한 진입점이 된다. Next.js 에는 코드분할을 지원하는 기능이 내장되어있다. pages/ 디렉토리 내의 각 파일은 빌드 단계에서 자동으로 자체 자바스크립트 번들로 코드분할된다. ㄴ .. 이게 무슨말일ㄲ ㅏ? ▷ pages 디렉토리 pages 디렉토리는 Next.js 에서 핵심적인 역할을 하는 디렉토리 중 하나로, 각 페이지에 대한 엔드포인트를 정의하는 역할을 한다. 즉 'pages' 디렉토리에 파일을 생성하면, 해당파일..