함께 성장하는 프로독학러

base64 인코드, 디코드 메소드 - btoa(), atob() 본문

Programming/javascript

base64 인코드, 디코드 메소드 - btoa(), atob()

프로독학러 2018. 6. 13. 18:43

안녕하세요, 프로독학러 입니다.


이번 포스팅에서는 문자를 base64로 인코드, 디코드 하는 메소드인 btoa(), atob() 에 대해서 알아보도록 하겠습니다.


base64 가 무엇인지 궁금하신 분은 아래의 위키백과 링크를 참조해 주세요.

위키백과 - 베이스64


베이스64 는 간단히 말하자면 64진법 데이터입니다.


Base64 인코딩은 텍스트 데이터를 처리하도록 설계된 미디어를 통해 전송되거나 저장되야 하는 바이너리 데이터를 인코딩 해야할 때 일반적으로 사용됩니다.

Base64는 데이터가 전송중에 수정되지 않고 그대로 전송되는 것을 보장합니다.

Base64는 일반적으로 MIME을 통한 전자 메일 또는 복잡한 데이터를 XML로 저장하는 등 여러 가지 응용 프로그램에서 사용됩니다.


자바스크립트에서 문자열을 base64로 인코드 하려면 window 객체(전역객체) 의 btoa 메소드를 사용하면 되고, 

base64 로 인코드된 문자열을 디코드 하려면 window 객체의 atob 메소드를 이용하면 됩니다.


간단한 문자열을 base64 를 통해 인코드 및 디코드 해 보도록 하겠습니다.


1
2
3
4
5
6
7
8
9
var str = "The quick brown fox jumps over the lazy dog.";
 
var encodeStr = window.btoa(str);
console.log(encodeStr);
// VGhlIHF1aWNrIGJyb3duIGZveCBqdW1wcyBvdmVyIHRoZSBsYXp5IGRvZy4=
 
var decodeStr = window.atob(encodeStr);
console.log(decodeStr);
// The quick brown fox jumps over the lazy dog.
cs


코드의 첫 번째 줄에서 변수 str 에 문자열 "The quick brown fox jumps over the lazy dog." 를 할당했습니다.

그리고 3 번째 줄에서 str 을 base64 로 인코딩해 encodeStr 에 할당했습니다.

(콘솔에 encodeStr 를 찍어보면 인코드된 문자열이 나타납니다.)

7번째 줄에서는 인코드된 문자(encodeStr)를 다시 base64 로 디코드 했습니다.

(결과는 "The quick brown fox jumps over the lazy dog." 입니다.)


감사합니다.


**참고 자료 (항상 감사드립니다)

https://developer.mozilla.org/ko/docs/Web/API/WindowBase64/Base64_encoding_and_decoding


*이 포스팅이 도움이 되셨다면 다녀가셨다는 표시로 공감 부탁드릴게요! (로그인 하지 않으셔도 공감은 가능합니다 ㅎㅎ)

Comments