URL 인코딩 - encodeURI(), encodeURIComponent(), decodeURI(), decodeURIComponent()

URL 인코딩

인코딩이란 데이터를 다른 형식으로 표현하는 것을 말합니다. URL은 아스키코드의 문자들 중 출력이 가능한 문자열만 포함합니다. URL에서 그 외의 문자(한글, 일본어 등)를 사용하고 싶다면 %와 16진수 문자를 조합하여 인코딩해야 합니다. 이를 URL 인코딩이라고 하고 인코딩 된 URL을 escape 처리된 URL이라고 부릅니다.

 

예를 들어 브라우저 주소창에 https://sky-kr.tistory.com/?data=테스트로 접속한 후 URL을 복사하게 되면

https://sky-kr.tistory.com/?data=%ED%85%8C%EC%8A%A4%ED%8A%B8라는 값(escape 처리된 URL)으로 변환되어 복사가 되게 됩니다. 여기서 %ED%85%8C%EC%8A%A4%ED%8A%B8값은 '테스트'라는 한글 문자가 인코딩된 결과입니다.

 

URL, URN, URI

URL은 Uniform Resource Locator의 약자로 인터넷 상에 위치하는 파일의 위치를 나타내는 것으로 리소스가 있는 위치를 나타냅니다.

URN은 Uniform Resource Name의 약자로 인터넷 상에 위치하는 파일을 식별하기 위한 번호로 Web에서 인식하고 있는 이름입니다. 위치와 상관없이 실제 리소스의 이름을 나타냅니다.

URI는 Uniform Resource Identifier의 약자로 URL과 URN을 포함하는 개념으로 인터넷 상의 리소스 자체를 식별하기 위해 사용하는 고유한 문자열 시퀀스입니다.

 

 

---

 

자바스크립트에서는 encoding 관련 함수로 encodeURI와 encodeURIComponent 그리고 decoding 관련 함수로 decodeURI, decodeURICompoent를 제공합니다.

 

encodeURI(string)

매개변수로 string값을 입력해주면 다음을 제외한 값들에 대해 모두 인코딩을 수행합니다.

A–Z a–z 0–9 - _ . ! ~ * ' ( )

; / ? : @ & = + $ , #

encodeURI('https://sky-kr.tistory.com/?data=테스트&data2=테스트2')

// https://sky-kr.tistory.com/?data=%ED%85%8C%EC%8A%A4%ED%8A%B8&data2=%ED%85%8C%EC%8A%A4%ED%8A%B82

 

encodeURIComponent(string)

매개변수로 string값을 넣게 되면 다음을 제외한 값들에 대해 모두 인코딩을 수행합니다.

A–Z a–z 0–9 - _ . ! ~ * ' ( )

encodeURIComponent('https://sky-kr.tistory.com/?data=테스트&data2=테스트2')

// https%3A%2F%2Fsky-kr.tistory.com%2F%3Fdata%3D%ED%85%8C%EC%8A%A4%ED%8A%B8%26data2%3D%ED%85%8C%EC%8A%A4%ED%8A%B82

encodeURI와 다르게 ; / ? : @ & = + $ , # 문자도 모두 인코딩 되었습니다.

 

decodeURI(string)

매개변수로 string값을 넣게 되면 디코딩을 수행합니다. 다음 값들에 대해서는 디코딩을 수행하지 않습니다.

; / ? : @ & = + $ , #

decodeURI('https://sky-kr.tistory.com/?data=%ED%85%8C%EC%8A%A4%ED%8A%B8&data2=%ED%85%8C%EC%8A%A4%ED%8A%B82')
// encodeURI로 변환한 값

// 결과: https://sky-kr.tistory.com/?data=테스트&data2=테스트2

decodeURI('https%3A%2F%2Fsky-kr.tistory.com%2F%3Fdata%3D%ED%85%8C%EC%8A%A4%ED%8A%B8%26data2%3D%ED%85%8C%EC%8A%A4%ED%8A%B82')
// encodeURIComponent로 변환한 값

// 결과: https%3A%2F%2Fsky-kr.tistory.com%2F%3Fdata%3D테스트%26data2%3D테스트2

 

decodeURIComponent(string)

매개변수로 string값을 넣게 되면 디코딩을 수행합니다. decodeURI에서 진행하지 않는 값들을 포함하여 모든 값들에 대해 디코딩을 진행합니다.

decodeURIComponent('https%3A%2F%2Fsky-kr.tistory.com%2F%3Fdata%3D%ED%85%8C%EC%8A%A4%ED%8A%B8%26data2%3D%ED%85%8C%EC%8A%A4%ED%8A%B82')
// encodeURIComponent로 변환한 값

// 결과: https://sky-kr.tistory.com/?data=테스트&data2=테스트2

decodeURIComponent('https://sky-kr.tistory.com/?data=%ED%85%8C%EC%8A%A4%ED%8A%B8&data2=%ED%85%8C%EC%8A%A4%ED%8A%B82')
// encodeURI로 변환한 값

// 결과: https://sky-kr.tistory.com/?data=테스트&data2=테스트2