단순히 음악 듣는 것을 좋아해서 시작해 본 작은 프로젝트 MULA!
그동안 자격증 준비한답시고 코드에 소홀해진 탓에 기억을 되짚어볼 겸 만들어봤다
사실 금방 만들 수 있을 줄 알았는데 생각보다 우여곡절이 많아 쩔쩔매기도 했다
쩔쩔 스토리를 살짜쿵 풀고 기록해봅니다
https://github.com/may-jan/MusicLife_MULA
https://musiclife-mula.netlify.app/
✏️ 시작
1. UI 구성
우선 핀터레스트에서 음악어플 UI를 검색해 보고 Figma로 어느 정도 원하는 시안을 만들어놓고 시작했다
대략 어떤 어떤 페이지를 만들고 싶다 정도?
그래서 초반에 생각한 페이지는 이게 다였다
하지만 처음부터 대략적으로 말고 구체적으로 구상을 했어야 한다
작게 시작하는 프로젝트일지라도 결국 기능이나 페이지를 하나씩 붙이고 나면 복잡해지기 때문...
어떤 페이지를 만들어서 router를 어떻게 적용할 건지, 데이터는 어떤 식으로 저장하고 사용할 건지 등
세부적인 것들을 더 미리 정했다면 좋았을 것 같다
2. 로고
로고를 만들었다!
그냥 텍스트로만 이루어진 로고보다는
시각적으로 무언가 보이는 게 좋을 것 같다는 생각을 했다
Q . Music Life 인데 왜 MULA야???
A. 뮤직라이프 → 뮤라 → MULA (그냥 이렇게 하고 싶었어요..)
......🤔
처음에는 일단 그냥 텍스트를 나열했다
바로 수정 고고
알파벳끼리 되는대로 끼워 맞춰봤는데 쪼금은 그럴싸하다는 생각이?
그래서 메인 컬러로 정해뒀던 색을 입히고 발전시켜봤다
그럴싸하지 않나요?!
꽤나 맘에 들어서 이대로 진행!
✏️ 로그인 구현
가장 먼저 홈 화면을 만든 뒤 로그인 구현부터 시작했는데
막혀서 며칠 동안 만지고 다듬느라 꽤나 오랜 시간이 걸린 것 같다
서칭을 엄청나게 했고.. 우연히 React + Spotify API를 사용하신 분의 블로그를 보고 성공했다!
그리고 axios를 처음 써봤다!
✏️ 로그인 토큰 저장
처음에는 토큰을 local Storage에 저장했다
그런데 문제가 생겼다
로그인
→ 어플 사용 후 로그아웃 안 하고 창을 끔
→ 나중에 다시 접속 (1시간 뒤)
→ 로그인 상태로 확인되지만 Spotify API에서 데이터를 받아올 수 없어 에러 발생
검색해 보니 Spotify API는 1시간이 지나면 토큰이 만료되는 것 같다
local Storage는 새롭게 접속하더라도 기존 데이터가 계속 유지가 된다
반면 session Storage는 새롭게 접속하면 기존 데이터가 초기화된다
그래서!
로그아웃을 안 하고 창을 끄더라도
재접속 했을 때 초기 상태를 로그아웃 상태로 만들 수 있는 session Storage가 더 적합하다고 판단하고
토큰을 session Storage에 저장하는 것으로 변경했다
✏️ 자동 로그아웃
일단 Spotify API는 1시간마다 토큰이 만료된다고 했는데 여기서 고려해야 할 점이 하나 더 있었다
사용자가 로그인 후 앱을 사용하고 있는데 갑자기 토큰이 만료되면?
사용자는 영문도 모르고 앱을 사용할 수 없는 상태가 되어버린다는 것이다
토큰 refresh를 하고 싶어서 이것저것 시도해 봤지만 실패했다
그래서 일단 로그인 후 1시간이 지나면
1. alert 창으로 경고 문구를 띄우고
2. 자동으로 로그아웃 되고
3. 처음 화면으로 되돌아가도록
설정해두었다
이 부분은 좀 더 발전시켜 나가야 할 부분인 것 같다
✏️ 첫 화면 (로그인 유무)
로그인을 하지 않으면 (토큰이 없으면)
Spotify API로부터 아무런 정보를 받아올 수 없기 때문에 화면에 아무것도 표현할 수가 없다
그래서 처음 접속하면 무조건 로그인을 하라는 안내를 화면에 나타나도록 설정하고
로그인을 하면 추천 플레이리스트가 나타나도록 설정했다
이 화면은 처음에 고려하지 못했던 부분이라 중간에 급히 추가했다
✏️ props, Context API, localStorage
허술하게 시작한 탓에 애를 먹었던 부분 중 하나
props로 데이터를 넘겨줄 일이 많이 없거라고 생각하고 props를 사용했다
오산이었고 또 잔뜩 뜯어고치기 시작했다
먼저 Context API를 사용해서 필요한 데이터를 저장했다
하지만! 새로고침 혹은 다른 페이지로 넘어갔을 때 데이터가 유지되지 않는 현상이 발생했다
검색해 보니
Context는 컴포넌트 트리 전체에서 전역 상태를 공유하는 데 사용되지만
메모리에 저장되므로 브라우저를 새로고침하거나 페이지를 닫았다가 다시 열면 초기화된다라고 한다
그러니까 Context API는 props drilling의 비효율성을 해결해 주지만
기존 상태를 계속해서 유지하거나 알아서 업데이트해주는 기능은 없는 듯하다
그래서 필요한 데이터를 localStorage에 저장할 수 있도록 바꿨다
Recoil이나 Redux 같은 상태 관리 라이브러리를 공부해 봐야겠다는 생각이 들었다
Recoil은 예전에 교육 프로그램에서 팀 프로젝트 진행할 때 써봤는데 정말 살짝 맛보기만 해서 잘 모르긴 한다
✏️ 긴 텍스트 처리
얼추 만들어놓고 보니
너무나 긴 텍스트를 가지고 있는 곡 제목과 아티스트 이름을 끝까지 볼 수 없었다
그래서 처음에는 css 애니메이션으로 움직였지만 각 텍스트의 길이가 다르다 보니 속도가 전부 달랐다
내가 원했던 조건은 2개이다
1. 텍스트의 길이가 다르더라도 모두 똑같은 속도로 움직일 것
2. 각자의 텍스트 길이에 맞게 끝까지 보인 뒤 다시 재생하기
이런저런 방법을 적용해 봤지만 생각만큼 잘되지 않았다
그래서 처음으로 gpt의 도움을 받아봤는데
해당 텍스트의 width를 파악하고, 그 텍스트의 길이에 따라 일정한 속도로 움직일 수 있는 방법이었다
이 기능을 TextFlow.jsx라는 컴포넌트로 만들었는데
곡 제목을 나타낼 때에는 문제가 없었지만 아티스트 이름을 나타낼 때 한 번 더 문제가 생겼다
아티스트가 여러 명인 곡이 있기 때문에 배열로 받아와서 나열 시켜줘야 했다
그래서
1. props를 받고
2. 이 props가 배열인 경우에
3. 먼저 아티스트를 나열하고
4. 텍스트가 흘러가도록
만들었다
✏️ CSS
-
공통적으로 사용하는 스타일은 최상단인
App.css에 함수로 만들어주었다 -
중복되는 UI는 같은 className을 설정해 주고 최상단인
App.css에 적용시켰다
→ 사실 이 작업은 이미 각 css 파일마다 하드코딩 해놓고
나중에서야 '아! 중복되니까 최상단 css에서 하나로 합쳐야겠다!' 하고 뒤늦게 합쳤다
왜 처음부터 생각을 못 했을까😂
다음부턴 <코드 짜기 전 주의사항> 이런 거 만들어놓고 이걸 보고 시작해야겠다
✏️ 오류 발생 시 해결했던 방법
-
개발자 도구 이용
console에 하나씩 찍어보기
오류 메시지 해석하기 -
구글링
개인 블로그, mdn, stackoverflow, 공식 문서 등 -
해결이 안 되는 경우
조각조각 뜯어서 코드를 하나씩 돌려보기 -
그래도 안되면 gpt에 물어보기
🔁 develop (계속 수정중)
- 생각보다 파일 이름 정하는 게 굉장히 어려웠다..
- Spotify API 토큰을 refresh 할 수 있는 방법이 있을까?
- ⭕ 해결 완료 ⭕
jsx 파일을 그냥 무지막지하게 components 폴더 안에 만들어놨다
그런데 이걸 좀 체계적으로(?) 나누고 싶은데 어떻게 나눠야 할지 감이 안 잡힌다
➕ 07.09
맞는지 아닌지는 모르겠지만 일단 폴더를 몇개로 나눴다
➕ 07.20
기존의 여러 파일에 axios 함수랑 여러가지가 마구잡이로 들어가 있어서
axios 함수를 따로 빼내고utils폴더에 넣기로 했다
- ⭕ 해결 완료 ⭕
context 대신 firebase를 연동하면 어떨까?
나중에 플레이리스트나 하트 찜 기능을 추가한다면 firebase가 더 편할 것 같기도 하다
➕ 07.27
플레이리스트 기능 구현은 끝났고 찜하기 기능은 firebase를 연동하려 했는데,
찾아보니 찜한 목록에 대한 API가 있어서 firebase 대신 이걸 활용하기로 했다!
- ⭕ 해결 완료 ⭕
마이페이지 : 플레이 리스트 (플레이 리스트에 추가, 삭제 기능)
마이페이지 : 하트 찜 누른 곡 모아보기 (하트 찜 누르기 기능)
➕ 07.10 ~
브랜치 생성해서(develop) 작업중
➕ 07.20 ~ 07.22
플레이리스트에 곡을 추가하는 기능에서 막혔다
API 요청 문제 같은데 아무리 해봐도 해결이 안되는 중이라서 열심히 삽질중..🥲
추가하기 기능 구현 성공!! (07.22)
로그인할 때 html 형태를 살짝 바꿔서 onClick 했을 때 로그인이 진행되도록 변경했고,
SCOPE 옵션을 추가했더니 된다!
➕ 07.23~ 07.25
플레이리스트에서 곡을 삭제하는 기능 추가 완료!
then catch 와 try catch 의 차이점이 뭘까? → try~catch 와 then~catch 의 차이점 (08.05)
➕ 07.26 ~ 07.29
찜한 목록 페이지 기능 구현과 찜하기 추가 삭제 기능까지 완성!
- 07.31
Music.jsx 페이지에서 아티스트의 이름을 클릭하면 Artist.jsx로 넘어갈 수 있도록 수정
- 08.01
플레이리스트 생성하기 기능 추가
생각날 때마다 추가 예정 ✏️
