JavaScript에서 문자열을 Base64로 인코딩 및 디코딩
Base64 인코딩 문자 세트는 A-Z
, a-z
, 0-9
, +
및 /
로 구성됩니다. 이 시스템에는 총 64자가 있으므로 Base64라고 합니다. Base64 인코딩은 데이터를 ASCII(American Standard Code for Information Interchange) 형식으로 변환합니다.
예를 들어 Git 문자열이 있는 경우 Base64 인코딩 형식에서 이 문자열은 R29vZ2xl
로 표시됩니다.
여기서 방금 발생한 것은 문자열의 개별 문자가 먼저 ASCII 값으로 표현된다는 것입니다. 즉, 대문자 G
의 경우 ASCII 값은 71
이고 작은 i
의 경우 ASCII 값은 105
이고, 다른 캐릭터들도 마찬가지. ASCII 값의 전체 목록을 보려면 이 링크를 방문하십시오.
그런 다음 이러한 ASCII 값은 8비트 이진 표현으로 변환됩니다. 이 8비트 이진 표현은 4개의 6비트 세그먼트로 나뉩니다. 이 4개의 2진 세그먼트는 그런 다음 10진수로 변환됩니다.
결국 이 십진수는 Base64 인코딩 테이블에 따라 Base64로 변환됩니다.
이제 이 모든 변환을 수동으로 수행할 필요가 없습니다. 지금까지 우리가 본 것은 단지 이해를 위한 것입니다. 문자열을 Base64로 인코딩 및 디코딩하는 방법을 살펴보겠습니다.
JavaScript에서 문자열을 Base64로 인코딩 및 디코딩
JavaScript에는 문자열을 Base64 인코딩으로 또는 그 반대로 변환하기 위한 두 개의 Base64 도우미 함수 btoa()
및 atob()
가 있습니다. btoa()
는 문자열을 가져와 Base64로 인코딩하고 atob()
는 인코딩된 문자열을 가져와 디코딩합니다.
아래 코드에는 인코딩 및 디코딩된 문자열을 표시할 두 개의 div
요소가 있습니다. JavaScript의 getElementById()
메소드를 사용하여 myDiv_1
및 myDiv_2
내부에 이 두 div
의 참조를 저장하고 있습니다. 이 예제에서 인코딩 및 디코딩할 문자열은 str
변수 안에 저장된 Git입니다.
이 문자열을 인코딩하려면 btoa()
함수를 사용합니다. 이를 위해 str
변수를 이 함수의 매개변수로 전달하면 됩니다. 이 결과를 encodedStr
변수에 저장합니다. 그런 다음 myDiv_1.innerHTML
속성을 사용하여 div_1
내부에 이 변수의 값을 표시합니다.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
</head>
<body>
<div id="div_1"></div>
<div id="div_2"></div>
<script>
let myDiv_1 = document.getElementById('div_1');
let myDiv_2 = document.getElementById('div_2');
let str = "Git";
let encodedStr = btoa(str);
myDiv_1.innerHTML = encodedStr;
</script>
</body>
</html>
출력:
R2l0
이것은 출력으로 얻을 것입니다. 문자열이 Base64로 변환되지 않습니다.
이제 위의 문자열을 원래 형식으로 디코딩하려면 atob()
함수를 사용하고 그 안에 encodedStr
을 전달할 수 있습니다. 그런 다음 myDiv_2.innerHTML
속성을 사용하여 div_2
내부의 decodedStr
변수 값을 표시합니다.
let decodedStr = atob(encodedStr);
myDiv_2.innerHTML = decodedStr;
출력:
Git
Base64는 바이너리 데이터 전송에 사용되며 암호화 방법이 아닙니다. 또한 압축 방식이 아닙니다.