[JS] Javascript에서 base64 인코딩/디코딩하기

오늘 포스팅은 간단한 기능 팁에 관련한 글이다.

최근에 아이콘 이미지를 서버에 보내거나, groovy 빌드 시 로그를 남길 때 base64로 인코딩/디코딩 처리가 필요한 적이 있었다. base64는 문자 그대로 8비트 이진 데이터를 64진법으로 변환하는 인코딩 기법이다. 문자 코드에 구애받지 않는 ASCII 코드를 활용하여 데이터의 변조 없이 송수신함이 보장하는 인코딩이기에, 미디어나 전자 메일을 통한 데이터의 송수신 등에 많이 쓰인다.

대부분의 언어에서 내장 패키지로 base 64 인코딩/디코딩을 지원한다. 본인이 최근에 자바스크립트(와 bash도 처리하긴 했지만)로 변환을 처리했기 때문에 javascript의 메소드를 간단히 소개하겠다.

const example = '{"myExample":"hi"}'
console.log(example) // {"myExample":"hi"}
console.log(windows.btoa(example) // ewogICAgIm15RXhhbXBsZSIgOiAiaGkiCn0=
console.log(windows.atob(btoa(example)) // {"myExample":"hi"}

windows 전역 객체에서 atob와 btoa 메소드를 각각 제공해 준다. 위의 예에서 보듯이 btoa는 base64 인코딩 함수, atob는 디코딩 함수이다. 서로 다른 환경에서 JSON에서 따옴표 형식을 지키거나, 한글 인코딩이 깨질 때 등의 상황에서 유용하게 사용할 수 있다.