두 함수 한 표에 비교
JavaScript에는 URL 인코딩 함수 두 개가 있다. encodeURI()와 encodeURIComponent(). 비슷해 보이지만 차이가 있다. 한 번 점검표로 정리.
비교 1: encodeURI
- URL 전체 인코딩
- 특수문자 :, /, ?, #, &, = 등은 인코딩 안 함
- 전체 URL 문자열에 적용
URL 전체를 통째로 처리할 때 사용.
비교 2: encodeURIComponent
- URL 한 부분 인코딩
- 특수문자 모두 인코딩
- 쿼리 파라미터 값에 자주 사용
URL의 한 조각(쿼리 값 등)을 처리할 때 사용.
비교 3: 인코딩 결과 차이
"hello world?key=value" 입력 시:
- encodeURI → "hello%20world?key=value" (?·= 그대로)
- encodeURIComponent → "hello%20world%3Fkey%3Dvalue" (모두 인코딩)
비교 4: 사용 자리
- encodeURI → 완성된 URL 한 번 처리
- encodeURIComponent → 파라미터 값 개별 처리
비교 5: 추천 흐름
API 호출 시 일반적으로 encodeURIComponent 사용 권장. 파라미터 값 안에 &·= 같은 특수문자가 들어가도 안전하게 처리. URL 인코더는 보통 encodeURIComponent 동작.
비교 6: 디코딩
- decodeURI → encodeURI의 반대
- decodeURIComponent → encodeURIComponent의 반대
점검 체크리스트
- 인코딩 대상이 전체 URL인가, 한 부분인가
- 특수문자가 그대로 유지되어야 하는가
- API 호출 파라미터인가
- 도구 결과가 의도와 일치하는가
URI 인코딩 도구로 두 가지 결과 비교 가능.
마무리
두 함수는 자리가 다르다. 점검 항목을 거쳐 두면 본인 자리에 맞는 함수 선택이 빠르다.