TIL | 네이버 오픈 API 사용 시 utf-8로 인코딩하기

네이버 오픈 API를 사용해 토이프로젝트를 진행하는 중에 생각하지도 못한 곳에서 에러때문에 시간을 많이 썼다. 사실 API 도큐먼트를 잘 읽어봤어야 했는데 대충 읽고 일단 가져다 쓴 내 잘못이긴 하지만 ^^

검색을 할때 query에 문자열을 그대로 넣는 것이 아니라 UTF-8로 인코딩해서 넣었어야 했다.
포스트맨에서 API를 불러올땐 잘돼길래 그냥 썼는데 막상 프로젝트를 실행하니 400에러가 떴다.
친절하게 에러 코드도 나와있었는데...

아무튼 쿼리부분을 그냥 한글로 써서 보내면 이렇게 요청이 간다.

저 특수문자와 영어가 섞인 부분의 URI 영역을 인코딩해서 요청해야 한다. 자바스크립트에서 encodeURI를 사용하면 된다.

이렇게 작성해주었다니 잘 동작한다!

export const getBookList = (query: string, sort: string, start = 1) => {
  return axios.get(encodeURI(`${BASE_URL}`), {
    params: {
      query,
      sort,
      start,
      display: 20,
    },
  });
};