
개인 프로젝트/[2022] 유튜브 뮤직 클론코딩
[유튜브 뮤직 클론코딩] 3. Fetch API & Node.js 에서 CORS 해결하기
이제 분리한 API 서버 도메인에 접속되는 걸 확인했으니 프론트서버에서 백엔드서버로 요청을 보내고 응답을 받는 것을 테스트해보기로 했다. 현재 프론트에서는 아무런 프레임워크 없이 순수 바닐라 자바스크립트로 만들고 있기 때문에 자바스크립트에서 사용할 수 있는 가장 대표적인 내장 함수인 fetch API 를 사용했다. 우선 프론트엔드의 자바스크립트 파일에서 다음과 같은 코드를 작성했다. 이렇게 REST API 를 이용해서 데이터를 받아오고, 받아온 데이터로 화면에 UI를 뿌리는 것이기 때문에 첫번째 포스팅에서 동적으로 UI를 생성하도록 짰던 코드에서 fetch 를 호출하도록 했다. 이것도 일단 테스트니까 서버에서 받은 데이터를 콘솔에 출력하도록 해봤다. 다음으로 출력할 데이터를 보내줄 서버에 코드를 작성해야..