Image를 쓰는 이유Next.js에서는 이미지를 넣을 때 태그를 사용하기도 하지만, 최적화를 위해 Image 컴포넌트를 주로 사용한다.그렇다면, 어떻게 이미지 최적화를 시켜주고 어떤 기능이 있는지 대표적인 3가지 기능을 살펴보자. 1. 이미지 사이즈 최적화Image 컴포넌트를 통해 이미지를 넣고 개발자 도구로 확인해 보면 img 태그 속성에 'srcset'이 있는 걸 확인할 수 있다.srcset 속성은 Image 컴포넌트가 디바이스 별로 미리 지정해 둔 크기에 맞춰 이미지를 다운로드할 수 있게 도와주는 속성이라고 생각하면 된다. 예를 들어, 우리가 아이폰 미니로 접속한다면 1920px 사이즈의 큰 이미지를 다운로드할 필요가 없다. 즉, 사용자의 디바이스 크기가 작다면 알아서 작은 크기에 맞는 이미지를..

CSR, SSR, SSG는 뭐가 다를까?우리가 리액트를 공부할 때, CSR(클라이언트 사이드 렌더링)을 배우면서 SSR도 같이 들어본 적이 있을 것이다.CSR은 서버에서 비어있는 html 파일을 클라이언트에게 주면 클라이언트가 자바스크립트로 페이지를 그리는 방식이라면, SSR은 서버에서 렌더링 된 html 파일을 클라이언트에게 주면 클라이언트가 자바스크립트로 동적인 부분만 연결(Hydration)해 주는 방식이다. 그렇다면 SSG는 뭘까? SSR에서는 페이지에 접속할 때마다 html 파일을 렌더링 했지만, SSG는 이미 빌드하는 순간에 모든 페이지를 렌더링 한다. 즉, 클라이언트가 서버에게 페이지를 요청할 때 SSR은 "잠깐만! 렌더링 하고 금방 줄게!"라면, SSG는 "응~ 그럴 줄 알고 미리 만들어놨..

👋 해당 글은 Next.js의 페이지 라우터를 사용하고 있습니다._app.js와 _document.jsnext.js를 설치하면 pages안에 _app.js와 _document.js가 기본적으로 들어있는 것을 확인할 수 있다.리액트와 비교했을 때 _app.js는 App.js와 같고 _document.js는 index.html과 같다. _app.js는 root 컴포넌트로 다른 컴포넌트를 자식 컴포넌트로 받아와서 렌더링 한다. _document.js는 모든 페이지에 공통적으로 들어가는 html 문서 역할을 하며, 메타 태그나 폰트 등 전체 페이지에서 적용되는 html 태그들을 관리한다. 🙋🏻‍♂️ 각 파일 간 포함 관계 정리 (렌더링 과정)1) _document.js의 에는 _app.js가 래핑된다.2)..

👋 해당 글은 Next.js의 페이지 라우터를 사용하고 있습니다.pages 폴더 안에 만들기리액트에서는 react-router-dom을 이용해서 컴포넌트를 로 제어했었다.하지만, next.js에서는 pages 폴더 안에 index 파일만 잘 구축해 놓으면 리액트처럼 일일이 Route로 연결할 필요 없이 쉽게 페이지 이동을 할 수 있다. 예를 들어, pages/content/index.js 라고 해당 경로에 파일을 만들어 놓으면 주소입력창에 www.shawn.com/content 라고 했을 때 content/index.js가 실행되는 것이다. 폴더 경로도메인 주소pages/index.jswww.shawn.compages/content/index.jswww.shawn.com/contentpages/cont..