TextEncoder를 활용하여 텍스트 인코딩하기 (문자열 byte 계산하기 🎶)

새삼스럽지만 프로그래밍에서 데이터는 byte단위의 용량을 가진다.

당연히 작성하는 코드의 String 데이터도 byte 단위의 용량을 가지는데, 그 용량은 다음과 같다. (UTF-8 기준)

• 영어, 공백, 숫자, 특수문자 : 1byte
• 한글 : 3bytes
• 대부분의 이모지 ❤️ : 4 bytes

가끔은 데이터를 바이트로 바꾸어 사용하거나, 작성된 텍스트가 몇 바이트인지 체크해야할 경우가 있을 수 있다.

• 파일 입출력
• 네트워크 전송
• 바이트 크기 계산

이럴 경우에는 Javascript 내장 객체 TextEncoder를 활용하여 손쉽게 바이트로 데이터를 다룰 수 있다 👍

 

const encoder = new TextEncoder();

 

 

간단한 예제를 통해서 문자열을 바이트로 변환해보자.

const encoder = new TextEncoder();
const text = "안녕하세요, JavaScript!";
const encoded = encoder.encode(text);

console.log(encoded); 
// Uint8Array(26) [237, 149, 152, 234, 181, 174, 234, 176, 128, 234, 184, 128, 32, 74, 97, 118, 97, 83, 99, 114, 105, 112, 116, 33]

 

변환된 문자열을 Uint8Array의 형태로 저장된다.

 

해당 텍스트 '안녕하세요, JavaScript!' 는 한글 5글자 (15 bytes), 영문 10글자 (10 bytes), 공백 1글자 (1 byte), 특수문자 2개 (2 bytes)로 총 28 bytes인데, 이를 코드로 계산하는 방법도 간단하다.

 

const encoder = new TextEncoder();
const text = "안녕하세요, JavaScript!";
const encoded = encoder.encode(text);

console.log(`${encoded.length} bytes`); // 28 bytes

 

변한한 뒤 length를 계산해주면, 간단히 bytes 계산이 가능하다.

 

거꾸로 Uint8Array를 문자열로 되돌리기 위해서는 TextDecoder를 사용할 수 있다.

(Uint8Array외에도 Int8Array, Uint16Array, Int16Array, Int32Array를 지원한다. 기본값은 Uint8Array)

 

const encoder = new TextEncoder();
const decoder = new TextDecoder();

const text = "안녕하세요, JavaScript!";
const encoded = encoder.encode(text);

const decoded = decoder.decode(encoded);

console.log(decoded); // 안녕하세요, JavaScript!

 

 

🍎 이제, TextEncoder 및 TextDecoder의 브라우저 지원 범위를 살펴보자!

 

can i use에서 검색한 결과는 위와 같다.

https://caniuse.com/?search=TextEncoder

"TextEncoder" | Can I use... Support tables for HTML5, CSS3, etc

대부분의 환경에서 사용할 수 있지만, 100%는 또 아니기에 지원 범위를 잘 확인하고 사용하는 것이 좋을 것 같다.

🎨 IE에서 사용하고자 한다면, 대체 라이브러리를 알아보거나 폴리필을 구성해야한다...

 

 

https://developer.mozilla.org/en-US/docs/Web/API/TextEncoder

TextEncoder - Web APIs | MDN

https://developer.mozilla.org/en-US/docs/Web/API/TextDecoder

TextDecoder - Web APIs | MDN

 

 

+ 추가로 만약 대용량의 데이터를 실시간 인코딩/디코딩해야한다면 TextEncoderStream, TextDecoderStream을 활용할 수 있다 👻

// TextEncoderStream과 TextDecoderStream을 생성합니다.
const encoderStream = new TextEncoderStream();
const decoderStream = new TextDecoderStream();

// 원본 텍스트
const originalText = "안녕하세요, 실시간 스트림 처리 예제입니다! 😊";

// 텍스트를 인코딩 스트림으로 보냅니다.
const writer = encoderStream.writable.getWriter();
writer.write(originalText);
writer.close();

// 인코딩된 바이트를 다시 디코딩 스트림으로 연결합니다.
const readableStream = encoderStream.readable.pipeThrough(decoderStream);

// 스트림의 데이터를 읽고, 원래 텍스트로 출력합니다.
const reader = readableStream.getReader();
reader.read().then(({ value }) => {
    console.log("디코딩된 텍스트:", value); // "안녕하세요, 실시간 스트림 처리 예제입니다! 😊"
});

(+ chat gpt를 사용해 만든 간단한 예제코드 ✨)