좋아하는 앨범을 아카이빙할 수 있는 서비스
2024.12 - 2025.02
개인 프로젝트
상세 설명
•
Next.js의 API routes 기능을 사용하여 API 개발
•
반응형 페이지 구현
•
pwa 적용
•
Spotify Web API, Web Playback SDK를 사용한 앨범 검색 및 재생 기능 구현
◦
sdk 스크립트 다운로드 중 로딩 컴포넌트를 표시하여 사용자 경험 개선
•
Three.js 라이브러리를 사용하여 3D 컴포넌트 제작
트러블 슈팅
•
access token 만료 시 api 요청 실패로 인한 에러 발생
◦
setTimeout으로 만료 시간 1분 전 refresh 처리
◦
Axios interceptor를 사용하여 에러 발생 시 응답을 가로채어, 토큰 refresh 후 재요청
•
앨범 검색 시 타이핑될 때마다 검색 API가 호출되어 부하 발생
◦
debounce 적용하여 마지막 검색어에 대해서만 요청하도록 처리
•
모달 표시 시 스크롤바 유무에 의한 layout shift 발생
◦
modal이 보일 때 window.innerWidth와 document.documentElement.offsetWidth 사이의 width 차 만큼 padding을 주어 해결
•
모바일 환경에서 onTouchMove 이벤트 발생 시, 브라우저의 '당겨서 새로고침' 유발
◦
html에 overscoll-behavior: none을 적용하여 스크롤 전달 방지
배운점
•
모바일 환경에서 일관된 사용자 경험을 제공하기 위해 노력하였습니다. 터치 이벤트 처리, 반응형 UI 설계, 모바일 브라우저 동작 방식의 차이를 경험하며, 단순한 화면 조정이 아니라 다양한 요소를 종합적으로 고려하여 안정적인 모바일 경험을 제공해야함을 배웠습니다.
•
Next.js를 활용하며 SSR과 SSG의 렌더링 방식 차이를 이해하고, 이를 적절히 적용하기 위해 노력했습니다. 또한, 웹 성능 최적화를 위해 next/image의 자동 이미지 최적화와 localFont의 폰트 로드 방식을 학습하고 사용하며, LCP 개선과 초기 렌더링 속도 향상을 고려한 개발 경험을 쌓을 수 있었습니다.