71. (javascript/자바스크립트) base64 인코딩 (encode) , 디코딩 (decode) 수행 실시 - btoa , atob

/* =========================== */

[ 개발 환경 설정 ]

​

개발 툴 : Edit++

개발 언어 : javascript

/* =========================== */

​

/* =========================== */

[소스 코드]

 

    <script>

    	/*
    	[JS 요약 설명]
    	1. window.onload : 웹 브라우저 로딩 완료 상태를 확인합니다
    	2. base64 : 8bit의 데이터(바이너리)를 6bit의 크기로 표현한 것입니다
    	3. btoa : base64 데이터로 인코딩을 실시합니다
    	4. atob : base64 데이터를 디코딩을 실시합니다
    	5. 참고 : 보통 이미지 등을 base64로 인코딩 후 blob DB에 업로드합니다
    	*/
   	
    	


    	/* [html 최초 로드 및 이벤트 상시 대기 실시] */
    	window.onload = function() {
    		console.log("");
    		console.log("[window onload] : [start]");
    		console.log("");


    		// [이벤트 함수 실행]
    		main();
    	};




    	/* [이벤트 수행 함수] */
    	function main(){
    		console.log("");
    		console.log("[main] : [start]"); 
    		console.log("");

    		//초기 변수 선언 실시
    		var str_data = "hello";
    		console.log("");
    		console.log("[main] : [원본] : " + str_data); 
    		console.log("");

    		//base64 인코딩 수행 실시
    		var encodeData = btoa(str_data);
    		//var encodeData = btoa(unescape(encodeURIComponent(str_data))); //8비트로 표현 할 수 없을 경우 사용
    		console.log("");
    		console.log("[main] : [base64 encode] : " + encodeData); 
    		console.log("");

    		//base64 디코딩 수행 실시
    		var decodeData = atob(encodeData);
    		console.log("");
    		console.log("[main] : [base64 decode] : " + decodeData); 
    		console.log("");
    	};
    	
    </script>

/* =========================== */

​

/* =========================== */

[결과 출력]

​

/* =========================== */

​

/* =========================== */

[요약 설명]

​

/*

[JS 요약 설명]

1. window.onload : 웹 브라우저 로딩 완료 상태를 확인합니다

2. base64 : 8bit의 데이터(바이너리)를 6bit의 크기로 표현한 것입니다

3. btoa : base64 데이터로 인코딩을 실시합니다

4. atob : base64 데이터를 디코딩을 실시합니다

5. 참고 : 보통 이미지 등을 base64로 인코딩 후 blob DB에 업로드합니다

*/

/* =========================== */