[nodejs] 인코딩과 디코딩

javascript를 하다 보면 인코딩과 디코딩에 대하여 알아야 할 시기가 온다. ASCII 인코딩, URL인코딩, HTML 인코딩, Base64 인코딩에 대한 개념을 이해해 보자. 그리고 javascript에서는 encodeURI(), encodeURIComponent(), decodeURI(), decodeURIComponent() 함수를 통해 인코딩과 디코딩을 실습해보자. 그렇다면 각각 하나씩 알아보자.

 

 

 

인코딩이란

우리는 컴퓨터를 사용하고 있다. 그런데 컴퓨터는 우리가 사용하는 언어를 이해하지 못한다. 따라서 컴퓨터에게 명령을 내리기 위해서, 컴퓨터가 이해할 수 있도록 0과 1로 변경하는 과정이 필요하다.(쉽게 말하면 문자를 바이트로 변환한다라고 생각해도 된다.) 이러한 변환을 인코딩이라고 한다. 이러한 인코딩의 종류로는 ASCII 인코딩, URL인코딩, HTML 인코딩, Base64 인코딩 등등이 존재한다. 인코딩을 이해하기 위한 기초 개념을 하나씩 다뤄보도록 하자.

 

ASCII 아스키 

기본적으로 위에서 말한 것과 같이 컴퓨터는 알파벳인 a, b, c.. 조차도 무엇인지 알지 못한다. 그렇다면, 각각의 알파벳을 통일하는 것이 필요하다. 이러한 이유로 국제적으로 통일된 규칙을 만들게 되는데 이를 아스키 코드라고 한다. 그러나 아스키 코드는 영어만을 표현한다. 이러한 이유로 다른 나라 언어를 사용하면 충돌이 일어나 글자가 깨지게 된다. 이러한 여러 언어들을 합치기 위한 기준이 필요해졌다. 

 

Unicode 유니코드

위의 아스키 코드의 문제를 해결하기 위해 나온 것이 바로 유니코드이다. 유니코드는 기본적으로 영어는 1바이트로 표현이 된고 한국어는 2바이트로 표현이 된다. 이렇게 3바이트까지 표현이 되는 문자들이 생기다 보니, 통일되지 않게 인코딩을 컴퓨터가 하기 힘들다. (유니코드는 기본적으로 1바이트에서 4바이트까지 사용된다.) 따라서 UTF-7, UTF-8, UTF-16, UTF-32 인코딩과 같이 여러 인코딩 방식이 생겨났다.

 

UTF-8(8-bit Unicode Transformation Format)

UTF-8은 이름에서 알 수 있듯, 8비트 단위로 인코딩을 하는 것이다. 만약 1비트로 표현 가능한 문자를 4비트로 표현한다면 자원낭비가 크다. UTF-8은 문자의 표현 비트에 따라 가변적으로 조절을 하기 때문에 자원낭비를 줄이는 방식이다. 또한 UTF-8의 장점은 유니코드와 백프로 호환이 된다는 장점을 가진다. 

 

 

URL 인코딩

홈페이지에 접속하기 위해 https://www.aaaa.aaa/home?han=3&py=bbb 와 같은 주소를 사용한다. 기본적으로 주소에 영문자와 숫자만 포함되어 있다면, 인코딩이 필요 없다. 하지만, 특수문자나 한글이 포함되는 경우 간혹 페이지를 불러오지 못하는 경우가 발생한다. 따라서 왜곡이 가능한 문자들은 `%XX` 와 같이 16진수로 변환을 한다.

 

HTML 인코딩

개발을 하다보면 한글이 깨져서 나오는 경우가 발생한다. 이는 웹 브라우저마다 사용하는 인코딩 방식이 다르기 때문에 생기는 현상이다. 이를 해결하기 위해서는 하나의 인코딩 방식으로 통일이 필요하다. 한국에서는 보통 인코딩 방식으로 EUC-KR과 UTF-8을 주로 사용한다. 둘이 충돌을 한다면 당연히 한글이 깨진다. EUC-KR은 ASCII 인코딩 방식인 영어만 1byte로 인코딩하는 방식을 확장하여 2byte로 한글을 인코딩할 수 있도록 만든 것이다. 이러한 이유로 공통으로 사용되는 인코딩 방식이 아니다. 따라서 우리나라에서만 사용 가능하고 외국에서는 한글이 깨져서 나온다. EUC-KR은 용량이 적어 이전 인터넷 환경이 좋지 않은 곳에서는 선호하지만, 최근에는 좀 더 표준화된 3byte의 UTF-8 방식을 더 선호한다.

 

 

