나만의 블로그를 만들어 보자 (with Next.js 14)

해당 포스팅은 개발을 시작하시는 분들에게 블로그를 만드는것이 어렵지 않고 쉽게 만들수 있다는 것을 알리고자 작성하게 되었습니다.

프론트엔드 개발자라면 모두 생각해볼법한 나만의 블로그를 만들어보았습니다.

외주와 그룹으로 프로젝트를 진행하였지만, 혼자 고민해볼만한 개인 프로젝트는 없다는걸 알게 되어 블로그를 만들기로 결정하였습니다.

기존에 티스토리를 이용하고 있었지만, 마음에 드는 테마가 없었고, 직접 티스토리 스킨을 제작하기에는 들이는 시간이 많았고, Next.js 를 통해 포스팅 한 글을 SEO 최적화를 진행하여 노출 시켜 보고 싶었습니다.

Next.js 를 선택한 이유

가장 큰 이유로는 React 라이브러리를 사용해 프로젝트를 만들었기에 기존 경험을 살려 완성도 높은 블로그를 만들고 싶었습니다.

또한, Next.js 는 하나의 프레임워크로 DB 연결과 서버 구축까지 할수 있어, 혼자 모든걸 구축하기에 안성맞춤 이였습니다.

계속해서 유지보수 해나가야하는 블로그 특성상, 여러가지 하고싶은 가능성을 열어두고자 선택하였습니다.

블로그의 목표 기능

기존 티스토리처럼 어디에서나 로그인시 내 블로그에 접속해 글을 작성하고 싶었습니다.

실제로는 항상 개발 환경이 구축되어 있는 PC 에서만 블로그 글을 작성하였지만, 어디에서든지 CRUD 는 가능하게 하고자 하여 포스팅 기능 까지 구현하려 합니다.

기존과 여타 블로그와 다른점은 포스팅 기능까지 구현되어 있다로 차별을 두었습니다.

기존 글을 시리즈 별로 볼수 있도록 시리즈 기능과 스니펫 그리고 태그별로 볼수 있도록 나누었습니다. 이때 시리즈, 스니펫, 태그 마다 모두 SEO 를 적용시킬 수 있어 여러 검색어에 노출될 수 있습니다.

SEO 최적화를 위해 구조를 다음과 같이 설정하였습니다.

text
1app
2ㄴ series
3        ㄴseries-name
4                  ㄴpost                   
5ㄴsnippets
6        ㄴsnippet-name
7                  ㄴpost
8ㄴposts
9       ㄴtag-name

이렇게 포스팅의 종류는 크게 series 와 snippet 두가지로 나뉘게 되고 posts 에서는 모든 포스팅글을 볼 수 있도록 설계하였습니다.

기술 스택

블로그는 계속해서 유지보수에 힘을 써야해 자신있는 기술 스택을 사용해야 한다고 생각합니다.

따라서 기존의 외주 프로젝트에서 많이 사용한 TailwindCSS 와 shadcn 라이브러리를 사용하여 블로그를 만들 계획이고, 포스팅 데이터는 무료로 사용할수 있는 Firebase 에 업로드할 예정입니다.

포스팅 기능까지 구현해야하기에 AWS 의 S3에 이미지를 업로드하고, S3에 이미지 업로드 하고 매번 해당 객체를 Url 로 접근하면 비용이 많이 나올수 있고, 속도 또한 느리기에 CDN 을 제공하는 Cloudfront 를 도입해 서비스할 예정입니다.

다음은 사용할 기술 스택 목록입니다.

기술 스택
Typescript
Next.js 14, zustand, Tailwindcss, shadcn ui
Firebase
pnpm
Vercel, AWS S3, Cloudfront

블로그를 만드는데 도움이 된 다른 Next.js 블로그입니다.

bepyan blog