TextEncoder란?
자바스크립트의 TextEncoder는 주어진 문자열을 UTF-8 표준 인코딩으로 변환하는 데 사용되는 내장 객체입니다. encode() 메서드에 문자열을 전달하면 해당 문자열을 UTF-8 바이트 시퀀스로 변환한 Uint8Array 객체를 반환합니다. 참고로 TextEncoder는 UTF-8 인코딩만 지원한다는 점을 기억해 두면 좋습니다.
TextDecoder란?
TextDecoder는 TextEncoder와 반대로, 바이트 스트림을 코드 포인트(code points) 스트림, 즉 사람이 읽을 수 있는 문자열로 변환하는 역할을 합니다. decode() 메서드를 통해 데이터를 디코딩할 수 있으며, 기본값인 UTF-8 외에도 ISO-8859-2, KOI8-R, GBK 등 다양한 문자 인코딩을 지원합니다. 생성자에 인코딩 레이블을 전달하면 원하는 인코딩 방식을 지정할 수도 있습니다. 예를 들어 new TextDecoder('euc-kr')처럼 사용할 수 있습니다.
이 두 API는 fetch 응답 스트림을 처리하거나 ArrayBuffer, TypedArray 등으로 주고받은 이진 데이터를 문자열로 변환할 때 특히 유용하게 활용됩니다.
다음은 자바스크립트에서 TextDecoder와 TextEncoder를 사용하는 전체 예제 코드입니다.
예제 코드
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
.result,.sample {
font-size: 18px;
font-weight: 500;
color: rebeccapurple;
}
.result {
color: red;
}
</style>
</head>
<body>
<h1>TextDecoder and TextEncoder in Javascript</h1>
<div class="sample"></div>
<button class="Btn">ENCODE STRING</button>
<div class="result"></div>
<h3>Click on the above button to encode the above string</h3>
<div class="sample"></div>
<button class="Btn">Decode STRING</button>
<div class="result"></div>
<h3>Click on the above button to decode the above string</h3>
<script>
let BtnEle = document.querySelectorAll(".Btn");
let sampleEle = document.querySelectorAll(".sample");
let resEle = document.querySelectorAll(".result");
let str = "Hello world";
let str1 = new Uint8Array([119, 111, 114, 108, 100]);
sampleEle[0].innerHTML = str;
sampleEle[1].innerHTML = str1;
BtnEle[0].addEventListener("click", () => {
let textEncoder = new TextEncoder();
resEle[0].innerHTML += "Encoded String = " + textEncoder.encode(str) + "<br>";
});
BtnEle[1].addEventListener("click", () => {
let textDecoder = new TextDecoder();
resEle[1].innerHTML += "Decoded String = " + textDecoder.decode(str1) + "<br>";
});
</script>
</body>
</html>
실행 결과
위 코드를 실행하면 아래와 같은 초기 화면이 나타납니다.
ENCODE STRING 버튼을 클릭하면 입력된 문자열 'Hello world'가 UTF-8 바이트 값들의 나열로 인코딩되어 화면에 표시됩니다.
Decode STRING 버튼을 클릭하면 Uint8Array에 담긴 바이트 값 [119, 111, 114, 108, 100]이 다시 'world'라는 문자열로 디코딩되어 출력됩니다.
