Javascript: URI, URL, QueryString과 인코딩/디코딩 정리

# URI(Uniform Resource Identifier)

: 인터넷에 있는 자원을 나타내는 유일한 주소
 

* URI, URL(Uniform Resource Locator), URN(Uniform Resource Name)의 차이는 아래 그림 참고

URI, URL, URN

* 연관된 개념인 Scheme(Protocol), Host(Domain), Port, Path, Query String, Search, Fragment는 아래 그림 참고

Protocol, Domain, Port, Path, Query String, Fragment

 

# URI 인코딩이란?

: URI의 문자들을 이스케이프 처리하는 것

# 이스케이프 처리란?

: 어떤 시스템에서도 읽을 수 있는 아스키(ASCII) 문자셋으로 변환하는 것

# 즉, URI 인코딩이란?

: 네트워크 등를 통해 정보를 공유할 때, 어떤 시스템에서도 읽을 수 있도록 URI의 문자들을 ASCII 문자셋으로 변환하는 것이다.
: 예를들어, UTF-8 한글의 '가'는 3바이트의 아스키 문자셋 %EC %92 E%90 등으로 인코딩된다.

 

# URI 디코딩이란?

: 디코딩은 반대로 인코딩된 아스키문자셋 %EC %92 E%90를 해석하여 한글 "가"로 되돌리는 것이다.

---

# Javacript의 인코딩/디코딩 함수

: 자바스크립트는 빌트인(내장) 전역 함수로 URI 문자열을 인코딩하고, 다시 디코딩하는 함수를 제공한다.

 

1. encodeURI() / decodeURI()

: 보통 URI에서 의미가 있는 . : / ? = &, 영어 등은 그대로 남겨두고 인코딩한다.
1)  encodeURI('인코딩 이전 URI')  => 이스케이프 처리된 URI
2)  decodeURI('인코딩 완료 URI')  => 이스케이프 처리 이전 URI

 

2. encodeURIComponent() / decodeURIComponent()
:  . : / ? = &  등 조차 모두 인코딩한다.(영어는 남겨둔다.)
1.  encodeURIComponent('인코딩 이전 URI')  => 이스케이프 처리된 URI
2.  decodeURIComponent('인코딩 완료 URI')  => 이스케이프 처리 이전 URI

* 샘플로 작성해본 코드 참고

const URI = 'http://dogumaster.com/map/tv?name=카레유';

// 1. 인코딩 수행(2가지 방식)
const url_encodeURI = encodeURI(URI);
const url_encodeURIComponent = encodeURIComponent(URI);


// 2. 인코딩 결과 출력
console.log(url_encodeURI);
// http://dogumaster.com/map/tv?name=%EC%B9%B4%EB%A0%88%EC%9C%A0

console.log(url_encodeURIComponent);
// http%3A%2F%2Fdogumaster.com%2Fmap%2Ftv%3Fname%3D%EC%B9%B4%EB%A0%88%EC%9C%A0


// 3. 디코딩 결과 출력
console.log(decodeURI(url_encodeURI));
// http://dogumaster.com/map/tv?name=카레유

console.log(decodeURIComponent(url_encodeURIComponent));
// http://dogumaster.com/map/tv?name=카레유