Base64 64진법이란?

2진법이란 base2 : 0,1

10진법이란 base 10 : 0~9

16진법이란 base 16 : 0~9 (10개) ABCDEF(6개)

 

 

64진법이란

 

A~Z : 26개

a~z : 26개

0~9 : 19개

 

총 62개에서

 

+ / 를 더해서 총 64개

 

데이터를 표현할 때 총 64개를 가지고 표현한다는 것

 

이러한 데이터가 있다고 해보자

 

M하고 a가 있으면

 

6개씩 짤라서 6bit로 변환하면

 

남는문자 빈자리는 Padding으로 채운다

 

ASCI 가 128개 2의7제곱이다 7비트 = 여기에는 특수문자가 포함되어있고 출력할 수 없는 문자까지 포함되어 있다

거기서 특수문자를 제외하고 나온게 6비트이다

 

만약 바이너리 데이터를 텍스트 기반 HTTP프로토콜로 보내려면

 

방법이 2개가 있다

 

첫번째로는 마임타입을 써서 바이너리를 그대로 보내는 방법이 있고

 

두번째로는 Base64를 써서 바이너리 데이터를 텍스트데이터로 변경해서 보내는 방법이 있다

 

단 두번째 방법은 데이터가 뻥튀기 되어 보내질 수 있기 때문에 단점이 있다

 

 

만약에 이런 이미지를 Base64 인코딩을 하면 위와같이 A~Z , a~z, 0~9, + / 안에서 해결한다

 

그걸 다시 디코딩하면 바이너리가 된다 

 

이번에는 실습을 해보자 

 

구글에서 Base 64 encode라고 검색해보면

 

https://www.base64encode.net/ 이런 사이트가 나온다 접속해보자

 

이렇게 나오면 파일선택을 눌러서 원하는 사진을 등록해주고 아래에 ENCODE를 눌러준다

 

그러면 이렇게 변환되어서 출력되는데 

 

해당 코드를 복사하고 Vscode를 열어보자

 

base64test.html 파일을 만들어주고 

!를 적어서 기본 폼을 불러온다

 

해당 폼에서 이미지를 추가할건데 아까 복사한 것을 사용해보자

 

이렇게 작성해주고 , 뒤에 아까 복사한것들을 붙여넣고 저장하자

 

저장했다면 이제 마우스 우클릭을 하고

 

Default Browser를 눌러서 열어보면

 

이렇게 이미지가 잘 출력되었다

여기서 마우스 우클릭 누르고 페이지 소스보기를 누른다음 왼쪽 상단에 자동줄바꿈을 눌러보면

바이너리 파일이 텍스트파일로 변경되어서 출력되었다

 

이게 외부 이미지파일을 불러온 것 처럼 보이지만 실제로는 Base64인코딩을해서 이미지를 html에 텍스트로 변경해서 가져온것이다

 

파일의 사이즈는 조금 커지겠지만 링크깨지는 것 없이 이 html파일 하나로 불러올 수 있는 장점이 있다