인코딩 디코딩이 헷갈려서 쓰는 글 ( JavaScript )

이번 멋쟁이 사자처럼 해커톤을 진행하면서 많은 오류들이 있었지만 가장 마음에 걸렸던 부분이 제출 1시간 전에 한글 인코딩이 안되는건지 아님 내가 잘못된건지 잘 모르겠는 상황이었다. 이때 난 인코딩이 그저 원하는 형식으로 변환해주는거로만 생각해서 인터넷에서 힐끗 본 조금 어이없는 방안도 제시하고(인코딩을 2번해서 디코딩해도 인코딩 형식으로 남게 근데 완전히 이상한 의견은 아닌거 같기도 해서...ㅎ)  발만 동동 구르는 상황이 꽤나 맘에 안들었다. 이후 다른 문제로 발견되어 수정했지만 찜찜함이 남아있기에 한번 정리하려 한다.

---

자바스크립트에서 인코딩은 주로 URL에 포함된 문자열을 변환시켜 생길 수 있는 오류를 미연에 방지하기 위해 사용한다. 아래 코드들은 "Hello, World!" 를 인코딩, 디코딩 하는 방법들이다. 

UTF - 8 encode

const originalString = "Hello, World!";
const encodedString = encodeURIComponent(originalString);
console.log(encodedString); // "Hello%2C%20World%21"
const decodedString = decodeURIComponent(encodedString);
console.log(decodedString); // "Hello, World!"

인코딩을 진행하면 특수문자, 한글은 모두 UTF-8 (unicode transform format-8)으로 변환되어 16진수로 표현하는 0x대신 %로 구분하여 글자마다 사용한다. 

BASE64 encode

const originalString = "Hello, World!";
const encodedString = btoa(originalString);
console.log(encodedString); //SGVsbG8sIFdvcmxkIQ==
const decodedString = atob(encodedString);
console.log(decodedString); //Hello, World!

 base64인코딩은 문자열의 문자들을 모두 ASCII 코드표의 16진법으로 변환하고, 이를 2진수로 바꾼 다음 6칸씩 나눠 그에 대응하는 base64표를 따라 새로운 문자열을 만든다. 이렇게 진행하게 되면 빈칸이 생기게 되는데 이를 =으로 표현한다. 자세한 내용은 구글링하면 많이 나오니 궁금하면 더 알아보도록 하자.