Next.js : Creating a simple blog architecture - 한글

Pre-rendering and Data Fetching 6 - 한국어

---

간단한 블로그의 구조 생성하기

Creating a simple blog architecture

우리의 예제인 블로그 포스트들은 애플리케이션 폴더 내의 로컬 마크다운 파일을 사용할 것이다. (외부 데이터를 가져오는 것이 아님) 그래서 파일 시스템으로부터 데이터를 읽어올 필요가 있다.

 

이번 장에서는 파일 시스템으로부터 마크다운 데이터를 가져온 블로그를 만드는 단계를 해볼 것이다.

 

 

마크다운 파일을 생성하기

Creating the markdown files

먼저, 최상위 폴더에 posts 라는 폴더를 만든다 (이것은 pages/posts와 다르다.) posts 폴더 내에, pre-rendering.md 와 ssg-ssr.md 파일을 만든다.

 

이제 아래 코드들을 복사하자.

 

posts/pre-rendering.md

---
title: 'Two Forms of Pre-rendering'
date: '2020-01-01'
---

Next.js는 정적 생성과 서버측 렌더링을 지원한다.
다른 점은 페이지에 HTML을 변환할 때에 있다.

- **정적 생성** 은 pre-rendering 빌드 시에 HTML을 생성하는 메소드이다.
   요청할 때마다 사전 렌더링된 HTML이 재사용된다.
- **서버 측 렌더링** 요청할 때마다 HTML이 사전 렌더링 메서드로 변환된다.

중요한 것은, Next.js는 페이지마다 어떤 사전 렌더링을 사용할지 선택하게 한다는 것이다.
당신은 대부분의 페이지에서는 정적 생성을,
다른 페이지에서는 서버 측 렌더링을 사용하여 하이브리드 Next.js 앱을 만들 수 있다.

 

posts/ssg-ssr.md

---
title: 'When to Use Static Generation v.s. Server-side Rendering'
date: '2020-01-02'
---

**정정 생성** 을 추천한다. 가능하다면 (데이터가 있든지 없든지)
왜냐하면, 페이지는 한 번 빌드되고 CDN에서 서비스될 수 있기 때문에,
매번 요청할 때마다 페이지를 서버에서 렌더링하는 것보다 더 빠른 것이다.

다양한 유형의 페이지에 정적 생성을 사용할 수 있다. :

- 마케팅 페이지
- 블로그 포스트
- 전자상거래 상품 목록화
- 도움말과 문서

직접 선택하자 : "페이지가 사용자의 요청 이전에 렌더링될 수 있을까?"

만약 대답이 "예"라면, 정적 생성을 선택하자.

만약 "아니"라면,
페이지가 자주 데이터가 업데이트되거나
매 요청 시마다 페이지의 콘텐츠가 변한다면, 정적 생성은 좋은 생각이 아니다.

이 경우, **서버 측 렌더링**을 사용하자.
조금 느릴 것이지만, 사전 렌더링된 페이지는 언제나 최신 상태이다.
혹은, 사전 렌더링을 제외하고 사용자 측 자바스크립트를 사용할 수도 있다.

 

각 마크다운 파일 상단에 제목과 날짜의 메타 데이터가 들어간다는 것을 알았을 것이다. 이것은 YAML Matter라고 하고, gray-matter라고 하는 라이브러리를 사용해 파싱될 수 있다.

 

gray-matter 설치

먼저 각 마크다운 파일의 메타데이터를 분석해주는 gray-matter를 설치하자.

 

npm install gray-matter

 

파일 시스템을 읽기 위해 유틸리티 함수를 만들기

Creating the utility function to read the file system

 

 

다음으로, 파일 시스템으로부터 데이터를 파싱하는 유틸리티 함수를 생성할 것이다. 이 유틸리티 함수는 :

 

• 각 마크다운 파일을 분석하고 title, date 그리고 파일명을 가져온다. (post URL 의 id로 사용될 것)
• 인덱스 페이지에서 데이터가 date 정렬로 목록화한다.

 

lib 라는 폴더를 루트 폴더에 만들자.그리고 lib 내에 posts.js 파일을 생성한다.

 

lib/posts.js

import fs from 'fs';
import path from 'path';
import matter from 'gray-matter';

const postsDirectory = path.join(process.cwd(), 'posts');

export function getSortedPostsData() {
  // /posts 아래의 파일명을 가져오기
  const fileNames = fs.readdirSync(postsDirectory);
  const allPostsData = fileNames.map((fileName) => {
    // 파일명의 ".md"를ㄹ삭제해 id로 저장
    const id = fileName.replace(/\.md$/, '');

    // 문자열로 마크다운 파일을 읽기
    const fullPath = path.join(postsDirectory, fileName);
    const fileContents = fs.readFileSync(fullPath, 'utf8');

    // gray-matter 로 메타데이터 섹션을 분석
    const matterResult = matter(fileContents);

    // id와 데이터를 연결
    return {
      id,
      ...matterResult.data,
    };
  });
  
  // 날짜로 정렬
  return allPostsData.sort(({ date: a }, { date: b }) => {
    if (a < b) {
      return 1;
    } else if (a > b) {
      return -1;
    } else {
      return 0;
    }
  });
}

 

노트 : 
Next.js를 배우기 위해 위의 코드를 이해할 필요가 없다. 위 함수는 블로그 예제를 만들기 위함이다.
하지만 더 배우고 싶다면,

* fs 는 Node.js 모듈 : 파일 시스템으로부터 파일들을 읽어준다.
* path 는 Node.js 모듈 : 파일 패쓰를 다루게 해준다.
* matter 는 라이브러리 : 마크다운 파일에서 메타데이터를 분석해준다.

* Next.js에는, lib 폴더가 pages 폴더처럼 미리 할당된 이름이 아니다. 그러므로 어떤 이름이든 상관없다. lib 나 utils는 관습적으로 사용한다.

 

블로그 데이터 가져오기

Fetching the blog data

 

이제 블로그 데이터가 만들어졌고, 인덱스 페이지에 추가하면 된다. Next.js 데이터 페칭 메서드 getStaticProps() 를 사용하자. 다음 장에서는, getStaticProps() 를 구현하는 방법을 알아볼 것이다.

 

 

완성될 페이지 이미지

다음장에서 해보자!

 

 

 

번역 : 2022. 11. 05

영어를 잘하지 못하므로 부정확할 수 있습니다. 더 정확한 설명 or 번역이 있다면 댓글 환영합니다 *

 

 

출처

Next.js document - Pre-rendering and Data Fetching 6

< 이전 페이지                                           다음 페이지 >