Base64 인코딩을 알아보기 전, 인코딩에 대해서 먼저 알아봐야한다.
인코딩(encoding)이란?
인코딩(encoding)은 컴퓨터를 이용해 영상 · 이미지 · 소리 데이터를 생성할 때 데이터의 양을 줄이기 위해 데이터를 코드화하고 압축하는 것이다. 즉, 정보의 형태나 형식을 표준화, 보안, 처리 속도 향상, 저장 공간 절약 등을 위해서 다른 형태나 형식으로 변환하는 처리 혹은 그 처리 방식을 말한다.
Base 64란?
컴퓨터 분야에서 쓰이는 Base 64 (베이스 육십사)란, 8비트 이진 데이터(예를 들어 실행 파일이나, ZIP 파일 등)를 문자 코드에 영향을 받지 않는 공통 ASCII 영역의 문자들로만 이루어진 일련의 문자열로 바꾸는 인코딩 방식을 가리키는 개념이다.
Base64 인코딩은 8비트 이진 데이터를 ASCII 문자 코드로 변환하는 인코딩 방식 중 하나다. 이진 데이터를 텍스트 형식으로 변환하여, 이진 데이터를 이용해 텍스트를 전송할 수 있도록 돕는 데 주로 사용된다.
Base64 인코딩에서는 64개의 문자를 사용하여 이진 데이터를 표현한다. 이진 데이터를 6비트씩 잘라 이진수를 10진수로 변환하고, 이에 해당하는 문자를 선택하여 64개의 문자 중 하나로 매핑하는 것이다. 그 과정에서는 이진 데이터의 크기가 조금 커지지만, ASCII 문자 코드를 이용해 전송할 수 있기 때문에, 이진 데이터를 전송하기에 적합하지 않은 상황에서 유용하게 사용된다.
Base64는 인코딩된 코드들을 7비트 환경에서 사용할 수 있도록 64개의 문자로 변환하는 표시법이다.
64개의 문자들은 알파벳과 숫자, 그리고 2개의 특수문자를 사용하며, 2개의 특수문자는 일반적으로 +와 /이다.
변환 방법
먼저 문자열의 2진수를 24비트씩 묶고, 맨 뒤에 모자라면 0을 붙인다.
그뒤 6비트씩 앞부터 위의 데이터를 가지고 변환한다.
한편, 파일의 끝과 그냥 0인 것을 구별하기 위하여 맨 마지막에 붙어서 0이 된 비트열은 =로 대응한다.
즉 2바이트인 11111100/11111111은 24비트로 11111100/11111111/00000000이 되고,
6비트씩 묶으면 111111/001111/111100/000000이며, 이는 다시 /P8=으로 변환된다.
Base64가 사용되는 곳
Base64 인코딩은 주로 이메일 전송과 같이 이진 데이터를 전송하기 어려운 상황에서 사용된다.
이 방식은 바이너리 데이터를 텍스트로 변환하여 전송하므로, 텍스트 형태의 데이터 전송 방식에서 널리 사용된다.
- 이메일 첨부 파일: 이메일 시스템은 일반적으로 ASCII 문자만을 지원하기 때문에, 이진 데이터를 전송하기 위해서는 Base64 인코딩을 사용하여 이진 데이터를 ASCII 문자열로 변환한다.
- 데이터 URL: 웹 페이지에서 이미지나 다른 이진 데이터를 로드할 때, Base64 인코딩을 사용하여 이진 데이터를 문자열 형태로 포함시킨 데이터 URL을 생성한다.
- 인증 정보 전송: HTTP 인증 시스템에서는 사용자 이름과 비밀번호를 Base64 인코딩하여 전송한다.
- 쿠키: 쿠키는 일반적으로 ASCII 문자만을 지원하기 때문에, 이진 데이터를 쿠키에 저장하기 위해서는 Base64 인코딩을 사용한다.
- JWT (JSON Web Token): JWT는 인증 정보를 안전하게 전송하기 위한 토큰 기반 인증 시스템으로, Base64 인코딩을 사용하여 토큰 내의 정보를 표현한다.
React에서 이미지 파일 Base64 인코딩하는 코드 예시
FileReader API를 사용하여 이미지 파일을 읽고, Promise를 사용하여 이미지 데이터를 Base64 문자열로 인코딩한다.
import React from 'react';
async function encodeImageFileAsURL(imageFile: File): Promise<string | ArrayBuffer | null> {
return new Promise((resolve, reject) => {
const reader = new FileReader();
reader.onloadend = () => {
resolve(reader.result);
};
reader.onerror = reject;
reader.readAsDataURL(imageFile);
});
}
function ImageUploader() {
const handleFileInputChange = async (event: React.ChangeEvent<HTMLInputElement>) => {
const file = event.target.files?.[0];
if (!file) return;
const base64Image = await encodeImageFileAsURL(file);
console.log(base64Image);
};
return (
<div>
<input type="file" onChange={handleFileInputChange} />
</div>
);
}
export default ImageUploader;encodeImageFileAsURL 함수는 이미지 파일을 Base64 문자열로 인코딩하는 함수다. 이 함수는 Promise 객체를 반환하므로, async/await를 사용하여 호출할 수 있다. reader.onloadend 함수는 파일 읽기가 완료될 때 호출되며, reader.result는 Base64 문자열로 인코딩된 이미지 데이터를 포함한다.
handleFileInputChange 함수에서는 encodeImageFileAsURL 함수를 호출하여 선택한 이미지 파일을 Base64 문자열로 인코딩하고, 결과를 콘솔에 출력한다. 이후로는 이 Base64 문자열을 이미지로 보여줄 수 있다.
출처
https://ko.wikipedia.org/wiki/%EB%B6%80%ED%98%B8%ED%99%94
https://ko.wikipedia.org/wiki/%EB%B2%A0%EC%9D%B4%EC%8A%A464