[JavaScript] encodeURIComponent & decodeURIComponent : URI 인코딩 & 디코딩

*개인적인 공부 내용을 기록하는 용도로 작성한 글 이기에 잘못된 내용을 포함하고 있을 수 있습니다.

*지속적으로 내용을 수정해 나갈 예정입니다.

 

_Contents

#1 인코딩 & 디코딩

#2 encodeURIComponent & decodeURIComponent

---

#1 인코딩 & 디코딩

인코딩이란 사람이 인식 가능한 문자열을 바이트 형식으로 변환하는 과정이다.

디코딩은 인코딩의 반대 개념으로 바이트 형식을 문자열로 변환하는 과정이다.

인코딩과 디코딩은 주로 HTTP 통신을 수행 시 URI에 한글 혹은 특수문자가 포함되어 있을 때 사용된다.

예를들어 다음 URI의 쿼리스트링 부분을 살펴보자.(?이후가 쿼리 스트링이다.)

job에 프로그래머&블로거 라는 값이 전달 되기를 기대했지만, &특수문자는 &자체로 인식되지 않고, 하나의 파라미터가 끝나고 다음 파라미터가 온다는 특수한 뜻으로 해석되어 버린다.

또한 URI 주소에 한글이 포함되어 있을 경우 에러를 발생시킬 수 있다. 따라서 원하는 결과를 얻기 위해서는 job 부분의 "프로그래머&블로거"를 따로 인코딩하여 요청을 보내야만 한다.

이러한 처리를 "이스케이핑(escaping)" 이라고 부른다.

 

http://xxx.xxx.com?name=nov&job=프로그래머&블로거

---

#2 encodeURIComponet & decodeURIComponent

JavaScript는 인코딩 디코딩을 수행하기 위한 함수를 제공한다.

encodeURIComponet & decodeURIComponent 함수에 인코딩 혹은 디코딩을 수행할 문자열을 보내면 인코딩 , 디코딩 된 문자열을 반환해 준다.

다음은 job=프로그래머&블로거 문자열을 encodeURIComponet 함수를 이용해 인코딩한 예제이다.

const uri = 'http://xxx.xxx.com?name=nov&';
const str = 'job=프로그래머&블로거';
console.log('Before : ', uri + str);
const encodeStr = encodeURIComponent(str);
console.log('After : ', uri + encodeStr);

[출력결과] 
Before :  http://xxx.xxx.com?name=nov&job=프로그래머&블로거
After :  http://xxx.xxx.com?name=nov&job%3D%ED%94%84%EB%A1%9C%EA%B7%B8%EB%9E%98%EB%A8%B8%26%EB%B8%94%EB%A1%9C%EA%B1%B0