Init!

먼저 폰트와 색상을 정했다. 사실상 마크다운으로된 블로그 내용 부분이 주가 되는 페이지기때문에 헤더에만 쓰일거 같지만 일단 마음에 드는 폰트를 골랐다.

계획

일단 Next로 처음부터 끝까지 다하기로 마음을 먹었으니 로직을 그려봐야 했다.

상세 페이지

1. 사용자가 /posts/first-post에 접속
   → posts/[slug]/page.tsx 이 렌더링되며, first-post는 params.slug로 전달됨

2. page.tsx는 서버 컴포넌트에서 params.slug를 이용해 /api/posts/first-post로 API 요청을 보냄
   → 요청은 api/posts/[slug]/route.ts에서 처리됨

3. API 라우트(route.ts)에서는 전달받은 slug에 해당하는 글을 찾아 JSON으로 반환
   → 백엔드 연동 전에는 로컬 더미 데이터 사용할 예정

4. page.tsx에서는 응답 데이터를 받아 마크다운 파서로 HTML로 변환하고, 상세 페이지 렌더링.

에디터

toast-ui editor를 활용해 마크다운 형식으로 글을 작성할 수 있도록 구성할 예정. 작성한 글은 /api/posts로 POST 요청을 보내 저장하게 하고, 이후 DB에 저장될 구조.. app/editor/page.tsx 파일에서 관리되며 마크다운 입력, 프리뷰, 저장 기능도 천천히 넣어보자.

이 계획을 가지고 파일 구조를 짰다

굳 스타트!