끄적이는 개발노트

이번 포스트에서는 Next.js의 기본적인 CSS 적용 방법에 대해 알아본다. 1. Global Stylesheet 어플리케이션에 stylesheet를 추가하려면 pages/_app.js에 CSS 파일을 import 해야 한다. 이 스타일들은 어플리케이션 내에 있는 모든 페이지들과 컴포넌트들에 반영된다. 말 그대로 글로벌 스타일시트이기 때문에 충돌을 피하기 위해서 pages/_app.js 내에만 import 할 수 있다. 우선, css 파일을 하나 만들어 다음과 같이 작성한다. /styles.css body { font-family: 'SF Pro Text', 'SF Pro Icons', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif; padding: 20px..

이번 포스트에서는 서버 사이드 렌더링을 통해 데이터를 가져오는 getServerSideProps에 대해 알아본다. 1. 개념 getServerSideProps는 사전 렌더링되는 페이지의 필요 데이터가 요청 시에 가져와야하는 경우에만 사용한다. 서버가 매 요청의 결과를 계산해야 하고, 결과가 추가 설정 없이는 CDN에 의해 캐시될 수 없기 때문에, getStaticProps보다 느리다. getServerSideProps를 페이지에서 export할 경우, Next.js는 이 페이지를 매 요청마다 getServerSideProps로부터 리턴 받은 데이터를 사용하여 사전 렌더링한다. 마찬가지로, getServerSideProps는 페이지에서만 export 가능하다. function Page({ data }) {..

이번 포스트에서는 getStaticPaths에 대해 알아본다. getStaticPaths는 페이지가 getStaticProps를 사용하고 동적 경로(Dynamic Routing)를 사용한다면 빌드 시에 path들이 필요하다. 동적 라우팅을 구현하기 위해 필요한 것이 getStaticPaths 라는 비동기함수로, 사전 렌더링될 때, getStaticPaths에서 반환하는 객체의 paths 안에 있는 경로를 가지고 렌더링에 사용한다. 1. 개념 위에서 언급했듯이, 페이지가 동적 경로를 사용하여(Dynamic Routing) 정적으로 사전 렌더링(getStaticProps)을 하고 있다면 반드시 getStaticPaths를 사용해야 한다. getStaticPaths는 getServerSideProps와 함께 ..

이전 포스트 getStaticProps에 이어서 파일 시스템에서 직접 읽는 방법인 process.cwd()를 알아본다. 그러기 위해서는 파일의 전체 경로를 가져와야 한다. Next.js는 코드를 별도의 디렉토리로 컴파일하므로 '__dirname'은 실제 페이지 디렉토리 경로와 다른 값을 반환하기 때문에 사용할 수 없다. 이 때, 사용하는 것이 process.cwd() 이다. 1. index.js 수정 // index.js import { promises as fs } from "fs"; import path from "path"; function Blog({ posts }) { console.log(posts); return ( {posts.map((post) => ( {post.filename} {po..

이전 포스트를 통해 Next.js 에는 두 가지의 사전 렌더링 형태 (Static Generation, Server-side Rendering) 이 있다는 것을 알았다. 각 경우에서 페이지는 데이터를 가져와야 되는데 이를 Data Fetching 이라고 한다. 사전 렌더링을 위해 데이터를 가져오는 방법으로 Next.js 는 세 가지 고유한 함수를 제공한다. getStaticProps(정적 생성) : 빌드 시 데이터를 가져옴 getStaticPaths(정적 생성) : 데이터를 기반으로 페이지를 미리 렌더링하는 동적 경로를 지정 getServerSideProps(서버 사이드 렌더링) : 각 요청에서 데이터를 가져옴 0. 공통 사항 context 코드를 살펴보면 접하게 되는 사항으로, context 매개 변수..

이번 포스트에서는 Next.js의 가장 중요한 개념 중 하나인 사전 렌더링에 대해 알아본다. 1. 개념 기본적으로 Next.js는 모든 페이지를 미리 렌더링한다. 즉, Next.js는 클라이언트 측 Javascript로 모든 작업을 수행하는 대신 페이지에 대해 미리 HTML을 생성한다. 생성된 HTML은 해당 페이지에 필요한 최소한의 Javascript 코드와 연결되고, 브라우저에서 페이지를 로드하면 해당 Javascript 코드가 실행되어 페이지를 완전히 실행한다. 이를 Hydration 이라고 말한다. Pre-rendering 사전 렌더링은 처음 Initial Load에 사전 렌더링된 HTML이 보여진다. 이 후, Hydration에서 컴포넌트가 초기화되고 상호작용이 필요한 컴포넌트가 Javascri..