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는 바이너리 데이터 전송에 사용되며 암호화 방법이 아닙니다. 또한 압축 방식이 아닙니다.
Sahil is a full-stack developer who loves to build software. He likes to share his knowledge by writing technical articles and helping clients by working with them as freelance software engineer and technical writer on Upwork.
LinkedIn