사이드 프로젝트 - 클라이밍 방문일 체크

💡 여러 클라이밍장의 세팅 일정을 한눈에 확인할 수 있도록 정보를 제공합니다. 또한, 사용자가 특정 클라이밍장을 방문했을 때, 이후 언제 다시 방문해야 해당 클라이밍장의 모든 섹터가 새롭게 바뀌는지 확인할 수 있습니다.

기술 스택

프론트엔드:

• Next.js:
  • 정적 페이지 구성
  • 서버 컴포넌트
• Tailwind CSS

데이터베이스 및 인증:

• Supabase: 데이터베이스와 인증 관리를 위해 사용되었습니다.

기타 도구 및 서비스:

• Git: 버전 관리를 위해 사용되었습니다.
• Vercel: 배포 플랫폼으로 사용되었습니다. Vercel을 통해 프로젝트를 배포하고 관리하였습니다.

개발 과정

1. 프로젝트 기획 단계

   • 요구사항 분석: 클라이밍 세팅 정보를 필요로 하는 사용자들의 니즈를 파악하기 위해 인스타그램 부계정을 개설하여 세팅 정보를 정리해 올리는 작업을 했습니다. 이를 통해 세팅 정보에 대한 수요가 있다는 것을 확인했습니다.
   • 최소 기능 제품(MVP) 제작: 핵심 기능만 빠르게 제작하여 사용자 피드백을 받아 제품을 개선해 나가기로 했습니다.

2. 프론트엔드 개발 과정

   • 컴포넌트: 새로운 개념인 서버 컴포넌트 및 액션에 대한 학습을 진행하며, 컴포넌트를 개발했습니다.
   • 퍼블리싱: 모바일 디바이스를 기준으로 사용이 편리하도록 했습니다.
   • API: Supabase와 통합하여 데이터베이스와 통신하는 API를 개발했습니다. 서버 컴포넌트에서 주로 요청을 보내고, 클라이언트 컴포넌트에서는 route handler를 통해 데이터 요청을 처리했습니다.

3. 데이터베이스 및 인증 설정 과정

   • 데이터베이스 설계: 클라이밍장 브랜드, 클라이밍장, 클라이밍장 섹터, 클라이밍장 섹터 세팅 히스토리로 테이블을 나누어 정의했습니다. 데이터 모델링 과정에서 테이블 간 관계 설정을 고려했습니다.
   • 인증 설정: 카카오톡 로그인 작업은 처음이었지만, 공식 문서를 참고하여 어렵지 않게 구현했습니다. 인증 흐름을 설계하고 보안을 고려한 설정을 적용했습니다.

4. 배포 과정

   • 배포: Vercel을 통해 배포를 진행했습니다. Vercel 환경에서의 프로덕션 빌드 최적화와 환경 변수 설정을 고려했습니다.
   • 성능 모니터링: Vercel에서 제공하는 Analytics와 SpeedInsight를 통해 서비스의 성능 및 지표를 확인했습니다. 페이지 로딩 시간, 사용자 행동 분석 등의 메트릭을 모니터링하고, 이를 통해 성능 개선을 위한 인사이트를 얻었습니다.

결과 및 성과

사용자 피드백:

• 실제 사용자 유입: 인스타그램 계정을 통해 프로젝트를 공개하였고, 실제 사용자들이 유입되었습니다. 사용자들은 이 서비스가 필요했던 것임을 피드백을 통해 확인했습니다.

기술적 성과:

• Next.js 14(app router) 및 서버 컴포넌트 이해: 최신 버전의 Next.js에 대한 깊이 있는 이해를 통해 서버 컴포넌트를 활용하여 데이터를 효율적으로 처리하고, 성능을 최적화하는 방법을 익혔습니다.
• 성능 최적화: FCP, LCP 시간을 개선하기 위해 다양한 성능 최적화 작업을 수행하였고, 이를 통해 사용자 경험을 향상시켰습니다.
• Supabase 이해: Supabase를 활용한 데이터베이스 관리와 인증 설정을 통해 데이터베이스 작업의 효율성을 높였습니다.

배운점 및 개선할 점:

• 성능 최적화: 실 사용자들을 위한 성능 측정 및 개선 작업의 중요성을 깨달았습니다. 특히, 서버 컴포넌트 렌더링 시 데이터 페칭 과정에서의 최적화 필요성을 인식하고 이를 개선했습니다.
• 사용자 경험(UX): 방문일 입력의 허들을 낮추기 위한 방법을 고민하며, 사용자 친화적인 인터페이스를 설계할 필요성을 배웠습니다.