내가 지금까지 사용해왔던 블로그들이다.

블로그를 사용하며 느낀 불편한 점이 있었다.

제약이 많다. Tistory 블로그는 직접 HTML을 수정하여 커스텀할 수 있지만, HTML을 사용해서 커스텀해야 하기에 불편하고, 한계가 있다.
각 포스팅을 수정하려면 글 하나하나 들어가서 '수정' 버튼을 누르고, 수정을 해야 한다. 하지만 직접 블로그를 만들면 로컬에서 일괄 수정이 가능하다.
Notion + Next.js는 노션에 종속성이 생긴다. 노션에서 수정 후, Notion + Next.js에서 다시 배포를 해야 한다.

정리하면, 제약이 없고 확장성이 무궁무진한 블로그를 만들어보고자 이번 프로젝트를 시작하게 되었다.

기술 스택

1. 프레임워크

만들고자 하는 서비스는 블로그이기에 필요한 요구사항은 다음과 같다.

사용자에게 빠르게 보여주어야 하고
검색 엔진에 노출이 잘 되어야 한다는 점이 중요하다.

사용자에게 빠르게 보여주는 방법에는 다양한 방법이 있지만, 블로그 특성상 자주 컨텐츠가 바뀌지 않는 '정적'사이트라는 점이다. 그래서, 빌드 과정에서 정적 사이트로 미리 만들어놓으면, 무엇보다 사용자에게 빠르게 보여줄 수 있다. 이러한 SSG기능이 필요로 했다. 그리고 서버에서 미리 페이지를 생성하기에 SEO에도 유리하다. 이러한 기술로는 React기반의 Next.js와 Gatsby가 있다.

1.1. Gatsby

사이트를 만들기 위한 다양한 Gatsby Plugin을 제공한다.

플러그인을 설치 후, gatsby-config에서 확장해주면 바로 사용이 가능하다.

import { dirname } from "path"
import { fileURLToPath } from "url"
 
const __dirname = dirname(fileURLToPath(import.meta.url))
 
const config = {
  plugins: [
    `gatsby-plugin-mdx`,
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `pages`,
        path: `${__dirname}/src/pages`,
      },
    },
  ],
}
 
export default config

SSG에 최적화되어 있다.
MD base의 JAMStack을 구성하는 게 쉽다.

1.2. Next.js ✅

Next.js는 122k(2024.06.02 기준)개의 star를 받았다. 그에 반해 gatsby는 55.1k개의 star를 받았다.
Next.js는 SSR, SSG, ISR을 지원한다.
Next.js는 React 기반으로 만들어져 있어 React의 생태계를 그대로 사용할 수 있다.
이전 프로젝트에서 Next.js를 사용해봤기에 익숙하다.
React.js에서도 Next.js 사용을 권장한다.
앞으로 내가 회사에서든, 개인적으로든 더 많이 사용하게 될 프레임워크이다.
확장성과 자율성이 Gatsby에 비해 높다.

내가 가장 고려한 부분은 '확장성'이었다. 나는 블로그 프로젝트를 만들고, 그와 함께 Three.js, Canvas 등 다양한 프로젝트를 만들며 확장하고 싶었다. 이러한 확장성 면에서 Next.js가 더 나은 선택이라고 생각했다.

2. 스타일링

2.1. Tailwind CSS ✅

나는 tailwindcss를 사랑한다. 이전 프로젝트에서도 항상 tailwindcss를 써왔고, 이번 프로젝트에서도 역시 tailwindcss 사용을 먼저 고려했다. 내가 tailwindcss를 사랑하는 이유 7가지는 다음과 같다.

Utility-First : 클래스 이름을 통해 스타일을 적용할 수 있다. 이는 곧 시간을 절약할 수 있다.
Customizable : tailwind.config.js 파일을 통해 커스텀이 가능하다. theme, font, color, spacing 등을 미리 정의할 수 있다.
Responsive : 반응형 디자인을 쉽게 구현할 수 있다. sm, md, lg, xl 등 breakpoint를 사용하여 반응형 디자인을 구현할 수 있다.
Dark Mode : 다크 모드를 쉽게 구현할 수 있다. dark: 클래스를 사용하여 다크 모드를 구현할 수 있다.
Zero Runtime : 런타임에 JS코드를 css코드를 변환하는 css-in-js와 달리, tailwindcss는 빌드타임에 css 코드를 생성한다.
CSS관리와 네이밍을 위한 고민을 하지 않아도 된다. 내가 가장 styled-component나 emotion같은 css-in-js를 싫어하고, tailwindcss를 좋아하는 이유 중 가장 큰 요소이다. 네이밍을 고민하지 않아도 된다.
Next.js에서 가장 밀어주는 CSS 프레임워크이다. 최근 들어 emotion은 지원해주지만, 이전에 css-in-js라이브러리에 React Server Component를 지원해주지 않을 때 tailwindcss를 가장 먼저 지원해주었다. 또한, npx create-next-app를 실행하면, tailwindcss만 css라이브러리 중 유일하게 사용할 것이지 묻는다.

3. 컨텐츠 관리

MDX 혹은 MD파일로 글을 작성할 것이다. 그 이유는, 블로그를 형식에 맞춰 쉽게 글을 작성할 수 있고, Velog, Notion 등 다른 플랫폼에서도 쉽게 가져오고, 옮길 수 있기 때문이다.

3.1. next-mdx-remote

next-mdx-remote는 MDX파일을 사용하여 페이지를 생성할 수 있게 해준다. 이러한 MDX파일을 사용하여 페이지를 생성할 수 있다.

3.2. contentlayer ✅

Contentlayer는 MDX, MD, YAML, JSON 등 다양한 형식의 파일을 사용하여 데이터를 관리할 수 있게 해준다.
2.4k개의 star를 받은 next-mdx-remote와 달리 3.2k개의 star를 받았다. 더 많은 사용자가 사용하고 있음을 알 수 있다.
공식 문서내용이 더 풍부하다.
컨텐츠와 함께 Type 정의를 생성해주어, 편리하게 type-safe한 코드를 작성할 수 있다.

4. 블로그 글 꾸미기

4.1. rehype ✅

: HTML을 변환해주는 라이브러리이다. HTML을 AST처럼 동작시킨다.

4.2. rehype-pretty-code ✅

: Shiki syntax에 의해 동작하는 Rehype 플러그인으로, MD나 MDX를 위해 아름다운 코드 블록을 제공한다. VS Code와 동일하게 코드 블록을 보여줄 수 있다.

4.3. shiki ✅

: VS Code의 syntax highlighter인 shiki를 사용하여 코드 블록을 꾸밀 수 있다. shiki는 syntax highlighter이다. 다양한 테마를 제공하며, VS Code와 동일하게 코드 블록을 보여줄 수 있다.

4.4. remark-gfm ✅

: GFM(GitHub Flavored Markdown)을 지원하는 remark 플러그인이다. GFM은 GitHub에서 사용하는 Markdown의 확장이다. 이 플러그인을 사용하면, GFM을 사용할 수 있다.