2.2.3 encodeURIComponent, decodeURIComponent

AJAX 요청을 보낼 때, ‘http://localhost:4000/search/노드’처럼 주소에 한글이 들어가는 경우가 있습니다. 서버 종류에 따라 다르지만 서버가 한글 주소를 이해하지 못하는 경우가 있는데, 이럴 때 window 객체의 메서드인 encodeURIComponent 메서드를 사용합니다. 이 메서드는 노드에서도 사용할 수 있습니다.

한글 주소 부분만 encodeURIComponent 메서드로 감쌉니다.

(async () => {
  try {
    const result = await axios.get(`https://www.zerocho.com/api/search/${encodeURIComponent('노드')}`);
    console.log(result);
    console.log(result.data); // {}
  } catch (error) {
    console.error(error);
  }
})();

노드라는 한글 주소가 %EB%85%B8%EB%93%9C라는 문자열로 변환되었습니다.

받는 쪽에서는 decodeURIComponent를 사용하면 됩니다. 역시 브라우저뿐만 아니라 노드에서도 사용할 수 있습니다.

decodeURIComponent('%EB%85%B8%EB%93%9C'); // 노드

한글이 다시 원래 상태로 복구되었습니다. 이후에 나오는 예제에서 encodeURIComponent와 decodeURIComponent를 쓰는 경우를 보게 될 텐데, 한글을 처리하기 위한 것이라고 생각하면 됩니다.