NextJS의 App Router를 이용하여 블로그를 만들었다. 아직 부족한 기능이나 구현하지 못한 기능들은 시간을 들여서 더 만들어 나갈 예정이고, 블로그의 기본적인 기능은 작동할 수 있도록 구현하였다.
Data
블로그의 내용을 어떻게 저장하고 관리할 수 있을까에 대해서 생각을 해봤다.
- 로컬 Markdown 파일 이용
- CMS를 이용한 내용 관리
두 개의 선택지에서 CMS를 이용하여 데이터를 관리하면 다른 프레임워크에서도 사용할 수 있을거라고 생각해서 CMS를 이용하여 구현하기로 생각했다.
그 이후에는 어떤 CMS 제공 업체를 선택할 것인가에 대해서 알아봤는데 다양한 CMS 제공 업체가 있었지만 그 중에서 netlify와 contentful이 보였다.
netlify
- 에디터 한글 이슈
- 깃헙과 연동하는데 이상한 인증 절차가 너무 귀찮음
- 데이터 타입을 설정하는데 유저 친화적이지 않은 느낌 강하게 들음
Contentful
- 에디터 한글, rich text 전부 지원
- 다양한 타입과 사용자 친화적으로 content를 넣을 수 있음
- 클릭 몇 번으로 세팅하는데 불편하지 않음
- 다양한 타입을 Typescript로 만들기 위한 툴 등이 많음
결국 Contentful CMS를 이용하기로 하였고 contentful 라이브러리를 이용하여 블로그에 적용시켰다.
페이지 구성
전체적인 페이지는 총 3개로 홈 페이지, 워크 페이지, 포스트 페이지 총 3개로 구성돼 있다.
홈페이지
- Introduce Component : 나와 블로그에 대한 짧막한 소개와 내가 어떤 기술을 사용할 수 있는지에 대해서 기술하는 컴포넌트
- Latest Post Component : 가장 최근 2개의 블로그 글을 보여주는 컴포넌트
작업물 페이지
- Work List Component : 지금까지 진행했던 프로젝트의 리스트가 담긴 컴포넌트
- Work Detail Component[slug] : 각각의 프로젝트들의 이름, 설명, 주소 등 자세한 설명이 담겨있는 컴포넌트
포스트 페이지
- Post List Component : 블로그 포스트들의 리스트가 담긴 컴포넌트
- Post Detail Component[slug] : 각각의 포스트를 보여주는 컴포넌트
위와 같이 구성돼있으며 포스트와 작업물의 디테일들은 slug을 이용해서 segment를 구성하였다.
Server Component / Client Component
대부분의 컴포넌트들은 Server Component로 작성을 하였고 사용자의 입력이 들어가는 Post Page에 유일하게 Client Component를 넣었다. 사용자는 카테고리를 선택하거나 검색어를 입력하여 필터링된 포스트를 보여줄 수 있게끔 구현하였고, query string을 이용하여 주소를 통해서 선택한 카테고리와 검색어로 데이터를 필터링할 수 있도록 하였다.
이 부분에서 모든 컴포넌트를 Client Component로 만들어버릴까 생각을 했는데 그렇지 않고서 url을 통해서 충분히 server component로 데이터를 필터링할 수 있는 방법을 찾아서 필터링된 데이터를 보여주는 것은 server component를 이용하여 구현을 하였다.
반응형 스타일링(with tailwind css)
처음 사용하는 tailwind css를 이용해서 반응형을 어떻게 적용할 수 있는지 찾아봤는데 tailwind css에서는 기본적으로 모바일 버전으로 만든 뒤에 그 다음에 sm:text-2xl 등과 같이 점점 더 크기가 커지면서 만드는 것을 선호한다고 한다. 그런데 이미 데스크탑에 버전을 맞춰놓고 그다음에 모바일 버전을 맞춰서 진행할려고 했던 터라 일단 대부분은 그대로 두고 작아질 때 폰트가 깨지거나 마음에 안드는 레이아웃을 설정을 해줬다.
참고자료
