NETAMlog[0] 블로그 개편의 시작 - Next.JS, TailwindCSS

블로그 새로 만들기

이유

솔직히 티스토리로도 충분한데, 요즘 프로젝트를 안 한 거 같아서 Next.JS랑 TailwindCSS를 배운 김에 블로그를 새로 만들면 어떨까 해서 이 프로젝트를 진행하게 되었습니다.

사실 몇 주 전에 글을 올렸어야 하는데 이런저런 일들이 있어서 어느 정도 프로젝트가 윤곽이 잡히고 나서야 글을 올리게 되네요.

기술 스택

Next.JS

Next.JS는 리액트 프레임워크로 기존의 리액트에 서버 관련 기능을 갖추고 SSR과 SSG를 간편하게 구현할 수 있도록 도와줍니다.

쓰다 보면 확실히 편리한데, 아주 디테일하게 들어가면 살짝 옵션 설정이 안 되는 게 아쉽더라고요(물론 지원하는 게 많아서 충분히 다른 방법을 찾을 수 있긴 합니다).

TailwindCSS

TailwindCSS는 부트스트랩 같은 UI를 미리 선언해놓은 프레임워크가 아니라 일반적인 CSS를 작성하는데 클래스만으로 작성할 수 있도록 해줍니다.

예를 들어 버튼이 원래는 보라색인데 커서를 가져다대면 파란색으로 변하게 하고 싶다면 다음과 같이 작성하면 됩니다.

<button className='bg-purple-100 hover:bg-blue-100' />

기능

일단 실제로 지속적으로 사용하기 위해 만드는 거라 조사를 좀 했고 결론적으로 마크다운을 지원하는 블로그를 만들기로 했습니다.

Rich-Text 에디터를 가져와볼까 생각해보지 않은 것은 아닌데, 제 글쓰기 특성상 마크다운으로도 충분할 거 같아서 그렇게 결정했습니다.

글쓰기 방식은 저처럼 블로그를 직접 만드신 다른 분들의 사례를 보니까 마크다운 파일을 로컬에서 만들고 git으로 깃허브로 푸시하는 방식을 많이들 쓰시더라고요.

그래서 저도 어떻게 할지 고민하다가 블로그 사이트에 Next.JS의 Preview기능을 통해 마크다운 에디터를 만들고 서버에 마크다운 파일을 만드는 형식으로 가볼까 합니다.

보안으로는 구글 로그인 같은 것을 통해 저만 에디터 페이지로 갈 수 있도록 구현할 계획입니다.

마크다운은 브라우저에서 바로 파싱되지 않기 때문에 mdx라는 라이브러리에다가 코드 하이라이팅을 해주는 shiki라는 mdx 플러그인을 사용하게 되었습니다.

그리고 Tailwind가 다크 모드를 지원해서 저도 진정한 개발자(?)처럼 다크 모드 지원을 추가하기로 마음먹었습니다.

현재 진행상황

일단 404/500 에러 페이지와 내비게이션 바, about 페이지가 완성되었습니다.

마크다운 에디터를 만들까 말까 결정을 내린 지 얼마 안돼서 아직 그 부분은 건드리지 않았는데 이 부분만 잘 해결되면 금방 끝날 것 같습니다.(물론 그럴리는...)

다크 모드도 토글 버튼을 통해 전환할 수 있도록 설정해 놓았습니다.

희망사항

사실 블로그 글을 잘 안 적고 있긴 한데..앞으로는 매주 적어도 한 개의 글을 올리는 것을 목표로 하려고 합니다.

댓글 기능은 따로 Commento라는 서비스를 통해 셀프 호스팅으로 구현할 계획입니다.

그리고 문제풀이 글을 제외한 글들은 영어로도 작성할까 고민이 돼서 그 부분은 어떻게 할지 고민해봐야 할 것 같습니다.