diff --git a/files/ko/web/api/btoa/index.md b/files/ko/web/api/btoa/index.md index 8a741b4ef95c53..65f17725d26430 100644 --- a/files/ko/web/api/btoa/index.md +++ b/files/ko/web/api/btoa/index.md @@ -1,107 +1,61 @@ --- -title: btoa() +title: btoa() 전역 함수 slug: Web/API/btoa +l10n: + sourceCommit: 997a0ec66e1514b7269076195b2419db334e876e --- {{APIRef("HTML DOM")}} -**`btoa()`** 함수는 [이진 문자열](/ko/docs/Web/API/DOMString/Binary)({{jsxref("String")}} 객체 내 모든 문자가 이진 데이터의 바이트 한 개)로부터 {{glossary("Base64")}} 인코딩된 ASCII 문자열을 생성해 반환합니다. +**`btoa()`** 메서드는 문자열의 각 문자가 이진 데이터의 바이트 단위로 처리되는 이진 문자열을 {{glossary("Base64")}}로 인코딩한 {{Glossary("ASCII")}} 문자열을 생성합니다. -ASCII 값 0부터 31까지의 제어 문자처럼 통신에 사용하면 문제가 발생할 수 있는 데이터를 `btoa()`로 인코딩해 전송하고, 받는 쪽에서는 {{domxref("atob", "atob()")}}로 디코딩하면 문제 없이 원래 데이터를 가져올 수 있습니다. +이 메서드를 사용하여 통신 문제를 일으킬 수 있는 데이터를 인코딩하고 전송한 다음, {{domxref("atob", "atob()")}} 메서드를 이용하여 데이터를 다시 디코딩할 수 있습니다. 예를 들어 0부터 31까지의 ASCII 값과 같은 제어 문자를 인코딩할 수 있습니다. -## 구문 +## 문법 -```js -btoa(stringToEncode); +```js-nolint +btoa(stringToEncode) ``` ### 매개변수 - `stringToEncode` - - : 인코딩할 [이진 문자열](/ko/docs/Web/API/DOMString/Binary)입니다. + - : 인코딩할 이진 문자열입니다. ### 반환 값 -`stringToEncode`를 Base64로 표현한 ASCII 문자열. +`stringToEncode`의 Base64 표현을 포함하는 ASCII 문자열입니다. ### 예외 - `InvalidCharacterError` {{domxref("DOMException")}} - - : 문자열이 바이트 한 개로 표현할 수 없는 문자를 포함하고 있으면 발생합니다. 자세한 정보는 아래의 "유니코드 문자열"을 참고하세요. + - : 문자열에 단일 바이트가 아닌 문자가 포함되어 있을 때 발생합니다. 자세한 내용은 아래의 "유니코드 문자열"을 참조하세요. ## 예제 ```js -const encodedData = btoa("Hello, world"); // 문자열 인코딩 -const decodedData = atob(encodedData); // 문자열 디코딩 +const encodedData = btoa("Hello, world"); // 문자열을 인코딩합니다. +const decodedData = atob(encodedData); // 문자열을 디코딩합니다. ``` ## 유니코드 문자열 -`btoa()` 함수는 매개변수로 JavaScript 문자열을 받습니다. JavaScript에서는 문자열을 UTF-16 인코딩으로 표현하는데, UTF-16은 문자열을 16비트 (2바이트) 단위의 시퀀스로 나타냅니다. 모든 ASCII 문자는 단위 하나의 앞쪽 바이트만으로 표현할 수 있지만, 많은 수의 다른 문자들은 두 바이트를 모두 사용해야 합니다. - -Base64는 이진 데이터를 입력으로 받도록 설계됐습니다. JavaScript 문자열로 얘기하자면 모든 문자가 바이트를 하나씩만 차지하는 경우를 의미합니다. 따라서 `btoa()`에 2바이트 문자를 포함한 문자열을 제공하면 오류가 발생합니다. 그런 문자열은 이진 데이터라고 하지 않기 때문입니다. +Base64는 설계상 이진 데이터를 입력으로 기대합니다. JavaScript 문자열의 경우, 이는 각 문자의 코드 포인트가 1바이트만 차지하는 문자열을 의미합니다. 따라서 1바이트 이상을 차지하는 문자가 포함된 문자열을 `btoa()`에 전달하면 이진 데이터로 간주하지 않으므로 오류가 발생합니다. ```js const ok = "a"; -console.log(ok.codePointAt(0).toString(16)); // 61: 1바이트 미만 +console.log(ok.codePointAt(0).toString(16)); // 61은 1바이트 미만입니다. const notOK = "✓"; -console.log(notOK.codePointAt(0).toString(16)); // 2713: 1바이트 초과 +console.log(notOK.codePointAt(0).toString(16)); // 2713은 1바이트 이상을 차지합니다. console.log(btoa(ok)); // YQ== -console.log(btoa(notOK)); // 오류 -``` - -`btoa()`를 사용해서 유니코드 텍스트를 ASCII로 인코딩해야 할 때 사용할 수 있는 방법 한 가지는, 문자열의 각 16비트 단위가 한 바이트씩 차지하도록 먼저 변환하는 것입니다. - -```js -// Unicode 문자열의 16비트 단위가 한 바이트씩 차지하도록 변환 -function toBinary(string) { - const codeUnits = new Uint16Array(string.length); - for (let i = 0; i < codeUnits.length; i++) { - codeUnits[i] = string.charCodeAt(i); - } - const charCodes = new Uint8Array(codeUnits.buffer); - let result = ""; - for (let i = 0; i < charCodes.byteLength; i++) { - result += String.fromCharCode(charCodes[i]); - } - return result; -} - -// 1바이트를 초과하는 문자를 포함하는 문자열 -const myString = "☸☹☺☻☼☾☿"; - -const converted = toBinary(myString); -const encoded = btoa(converted); -console.log(encoded); // OCY5JjomOyY8Jj4mPyY= -``` - -물론 이렇게 되면 디코딩한 문자열에 역변환까지 해야 원래의 문자열을 구할 수 있습니다. - -```js -function fromBinary(binary) { - const bytes = new Uint8Array(binary.length); - for (let i = 0; i < bytes.length; i++) { - bytes[i] = binary.charCodeAt(i); - } - const charCodes = new Uint16Array(bytes.buffer); - let result = ""; - for (let i = 0; i < charCodes.length; i++) { - result += String.fromCharCode(charCodes[i]); - } - return result; -} - -const decoded = atob(encoded); -const original = fromBinary(decoded); -console.log(original); // ☸☹☺☻☼☾☿ +console.log(btoa(notOK)); // error ``` -용어집 {{glossary("Base64")}} 항목, [해결책 #1 – 인코딩 전에 문자열 이스케이핑](/ko/docs/Glossary/Base64#solution_1_%E2%80%93_escaping_the_string_before_encoding_it)의 예제 코드 `utf8_to_b64`와 `b64_to_utf8` 함수도 참고하세요. +임의의 유니코드 텍스트를 처리할 때, 이 제한을 해결하는 방법은 {{Glossary("Base64")}} 용어집 항목의 ["유니코드 문제"](/ko/docs/Glossary/Base64#the_unicode_problem) 섹션을 참조하세요. -## 명세 +## 명세서 {{Specifications}} @@ -111,7 +65,7 @@ console.log(original); // ☸☹☺☻☼☾☿ ## 같이 보기 -- [`core-js`](https://github.com/zloirock/core-js)의 [`btoa` 폴리필](https://github.com/zloirock/core-js#base64-utility-methods) -- [`data` URL](/ko/docs/Web/HTTP/Basics_of_HTTP/Data_URLs) +- [`core-js`](https://github.com/zloirock/core-js)에서 사용 가능한 [`btoa`의 폴리필](https://github.com/zloirock/core-js#base64-utility-methods) +- [`data` URLs](/ko/docs/Web/HTTP/Basics_of_HTTP/Data_URLs) - {{domxref("atob","atob()")}} - {{Glossary("Base64")}}