만들게 된 배경
99club에서 코딩 테스트 준비를 위한 스터디에 참여하면서, 풀었던 문제들에 대한 기록을 한 곳에서 관리하고 싶었다.
노션의 데이터베이스와 템플릿을 활용해서 풀었던 문제들과 TIL 등을 기록했다.노션에 기록한 내용을 기록에서 끝내지 않고, 공유하고 싶어서 하나의 웹사이트로 구현하게 되었다.
기술 스택
- Framework:
Next.js - Language:
TypeScript - Style:
TailwindCSS,next-themes,Next UI - Contents:
Notion,Notion API
기본 구현 과정
1. 프로젝트 생성
npx create-next-app@latest명령어를 사용해서Next.js프로젝트를 생성한다.
2. 노션 데이터베이스와 연결
- 노션에 새로운 데이터베이스를 생성하거나 이미 연결할 데이터베이스가 존재한다면, 해당 데이터베이스와 Next.js 프로젝트에 연동한다.
Log를 남겨서 노션 데이터베이스에 연동된 데이터가 정상적으로 들어오는 지 확인한다.-
Next.js에서 노션 데이터베이스를 사용하는 방법
3. 컴포넌트 및 페이지 구현
사용자에게 보여줄 화면 및 컴포넌트를 구현한다.
4. 배포
- 원하는 플랫폼을 사용해서 완성된 프로젝트를 배포한다. 이 프로젝트의 경우
Vercel을 통해 배포했다.
추가 구현
- 사용자 경험 개선을 위해, 로딩 중일 때,
Skeleton컴포넌트를 표시하도록 변경 - 다크 모드를 선호하는 사용자를 위해, 다크 모드 추가