자바스크립트 URL 인코딩 함수 비교 – encodeURI()와 encodeURIComponent() 함수

자바스크립트 URL 인코딩 함수

자바스크립트에서 URL 인코딩 함수는 encodeURI()와 encodeURIComponent() 함수 두 개가 있습니다.
이 두 함수의 사용 목적 및 차이점에 대해 비교해 보겠습니다.

같이 보기

URL 인코딩 함수 비교

자바스크립트에서 URL 인코딩 함수인 encodeURI()와 encodeURIComponent() 함수 두 개를 표로 비교해 보겠습니다.

자바스크립트에서 URL 인코딩 함수인 encodeURI() 함수와 encodeURIComponent() 함수 두 개를 표로 비교
특징	`encodeURI()`	`encodeURIComponent()`
사용 목적	일부 특수문자를 제외한 URI를 인코딩	URI Component를 인코딩
사용 대상	전체 URI를 인코딩하는 데 사용	쿼리 문자열 내 각 값들을 인코딩하는 데 사용
인코딩되지 않는 문자	A-Z a-z 0-9 ; , / ? : @ & = + $ - _ . ! ~ * ' ( ) #	A-Z a-z 0-9 - _ . ! ~ * ' ( )
XMLHttpRequest 요청에서의 사용	부적합함 - 특수 문자가 제대로 처리되지 않음	적합함 - 특수 문자가 인코딩되어 올바르게 처리됨

encodeURI() 함수와 encodeURIComponent() 함수 두 개의 차이점을 코드 예시로 보겠습니다.

JavaScript 출처링크: https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/encodeURIComponent#%EC%84%A4%EB%AA%85

const set1 = ";,/?:@&=+$"; // 예약된 문자 (Reserved Characters)
const set2 = "-_.!~*'()"; // 예약되지 않은 문자 (Unescaped Characters)
const set3 = "#"; // Number Sign
const set4 = "ABC abc 123"; // 알파벳과 숫자 문자 + 공백

console.log(encodeURI(set1)); // ;,/?:@&=+$
console.log(encodeURI(set2)); // -_.!~*'()
console.log(encodeURI(set3)); // #
console.log(encodeURI(set4)); // ABC%20abc%20123 (공백이 %20으로 인코딩됨)

console.log(encodeURIComponent(set1)); // %3B%2C%2F%3F%3A%40%26%3D%2B%24
console.log(encodeURIComponent(set2)); // -_.!~*'()
console.log(encodeURIComponent(set3)); // %23
console.log(encodeURIComponent(set4)); // ABC%20abc%20123 (공백이 %20으로 인코딩됨)

위의 결과에서 볼 수 있듯이

encodeURI() 함수는 URI의 일부로 간주되는 문자들을 제외하고 몇몇 특수 문자를 인코딩하지 않습니다. 공백은 %20으로 인코딩되며, set1과 set2의 결과에서는 특수 문자 중 일부가 인코딩되지 않았습니다.
encodeURIComponent() 함수는 거의 모든 특수 문자를 인코딩하며, 모든 문자에 적용됩니다. set1, set2, set3, set4의 결과에서는 모든 특수 문자와 공백이 인코딩되었습니다.

이러한 결과를 통해 encodeURI() 함수와 encodeURIComponent() 함수의 동작과 차이를 알 수 있습니다.

권장사항 및 주의 사항

아래 표에 encodeURI()와 encodeURIComponent() 함수 사용 시 권장사항 및 주의사항을 정리해보았습니다.

자바스크립트 URL 인코딩 함수 사용 시 권장사항 및 주의 사항
항목	권장사항	주의사항
HTTP 요청 생성 시 데이터 인코딩	`encodeURIComponent()` 함수를 사용하여 데이터 인코딩	특수 문자와 공백 처리에 주의
URL 구성요소 인코딩	`encodeURI()` 함수 사용	URI 전체 인코딩이 필요한 경우 사용
외부 입력 검증	외부 데이터 포함 시 검증 및 처리	보안 문제 예방 필요
URL 길이 제한 확인	길이 제한 고려	최대 길이를 초과하지 않도록 주의
특수 문자 처리	`encodeURIComponent()` 함수 사용	`encodeURI()` 함수는 특수 문자 처리 고려 필요
GET 및 POST 요청 함수 선택	GET에는 `encodeURIComponent()` 함수 사용, POST에는 필요에 따라 선택	요청 방식에 따라 함수 선택
환경 호환성 확인	다양한 환경에서 동작 검증 필요	동작이 예상과 다를 수 있을 수 있음

한 가지 추가 설명을 하자면, URL 인코딩은 보안을 위해 필요한 작업이지만, 보안을 완벽하게 보장하지는 못합니다. URL 인코딩을 통해 특수 문자와 공백을 인코딩하면 보안 문제를 예방하는 데 도움이 되지만, 모든 보안 문제를 해결할 수는 없습니다. 따라서, URL 인코딩 외에도 다른 보안 조치를 함께 취하는 것이 좋습니다.

명세서

자바스크립트 URL 인코딩 함수 명세서 사양
명세서 사양
`encodeURI()`	ECMAScript Language Specification #sec-encodeuri-uri
`encodeURIComponent()`	ECMAScript Language Specification #sec-encodeuricomponent-uricomponent