21장 빌트인 전역 함수 - encodeURI, decodeURI, encodeURIComponent, decodeComponent

빌트인 전역 함수 중 encodeURI/encodeURIComponent의 차이를 알아보고, URI와 그 하위개념인 URL과 URN을 살펴보겠습니다.

목차 📑

• URI 소개
• 인코딩이란?
• encodeURI/decodeURI 소개
• encodeURI/decodeURI 사용해보기
• encodeURIComponent/decodeURIComponent 소개
• encodeURIComponent/decodeURIComponent 사용해보기

URI 소개

URI는 인터넷에 있는 자원을 나타내는 유일한 주소를 말합니다.
URI의 하위 개념으로 URL, URN이 있습니다.
URL이 URI의 하위 개념인데 https:// 부터 #Intro까지 동일하게 보는 것 같습니다.

인코딩이란?

인코딩이란 URI의 문자들을 이스케이프 처리하는 것을 의미합니다.
이스케이프 처리는 네트워크를 통해 정보를 공유할 때 어떤 시스템에서도 읽을 수 있는 아스키 문자 셋으로 변환하는 것입니다.

encodeURI/decodeURI 소개

encodeURI/decodeURI는 URI 전체를 인코딩/디코딩합니다.
0~9의 숫자, -_.!~*'() 문자는 이스케이프 처리에서 제외됩니다.

/**
 * 완전한 URI를 문자열로 전달받아 이스케이프 처리를 위해 인코딩합니다.
 * @param {string} uri - 완전한 URI
 * @returns {stirng} 인코딩된 URI
 */
encodeURI(uri)

/**
 * 디코딩된 URI를 전달받아 이스케이프 처리 이전으로 디코딩합니다.
 * @param {string} encodedURI - 인코딩된 URI
 * @returns {stirng} 디코딩한 URI
 */
decodeURI(uri)

encodeURI/decodeURI 사용해보기

const uri = "https://example.com?name=테스트&job=programmer&farmer";

const encodedURI = encodeURI(uri);     
// https://example.com?name=%ED%85%8C%EC%8A%A4%ED%8A%B8&job=programmer&farmer

const decodedURI = decodeURI(encodedURI);
// https://example.com?name=테스트&job=programmer&farmer

encodeURIComponent/decodeURIComponent 소개

encodeURIComponent는 인수로 전달된 문자열을 URI의 구성요소인 쿼리 스트링의 일부로 간주합니다. 쿼리 스티링의 구분자로 사용되는 =, ?, &까지 인코딩 합니다.
반면에 encodeURI는 매개변수로 전달된 문자열을 완전한 URI 전체라고 간주합니다. 따라서 쿼리 스트링 구분자로 사용되는 =, ?, & 은 인코딩하지 않습니다.
0~9의 숫자, -_.!~*'() 문자는 이스케이프 처리에서 제외됩니다.

/**
 * URI의 구성요소를 전달받아 이스케이프 처리를 위해 인코딩합니다.
 * @param {string} uriComponent - URI 구성요소
 * @returns {stirng} 인코딩된 URI의 구성요소
 */
encodeURIComponent(uriComponent)

/**
 * 디코딩된 URI의 구성요소를 전달받아 이스케이프 처리 이전으로 디코딩합니다.
 * @param {string} encodedURIComponent - 인코딩된 URI의 구성요소
 * @returns {stirng} 디코딩한 URI의 구성요소
 */
decodeURIComponent(endcodedURIComponent)

encodeURIComponent/decodeURIComponent 사용해보기

const uriComponent = "name=테스트&job=programmer&farmer"

const encodedURIComponent = encodeURIComponent(uriComponent);     
// name%3D%ED%85%8C%EC%8A%A4%ED%8A%B8%26job%3Dprogrammer%26farmer
const decodedURIComponent = decodeURIComponent(encodedURIComponent);
// name=테스트&job=programmer&farmer

마치며 🍺

이번 포스팅에서는 encodeURI와 encodeURIComponent에 대해 알아보았습니다.
encodeURI는 URI 전체를 인코딩하기 위한 함수였고,
encodeURIComponent는 URI의 구성 요소중 쿼리 스트링 부분만 인코딩하기 위한 함수로 =, ?, &까지 인코딩 하는 함수였습니다.

먼가 비슷한 함수이겠거니 생각했었는데, 이번 기회에 둘 다 인코딩 하기 위한 함수이지만 용도가 다름을 알 수 있었습니다.

함께하면 좋은 글 😍