자바스크립트(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 변환 방법을 자세히 알아보았습니다.