블로그 개발6 [블로그 프로젝트] 5. TOC(Tables of Contents) 만들기 Tables of Contents(TOC)란 번역하면 '목차'이다. 이름과 걸맞게, 컨텐츠의 제목 + 소제목을 한데 모아 목록으로 보여준다. 이번 글에서는 TOC를 어떻게 구현하였는지에 대해 기록한다. TOC 구현하기 라이브러리를 활용하는 방법 TOC를 구현하기 위해서는 지난 글에서도 소개한 바 있는 remark를 활용할 수 있다. remark-toc 플러그인을 사용하면 제목만 모아서 TOC를 생성해주기 때문에, 비교적 간단한 구현이 가능하다. 그럼에도 불구하고 내가 remark-toc를 사용하지 않은 이유는 TOC가 마크다운 문서 내부에서만 사용가능했기 때문이다. 내 목적은 TOC 컴포넌트를 마크다운 바깥에 두는 것이어서, 마크다운 내부에서만 작동하면 디자인에 부합하는 결과물을 낼 수 없었다. 결국 .. 2024. 2. 28. [블로그 프로젝트] 4. giscus로 댓글 기능 구현하기 지난 글에서는 카테고리와 간단한 페이지네이션을 구현했다. 이번에는 giscus 라이브러리를 사용해, 간단하게 댓글 기능을 추가하는 방법에 대해 알아본다. giscus란? Github Discussions를 사용해서 댓글 시스템을 구현할 수 있게 해주는 라이브러리다. 비슷한 것으로 유명한 utterances가 있고, giscus 또한 utterances에 강하게 영향 받았다고 언급하고 있다. 둘의 차이점은, giscus가 Github Discussions를 사용하는 것에 반해 utterances는 Issues를 사용한다는 것이다. 어떤 것을 사용할까 고민했는데 댓글의 역할을 수행하는 데 issue보다는 discussion이 더 적합하다는 의견에 공감하기도 했고, 결정적으로 현재시점에서 giscus가 좀 더.. 2024. 2. 22. [블로그 프로젝트] 3. 카테고리 분류 + 페이지네이션 구현 지난 글에서 설정한 front matter를 통해, 게시물에 다양한 정보를 넣을 수 있다. 이것을 이용해서 각 게시물마다 카테고리를 부여하고, 카테고리 별 게시물 분류 및 간단한 페이지네이션 적용기에 대해 정리한다. 카테고리 분류 Front matter를 통해 카테고리 부여하기 내 블로그 게시물의 front matter는 다음과 같이 작성하고 있다. --- title: Random post createdAt: '2023.10.31' category: 'javascript' draft: false thumbnail: '/images/dummy_thumbnail.jpeg' --- // 이 외에도 상황에 따라 다른 데이터가 들어간다 위 front matter를 통해 알 수 있듯, 게시물의 공개 여부/썸네일 지.. 2024. 2. 16. [블로그 프로젝트] 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. TailwindCSS + α 로 디자인 구현하기 개인 블로그를 개발하며 개발일지를 작성 중이다. 그 중 몇 가지를 하나의 주제로 모아 티스토리에 남기고자 한다. 특히 이번 글에서는 블로그의 외관에 관련된 주제로 작성하고자 한다. 반응형 디자인 with TailwindCSS 모바일과 웹 모두를 만족시키자 테일윈드는 오픈소스 CSS 프레임워크로, Utility-First라는 컨셉을 내세우고 있다. 일반적으로 CSS처럼 클래스 이름을 정의하고, 해당 클래스를 스타일링하는 방법이 아닌, 유틸리티 클래스를 작성하여 이를 HTML에 바로 적용하는 방식을 취하는 것이다. 테일윈드에 대한 것은 나중에 조금 더 자세히 다뤄보겠다. 블로그 계획 당시부터 반응형 디자인을 하려 마음먹던 내가 테일윈드를 사용한 이유는 반응형 디자인의 적용이 간편하기 때문이다. 테일윈드는 모.. 2024. 2. 7. [블로그 프로젝트] 0. 블로그 기획과 디자인 이전부터 나만의 블로그를 만들고 싶다는 생각을 갖고 있었다. 특히 웹 개발을 접하고 이 분야를 더 깊게 파고들고 싶다는 생각을 하고 나서부터 그런 생각이 더 깊어졌다. 새해도 되었고, 그동안 조금씩 계획하고 있었던 블로그 개발의 시동을 걸어야겠다는 생각이 들어, 이제껏 개인적으로 정리해두었던 기획과 디자인 아이디어를 올려보고자 한다. 기획 단계, 어떤 블로그를 만들지 정하기 기존 블로그의 단점? 우선, 현재 사용중인 티스토리 블로그에서 느낀 불편함을 나열하자면 아래와 같다. 나만의 디자인 적용의 불편함. 스킨 기능이 있으나, 100% 나만의 개성이 드러나는 디자인을 적용하기엔 불편함이 있는 느낌이다. 에디터의 문제. 특히 코드 등을 정리할 때마다 느낀 것이지만, 다른 블로그 플랫폼인 velog 등에 비해.. 2024. 1. 15. 이전 1 다음
