웹개발 및 최신 테크 소식을 전하는 블로그, 웹이즈프리

HOME > js

Javascript에서 문자를 base64로 인코딩, 변환하는 방법은?

Last Modified : 2019-08-12 / Created : 2017-04-25
76,183
View Count

자바스크립트(Javascript)에서 문자를 base64로 인코딩, 변환하는 방법입니다. 먼저 base64로 인코딩하는 경우는 무엇이 있을까요?

! 언제 base64로 인코딩하는가

데이터베이스에 전송할 때 이미지인 경우 base64 타입을 요구하는 경우가 있을 수 있습니다. 보통 이미지는 base64로 인코딩 후 blob DB에 업로드합니다. 또는 인증과 관련된 정보 역시 base64로 인코딩 후 전송하기도 합니다. 그럼 base64로 인코딩 또는 디코딩 방법을 알아봅니다. 이때 사용할 함수와 문법은 아래와 같습니다.

btoa()  //  base64로 인코딩
atob()  //  base64로 디코딩


보시는 것처럼 간단합니다. atob() 그리고 btoa()를 사용하면 되죠. 그럼 아래는 간단한 예제코드입니다.




# base64 인코딩 및 디코딩 예제보기

먼저 'webisfree' 텍스트를 인코딩하여 출력하려고 합니다.
test = 'webisfree';
test2 = btoa(test);

"d2ViaXNmcmVl"  //  base64로 변환되어 출력되었음

아래는 이를 다시 디코딩하여 원래의 값을 얻어보려고 합니다.
atob(test2);

"webisfree"  //  base64에서 디코딩하여 원래값을 반환

정상적으로 인코딩, 디코딩이 base64로 수행되었습니다.


! base64로 인코딩이 안되는 경우

참고로 위 함수를 실행할 경우 인코딩이 안된다면 그 이유는 문자열에 8-bit bye로 나타낼 수 없기 때문입니다. 이 경우 아래처럼 인코딩 함수를 추가로 실행하여 base64로 변경합니다.
만약 str이라는 변수가 존재한다면...
btoa(unescape(encodeURIComponent(str)))

이렇게 변환하여 실행할 경우 btoa() 함수가 동작할 것입니다. 여기까지 base64 변환 방법을 자세히 알아보았습니다.

Previous

hls.js에서 에러 이벤트(error handling)를 처리하는 방법은? 

Previous

CKEDITOR를 사용하여 AJAX 데이터를 에디터에 추가하는 방법