Javascript - btoa()와 atob()로 문자열을 Base64로 인코딩, 디코딩하기

btoa()와 atob()는 문자열을 각각 Base64로 인코딩하거나 디코딩할 때 사용하는 javascript의 내장 함수다.

 

• btoa(): 문자열을 Base64 인코딩된 문자열로 변환하는 함수이다.

let data = {
    name: 'mango',
    price: 1000
}
data = JSON.stringify(data) // object to string

const encodedData = btoa(data) // encode data
console.log('encodedData: ', encodedData)

// encodedData:  eyJuYW1lIjoibWFuZ28iLCJwcmljZSI6MTAwMH0=

btoa()로 Base64 형태로 인코딩하려면 먼저 데이터를 문자열로 변경해야 한다. JSON.stringify로 object타입의 변수를 문자열로 변경한다. 인코딩 후 데이터를 출력하면 문자열이 위와같이 뭉개져서 나오는 것을 확인할 수 있다.

 

atob(): btoa()와 반대로 Base64로 인코딩된 문자열을 디코딩하여 원래의 문자열로 표시하는 함수이다.

const decodedData = atob(encodedData) // decode data
console.log('decodedData: ', decodedData)
console.log('parsed decodedData: ', JSON.parse(decodedData))

// decodedData:  {"name":"mango","price":1000}
// parsed decodedData:  { name: 'mango', price: 1000 }

인코딩된 문자열을 atob()로 디코딩하면 원래의 문자열로 변경된다.

 

---

참고 사이트:

https://stackoverflow.com/questions/33854103/why-were-javascript-atob-and-btoa-named-like-that

 

https://stackoverflow.com/questions/3538021/why-do-we-use-base64

 

https://www.freecodecamp.org/news/what-is-base64-encoding/

What is base64 Encoding and Why is it Necessary?