Project#1 M-MEMOTION (2)

API가 또다시 말썽을 부리다

• 어제까지 잘 되던 API와의 통신이 갑자기 에러가 발생하여 토큰을 받아오지 못하는 것이다.
• 어차피 아직 React에 익숙하지 않으니까 괜히 속도를 내기보다 천천히 짚고 넘어가자고 마음 먹었다.

또다른 삽질(?)의 시작

• 처음엔 문제 없이 잘 되었던 기억을 떠올리며 집요하게 물고 늘어졌다.
• 그러나 바꾸고 바꿔도 해결이 되지 않아 백엔드에 요청하는 쪽으로 방식을 확 틀어버리기로 했다.

의도치 않게 백엔드를 건들다

• 프론트를 어느정도 구현하고 난 다음 백엔드와 연결을 하려고 했으나 에러가 발생한 덕분에(?) Node.js를 사용했다.
  

https://github.com/thelinmichael/spotify-web-api-node

• 진작에 이런 형식의 오픈소스가 많다는 걸 알고 있었으나, 사용법을 찾아보며 일일이 직접 적용해본 것은 이번이 거의 처음이었다. 하지만 너무 간단하고 편해서 이렇게 공부해도 괜찮을까 싶었다.
• 서버에서 경로 /token으로 post 요청이 들어오면 미리 받아둔 access token을 JSON형식으로 클라이언트에 응답하는 식으로 구현하였다.

최신 발매한 앨범을 가져오자

• 컴포넌트를 분리하고, 라우터를 활용하며 단계를 올리고자 하였으나 일단 API를 활용하며 React와 친해지는 시간을 갖기로 했다.
  
• 오픈소스의 힘을 빌려 최신 발매 앨범의 데이터를 손쉽게 가져왔고 이전의 방식과 같이 화면에 나타냈다.

의문점

• useState를 남용(?)하고 있다는 느낌이 든다. 알다시피 음악은 가수, 앨범, 트랙, 이미지 등 세분화되어 있는데 이들을 각각 변수에 담는데 효율적인 방법이 있을까?
• 배열에 담은 원소를 JSX에 나타낼 때 map을 사용하고 있는데, 더 좋은 방법이 있는지 궁금하다.
• useEffect()에 대해 더욱 공부할 필요가 있다. 어떤 코드는 렌더링 상태에 따라 재호출되기도 하는데 이유를 분석하지 못했다.