URI 인코딩 및 디코딩 관련 js 메서드

내용

웹 개발시 url 과 관련된 내용을 다루는 상황이 빈번하게 나오지만 url 관련해서 몰랐던 내용이 있어 정리하려 한다.

웹페이지 구현 시 페이지 이동 및 라우팅 관련된 기능을 사용한다면 url 주소를 부분적으로라도 입력해서 사용하는 경우가 일반적인데 만약 주소 일부분에 한글과 같은 인코딩이 필요한 문자가 들어간다면 문제가 될 수 있다.

자동으로 인코딩 및 디코딩 되는 경우 또는 애초에 인코딩 및 디코딩 필요치 않은 문자를 사용한다면 상관없겠지만 문제를 예방하는 차원에서 명확히 처리해주는 js 메서드가 존재했다.

기본 개념

• 인코딩 : 인코딩은 정보를 다른 형식이나 표현으로 변환하는 과정(웹에서는 주로 문자를 특정 형식의 코드로 변경하는 것을 의미)
• 디코딩 : 디코딩은 인코딩된 정보를 다시 원래의 형태로 해석하거나 변환하는 과정(웹에서는 주로 특정 형식의 코드를 문자로 변경하는 것을 의미)
• URI(Uniform Resource Identifier) : 는 인터넷에서 자원을 고유하게 식별하고 지정하는 방법을 제공하는 문자열의 형식 (URI 의 크게 두 가지 구성 요소를 가진다 URL 과 URN)
• URL(Uniform Resource Locator) : 자원의 위치를 나타내며 URL은 프로토콜(예: HTTP, HTTPS), 도메인 이름 또는 IP 주소, 포트 번호, 경로 등등을 의미 ex) "www.example.com"
• URN(Uniform Resource Name): 자원의 이름을 나타내며 URN은 일반적으로 영구적이고 유일한 이름으로 자원을 식별하는 데 사용됩니다. ex) "urn:isbn:978-0-123456-78-9"

URI 인코딩 및 디코딩 메서드

---

encodeURI(uri)

URI 의 특정한 문자를 UTF-8로 인코딩해 하나, 둘, 셋, 혹은 네 개의 연속된 이스케이프 문자로 나타냅니다.

decodeURI(encodedURI)

encodeURI 이나 비슷한 루틴으로 사전에 만들어진 URI 를 디코딩합니다.

예제 코드

const uri = 'https://mozilla.org/?text=한글';
const encoded = encodeURI(uri);
console.log(encoded);
// 결과 : "https://mozilla.org/?text=%ED%95%9C%EA%B8%80"

console.log(decodeURI(encoded));
// 결과 : "https://mozilla.org/?text=한글"

문자열 인코딩 및 디코딩 메서드

---

위 소개한 두 메서드와의 차이점은 단지 URI 형식의 주소가 아니라 URI 일부분의 문자열을 인코딩 및 디코딩한다는 점이다.

encodeURIComponent(str)

특정한 문자를 UTF-8로 인코딩해 하나, 둘, 셋, 혹은 네 개의 연속된 이스케이프 문자로 나타냅니다.

decodeURIComponent(str)

encodeURIComponent 나 비슷한 방법으로 생성된 URI 의 일부 문자열을 디코딩합니다.

예제 코드

const param = '?test=한글';
const encodeParam = encodeURIComponent('한글')
console.log(encodeParam);
// 결과 : "%3Ftest%3D%ED%95%9C%EA%B8%80"

console.log(decodeURIComponent(encodeParam));
// 결과 : "?test=한글"

---

참고

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/encodeURI