Fundamentals를 다 듣고 뒷 내용을 듣다가 오류난 부분 해결 방법을 공유하고자 한다.
댓글이나 Issue를 보고 대부분 해결을 했겠지만 어떤 에러인지 조금 더 자세히 살펴보자.
(해결책만 필요하신 분은 아래를 참고해주세요.😄)

👉 TMDb란?

TMDb란 Themoviedb라는 홈페이지의 약어이다. 영화, TV와 관련된 여러가지 정보를 제공해준다.
API Overview를 보면 Our API is available for everyone to use라고 나와있다. 아무나 API를 사용할 수 있으며 API 키를 요청하려면 TMDb 사용자 계정이 필요하다.
Nomad coder의 React 강의에서는 TMDb의 API를 사용해서 실습을 진행하는데 에러가 나와서 애를 먹었다.

👉 Axios 에러

먼저 Axios의 Document를 살펴보면 Promise based HTTP client for the browser and node.js라고 나와있다. 번역을 해보면 Promise 기반의 node.js와 브라우저를 위한 http통신 javascript 라이브러리이다.
그러면 Promise란 무엇인지 궁금할 것이다. Promise는 A promise is an object that may produce a single value some time in the future로 정의되며 자바스크립트 비동기 처리에 사용되는 객체이다.(참고: CAPTAIN PANGYO님 블로그, MDN)
완벽히 이해가 안되더라도 비동기 방식의 http 통신 javascript 라이브러리라고 이해하자!

Document에서 알려주는 Axios의 설치는 아래와 같은 방법이 있다.

npm
npm install axios
bower
bower install axios
yarn
yarn add axios
jsDelivr CDN
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
unpkg CDN
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

나는 yarn을 사용해서 설치를 했다. 설치 된 버젼은 0.19.2였다.
그런데 TMDb Api에서 정보를 받아오는 코드를 작성했는데 계속 에러가 발생했다.

const api = axios.create({
  baseURL: "https://api.themoviedb.org/3/",
  params: {
    api_key: "mykey",
    language: "en-US",
  },
});

api.get("tv/popular");

에러 코드를 살펴보니 7번으로 HTTP Status는 401이 나왔다.
API Status Codes Document를 살펴보니 Invalid API key: You must be granted a valid key.라는 에러라고 한다. API key를 줬는데 왜 안될까 고민을 했다,,, console.log로 에러를 살펴보니 params를 못 읽어드리는 거 같았다🤔
같은 에러를 겪은 분의 댓글을 보니 Axios 0.19 버젼의 에러라고 한다. 따라서 0.18 버젼을 사용하면 해결이 된다는데 나는 0.19버젼에도 해결책이 있지 않을까 찾아봤다!

하지만 어림도 없지,,,!

https://github.com/axios/axios/issues/2190
https://github.com/axios/axios/issues/2230

위의 링크를 살펴보니 0.19 버젼의 regression bug라는 거 같다. 그리고 0.2버젼에서는 해결을 했다는데 Pre-release 버젼이다. 따라서 나는 axios를 삭제하고 다시 낮은 버젼을 설치했다. 방법은 아래와 같다.

yarn remove axios
yarn add axios@0.18.0

낮은 버젼을 사용하니 정상적으로 통신되는 것을 알 수 있었다.

👉 TMDb encoding 에러

위의 에러를 해결하고 공부를 하는데 댓글에 TMDb의 search api의 query에 한글 값을 encodeURIComponent로 처리해서 전달하면 에러가 난다고 해서 검색을 해보았다.
공식 API Document를 살펴보면 query는 This value should be URI encoded.라고 나와있다. 즉, encoding된 값을 넘겨줘야하므로 에러가 나면 안 될 것이다. 하지만 에러가 발생했고, 에러를 알려준 분은 encoding이 두 번 되서 에러가 발생한 거 같다고 했다.
에러가 발생한 코드는 아래와 같다.

search: (term) =>
    api.get("search/movie", {
      params: {
        query: encodeURIComponent(term),
        // api가 axios.create로 생성되는데 아마 생성될 때 encoding이 되는 것 같다.
      },
    }

그래서 MDN에서 encodeURIComponent()를 검색해봤다.
그리고 다양한 실험을 해봤는데 아래와 같은 결과를 확인할 수 있었다.

1번과 2번을 살펴보면 알 수 있듯이 영어는 encode를 해도 hello가 출력되서 입력 값을 영어로 줬을 때는 값에 변화가 없어서 문제가 없었던 것 같다. 하지만 한글로 줬을 때는 3번과 7번에서 알 수 있듯이 encoding을 할 수록 값이 바뀐다. 즉, axios에서 encodeURIComponent("한글")을 하면 7번처럼 encoding이 두 번 동작하므로(사용자가 한번, axios가 한번) 올바른 결과를 가져오지 못 하는 것이다.
따라서 해결책은 decodeURIComponent를 사용해서 값의 변화를 주지 않거나 그냥 encodeURIComponent 없이 term을 주면 된다. 알아서 axios가 encode 해주니깐!😮

👉 정리

Axios 0.19 버젼에 버그가 있으므로 0.18버젼을 사용하거나 0.2 버젼(pre-release)을 사용한다.

해결법

yarn remove axios
yarn add axios@0.18.0

TMDb encodeURIComponent 에러는 axios에서 encode를 해주므로 내가 원하지 않는 값이 전달되므로 올바른 결과를 가져오지 못 하는 것이다.

해결법

search: (term) =>
    api.get("search/movie", {
      params: {
        query: (term),
        },
    }

이상으로 노마드코더의 react 멤버쉽 강좌를 듣다가 오류나는 부분을 정리해봤다.
혹시 잘못된 부분이 있다면 수정하겠습니다!😅

---

📑 참고 사이트

• Themoviedb - TMDb

• TMDb API Document - TMDb API

• Axios - Axios Github

• Promise - CAPTAIN PANGYO님 블로그, MDN

• Axios 에러 - 이슈1, 이슈2

• encodeURIComponent - MDN