저의 블로그 웹사이트입니다. 저를 소개하고 배운 것을 잊지 않기 위해 기록해두고 있습니다.
이전까진 Tistory 블로그에 글을 작성했었지만, 저만의 스타일을 갖는 블로그를 만들고 싶어서 Next.js를 사용하여 만들었습니다.
이 블로그는 지속적으로 업데이트하며 꾸준히 진행할 예정입니다.
- Next.js 14의 App Router와 RSC를 사용하였습니다.
- Tailwind, Shadcn UI를 사용하여 디자인을 구성하였습니다.
- Turborepo를 사용하여 Monorepo 구조로 구성하였습니다.
- MDX 파일 생성 및 작성으로 포스트를 작성할 수 있도록 하였습니다.
- Sentry를 사용하여 에러를 추적하고 있습니다.
npm install -g [email protected]
pnpm i
pnpm dev
contentlayer가 apps/blog/content 디렉토리에 있는 mdx
파일을 관리합니다.
관련 설정은 contentlayer.config.ts 에서 확인할 수 있습니다.
파일 수정 시 자동으로 Hot Reload
되어 개발중인 웹 페이지에 반영됩니다.
mdx 파싱 및 스타일링을 위해 아래 라이브러리를 사용하였습니다.
- remark-gfm: markdown을 파싱하여 HTML로 변환합니다.
- remark-breaks: md 파일에서 줄바꿈하면 실제 줄바꿈으로 변환합니다. (공백이나 Escape 문자가 필요 없어집니다.)
- remark-toc: Table of Contents를 생성합니다.
- rehype-slug:
<h1>
~<h6>
태그에 id를 부여합니다. - rehype-autolink-headings:
<h1>
~<h6>
태그에 부여된 id를 통해 자동으로 링크를 생성합니다. - rehype-pretty-code: 코드 블록을 스타일링합니다.
그 외에 Typography 스타일은 /src/components/ui/mdx-components.tsx 에서 정의하였습니다.
Vercel Analytics를 사용하여 웹사이트의 트래픽을 추적하고 있습니다.
- remark-gfm은 3.0.1 에서 업데이트 하면 안 됨.