노션 블로그 만들기 - Next.js, 노션 API 활용한 블로그 제작 계기
Next.js와 Notion API를 이용하여 블로그를 제작해보자!
2023-02-17 | 프로젝트 | 6min
블로그 만들어볼까…?
시작은 아마 toss.tech 블로그를 처음 접했을 때 라고 생각한다.
토스는 개인적으로 입사하고 싶은 기업들 중 1위 반열에 속하는 기업이다. 내가 개발을 시작하게된 계기도 그렇고 이에 대한 원동력으로도 토스는 크게 영향을 끼쳤기 때문이다. 이에 대한 이야기는 추후 다른 포스트에서 나의 이야기를 풀어보겠다.
처음 토스 블로그를 접한 것은 코드를 작성하는 에러 때문이었다.
학교 프로젝트로 nearley.js 라는 라이브러리를 이용해서 파서를 개발을 하던 도중에 갑자기 import문이 안먹힌다던가, type error가 뜬다던가 등의 이해하기 어려운 에러들이 뜨기 시작했다.
당시 NodeJS 를 이용한 백엔드 부분 개발을 처음 시도해보았고 자바스크립트 보다 타입스크립트를 이용하는데 적응이 되었기에 Node + TS 환경에서 라이브러리를 사용하려고 했더니 프론트에서 하던 것처럼 import문을 사용하여 라이브러리를 불러오는 것이 안되는 상황들이 종종 발생했다.
이때 require 문법을 자세히 알지 못하는 바람에 처음으로 라이브러리를 이용하는 데에서 짜증을 느꼈다.🥲
토스 블로그 접하기
위 에러로 오랫동안 끙끙 앓던 도중에 토스의 기술블로그에서 아래 포스트를 발견하게 되었다.
CommonJS와 ESM에 모두 대응하는 라이브러리 개발하기: exports field
해당 포스트의 내용은 내가 접했던 에러의 이유와 해결 방안에 대해서 정확하게 알려주었다. 사이다를 마신 느낌이었다. 그리고 어느새 나는 이 블로그의 다른 글들을 쭉 둘러보고 있었다.
토스 블로그의 글들은 너무나 맛있는 내용들이 많았다. 그리고 각 글들은 하나같이 문제 제기, 주어진 과제들, 개념 설명에 더불어 해결 방안과 그 결과까지 정보 제공에 최적화 된 글들이었다.
이런 글들을 접하다 보니 나도 이런 글을 쓸 수 있는 사람이 되고 싶다는 생각이 들었다.🤨
블로그 CMS 선정하기
그래서 나만의 글을 쓰고 모아놓고 싶었다. 그런데 방법은 많다. 단순히 기록을 해도 되고, 널리 이용되는 네이버나 티스토리, 벨로그 등의 블로그를 써도 된다. 그렇다면 여기서 어떤 방법으로 나의 글을 쓰고 관리할까를 생각해보았다.
보통 나는 학교 공부를 할 때에도, 개인 공부를 할 때에도 노션을 자주 사용하는 편이다. 그렇기에 개발 경험이나 프로젝트 진행 내용 등등의 대부분의 내용들이 노션에 저장되어 있다. 그렇다면 노션을 CMS(Content Management System) 으로 활용해보는 것이 어떨까 생각이 들었다.
한편, 보통 개발 지식을 찾아볼 때 다수의 사람들은 velog.io 나 tistory 를 사용하는 편인데 UI가 너무 겹치는 것이 맘에 들지 않았다. 사실 나만의 블로그를 원하기도 했다.
이렇게 나의 블로그는 노션을 데이터베이스로 사용하는 개인 블로그를 제작하는 것으로 결정났다.
개발 툴의 선정
블로그를 개발하기 이전까지는 React + Vite 로만 개발을 해봤었다. 그렇기에 이번 블로그 제작 프로젝트를 기회로 삼아 NextJS 를 제대로 경험해보고자 메인 프레임워크를 NextJS 로 선정하게 되었다. 게다가 NextJS 는 Server Side Rendering이나 이미지 로딩의 CLS 이슈를 해결해주는 Image component, 자체 컴파일러를 이용한 최적화 방식, 사실상 풀스택 개발 툴 등등의 장점들로 유명하기에 컨텐츠 초기 로딩이 중요한 블로그 컨텐츠의 경우 이를 사용하기에 적절한 선택이라고 생각했다. 물론 경험해보고 싶은 마음이 가장 컸다
CSS 작성 방식으로는 기존의 styled-components 를 사용하려다가 inline css 방식으로 작성 가능하다는 Emotion 라이브러리를 선택하게 되었다. 이전에 잠시 tailwind-css 를 이용하면서 느꼈던 inline 작성 방식의 편리함을 css-in-js 방식으로 작성 가능하다는 것이 Emotion을 선택하게 된 가장 큰 이유였다.
마무리
이렇게 NextJS와 Emotion을 이용하여 블로그를 제작하게 된 계기와 초기 개발 툴 선정한 과정에 대해서 회고도 하고 정리도 할 겸 글을 작성해보았다. 다음 글은 초기 세팅에 대해서 포스트를 올려볼까 한다.