URL 인코딩
인코딩은 데이터를 다른 포맷(형식)으로 변환한다는 뜻입니다. URL 인코딩은 URL에서 사용할 수 없는 문자를 변환하는 javascript 프로세스입니다.
예를 들어, URL에 한국어는 사용할 수 없어서 변환이 필수입니다. 사용할 수 없는 문자는 사용할 수 있는 특수 문자 조합으로 표현합니다.
javascript는 기본적으로는 ‘%’ 뒤에 사용할 수 없는 문자의 문자 코드를 16진수로 변환해 연결합니다.
URL, URI, URN 차이점
URL은 Uniform Resource Locator 약자로, 홈페이지 주소라고 합니다. URL은 주로 인터넷에 있는 파일 위치를 나타냅니다. URN은 Uniform Resource Name 약자로 인터넷에 있는 파일을 식별하기 위한 번호 같은 것입니다. URN은 일반적으로 사용자와 별로 관계가 없습니다.
기본적으로 URL은 인터넷상의 주소, URN은 Web 측이 인식하고 있는 이름으로 이해하면 됩니다.
마지막으로 URI는 Uniform Resource Identifier 약자로 URL과 URN을 포함한 총칭입니다.
URL이 주소, URN이 이름이라고 하면 URI는 목적지(수신처)와 같은 이미지입니다. 이렇게 엄밀히 URL, URI, URN은 차이가 있지만, Web의 세계에서는 URL과 URI는 동일하게 인식됩니다.
URL 인코딩 방법
그럼 바로 JavaScript에서 “URL 인코딩”하는 방법을 소개하겠습니다.
URL 인코딩에 사용하는 자바스크립트 함수엔 세 가지가 있습니다.
encodeURI 함수
encodeURI 함수의 기본 구문은 다음과 같습니다.
encodeURI (변환하려는 URI)
인수는 변환하려는 URI 문자열이고 반환값은 특정 문자가 변환된 URI 문자열입니다.
그럼 실제로 사용해 보죠.
아래 소스 코드를 보세요.
var uri = “https://www.sejuku.net/아”;
var res1 = encodeURI(uri);
console.log(res1)
실행 결과는 다음과 같습니다.
https://www.sejuku.net/%E3%81%82
위 자바스크립트 코드에선 변수 uri 문자열로 https://www.sejuku.net/아 를 저장했고 그 변수를 encodeURI 함수의 인수로 지정했습니다.
변수 res1에 encodeURI 함수의 반환값을 저장하고 그걸 console.log 함수로 출력합니다.
그러자 보시다시피, “%E3%81%82″로 변환된 URI가 표시됐습니다.
또한, encodeURI는 URI에서 특별한 의미를 갖는 예약 문자 “/” “:” “”” 및 “+” “=” 등은 인코딩하지 않습니다. (사실, 이 글은 여기까지만 읽어도 괜찮습니다만, 나머지 부분도 있으니 이왕이면 다 읽어주세요)
encodeURIComponent 함수
encodeURIComponent 함수는 encodeURI와 달리 URI는 예약 문자 “/” “:” “및” “+” “=” 등도 인코딩합니다.
다음 코드를 참조하세요.
var uri = “https://www.sejuku.net/아”;
var res1 = encodeURIComponent(uri);
console.log(res1)
실행 결과는 다음과 같습니다.
https%3A%2F%2Fwww.sejuku.net%2F%E3%81%82
보시다시피, 문자 변환뿐만 아니라 https 뒤에 콜론과 슬래시 등도 변환되었습니다.
encodeURIComponent는 URI가 아닌 전체 URI를 구성하는 부분 인코딩에 적합한 기능입니다.
위의 자바스크립트 코드처럼 URI 전체를 encodeURIComponent로 인코딩하면 잘못된 URI가 반환되므로 주의하세요.
escape 함수
마지막으로 javascript escape 함수를 소개합니다.
escape 함수는 encodeURI 함수 등이 나타나기 전까지는 널리 사용되었습니다. 하지만, 브라우저나 버전에 따라 동작이 달라서 현재는 권장하지 않습니다.
URL 디코딩 방법
지금까지 인코딩 방법을 소개했습니다. 반대로 decoding(decode) 하는 방법도 알아보죠.
URI를 디코딩하려면 decodeURI, decodeURIComponent 함수를 사용합니다.
다음 자바스크립트 코드를 참조하세요.
var uri = “https://www.sejuku.net/아”;
var encode1 = encodeURI(uri);
var decode1 = decodeURI(encode1)
var encode2 = encodeURIComponent(uri);
var decode2 = decodeURIComponent(encode2)
console.log(decode1)
console.log(decode2)
실행 결과는 다음과 같습니다.
https://www.sejuku.net/아
https://www.sejuku.net/아
위 코드에선 변수 uri에 포함된 URI를 encodeURI 함수에 인자로 사용합니다. 변환한 값을 변수 encode1에 저장합니다. encodeURIComponent를 사용하여 변수 encode2에 저장합니다.
그리고 encode1을 decodeURI 함수의 인수로 지정하고 encode2를 decodeURIComponent 함수의 인수로 지정하고 그 반환 값을 console.log 함수로 표시합니다.
보시다시피 모두 원래 URI는 https://www.sejuku.net/아 라고 표시되어 있습니다.