개발자가 알아야 할 인코딩 기초
웹 개발에서 데이터를 안전하고 효율적으로 전송하고 저장하기 위해 다양한 인코딩 방식을 사용합니다. 주요 인코딩 방식들을 알아보겠습니다.
1. Base64 인코딩
개념
바이너리 데이터를 ASCII 문자열로 변환하는 인코딩 방식입니다.
특징
- 64개의 안전한 ASCII 문자 사용 (A-Z, a-z, 0-9, +, /)
- 바이너리 데이터를 텍스트로 변환
- 이메일 첨부파일, 웹에서 이미지 전송에 주로 사용
사용 예시
hljs javascript
// 인코딩
const text = "Hello World!";
const encoded = btoa(text);
console.log(encoded); // "SGVsbG8gV29ybGQh"
// 디코딩
const decoded = atob(encoded);
console.log(decoded); // "Hello World!"
2. URL 인코딩
개념
URL에서 안전하지 않은 문자를 퍼센트 인코딩으로 변환하는 방식입니다.
특징
- 특수문자, 공백, 유니코드 문자를 %XX 형태로 변환
- URL 파라미터 값에 주로 사용
- encodeURIComponent()와 encodeURI() 함수 사용
사용 예시
hljs javascript
// URL 컴포넌트 인코딩 (권장)
const param = "Hello World!";
const encoded = encodeURIComponent(param);
console.log(encoded); // "Hello%20World%21"
// 전체 URL 인코딩
const url = "https://example.com/search?q=hello world";
const encodedUrl = encodeURI(url);
console.log(encodedUrl); // "https://example.com/search?q=hello%20world"
3. HTML 엔티티 인코딩
개념
HTML에서 특수문자를 안전하게 표시하기 위한 인코딩입니다.
주요 엔티티
- < → <
- > → >
- & → &
- " → "
- ' → '
사용 예시
hljs html
<!-- 사용자 입력을 안전하게 표시 -->
<p><script>alert('XSS')</script></p>
4. JSON 인코딩
개념
JavaScript 객체를 JSON 문자열로 변환하는 방식입니다.
특징
- 데이터 교환에 널리 사용
- UTF-8 인코딩 사용
- 중첩된 객체와 배열 지원
사용 예시
hljs javascript
const data = {
name: "홍길동",
age: 30,
hobbies: ["독서", "영화감상"]
};
const jsonString = JSON.stringify(data);
console.log(jsonString);
// {"name":"홍길동","age":30,"hobbies":["독서","영화감상"]}
const parsed = JSON.parse(jsonString);
console.log(parsed.name); // "홍길동"
5. 유니코드 인코딩
개념
다국어 문자를 컴퓨터에서 처리하기 위한 표준입니다.
주요 인코딩 방식
- UTF-8: 가장 널리 사용, 가변 길이
- UTF-16: 2바이트 또는 4바이트
- UTF-32: 고정 4바이트
사용 예시
hljs javascript
// 유니코드 이스케이프 시퀀스
const unicode = "\uD55C\uAD6D"; // "한국"
console.log(unicode); // "한국"
// UTF-8 바이트 확인
const text = "안녕하세요";
const bytes = new TextEncoder().encode(text);
console.log(bytes); // Uint8Array(15) [236, 149, 136, 235, 133, 149, 236, 150, 188, 236, 149, 136, 236, 132, 184]
인코딩 선택 가이드
상황별 권장사항
- 이메일 첨부파일: Base64
- URL 파라미터: URL 인코딩
- API 데이터 교환: JSON
- HTML 출력: HTML 엔티티
- 다국어 지원: UTF-8
보안 고려사항
1. 인코딩 ≠ 암호화
- 인코딩은 데이터 변환일 뿐, 보안 기능이 아님
- 민감한 데이터는 반드시 암호화 필요
2. XSS 방지
- 사용자 입력을 HTML에 출력할 때 적절한 인코딩 필수
- innerHTML 대신 textContent 사용 권장
3. 인코딩 공격 방지
- 이중 인코딩 공격 주의
- 입력 검증과 출력 인코딩 모두 필요
마무리
적절한 인코딩 방식을 선택하고 올바르게 구현하는 것은 웹 개발의 기본입니다. 각 상황에 맞는 인코딩을 사용하여 안전하고 효율적인 애플리케이션을 개발하세요.