99Club Coding Study

만들게 된 배경

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 컴포넌트를 표시하도록 변경
• 다크 모드를 선호하는 사용자를 위해, 다크 모드 추가

구현 결과

• 웹사이트: 99Club

• GitHub: 99Club