오늘은 자바스크립트의 encodeURIComponent와 decodeURIComponent에 대한 내용을 주제로 정리해 보려고 한다. encodeURI, decodeURI와 유사하지만 예약된 문자를 조금 더 인코딩 & 디코딩해주는 차이가 있다. 웹 애플리케이션을 개발한다면 URL에 속한 URI가 정말 중요한 요소이고, 상황에 따라서 이 URI를 인코딩 & 디코딩하는 것은 매우 중요한 작업이다. 자바스크립트에서는 이 작업을 간편하게 처리할 수 있도록 두 함수를 제공하고 있으며, 각 함수가 어떤 특징이 있는지 하나씩 살펴보도록 하자.
encodeURIComponent
encodeURIComponent 함수는 URI 구성 요소를 안전하게 인코딩하는 데 사용된다. 이 함수는 URI에서 특수한 의미를 갖는 문자를 나타내는데 사용되는 문자를 예약된 문자로 변환한다.
안전한 문자열 생성
encodeURIComponent 함수를 사용하여 생성된 문자열은 URI에서 안전하게 사용할 수 있는 형식으로 변환한다. 이 함수는 URI에 사용할 수 없는 문자를 해당 문자의 ASCII 값으로 인코딩하여 전송할 수 있게 한다.
예약된 문자 처리
URI에서는 특수한 의미를 갖는 일부 문자가 예약되어 있다. 이러한 문자를 URI에 직접 사용할 수 없으며, 대신에 해당 문자를 나타내는 이스케이프 시퀀스를 사용해야 한다. encodeURIComponent 함수는 이러한 예약된 문자를 안전하게 인코딩하여 URI에 포함될 수 있도록 한다.
공백 및 특수 문자 처리
주소 라인에서 공백이나 특수 문자는 예약된 문자로 간주되지 않기 때문에 직접 포함될 수 없다. encodeURIComponent 함수는 이러한 문자들을 해당하는 이스케이프 시퀀스로 변환하여 URI에 안전하게 포함될 수 있도록 한다.
encodeURIComponent 함수는 URI의 일부로 사용할 수 없는 문자들을 안전하게 처리하여 URI를 올바르게 인코딩하는 데 사용된다. 이를 통해서 데이터를 조금 더 안전하게 전송하고 해석할 수 있다.
encodeURI와의 차이
encodeURIComponent와 encodeURI는 모두 자바스크립트에서 URI를 인코딩하는 데 사용되지만, 조금 다른 차이가 있다.
인코딩 범위
encodeURI
URI 전체를 인코딩하는데, URI를 구성하는 모든 부분에 대해 인코딩하지만, 예약된 문자를 제외한 일부 특수 문자는 인코딩하지 않는다.
encodeURIComponent
URI 구성 요소 중에서 예약 문자를 포함한 모든 문자를 인코딩한다. URI 구성 요소의 일부로 사용할 수 없는 모든 문자를 인코딩하므로, 예약된 문자를 포함하여 모든 문자가 인코딩 된다.
적용 범위
encodeURI
전체 URI를 인코딩하는 데 사용된다. 일반적으로 주소 라인을 인코딩할 때 사용된다.
encodeURIComponent
URI의 일부로 사용되는 각 구성 요소를 인코딩하는 데 사용된다.
인코딩 여부
encodeURI
일부 특수 문자를 인코딩하지 않는다. 따라서 URI의 기본 구조를 유지하면서 안전하게 인코딩한다.
encodeURIComponent
URI의 모든 부분을 안전하게 인코딩한다. 이 함수를 사용하면 모든 문자가 인코딩 되므로, URI의 일부로 사용될 수 없는 문자도 인코딩 된다.
위의 정리한 바와 같이 간단히 정리해, encodeURI는 URI 전체를 인코딩하고 일부 특수 문자를 제외한다. 반면에 encodeURIComponent는 URI의 모든 부분을 안전하게 인코딩하고, 일반적으로 쿼리 매개변수 값과 같은 URI 구성 요소를 인코딩할 때에는 encodeURIComponent를 사용하고, URI 전체를 인코딩할 때에는 encodeURI를 사용하면 된다.
encodeURIComponent 예제
- 기능 설명 : 문자열에서 예약된 문자를 포함하여 일반 문자를 모두 UTF-8로 encoding 시켜주는 기능
TEXT encoding
<script>
// 평문 문자열
const text = '안녕하세요';
// 평문 문자열 encoding
const encText = encodeURIComponent(text);
console.log('문자열 encodeURIComponent : ' + encText);
</script>위의 코드는 일반 text 평문 문자열을 encodeURIComponent를 사용하여 encoding을 해주는 코드다.
실행 결과는 encodeURI와 크게 다르지 않은 결과다.
URL encoding
<script>
// url 문자열
var url = 'http://localhost:8080/test?안녕하세요';
// url 평문 문자열 -> encoding
const encUrl = encodeURIComponent(url);
console.log('encodeURIComponent : ' + encUrl);
</script>위의 코드는 URL 문자열 정보를 encodeURIComponent를 사용하여 encoding 하는 코드다.
실행 결과는 encodeURI를 사용하여 encoding 했을 때와는 조금 다른 결과를 보여주고 있다.
encodeURI으로 인코딩을 하게 되면 '?', '/', ':'와 같은 특수 기호들은 인코딩이 되지 않지만, encodeURIComponent는 예약된 문자를 포함하여 encoding을 시켜주도록 구현된 기능이기 때문에 위와 같은 결과가 나오고 있다.
예약 문자 encoding
<script>
// 예약 문자열
var reg = ';,/?:@&=+$#-_.!~*()abcABC123';
// 예약 평문 문자열 -> encoding
const encReg = encodeURIComponent(reg);
console.log('encodeURIComponent : ' + encReg);
</script>위의 코드는 예약된 문자 값이 어디까지 인코딩이 되는지 확인하는 예제 코드다.
위와 같이 실행 결과는 일부 인코딩이 되지 않은 문자가 확인되고 있다. 거의 대부분 encoding이 된 것 같지만 여전히 평문으로 남아있는 문자가 있다.
encodeURIComponent를 사용하여 encoding을 하는 경우
encoding 가능 문자
; , / ? : @ & = + $ #encoding 불가능 문자
- _ . ! ~ * ( ) a-z A-Z 0-9위와 같이 encodeURIComponent도 encoding이 불가능한 문자가 있다는 것을 확인할 수 있었다. 일부 특수 기호와 알파벳, 숫자는 encoding이 되지 않는다.
decodeURIComponent
decodeURIComponent 함수는 URI 구성 요소를 디코딩하는 데 주로 사용된다. encodeURIComponent 함수로 인코딩된 URI 컴포넌트를 원래의 형태로 디코딩하며, URI 컴포넌트에 사용된 이스케이프 문자를 해당 문자로 변환하여 원래의 문자열로 돌려주게 되는 기능이다.
URI 컴포넌트 인코딩
decodeURIComponent 함수는 encodeURIComponent 함수로 인코딩된 URI 컴포넌트를 디코딩하며, 이를 통해 URI 컴포넌트에 사용된 이스케이프 문자를 해당 문자로 변환하여 원래의 문자열로 디코딩한다.
이스케이프 문자
URI에서는 특수한 의미를 갖는 문자들이 있는데, 이러한 문자들을 표현하기 위해 이스케이프 문자가 사용된다. decodeURIComponent 함수는 URI에서 사용된 이스케이프 문자를 해당 문자로 변환하여 원래의 문자열로 디코딩한다.
전체 문자열 디코딩
decodeURIComponent 함수는 URI 컴포넌트의 모든 부분을 디코딩한다. 따라서 인코딩된 URI 컴포넌트 전체를 함수에 전달하면 전체 문자열이 디코딩된다.
문자열 처리의 유연성
decodeURIComponent 함수는 문자열을 디코딩하는 데 유연성을 제공하며, 인코딩된 URI 컴포넌트를 디코딩할 때 누락된 문자나 잘못된 형식의 문자열이 있더라도 함수는 오류 없이 처리할 수 있다.
이와 같은 특징들은 decodeURIComponent 함수를 사용하여 URI 컴포넌트를 안전하게 디코딩하고, 문자열을 처리하는 데 유연하게 기능을 제공한다. 따라서 이 함수는 웹 애플리케이션에서 URI를 안전하게 처리하는 데 중요한 역할을 한다.
decodeURI와의 차이
decodeURIComponent와 decodeURI 함수 역시 인코딩과 반대되는 개념이며, URI를 디코딩하는 공통점은 있지만 약간의 차이가 있다.
적용 범위
decodeURI
전체 URI를 디코딩하며, URI 전체를 디코딩하므로, URI의 모든 부분을 디코딩한다.
decodeURIComponent
URI 컴포넌트의 일부를 디코딩하며, 주로 URI 컴포넌트를 디코딩하는 데 사용된다.
인코딩 범위
decodeURI
URI 전체에서 예약 문자를 제외한 문자를 디코딩한다.
decodeURIComponent
URI 컴포넌트의 예약된 문자를 포함한 모든 문자를 디코딩한다.
위와 같이 decodeURI는 전체 URI에서 예약 문자를 제외하고 디코딩하고, decodeURIComponent는 URI 컴포넌트는 예약 문자를 포함하여 전체를 디코딩한다. 사용할 때 인코딩된 URI 전체인지, 아니면 URI의 일부인지에 따라 두 함수 중 하나를 선택하여 사용하면 된다.
decodeURIComponent 예제
- 기능 설명 : UTF-8로 encoding된 문자열에서 예약된 문자를 포함하여 문자를 모두 평문으로 decoding 시켜주는 기능
TEXT decoding
<script>
// 평문 문자열
const text = '안녕하세요';
// 평문 문자열 encoding
const encText = encodeURIComponent(text);
// encoding 문자열 -> decoding
const decText = decodeURIComponent(encText);
console.log('문자열 encodeURIComponent : ' + encText);
console.log('문자열 decodeURIComponent : ' + decText);
</script>위의 코드는 위에서 수행했던 encoding된 TEXT 문자열을 다시 decodeURIComponent를 사용하여 decoding 하는 코드다.
encodeURIComponent로 인코딩을 하였으니 decodeURI가 아닌 decodeURIComponent로 디코딩을 시켜줘야 한다.
실행 결과는 일반 문자라 decoding하는데 크게 문제가 없어 보인다.
URL encoding
<script>
// url 문자열
var url = 'http://localhost:8080/test?안녕하세요';
// url 평문 문자열 -> encoding
const encUrl = encodeURIComponent(url);
// url encoding -> decoding
const decUrl = decodeURIComponent(encUrl);
console.log('URL encodeURIComponent : ' + encUrl);
console.log('URL decodeURIComponent : ' + decUrl);
</script>위의 코드는 URL 문자열 역시 위에서 수행했던 코드에서 decodeURIComponent를 사용하여 decoding 하였다.
decodeURIComponent 역시 예약된 문자 일부를 제외하고 decoding을 하게 된다. encoding을 할 때 이미 일부 문자를 encoding을 하지 않았기 때문에 decoding 할 때에도 크게 차이는 없다.
마무리
오늘은 이렇게 자바스크립트의 encodeURIComponent와 decodeURIComponent의 사용 방법과 기능에 대해 정리해 봤다. 처음 이야기한 바와 같이 웹 애플리케이션에서 URI를 다루는 일은 중요한 작업이며, 상황에 따라 일반적인 encodeURI를 사용할지, 예약 문자까지 포함하여 encodeURIComponent를 사용할지 두 차이를 알고 사용하는 것이 매우 중요하다. 그리고 encodeURI로 인코딩했다면 반드시 decodeURI로 디코딩해야 하고, encodeURIComponent를 사용하여 인코딩했다면 decodeURIComponent를 사용하여 디코딩 시켜줘야 한다. 자바스크립트뿐만 아니라 다른 언어에서도 마찬가지로 인코딩과 디코딩의 개념은 거의 동일하기 때문에 이를 통해 학습해 둔다면 다양한 언어와 상황에서 활용할 수 있다.
