피드로 돌아가기
Dev.toFrontend
원문 읽기
TextEncoder 도입을 통한 JavaScript Unicode Base64 인코딩 결함 해결
How to Encode Base64 in JavaScript Without Breaking Unicode
AI 요약
Context
브라우저 내장 btoa() 함수가 Latin-1 범위의 Binary String만 처리하는 제약으로 인해 다국어 및 이모지 등 Unicode 문자 처리 시 InvalidCharacterError가 발생하는 문제 상황.
Technical Solution
- TextEncoder를 활용하여 Unicode 문자열을 UTF-8 Byte 배열로 선행 변환하는 파이프라인 구축
- 변환된 Byte 데이터를 String.fromCharCode를 통해 Latin-1 호환 Binary String으로 재구성하여 btoa() 입력값으로 전달
- 디코딩 시 atob() 결과물을 Uint8Array로 변환 후 TextDecoder를 통해 원본 UTF-8 문자열로 복원하는 역과정 설계
- URL-safe Base64 구현을 위해 '+', '/' 문자를 '-', '_'로 치환하고 Padding('=')을 제거하는 변환 로직 적용
- FileReader.readAsDataURL을 통한 Binary File의 Base64 Data URI 추출 및 MIME type 기반의 데이터 구조화
실천 포인트
- Unicode 문자열 처리 시 btoa() 단독 사용 지양 및 TextEncoder 조합 검토 - URL 파라미터로 Base64 전달 시 Standard Base64 대신 URL-safe Base64 규격 적용 - Base64 변환 시 발생하는 파일 크기 증가분(약 33%)을 고려하여 대용량 파일 적용 여부 판단 - 보안이 필요한 민감 데이터 처리 시 Base64가 아닌 표준 암호화 알고리즘 채택