별도 실험 · 한글과 UTF-8

이제 Hello를 안녕으로 바꿀 때 생기는 질문을 다룹니다. 문자 인코딩은 앞의 연결·송수신 실습과 분리한 단계입니다.

문자열 길이와 바이트 수

npm run lab:encoding

06-encoding/bytes.mjs의 출력을 비교합니다.

Unicode는 문자에 번호를 부여하는 체계이고 UTF-8은 문자를 바이트로 표현하는 방식입니다. ASCII 범위는 UTF-8에서도 한 바이트입니다. 이 예제의 완성형 한글 음절은 각각 세 바이트입니다.

JavaScript .length는 UTF-16 코드 단위 수입니다. 모든 문자열에서 ‘눈에 보이는 글자 수’와 같다는 뜻은 아닙니다. 먼저 이 두 예시의 차이를 이해하세요.

한글 중간에서 바이트 나누기

같은 프로그램에서 안녕의 UTF-8 바이트를 첫 한 바이트와 나머지로 나눕니다. 각각을 바로 문자열로 바꾸면 �가 나타납니다. 바이트를 모은 뒤 디코딩하면 정상적으로 돌아옵니다.

Buffer.concat([first, rest]).toString()

이것은 문자 중간에서 잘린 상황을 의도적으로 만드는 실험입니다. 앞의 텍스트 브라우저는 각 수신 조각을 바로 문자열로 바꾸므로 ASCII로 한정했습니다. 한글 지원에는 바이트를 모아 디코딩하거나 스트림 디코더를 사용하는 단계를 추가해야 합니다.

한글 HTTP 서버

npm run lab:utf8-server

Chrome에서 http://127.0.0.1:8082/를 엽니다. 별도 파일 06-encoding/server.mjs에서 추가된 헤더 두 개를 찾습니다.

'Content-Type: text/html; charset=utf-8\r\n' +
`Content-Length: ${Buffer.byteLength(body, 'utf8')}\r\n`

charset은 본문의 문자 인코딩을 알려 주고, Content-Length는 HTML 태그를 포함한 본문의 바이트 수를 알려 줍니다. 앞의 HTTP/1.0 서버에서는 연결 종료로 본문 끝을 알렸습니다.

작은 도전: body를 <h1>Hello!</h1>, <h1>안녕!</h1>으로 바꾸며 body.length와 Buffer.byteLength(body, 'utf8')를 콘솔에 출력합니다. 실제 전송할 Content-Length는 올바른 바이트 수를 유지하세요. Node.js 바이트 길이 설명

이해 확인

• 안녕의 UTF-8 바이트 수가 6인 이유를 설명한다.
• 조각별 디코딩과 합친 뒤 디코딩의 결과를 비교한다.
• Content-Length를 문자열 .length로 계산하면 틀릴 수 있음을 설명한다.

다음 단원의 목표: HTTPS와 보안.