Base64 인코딩

Base64 인코디은 바이너리 데이터(컴퓨터가 이해하는 0과 1로 이루어진 데이터)를 문자에 영향을 받지 않는 ASCII 문자열로 변경하는 것을 의미한다. 그렇다면 위의 인코딩과는 무슨 차이점이 있을까? 각각의 프로그램이 데이터를 주고받을 때, 인코딩 방식이 조금씩 다른 경우가 있다. 이러한 경우에 데이터를 받아서 해석 시 다르게 해석할 가능성이 있다. 따라서 데이터 전송 시 다양한 문자(한국어, 인도어, 일본어 등등)와 상관없는 ASCII 문자열로만 구성하는 Base64 인코딩을 사용하여 인코딩을 통일시키는데 목적이 있다고 할 수 있다. 이러한 장점 때문에 추가적으로는 HTTP 프로토콜에서 특수문자 파싱 문제를 해결하는 것도 가능하다.  보통은 파일 전송 시 사용한다.

 

 

디코딩이란

인코딩과 반대 개념으로 컴퓨터의 언어를 사람이 이해 할 수 있도록 변경하는 것을 의미한다. 따라서 이는 바이트를 문자로 변환한다고도 할 수 있다.

 

 

encodeURI() decodeURI()

encodeURI는 특정한 문자를 UTF-8로 인코딩하여 연속된 이스케이프 문자로 변경해 준다. 기본적으로 인터넷 url에 사용하는 :, ;, /, =, ?, & 등을 제외하고 인코딩해준다. decodeURI는 encodeURI와 반대로 인코딩한 문자열을 디코딩하는 함수라고 할 수 있다. 변경하지 않는 문자는 아래와 같다.

A-Z a-z 0-9 ; , / ? : @ & = + $ - _ . ! ~ * ' ( ) #

 

encodeURIComponent() decodeURIComponent()

기본적으로 위의encodeURI()와 다르게 encodeURIComponent()은 모든 문자를 인코딩한다.

 

 

실습을 통한 이해

코드를 통해 직관적인 이해를 해보자.

한글 인코딩

let uri = '강'
console.log(encodeURI( uri ))
console.log(encodeURIComponent( uri ))
console.log(decodeURI( uri ))
console.log(decodeURIComponent( uri ))

'''
%EA%B0%95
%EA%B0%95
강
강
'''

한국어는 인코딩이 되어 나오는 것을 확인할 수 있다.

 

영어 인코딩

let uri = 'hanpy'
console.log(encodeURI( uri ))
console.log(encodeURIComponent( uri ))
console.log(decodeURI( uri ))
console.log(decodeURIComponent( uri ))

'''
hanpy
hanpy
hanpy
hanpy
'''

영어는 모두 변환되지 않는다.

 

숫자 인코딩

let uri = '123'
console.log(encodeURI( uri ))
console.log(encodeURIComponent( uri ))
console.log(decodeURI( uri ))
console.log(decodeURIComponent( uri ))

'''
123
123
123
123
'''

숫자는 모두 변환되지 않는다.

 

특수문자 인코딩

let uri = ':, ;, /, =, ?, &'
console.log(encodeURI( uri ))
console.log(encodeURIComponent( uri ))
console.log(decodeURI( uri ))
console.log(decodeURIComponent( uri ))

'''
:,%20;,%20/,%20=,%20?,%20&
%3A%2C%20%3B%2C%20%2F%2C%20%3D%2C%20%3F%2C%20%26
:, ;, /, =, ?, &
:, ;, /, =, ?, &
'''

특스문자 같은 경우 encodeURI와 encodeURIComponent의 차이를 확인 할 수 있다.

 

url 인코딩

let uri = 'https://www.hanpy.com/encode?a=b&b=배고프다'
console.log(encodeURI( uri ))
console.log(encodeURIComponent( uri ))
console.log(decodeURI( uri ))
console.log(decodeURIComponent( uri ))

'''
https://www.hanpy.com/encode?a=b&b=%EB%B0%B0%EA%B3%A0%ED%94%84%EB%8B%A4
https%3A%2F%2Fwww.hanpy.com%2Fencode%3Fa%3Db%26b%3D%EB%B0%B0%EA%B3%A0%ED%94%84%EB%8B%A4
https://www.hanpy.com/encode?a=b&b=배고프다
https://www.hanpy.com/encode?a=b&b=배고프다
'''

url 인코딩 시에는 encodeURI를 사용하는 것이 좋다.