Next.js 기반 나만의 개발 블로그 제작기

Framework: Next.js(14)
프론트앤드 개발자라면 현재 필수라고 여겨지는 프레임워크인 것 같다.
Next.js를 사용하는 회사도 늘어나고 있고 이번 기회에 Next.js에 대해 공부도하고 친해질 수 있는 기회라고 생각해 선택했다.
Design: Tailwind css & MUI
핫한 디자인 라이브러리 Tailwind css, 처음엔 어색했지만 Tailwind css를 기반으로 작성한 전역 스타일을 혼합하여 사용하니 정말 편리하다고 느꼈다.
추가로 간단하게 import하여 사용할 수 있는 MUI(Material-UI)를 사용해 Dialog와 같은 컴포넌트를 구현했다.
* MUI: 구글의 디자인 철학인 Material Design 원칙을 기반으로 한 React UI 라이브러리
게시글 관련: MDX(작성) & gray-matter, next-mdx-remote(파싱)
gray-matter: Markdown 파일에서 제목, 날짜, 태그 등의 메타데이터 추출
next-mdx-remote: 메타데이터와 콘텐츠를 분리한 후 콘텐츠를 HTML과 React 컴포넌트로 변환
mdx(Markdown with jsx)로 작성된 파일의 메타 정보와 본문을 파싱해주는 gray-matter, next-mdx-remote를 사용했다.
처음 접해보는 라이브러리지만 Next.js나 Markdown 기반 콘텐츠를 다루는 프로젝트에서 자주 사용되어 관련 정보를 쉽게 찾아볼 수 있었다.
댓글: Giscus
Github Discussions를 사용해서 댓글 시스템을 구현할 수 있게 해주는 라이브러리다.
오픈 소스스에 데이터베이스도 필요 없고 간단하게 댓글 기능을 구현할 수 있었다.
날씨 정보: Openweathermap api
Openweathermap api를 사용해 현재 위치의 날씨 정보를 구현했다.
부분적 무료이지만 무료버전을 사용해도 무리가 없을거라 생각해 선택했다.
상태 관리: SWR & Zustand
SWR은 자동 캐싱 및 재검증이 가능하고 에러 핸들링 시 재시도 로직과 같은 기능들이 쉽게 구현이 가능하여 선택했다.
Zustand 또한 간결하고 직관적이며 보일러플레이트 없이 전역 상태를 쉽게 관리할 수 있다.
* 보일러플레이트: 애플리케이션의 핵심 로직과 크게 관련 없는, 반복적이고 템플릿처럼 사용되는 코드
배포: Vercel
Vercel은 Next.js 개발 팀에서 만든 호스팅 서비스다.
Github Repository와 연동하면 매번 push를 진행할 때 마다 자동으로 빌드 후 배포해주기 때문에 관리가 편하다.

3. 디렉토리 구조

project
├── app
│   ├── public/Image // 컴포넌트에서 사용할 이미지
│   ├── components
│   ├── store // 상태관리
│   ├── utils // 상수 및 함수파일
│
├── posts // 게시글 mdx 파일
│
├── public
│   ├── images // 게시글 내부에서 사용할 이미지
│   ├── project_images // about 페이지 프로젝트 정보에서 사용할 이미지
│
├── libs
│
├── type // 타입파일