# 블로그 아키텍처 선택하기

## 블로그 아키텍처 선택하기

App Router를 활용했을 때 두 가지 방식으로 블로그를 만들 수 있다는 사실을 배웠습니다. 이 중에 하나를 선택해 블로그를 만들기 시작할 수 있습니다.

|        | Guillermo                       | Lee                  |
| ------ | ------------------------------- | -------------------- |
| 데이터 관리 | 글을 코드로                          | 글을 데이터로              |
| 라우팅    | Route Groups                    | Dynamic Routes       |
| 렌더링    | Incremental Static Regeneration | Partial Prerendering |
| 메타데이터  | Static Metadata                 | Dynamic Metadata     |

### Guillermo 블로그의 단점

글을 데이터로 다루지 않기 때문에 중복으로 데이터로 사용할 값을 정의해야 합니다. 글 목록을 그리기 위해 JSON 파일을 정의하는 게 대표적입니다. 수동으로 게시글에 대한 데이터를 작성해야 하기 때문에 데이터가 일치하지 않을 수도 있습니다. 그리고 무엇보다 관리가 번거롭습니다.

{% code title="app/posts.json" %}

```json
{
  "posts": [
    {
      "id": "making-the-web-faster",
      "date": "June 23, 2021",
      "title": "Making the Web. Faster."
    },
    {
      "id": "next-for-vercel",
      "date": "December 16, 2020",
      "title": "Next for Vercel"
    },
    {
      "id": "books-people-reread",
      "date": "August 2, 2020",
      "title": "Books people re-read"
    }
  ]
}

```

{% endcode %}

### 특별한 단점이 없는 Lee 블로그

Lee의 방식은 글을 데이터로 보기 때문에 글을 데이터로 활용하기에 더 편합니다. 덕분에 동적으로 메타데이터를 생성할 수 있는 것이죠. 글을 작성하기 위해 굳이 IDE나 코드 편집기를 사용하지 않아도 된다는 점 역시 장점입니다. 글을 데이터로 조회하기만 하면 되니 코드와 같은 저장소에 있을 필요도 없습니다. 

### 선택

그래서 저희는 Lee의 방식을 선택합니다. 특별한 단점이 없고 마이그레이션 등에 용이한 방식이기 때문입니다.

### 공통 환경 설정 <a href="#undefined-1" id="undefined-1"></a>

1. Node 20.17.0 버전을 사용합니다. (24년 9월 기준 LTS)
   1. 설치 방법: <https://nodejs.org/en/download/package-manager>
2. `pnpm`을 사용합니다.
   1. 설치 방법: <https://pnpm.io/installation#using-homebrew>
3. TypeScript 5 이상의 버전을 사용합니다.
4. VSCode를 사용합니다.

## Next.js 블로그 템플릿 사용하기

우리가 선택한 Lee의 방식은 Next.js에서 템플릿으로 제공하는 방식입니다. 덕분에 간단한 명령어로 블로그를 시작할 수 있습니다.

```bash
pnpm create next-app --example https://github.com/vercel/examples/tree/main/solutions/blog blog
```