[JavaScript] URL Encode의 방법

 이번 포스팅에서는 JavaScript의 URL의 엔코딩과 디코딩에 대해 설명해보고자 한다. 

 

URL의 Encode란?

---

 먼저, Encode란 데이터를 다른 포맷(형식)으로 변환하는 것이다. URL의 Encode는 URL에 있어 사용 불가능한 문자의 변환을 실시하는 프로세스를 일컫는다.

 예를 들어, URL에는 일본어를 사용할 수 없으므로 변환을 할 수 밖에 없다. 사용 불가능한 문자는 사용할수 있는 특수한 형태의 조합 문자으로 구성되어 있다.

 기본적으로 '%'의 뒤에는 사용할 수 없는 문자의 문자 코드를 16진수로 표시한 것을 연결하고 있다. 

[Note] URL과 URI, URN의 차이점  URL은 Unifoem 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 Encode의 방법

---

 JavaScript에 있어서 'URL Encode'의 방법에 대해 알아보자. URL Encode에 주로 사용되는 함수는 세 개가 있다.

1) encodeURI 함수

처음 설명할 것은 encodeURI이다. encodeURI함수의 기본적인 구문은 아래와 같다.

encodeURI(변환하고 싶은 URI)

 인수로는 변환하고 싶은 URI의 문자열을 지정하고 리턴값으로써 특정의 문자가 변환된 URI 문자가 리턴된다. 그럼 실제로 사용해보자. 아래의 코드를 살펴보자.

var uri = "https://hengineer-mole.tistory.com/あ";
var res1 = encodeURI(uri);
console.log(res1)

실행 결과는 다음과 같다.

https://hengineer-mole.tistory.com/%E3%81%82

 위 코드에서는 변수 uri에 문자열로써 https://engineer-mole.tistory.com/あ로 저장하고 그것을 encodeURL함수의 인수로써 지정하고 있다. 변수 res1에는 encodeURI함수의 리컨값을 저장하고 그것을 console.log함수로 출력해보았다. 

 그 결과는 보이는 것과 같이 일본어 문자 'あ'가 '%E3%81%82' 로 변환된 URI로 표시되는 것을 알 수 있다. 실제 'あ'는 UTF-8의 경우, 문자 코드를 16진수로 표시한 것이 'E3 81 82'이므로 '%E3%81%82' 로변환된다.

 또한 encodeURI는 URI에 있어서 특별한 의미를 가진 예약 문자 '/' ':' '&' '+' '=' 등에 관해서는 Encode가 되지 않도록 되어 있다. 

 

2) encodeURIComponent함수

 encodeURIComponenet함수는 encodeURI와 달리 URI에 있어서 특별한 의미를 가진 예약어 '/' ':' '&' '+' '=' 등도 Encode한다.

 아래의 코드를 살펴보자.

var uri = "https://engineer-mole.tistory.com/あ";
var res1 = encodeURIComponent(uri);
console.log(res1)

 실행결과는 다음과 같다.

https%3A%2F%2engineer-mole.tistory.com%2F%E3%81%82

 실행결과에서 볼 수 있듯, 'あ'문자의 변환뿐만 아니라, https의 뒤에 클론 기호나 슬래쉬 등도 변환된다. 

 encodeURIComponenet는 URI전체뿐만아니라 URI를 구성하는 부분 부품의 엔코딩에 최적화된 함수이다. 위 코드와 같이 URI 전체를 encodeURIComponent로 Encode해보면, 무효한 URI가 리턴되므로 주의하자.

 

3) escape함수

마지막으로 escape함수에 대해 살펴보자.

 escape함수는 encodeURI함수 등이 나타나기 전에 주로 사용되었지만, 브라우저나 버전에 따라 동작이 바뀌기 때문에 현재에는 그다지 사용되지 않는다. esacpe 함수에 대해 자세한 설명은 여기를 참고하길 바란다.

---

참고자료

www.sejuku.net/blog/58913