[JavaScript] URL 인코딩, 디코딩 알아보기

자바스크립트에서 URL 인코딩, 디코딩 해보기

---

우리가 웹사이트를 접속할 때, 인터넷 브라우저에 URL(Uniform Resource Locator)이라고 하는 주소를 적어넣습니다. URL은 인터넷에서 웹 페이지, 이미지, 비디오 등 리소스의 위치를 가리키는 문자열이라고 정의할 수 있지요. 예를 들어서, 구글에서 안녕 이라는 말을 검색한다면 아래와 같이 표현할 수 있습니다.

 

https://www.google.com/search?q=%EC%95%88%EB%85%95

 

 

URL의 구조

---

이 때, URL을 이루는 구성요소를 알아본다면 위 주소가 어떤 말을 의미하는지 바로 알 수 있습니다. URL의 구성요소는 크게 4가지로 나눌 수 있는데, 각각 Scheme(스키마), Authority(권한), Path(리소스 경로), Query(매개변수) 라고 부릅니다. 위 주소에서 해당 4가지 요소를 나눠가면서 설명을 해 보면 아래와 같이 나타낼 수 있지요.

 

• Scheme: https 와 같이 나타나는 프로토콜 정보입니다.
• Authority: www.google.com 와 같이 나타나는 도메인 이름(또는 IP 주소), 포트 번호입니다.
• Path: search 와 같이 나타나는 리소스 위치입니다.
• Query: q=%EC%95%88%EB%85%95 와 같이 나타나는 추가 작업을 위한 매개변수입니다.

 

해당 URL에서 q라는 이름으로 입력되는 매개변수가 검색어에 해당합니다. 그런데, 한국어 안녕 대신 %EC%95%88%EB%85%95 라는 값이 들어가 있는 것을 확인할 수 있지요.

 

 

URL 인코딩

---

URL은 전세계의 컴퓨터가 동일한 주소를 입력하면 동일한 페이지로 이동할 수 있는 규칙입니다. 그래서 모든 컴퓨터가 처리할 수 있는 언어인 영어로 입력하게 되지요. 한국어의 경우, 한국어판 OS를 설치한 컴퓨터에서는 처리 가능하지만, 외국어 OS 컴퓨터에서는 정상적으로 입출력이 불가능합니다. 그래서, 영어 이외의 언어는 영문 OS 컴퓨터에서 처리할 수 있는 문자로 변경을 해 줘야 하지요. 이것이 URL 인코딩(Encoding)이 필요한 이유입니다.

 

그리고, 띄어쓰기나 일부 특수문자를 문자열로 처리할 수 없는 프로그래밍 언어의 경우 해당 문자를 추가로 인코딩해 줘야 합니다. 자바스크립트(JavaScript)는 프로그래밍 언어의 특성상 URL 정보를 자주 사용하기 때문에, 이 인코딩 작업을 내장 함수로 지원하고 있는데요, 이것이 바로 encodeURIComponent() 함수입니다. 해당 함수의 정의는, URI(Uniform Resource Identifier, URL의 상위 개념)의 특정한 문자를 UTF-8로 인코딩해서 이스케이프 문자로 반환하는 함수입니다.

 

 

encodeURIComponent('안녕@ 반가워');

'%EC%95%88%EB%85%95%40%20%EB%B0%98%EA%B0%80%EC%9B%8C'

 

 

위 코드를 읽어보면, 안녕@ 반가워 라는 문자열이 %EC%95%88%EB%85%95%40%20%EB%B0%98%EA%B0%80%EC%9B%8C 로 바뀐것을 확인할 수 있지요. 이렇게 encodeURIComponent() 함수는 매개변수로 입력된 값을 인코딩된 문자열로 반환해 주는 기능을 가지고 있습니다.

 

 

URL 디코딩

---

인코딩을 할 수 있다면, 인코딩된 문자열을 원본 값으로 복구할 수도 있어야겠죠? 이 작업을 우리는 디코딩(Decoding)이라고 부릅니다. 그리고, 어렴풋이 눈치채셨겠지만 decodeURIComponent() 함수를 이용해서 디코딩 작업을 할 수 있지요.

 

 

decodeURIComponent('%EC%95%88%EB%85%95%40%20%EB%B0%98%EA%B0%80%EC%9B%8C')

'안녕@ 반가워'

 

 

이렇게 URL 인코딩, 디코딩을 활용한다면 URL 정보를 변형하거나 원하는 페이지에 접속하는 작업을 손쉽게 자동화할 수 있습니다.

 

 

참고자료

---

• https://developer.mozilla.org/ko/docs/Learn/Common_questions/Web_mechanics/What_is_a_URL
• https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/encodeURIComponent