일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | |||||
3 | 4 | 5 | 6 | 7 | 8 | 9 |
10 | 11 | 12 | 13 | 14 | 15 | 16 |
17 | 18 | 19 | 20 | 21 | 22 | 23 |
24 | 25 | 26 | 27 | 28 | 29 | 30 |
- useEffect
- 리액트 네이티브
- redux
- JavaScript
- 코딩초보
- TypeScript
- 비동기
- Vue3
- 타입스크립트
- 코딩공부
- http
- 코린이
- async
- react-router
- 리액트
- 자바스크립트
- 참조자료형
- 프론트엔드
- 사용하는 이유
- git
- 코딩독학
- 코딩기초
- CSS
- scss
- 깃
- 리덕스
- SasS
- react
- html기초
- React Native
- Today
- Total
맨 땅에 프론트엔드 개발자 되기
인코딩 / Base64 / MIME Type 본문
최근에 프로젝트를 하면서 웹에서 이미지 파일을 업로드하고 다운로드 할 수 있는 기능들을 만들다보니 Base64와 MIME Type에 대해 많이 접하게 되었다. 한 번 제대로 정리해두면 좋을 것 같아 정리해보려고 한다.
Base64 란?
- 인코딩
Base64에 대해 알기 전에 먼저 인코딩에 대해 알 필요가 있다. 동영상 인코딩 등 흔하게 접하는 용어지만, 정확히 인코딩이 무엇을 뜻하는 말인지 몰랐다. 컴퓨터가 0과 1의 이진법으로 구성되었다는 것은 컴퓨터 전공자가 아니더라도 한 번 씩은 들어봤던 것 같다. 우리가 컴퓨터 혹은 전자기기로 접하는 모든 이미지, 동영상, 사운드 파일은 0과 1로 이루어진 데이터인데, 모두 컴퓨터가 이해하는 방식으로 인코딩된 것이다.
인코딩 = 컴퓨터가 이해하는 방식으로 바꾸기 = 0과 1로 이루어진 데이터로 만들기
사람이 사용하는 문자를 컴퓨터는 이해할 수 없기 때문에 문자열 인코딩을 통해 인코딩 된 문자를 컴퓨터가 인식하고 처리한다. 이 인코딩 방식은 한 가지가 있는 것이 아니고 여러 가지 방법이 있다. 'utf-8'은 많이 사용하는 문자열 인코딩 방식이다.
디코딩은 인코딩의 반댓말로 컴퓨터가 이해하는 방식으로 구성된 파일을 사람이 이해할 수 있는 형태로 바꿔주는 것을 말한다. 인코딩 기능과 디코딩 기능을 같이 가지고 있는 것을 코덱(Codec, Code + Decode 의 합성어)이라고 한다. 우리가 동영상 파일을 재생할 때 적절한 코덱이 없으면 재생할 수 없는 이유가 바로 여기에 있다.
- Base64
Base64는 직역하면 64진법이라는 뜻으로, 8비트 이진 데이터(예를 들어 실행파일이나, ZIP 파일 등)를 문자 인코딩에 영향을 받지 않는 공통 ASCII(아스키) 영역의 문자들로만 이루어진 일련의 문자열로 바꾸는 인코딩 방식을 가리키는 개념이다. 이 문자 인코딩에 영향을 받지 않는 공통 ASCII 영역의 문자를 사용한다는 특성 덕분에 시스템이 상이한 상호 간에 데이터를 주고 받을 때 안전하다는 특성이 있다. (일부 ASCII 는 시스템 간 데이터를 전달하기에 안전하지 않음.)
그래서 Base64는 HTML 또는 Email과 같이 문자를 위한 Media에 이진 데이터(Binary Data)를 포함해야 할 필요가 있을 때, 포함된 Binary Data가 시스템에 영향을 받지 않고 독립적으로 동일하게 전송 또는 저장되는 것을 보장하기 위해 사용한다.
Base64는 어떤 문자와 기호를 쓰느냐에 따라 여러 변종이 있지만, 잘 알려진 것은 모두 처음 62개는 알파벳 A-Z, a-z와 0-9를 사용하고 있으며 마지막 두 개를 어떤 기호를 쓰느냐의 차이만 있다.
MIME Type이란?
MIME은 Multipurpose Internet Mail Extensions의 약자로 이메일과 함께 동봉할 파일을 텍스트 문자로 변환해서 이메일 시스템을 통해 전달하기 위해 개발되었다. MIME Type은 이러한 다양한 양식의 파일을 알려주기 위한 매커니즘으로, 수많은 종류의 파일 형태가 있으므로 많은 MIME Type이 존재한다.
- 일반적인 구조
type/subtype
MIME Type은 '/'로 구분된 두 개의 문자열인 타입과 서브타입으로 구성된다. 스페이스는 허용되지 않는다. MIME Type은 대소문자를 구분하지 않지만 전통적으로 소문자로 쓰여진다.
// MIME Type 예시
text/plain
text/html
image/jpeg
image/png
audio/mpeg
audio/ogg
audio/*
video/mp4
application/octet-stream
'코딩 공부 일지 > ETC' 카테고리의 다른 글
프론트엔드 개발자 공부 로드맵 (0) | 2022.09.01 |
---|---|
소프트웨어 라이센스에 대하여 / MIT License (0) | 2022.07.09 |
코딩독학) 유용한 VS Code Extension - 초보자용 (0) | 2022.02.02 |
코딩독학) 노마드코더 선생님의 코딩 초보자 공부 테크트리 조언 (0) | 2021.09.17 |