인코딩 정리
개발하다 보면 인코딩, 디코딩 이야기가 자주 나온다. 헷갈리지 않게 정리해봤다.
인코딩이 뭔가
데이터를 다른 형식으로 변환하는 것이다.
예를 들면:
- 한글 →
%EC%95%88 - 띄어쓰기 →
%20 - 특수문자 →
%21
왜 변환하나
URL에서 브라우저는 한글이나 특수문자를 싫어한다. 그래서 영문자·숫자로 바꿔줘야 한다.
파일 저장 시에도 마찬가지다. 텍스트는 UTF-8로, 이미지를 텍스트로 전송해야 할 때는 Base64로 변환한다. 하지 않으면 깨진다.
실제로 어떻게 쓰나
URL 인코딩
const text = '강의/첫번째';
const encoded = encodeURIComponent(text);
console.log(encoded); // '%EA%B0%95%EC%9D%98/%EC%B2%AB%EB%B2%88%EC%A7%B8'파일 인코딩 (Base64)
const input = document.querySelector('input[type="file"]');
const file = input.files[0];
const reader = new FileReader();
reader.readAsDataURL(file); // base64로 인코딩자주 쓰는 인코딩 방식
| 방식 | 쓰는 경우 |
|---|---|
| URL 인코딩 | 주소창 한글, 쿼리 파라미터 특수문자 |
| Base64 | 이미지→텍스트 변환, 파일 전송 |
| UTF-8 | 한글 텍스트 저장 (사실상 표준) |