프로젝트 소개
Poketify
•
한 줄 설명 : 나의 작고 소중한 스포티파이
•
상세설명 : 앨범명, 가수명 등의 키워드로 관련된 곡을 검색할 수 있으며, 자신의 취향이 담긴 플레이리스트를 만들고 링크를 공유할 수 있습니다.
커뮤니티 사이트에서 해당 링크에 대한 댓글을 남기며 소통할 수 있습니다.
•
개발인원 : 프론트엔드 개발자 4명
•
개발 기간 : 2024년 10월 10일 → 2024년 10월 18일
담당 역할
1) 담당 페이지 및 기능
1.
a.
Spotify api 의 search / album 데이터를 활용하여 검색 기능 구현
b.
검색 bar에 사용자 키워드를 id 값으로 받은 후 결과 페이지로 이동 (navigation 사용)
c.
클릭한 곡의 상세 페이지에 곡 정보(앨범 이미지, 노래 제목, 아티스트, 인기도)를 화면에 표시
d.
Spotify의 limit 속성을 사용해 일정 데이터를 보여주고 페이지네이션은 모바일을 고려하여 5개의 페이지씩 보여지게 구현
e.
TanStack Query 를 사용한 서버상태관리
2) 일정관리 및 문서화
•
최종발표 PPT 제작 → 우수발표자료 선정
아키텍처
트러블슈팅
1.
스포티파이 사용 시 발급받는 Token이 1시간 마다 갱신이 필요하다는 부분을 발견했고, 자동으로 갱신하고 팀원 전체가 공유해서 사용할 수 있도록 작업하는 과정을 기록하였습니다.(AccessToken 자동갱신 트러블슈팅)
2.
프로젝트 서비스를 배포하면서 supabase의 링크 변경 등을 해주지 않아 배포가 불가능한 일이 발생했습니다. 추후 동일한 실수를 하지 않기 위해 체크해야하는 부분을 기록해두었습니다. ( Next.js + supabase 배포)
3.
성과
•
하나의 로직에서 모든 토큰 갱신 및 관리를 처리하므로, 서버 요청의 중복 발생을 방지하고 리소스를 절약
•
개발 도중 토큰 만료로 인해 발생하는 요청 실패가 줄어들어 작업 흐름이 매끄러워짐
•
Token 갱신이 자동화되어 개발자가 매번 수동으로 갱신하지 않아도 됨
•
웹 환경과 모바일 반응형 환경 제작으로 사용자 경험 증대