이 랩에서는 JavaScript 를 사용하여 문자열의 바이트 크기를 계산하는 방법을 살펴봅니다. 문자열의 바이트 크기를 이해하는 것은 데이터 전송, 저장 계산 또는 데이터 크기가 중요한 API 제한 사항을 다룰 때 필수적입니다.
문자열을 Blob 객체로 변환하고 해당 속성을 사용하여 바이트 단위의 정확한 크기를 결정하는 방법을 배웁니다. 이 기술은 파일 업로드, 네트워크 요청 또는 데이터 저장 최적화를 처리할 때 웹 개발에서 일반적으로 사용됩니다.
문자열의 바이트 크기를 계산하기 전에 JavaScript 에서 문자열이 어떻게 표현되는지 이해하는 것이 중요합니다.
JavaScript 에서 문자열은 UTF-16 코드 유닛의 시퀀스입니다. 이는 이모티콘이나 특정 기호와 같은 문자가 표현하는 데 1 바이트 이상이 소요될 수 있음을 의미합니다. 예를 들어, 간단한 영문자는 1 바이트를 차지하지만 이모티콘은 4 바이트를 차지할 수 있습니다.
터미널에서 Node.js 를 실행하는 것으로 시작해 보겠습니다.
node이제 다음과 같은 Node.js 대화형 콘솔에 있어야 합니다.
Welcome to Node.js v14.x.x.
Type ".help" for more information.
>
이 콘솔에서 JavaScript 코드를 직접 실험할 수 있습니다. 다음 명령을 입력하여 문자열의 길이를 확인해 보세요.
"Hello World".length;다음과 같은 출력을 볼 수 있습니다.
11이것은 문자 수를 제공하지만 실제 바이트 크기는 제공하지 않습니다. 문자 수와 바이트 크기는 특히 특수 문자의 경우 다를 수 있습니다. 다음 단계에서 이를 자세히 살펴보겠습니다.
이제 문자열 표현을 이해했으므로 Blob 객체를 사용하여 문자열의 실제 바이트 크기를 계산하는 방법을 알아보겠습니다.
Blob (Binary Large Object) 은 변경 불가능한 원시 데이터의 파일과 유사한 객체를 나타냅니다. 문자열을 Blob 으로 변환하여 크기 속성에 액세스하여 바이트 크기를 결정할 수 있습니다.
Node.js 콘솔에서 바이트 크기를 계산하는 함수를 만들어 보겠습니다.
const byteSize = (str) => new Blob([str]).size;이 함수는 문자열을 입력으로 받아 Blob 으로 변환하고 바이트 단위의 크기를 반환합니다.
간단한 예제로 이 함수를 테스트해 보겠습니다.
byteSize("Hello World");다음과 같은 출력을 볼 수 있습니다.
11이 경우 "Hello World"는 단일 바이트로 표현되는 ASCII 문자만 포함하므로 문자 수와 바이트 크기가 같습니다.
이제 비 ASCII 문자로 시도해 보겠습니다.
byteSize("😀");다음과 같은 출력을 볼 수 있습니다.
4이모티콘이 단일 문자로 표시되지만 실제로는 4 바이트의 저장 공간을 차지한다는 것을 보여줍니다.
다양한 유형의 문자가 문자열의 바이트 크기에 어떤 영향을 미치는지 살펴보겠습니다.
Node.js 콘솔에서 다양한 문자열로 byteSize 함수를 테스트해 보겠습니다.
byteSize("The quick brown fox jumps over the lazy dog");예상 출력:
43byteSize("123!@#$%^&*()");예상 출력:
13byteSize("Hello, 世界！");예상 출력:
13byteSize("😀😃😄😁");예상 출력:
16혼합된 문자 유형, 특히 중국어 문자 및 이모티콘과 같은 비 ASCII 문자의 경우 바이트 크기가 문자 수보다 크다는 것을 알 수 있습니다.
이는 국제 문자 또는 특수 기호를 포함할 수 있는 데이터를 사용할 때 저장 요구 사항 및 데이터 전송 크기에 영향을 미치므로 이해하는 것이 중요합니다.
다음과 같이 입력하여 Node.js 콘솔을 종료해 보겠습니다.
.exit그러면 일반 터미널 프롬프트로 돌아갑니다.
이제 바이트 크기 함수를 보다 실용적인 방식으로 구현하기 위해 JavaScript 파일을 만들어 보겠습니다. 이는 이 함수를 실제 응용 프로그램에서 사용하는 방법을 보여줍니다.
WebIDE 에서 새 파일을 만듭니다. 파일 탐색기 사이드바에서 "New File" 아이콘을 클릭하고 이름을 byteSizeCalculator.js로 지정합니다.
다음 코드를 파일에 추가합니다.
/**
* 주어진 문자열의 바이트 크기를 계산합니다.
* @param {string} str - 바이트 크기를 계산할 문자열입니다.
* @returns {number} 바이트 단위의 크기입니다.
*/
function calculateByteSize(str) {
return new Blob([str]).size;
}
// 다양한 유형의 문자열 예시
const examples = [
"Hello World",
"😀",
"The quick brown fox jumps over the lazy dog",
"123!@#$%^&*()",
"Hello, 世界！",
"😀😃😄😁"
];
// 결과 표시
console.log("String Byte Size Calculator\n");
console.log("String".padEnd(45) + "| Characters | Bytes");
console.log("-".repeat(70));
examples.forEach((example) => {
console.log(
`"${example}"`.padEnd(45) +
`| ${example.length}`.padEnd(12) +
`| ${calculateByteSize(example)}`
);
});Ctrl+S 를 누르거나 메뉴에서 File > Save 를 선택하여 파일을 저장합니다.
터미널에서 파일을 실행합니다.
node byteSizeCalculator.js다음과 유사한 출력을 볼 수 있습니다.
String Byte Size Calculator
String | Characters | Bytes
----------------------------------------------------------------------
"Hello World" | 11 | 11
"😀" | 1 | 4
"The quick brown fox jumps over the lazy dog" | 43 | 43
"123!@#$%^&*()" | 13 | 13
"Hello, 世界!" | 10 | 13
"😀😃😄😁" | 4 | 16이 표는 다양한 유형의 문자열에 대한 문자 수와 바이트 크기의 차이를 명확하게 보여줍니다.
이러한 차이점을 이해하는 것은 다음과 같은 경우에 중요합니다.
문자열 바이트 크기 계산 랩을 완료하신 것을 축하드립니다. 다음을 배웠습니다.
Blob 객체를 사용하여 문자열의 바이트 크기를 계산하는 방법이 지식은 다음과 같은 작업에 유용합니다.
문자열 바이트 크기를 이해하면 특히 국제 문자, 이모티콘 및 특수 기호를 처리할 때 애플리케이션이 데이터 저장 및 전송을 올바르게 관리하는 데 도움이 됩니다.