[NextJS 영문 기술 블로그 만들기] 프로젝트 취지, 계획

사용 예정 기술스택

• 코어: NextJS, Typescript
• 클라이언트: React-Query
• 스타일링: CSS Module, TailwindCSS
• 에디터: uiw/markdowneditor
• 서버: NestJS
• DB: MongoDB -> MySQL
• 배포: Vercel
• 패키지 매니저: pnpm

Project 취지

생각해보면 나는 기술 블로그에 포스팅하는 걸 좋아하는데, 여태까지 포스팅을 하는 언어가 한국어로 국한되어 있었다. 내 포스팅을 열람하는 대상도 한국어를 읽을 수 있는 사람으로 국한되어 있는 것이다. 나는 부족한 실력이긴 하지만 내가 새롭게 알게된 정보, 나의 생각 정도는 영어로 글을 쓸 수 있다. 그래서 영문 버전의 기술 블로그를 관리하면 내 블로그를 열람할 수 있는 대상을 몇 배로 늘릴 수 있겠다는 생각이 들었다. (구글 번역기도 필수! ㅋㅋ) 한국어를 읽을 수 없는 사람들에 대한 내 포스팅의 접근성이 높아질테니까!

그리고 나는 NextJS를 공부 중이다. NextJS를 공부하기에 블로그를 직접 만들어보는 것만큼 좋은 연습도 없을 것이다. SSG, SSR, CSR을 각각 활용하는 케이스에서 나의 결정에 대한 적합성을 따져보고, 내가 몰랐던 NextJS의 새로운 기능들을 발견하면 적극적으로 사용해보며 익힐 수도 있다. 그래서 이번 프로젝트의 목표는 NextJS의 기능을 최대한 많이 활용해보는 것이기도 하다.

계획

초기 세팅

• TailwindCSS 초기세팅
• eslint, prettier 초기세팅
• code snippet 제작 (함수형 컴포넌트)
• 폴더링 (app router 기준)
• Metadata 설정

layout

• header nav bar (Link tag 사용)

main page

• profile 사진 등록 (Image 컴포넌트 사용)
• 이름, 소개, 링크 등록
• 최근 게시물 카드
• loading skeleton

posts page

• 좌측 nav bar (drawer 기능 구현)
• 게시물 카드 (mock data 임시 사용, Image 컴포넌트 사용)
• 게시물 등록 버튼
• loading skeleton

create page

• uiw/markdowneditor 사용
• 등록 기능 (서버 - route handler 사용)
• 등록 기능 (클라이언트)

detail page

• 게시물 읽기 기능 (서버 - route handler 사용)
• 게시물 읽기 기능 (클라이언트 , Image 컴포넌트 사용)
• 수정 버튼
• 삭제 버튼
• loading skeleton

update page

• uiw/markdowneditor 사용
• 수정 기능 (서버 - route handler 사용)
• 수정 기능 (클라이언트)

login page

• 아이디, 비밀번호
• submit 버튼
• 서버 측 authentication 구현 (route handler 사용, 단일 비밀번호 인증)
• authorization 구현 (middleware 사용)
• loading skeleton

공통 컴포넌트

• not-found.tsx
• error.tsx
• alert modal