next-mdx-remote2 [블로그 프로젝트] 5. TOC(Tables of Contents) 만들기 Tables of Contents(TOC)란 번역하면 '목차'이다. 이름과 걸맞게, 컨텐츠의 제목 + 소제목을 한데 모아 목록으로 보여준다. 이번 글에서는 TOC를 어떻게 구현하였는지에 대해 기록한다. TOC 구현하기 라이브러리를 활용하는 방법 TOC를 구현하기 위해서는 지난 글에서도 소개한 바 있는 remark를 활용할 수 있다. remark-toc 플러그인을 사용하면 제목만 모아서 TOC를 생성해주기 때문에, 비교적 간단한 구현이 가능하다. 그럼에도 불구하고 내가 remark-toc를 사용하지 않은 이유는 TOC가 마크다운 문서 내부에서만 사용가능했기 때문이다. 내 목적은 TOC 컴포넌트를 마크다운 바깥에 두는 것이어서, 마크다운 내부에서만 작동하면 디자인에 부합하는 결과물을 낼 수 없었다. 결국 .. 2024. 2. 28. [블로그 프로젝트] 2. mdx 마크다운으로 게시물 페이지 만들기 이전 기획글에서도 언급했듯, 마크다운을 활용하여 블로그 게시물을 작성하기로 결정했었다. 저번 글에 이어, 마크다운을 통한 게시물 작성을 구현하기 위해 무엇을 하였는지 소개한다. 마크다운(mdx/md) 띄우기 next-mdx-remote + gray-matter 활용하기 마크다운을 Next.js에서 사용하는 방법으로, 공식 문서에도 안내되어 있는 @next/mdx 가 있다. 이 패키지는 로컬 폴더 내의 mdx 파일을 pages/app 디렉터리 내에서 바로 사용할 수 있게 한다고 설명하고 있다. 공식문서를 살펴보면 소개하는 또 다른 마크다운 패키지가 있는데, 이것이 바로 내가 사용한 next-mdx-remote 이다. 앞서 언급한 @next/mdx와의 차이점이라면 굳이 로컬에 있는 마크다운이 아니어도 사용.. 2024. 2. 11. 이전 1 다음
