자바스크립트 인코드,디코드

base64의 기본정의

base64란 쉽게 말하자면 64진법으로 2제곱수들에 기반한 진법중 화면에 표시되는 ASCII 문자를 써서 표현할 수 있는 가장 큰 진법이다.

전송중에 그대로 수정되지않고 전송됨을 보장되고 그로인해 보통 전자메일등 이진 데이터, xml등 복잡한 데이터전송에 많이 쓰인다

엄밀히 따지면 암호화라기 보단 네트워크를 통해 난독화된 데이터를 전송하고 손실없이 전송하기 위함이고 데이터및 코드를 날것으로 보여주지 않기위함이 있다.

자바스크립트(리액트) 인코딩 btoa()

function App () {
	const encoding = () => {
    	const id = 'abc123'
        const encodeId = btoa(id)
        console.log('encodeId', encodeId)
    }
    return (
    	<>
        	<button onClick={encoding}>
            	인코딩!
            </button>
        </>
    )
}

예시로 버튼을 누르면 인코딩해서 콘솔에 찍어주는 함수를 만들어 보았습니다 결과는??

짠~~ 잘 찍혔습니다!
하지만(🚨🚨🚨중요🚨🚨🚨) btoa를 쓰면 btoa 이렇게 중앙선이 쳐지는데 stackoverflow 검색결과 node환경에서 지원하지 않는다고 해결법은 window객체를 이용하라는 결과가 나왔습니다

const encodeId = window.btoa(id)

이렇게 앞에 window만 붙혀주면 해결됩니다! 둘다 실행은 되고 결과는 같지만 권장하는 방법으로 해결하자구요 :)

자바스크립트(리액트) 디코딩 atob()

마찬가지로 메소드를 사용해 인코딩된 문자를 메소드에 담아주면 됩니다.

const password = 'qwe123'
const encodeId = window.atob(password)

글을 마치며

이렇게 인코딩,디코딩 개념을 알아보았는데 데이터전송에서 변함이 없다는 이점을 가지고 있는 인코딩을 적재적소에 잘 사용해서 프론트의 질을 높히는 것이 중요할것 같다는 생각이 들었습니다😎

혹여 틀린정보가 있다면 댓글로 편하게 남겨주세요^^~