[V-UP] 뮤직 플레이어와 커뮤니티를 동시에 즐길 수 있는 서비스

배포 주소
프로젝트 기간
2024/03/26 → 2024/05/01
유저피드백결과지
https://www.notion.so/User-Test-8d4492401c5449d094e93596a23ac3c2
테스트 ID / PW
tester@test.com / test1234

V-UP(Volume up)

퍼스널 뮤직 검사를 통해 나의 취향에 맞는 음악을 추천받고 음악을 들으며 커뮤니티를 즐길 수 있는 서비스입니다. ⇒ 테스트 계정 : tester@test.com / test1234
•
음악을 들으면서 음악에 대한 이야기를 한 플랫폼에서 이용하고 싶어! V-UP 바로가기
•
내가 평소에 듣던 음악과 비슷한 음악을 추천 받고 싶어! V-UP 바로가기
•
평소 듣지 않던 장르도 듣고 싶은데 편하게 추천받고 싶다면? V-UP 바로가기
•
V-UP 서비스를 만든 박박버스가 궁금하다면? VakVakVerse

 아키텍쳐

 주요 기능

[플레이어]

[퍼스널 음악 진단]

[마이페이지]

[유저 프로필 페이지]

[커뮤니티]

[검색]

기술적 의사결정

Next.js 서버, 클라이언트 렌더를 지원하여 초기 로딩 속도를 개선하고 검색 엔진 최적화에 도움을 주며, 이미지 최적화 등의 고급 기능을 사용할 수 있습니다.
Next Auth 손쉬운 세션 관리로 로그인을 구현하는 데 도움을 줍니다. 다양한 인증 프로바이더와 통합할 수 있으며 기본적으로 세션 기반의 인증을 지원하여 자체적인 자동 로그인이 구현 가능해서 선택하게 됐습니다.
Typescript 동적 타입 언어인 javascript는 런타임 시에 에러가 발생하지만, 정적 타입 언어인 typescript는 컴파일 시에 에러를 발견할 수 있습니다. 또한 타입을 확실하게 정의해서 다양한 에러를 빌드 하기 전에 낼 수 있어서 정확하고 효율적으로 개발할 수 있습니다.
Zustand redux에 비해 보일러 플레이트 코드가 적고 간단하며 사용법이 쉽습니다. 로컬 스토리지 또는 세션 스토리지에 데이터를 저장하는 모듈 방식을 필요에 의해 사용할 수 있습니다.
TanStack Query v5 서버 상태 가져오기, 캐싱, 동기화 및 업데이트를 쉽게 다룰 수 있게 해줍니다. 렌더링과 오류 상태를 관리하고, 컴포넌트의 상태를 업데이트할 수 있는 간단한 API를 제공해 페이지 네이션, 무한 스크롤과 같은 복잡한 기능을 좀 더 효율적으로 작업할 수 있습니다.
Supabase api 무제한 요청으로 firebase에 비해 개발하는데 제한이 없습니다. 또 url이랑 key 만으로 db를 쉽게 호출할 수 있고, 구현하는 서비스 특성상 다른 테이블과의 join을 통해 데이터를 조회하는 관계형 데이터베이스가 필요하여 Supabase를 선택하게 되었습니다.
TailwindCSS Next.js와 호환성이 좋은 유틸리티 CSS 프레임 워크로 인라인 방식의 css로 빠르게 스타일링할 수 있어서 개발 생산성을 높여줍니다. 클래스에 대한 고민을 할 필요가 없고 반응형 스타일을 간단하게 줄 수 있어서 유지 보수하기 쉽습니다.
prettier-plugin-tailwindcss tailwindcss 클래스를 권장 클래스 순서에 따라 정렬해 주기 때문에 코드의 일관성을 가져갈 수 있기 때문에 선택하게 되었습니다.
React-h5-audio-player 사용자 정의 가능한 컨트롤러로 다양한 속성과 이벤트를 활용할 수 있으며 컨트롤 UI를 자유롭게 커스터마이징 할 수 있어서 디자인적인 강점을 가지고 있습니다.
React-quill 리액트 환경에 맞춰진 라이브러리라 호환성이 좋고, 많은 레퍼런스가 존재합니다. 일반 quill을 사용하기 보다 커스텀 편하게 할 수 있습니다. 또, 사용자가 커뮤니티 내에서 음악 추천글 작성 시, 에디터에 포함된 다양한 효과를 주어 공유하려는 음악을 개성 있고 효과적으로 추천할 수 있도록 기능을 제공하기 위해 선택하게 되었습니다.
Chart.js
퍼스널 진단 뮤직 결과에 사용될 차트를 그리기 위해서 사용한 라이브러리입니다. 기본 설정만으로도 다양한 종류의 차트를 생성할 수 있으며, 원하는 목적에 맞게 차트를 커스텀 할수 있습니다. 가벼운 라이브러리로 상대적으로 작은 파일의 크기를 가지고 있으므로 웹 페이지의 성능을 향상시키고 로딩 시간을 줄일 수 있었습니다.

 트러블슈팅

역방향 무한 스크롤 시 데이터를 불러오는 시점 문제
onClick 사용으로 인한 실시간 반영이 되지 않는 문제
플레이 리스트 index 위치 변경 후 유지되지않는 문제
에디터가 빌드 될 때, document is not defined 오류가 발생하는 문제