01_next.js app router 로 마이그레이션 결정한 이유
기존에 사용했던 블로그는 리액트 + 개츠비 를 이용하여 만들었다.
당시 리액트로 간편하게 구축할 수 있는 CMS 프로그램인 개츠비가 가장 유명하고 자료가 많았기에 쉽고 빠르게 구축할 수 있었다.
하지만 이거이거 .. 초기 구축만 쉬웠지 사용하다 보니 여간 불편한게 한두개가 아니었다.
기존 블로그의 문제점
- graphQL 기반으로, restAPI가 익숙한 나에게 귀찮았던 유지보수.
- 물론 리액트쿼리와 캐싱개념도 동일하고, 배우려면 충분히 배울 수 있겠지만 현 상황에서 오버스택 이라고 느껴졌다.
- markdown 형식으로 작성 후 마크다운 프리뷰 익스텐션을 통해 내가 쓴 글 확인
- 프로젝트 코드 내에서 작성해야 하는 불편함
이 단점들을 보완하기 위해 블로그 마이그레이션 대작전 계획을 세웠다.
이때 Next.js 의 App router 를 한창 공부중 이었는데 적용 해 볼 좋은 기회라고 생각했다.
마이그레이션으로 기대하는 것
- 공부한 14ver (App router) 실전 경험하기
- 효율적인 meta tag 를 이용하여 SEO 높이기
- 내 메일을 노출하지 않고, 상대가 나에게 이메일을 보낼 수 있도록 메일보내기 기능 추가
- notion API 붙여 작성한 컨텐츠 서버사이드 에서 가져오기
- getServerSide 등등 데이터 fetching 방식이 변경되어 실제로 어떻게 구현하고 실행 될지 궁금했다.
- 동시에 못생긴 mdx 파일로 작성하지 않고, 노션에서 쉽고 직관적으로 글을 작성할 수 있다.
- react-ts-sook-ui 적용 및 테스트.
- 이숙영 표 커스텀 디자인 시스템을 제대로 적용하고 문제점을 파악할 수 있는 좋은 기회라고 생각했다.
- github action 써보기
- 배포 자동화 시스템을 통해 미리 에러를 막을 수 있도록 구성할 예정.
예상 작업 기간
기존 블로그도 tailwindcss 를 사용하고 비슷한 뷰로 구성한다면 크게 공수가 들지 않을것이라고 판단했다.
다만 처음 사용해보는 Notion API 데이터 fetching 방식과 Node mailer 구축을 고려해야 한다.
주말마다 할애한다는 가정 하에, 15일로 일정을 러프하게 잡았다.
02_블로그 기술 & 기능 명세
블로그에 반드시 필요한 기능들과 적용 포인트 기술
기술 스택
- Next.js
- Tailwindcss
- notion API
- react-hook-form : 검색기능과 contact form 작성시 사용
- Supabase : view count 를 위한 스키마 세팅
- github-slugger
- next-sitemap : 블로그의 서치엔진에 좋은 xml 설정.
- github-action
기능
- 노션 데이터 가져오기 ⭐️⭐️⭐️
- Node-mailer ⭐️⭐️⭐️⭐️
- 포스팅 데이터 무한스크롤 ⭐️⭐️
- 반응형 ⭐️
- SEO ⭐️⭐️⭐️
- OG (open graph 테스트 사이트 참고하기)
페이지 구성
Home
- HomeCoverSection
- 간단한 소개
- Search
- FeaturedPost
- supabase 에서 view count 기준으로 많이 읽은 글 순으로 세개 보여주기
- RecentPost
- 최근 포스팅 6개만 보여주기
- 전체보기 클릭 시 카테고리 페이지로 이동
categories/[slug]
- CategoryPage
- 카테고리 별 모든 포스팅 보기
post/[slug]
- PostPage
- 노션에서 가져온 포스팅 데이터 dangerouslySetInnerHTML 로 파싱하기
About
- AboutCoverSection
- Skills
- Projects
- Experience
Contact
- ContactForm
- 구성원의 정보과 컨택 사유 구성
- 노드 메일러를 통해 제출 시 내 메일로 연동시키기