uri 인코딩할 때 encodeURI vs encodeURIComponent 어떤 함수를 사용하는게 맞을까요?

Question

axios를 사용해서 한글이나 특수문자를 보내야하는 경우가 있습니다., 이때 데이터를 encode하려고 합니다. 보통 encodeURI 또는 encodeURIComponent를 사용하는 것 같은데
하나로  통일하는게 맞을까요? 사용한다면 어떤 함수가 좋을지 또는 다른 인코딩 방법이 있으면 공유해주시면 감사하겠습니다.

성원 · Answer

안녕하세요:)

저는 보통 encodeURIComponent를 사용했습니다. MDN encodeURL 문서를 보면

encodeURL 함수는 ;,/?:@&=+$#과 같은 예약 문자를 인코딩할 수 없어 HTTP get, post시에 부적절한 요청이 갈 수 있다고 언급되어 있습니다. 따라서 예약 문자도 인코딩 할 수 있는 encodeURIComponent를 주로 사용했던 것 같습니다.

참고로 decodeURI, decodeURIComponent는 각각 encodeURI, encodeURIComponent로 인코딩 된 string을 디코드합니다. 따라서 어떤 함수로 인코딩되었는가도 선택요소가 될 것 같습니다.

윤석현 · Answer

encodeURI는 URI 전체를 받기 때문에 쿼리 문자열에 사용되는 <, >, ?, & 같은 문자를 인코딩하지 않습니다. encodeURIComponent는 쿼리 문자열을 받기에 위와 같은 문자도 인코딩 합니다. 따라서 전체 URI 인코딩할 땐 encodeURI, URN 인코딩할 땐 encodeURIComponent 사용합니다.