원하는 아티스트의 이름을 박스에 적고 버튼을 누르면 서버로부터 해당 가수의 노래들과 가사들을 가져온다.
아티스트의 노래 중 원하는 노래를 선택하면 가사를 볼 수 있다.
1. express로 서버와 클라이언트를 연결해주는 브라우져 만들기.
외부 api에 정보를 요청할 때 fetch를 사용하는 것만으로 정보를 가져올 수 없었다.
=> express로 외부 api와 클라이언트를 이어줄 수 있는 매개 서버를 구축하고 axios라는 것을 사용해서 외부 api로부터 정보를 요청해서 가져올 수 있었다.
2. 한국어로 검색했을 때 에러문제
query에 한국어로 검색했을 경우 url에 관한 에러가 발생한다.
이때 encodeURI(요청 주소)를 사용하면 해당 에러를 해결할 수 있다. [encodeURI는 익스프레스에서 지원을 해준다고 한다.]
3.finally 사용
왼쪽 코드를 사용했을 때 가수 이름을 검색어에 입력하고 버튼을 누르면 맨 처음에는 잘 작동하지만
2번째 검색 시 첫 번째 검색 결과 + 두 번째 검색 결과가 겹쳐서 나오는 문제가 발생했다.
이 문제를 해결하기 위해서 finally를 사용했다.
4. gif 사용법
실습
댓글