개발 27

[Docs] 서버 사이드 렌더링

빌드 시점이 아닌 요청 시점에 데이터를 페치해야 하는 경우 서버 사이드 렌더링을 사용할 수 있다. 페이지에서 getStaticProps 대신 getServerSideProps를 익스포트 하면 된다. getServerSideProps 함수 다음은 getServerSideProps의 스타터 코드. export async function getServerSideProps(context) { return { props: { // props for your component }, }; } getServerSideProps는 요청 시에 호출되므로 매개변수(context)에는 요청 관련 매개변수가 포함된다. 주의할 점은 요청 시점에 데이터 페치가 필수인 페이지를 프리렌더링 하는 경우에만 getServerSidePr..

개발/Next.js 2023.05.10

[Docs] 정적 생성 - getStaticProps 구현 & 세부사항

pages/index.js를 열고 Home 컴포넌트 위에다 비동기 함수 getStaticProps를 추가한다. 해당 메서드는 getSortedPostsData 함수를 getStaticProps 내부에서 호출한다. 이후 props객체 내부에서 데이터를 반환하여 Home 컴포넌트에 하나의 prop으로 전달할 수 있게 한다. Home 컴포넌트에서 props를 { allPostsData }로 변경하고 태그를 추가하면 끝. import { getSortedPostsData } from '../lib/posts'; export async function getStaticProps() { const allPostsData = getSortedPostsData(); return { props: { allPostsDat..

개발/Next.js 2023.05.10

[Docs] 정적 생성 - 간단한 블로그 아키텍처 만들기

이제 블로그 포스트를 만들어 보자. 데이터를 외부 소스에서 페치 하지 않고 파일 시스템에서 데이터를 읽어오려고 한다(로컬 마크다운 파일 활용). 마크다운 파일 만들기 먼저 루트 폴더에 posts라는 최상위 디렉터리를 하나 만든다. 그 안에 pre-rendering.md / ssg-ssr.md라는 두 개의 파일을 만들고 아래와 같이 입력한다. --- title: 'Two Forms of Pre-rendering' date: '2020-01-01' --- 내용생략 --- title: 'When to Use Static Generation v.s. Server-side Rendering' date: '2020-01-02' --- 내용생략 각 마크다운 파일 상단에 title과 date가 포함된 메타데이터 섹션이..

개발/Next.js 2023.05.10

[Docs] 정적 생성(Static Generation)

정적 생성은 데이터 유무에 관계없이 수행할 수 있다. 외부 데이터를 페치 할 필요가 없는 경우, 앱은 빌드 시점에 아래 그림처럼 자동으로 정적 생성될 것이다. 하지만 외부 데이터를 먼저 페치 하지 않으면 HTML을 렌더링 할 수 없는 경우도 있다. 빌드 시점에 파일 시스템에 액세스하거나, 외부 API를 페치 하거나, 혹은 데이터베이스를 쿼리해야 하는 경우다. 이런 경우에는 어떻게 해야할까? getStaticProps를 사용하여 정적 생성하기 페이지 컴포넌트를 익스포트 할 때 getStaticProps라는 비동기 함수를 함께 익스포트해주면 된다. 그러면 프로덕션 빌드 시점에 이것이 실행되고 내부에서 외부 데이터를 페치 하여 페이지에 props로 보낸다. export default function Ho..

개발/Next.js 2023.05.10

[Docs] 두 가지 형태의 프리렌더링

Next.js에는 두 가지 형태의 프리렌더링이 있다. 정적 생성(Static Generation) 과 서버 사이드 렌더링(Server-side Rendering). 이 두 형태의 차이점은 페이지의 HTML을 생성하는 시점이다. 정적 생성이란? 빌드 시점에 HTML을 생성하는 프리렌더링 방식이다. 그리고 프리 렌더링된 HTML은 각 요청에 재사용된다. 서버 사이드 렌더링 각 요청마다 HTML을 생성하는 프리렌더링 방법이다. 개발 모드에서는 모든 요청에 대해 페이지가 프리 렌더링된다. 이는 정적 생성 시에도 적용되어 개발이 더 쉬워진다. 프로덕션 모드로 전환하면 정적 생성은 원래대로 빌드 시 한 번만 수행된다. 페이지 마다 다르게? Next.js를 사용하면 각 페이지에 사용할 프리렌더링 형태를 선택할 수 ..

개발/Next.js 2023.05.09

[Docs] 프리렌더링(Pre-rendering)

프리렌더링은 Next.js에서 가장 중요한 개념 중 하나다. Next.js는 기본적으로 모든 페이지를 프리렌더링한다. 이것은 Next.js가 각 페이지의 HTML을 미리 생성한다는 것을 의미한다. 클라이언트 사이드의 자바스크립트가 모든 작업을 수행하진 않는다. 프리렌더링은 성능과 SEO를 개선하는데 도움이 된다. 생성된 각각의 HTML은 해당 페이지에 필요한 최소한의 자바스크립트 코드와 연결된다. 브라우저에서 페이지가 로드 되면 해당 자바스크립트 코드가 실행되어 페이지가 인터랙티브한 상태가 된다. (이 과정을 Hydration이라고 한다.) 프리렌더링이 진행되고 있는지 확인하기 다음 단계를 통해 프리렌더링이 진행되고 있는지 확인해볼 수 있다. 브라우저에서 자바스크립트를 비활성화한다. 이 페이지(이 튜토리..

개발/Next.js 2023.05.09

[Docs] Layout 다듬기(Polishing Layout)

본 글에서는 프로필 페이지를 스타일링하고 코드를 다듬어 보겠습니다. components/layout.module.css 업데이트 레이아웃과 프로필 사진의 내용을 다음과 같이 바꿉니다: .container { max-width: 36rem; padding: 0 1rem; margin: 3rem auto 6rem; } .header { display: flex; flex-direction: column; align-items: center; } .backToHome { margin: 3rem 0 0; } styles/utils.module.css 생성 두번째로, 여러 컴포넌트에서 재사용할 수 있는 CSS 유틸리티 class 세트(텍스트 스타일용)를 만들어 보겠습니다. styles/utils.module.c..

개발/Next.js 2023.05.08

[Docs]전역 스타일 적용하기

Global Styles 전역 CSS를 로드하고 싶다면 , 다음 내용으로 pages/_app.js라는 파일을 만들자: export default function App({ Component, pageProps }) { return ; } App 컴포넌트는 애플리케이션의 모든 페이지를 감싸는 최상위 React 컴포넌트이다. 페이지 간 이동시 상태를 유지하고 싶거나 전역 스타일을 추가하고 싶다면 활용된다. _app.js를 추가할 때는 개발 서버를 꼭 다시 시작해야 한다. 전역 CSS 추가하기 오직 pages/_app.js에서만 전역 CSS 파일을 추가할 수 있다. 이유는 전역 CSS가 페이지의 모든 요소에 영향을 주기 때문이다. 홈에서 /posts/first-post 페이지로 이동하는 경우 홈의 글로벌 스타..

개발/Next.js 2023.05.07

[Docs] CSS 스타일링 & Layout 컴포넌트

CSS Styling index 페이지(http://localhost:3000)에는 이미 몇 가지 스타일이 있다. 파일 구조를 보면, styles 폴더안에 글로벌 스타일시트(globals.css)와 CSS Module(Home.module.css)이라는 두 개의 CSS 파일이 존재한다. CSS Module Next.js에는 .module.css 확장자를 사용하는 CSS Module을 기본 제공한다. CSS Module은 고유한 클래스 이름을 자동으로 생성하여 CSS를 로컬로 범위 지정한다. 따라서 충돌에 대한 걱정 없이 여러 파일에서 동일한 클래스 이름을 사용할 수 있다. 이러한 동작 덕분에 CSS Module은 컴포넌트 수준 CSS를 포함하기에 이상적인 방법이다. Layout 컴포넌트 먼저 모든 ..

개발/Next.js 2023.05.07

[Docs] 서드파티 자바스크립트 추가하기

서드파티 자바스크립트는 제3자 소스에서 추가된 모든 스크립트를 말한다. 일반적으로 서드파티 스크립트는 분석, 광고, 고객 지원 위젯 등 사이트에 새로운 기능을 간편히 도입하기 위해 포함된다. Next.js 페이지에 서드파티 스크립트를 추가하는 방법을 자세히 살펴보자. 에디터에서 pages/posts/first-post.js를 열고 다음 코드를 찾는다. 보통 최대한 빨리 로드하고 실행해야 하는 스크립트는 페이지의 이 스크립트는 Facebook 소셜 플러그인 및 기타 기능을 도입하는 데 흔히 사용되는 Facebook SDK를 포함한다. 이러한 방식으로 스크립트를 포함하면 작동은 하지만 같은 페이지에서 가져온 다른 자바스크립트 코드와 비교해서 어느 시점에 로드될지는 명확하게 알 수 없다. Script 컴포넌..

개발/Next.js 2023.05.07