일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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 |
- 동기
- 리액트쿼리
- thread
- 기초
- Babel
- link
- styled-component
- next.js
- next hydration
- 비동기
- react-native
- mock service worker
- 개발자
- 기본
- 컴포넌트
- 자바스크립트
- 쓰레드
- React
- 리액트네이티브
- async
- Critical Rendering Path
- Cache
- mockoon
- front-end mocking
- amplify
- JavaScript
- react server component
- 리액트
- sprinkles
- Concurrent Mode
- vanilla-extract
- 캐쉬
- CSS-in-JS
- 목킹
- MSW
- 아키텍처
- SWC
- Basic
- 최적화
- react-query
- Today
- Total
Don’t worry about failures
Base64에 대해 본문
개념
이진 데이터를 문자열로 인코딩하는 방법 중 하나. 이진 데이터를 테스트 형식으로 변환하거나 전송하거나 저장할 때 사용.
64개의 ASCII 문자로 이루어진 문자 집합을 사용. A-Z, a-z, + / 로 이루어진 문자.
변환 방식
binary data를 6 bit씩 자른 뒤 값을 아래의 해당되는 문자로 치환.
예)
Man의 문자를 ascii 코드로 변경하고 그 코드를 binary로 변경하면 위와 같다.
이를 6bit로 묶으면?
010011 / 010110 / 000101 / 101110
=> 19 / 21 / 5 / 46
=> 이를 위의 표대로 다시 치환하면
=> T / W / F / u 가된다.
결과를 보면 Man => TWFu가 된다.
특징
위에서 살펴보았듯이 Base64로 인코딩한다는 것은 기본 8비트인 아스키코드를 6비트로 짤라서 새롭게 인코딩을하면서 2비트의 오버헤드가 발생하여 약 33% 정도의 크기가 증가하게 된다.
이 뿐만 아니라 encoding, decoding을 하는 과정에 있어 연산이 필요하다.
필요성
포맷 호환성: base64는 string으로 encoding하여 주고 받고한다. 이 덕분에 확장자, 포맷 등에 대한 제약없이 안전하게 보낼 수 있다.
URL 안전성 : 비록 쉽게 디코딩하여 확인할 수는 있지만, 겉으로 바로 볼 수 없게 encoding하여 노출되기 때문에 url에 특정의미를 가릴 수 있다.
charset : 문자를 binary로 변경에 있어 규칙.
위 처럼 다양한 character set이 존재한다. 일반적인 abc와 같은 경우 어떤 charset을 사용해도 문제가 없지만 특수 문자 같은 경우 charset마다 다를 수 있다.
이처럼 charset을 하는 곳마다 데이터를 읽는게 달라지게 되면 문제가 될 것이다.즉 통신할 때 OS가 알아서 바이너리를 바꾸기 때문에 문제가 잠재되어있다. 이를 방지하고자 보내는 측에서 base64로 인코딩을 하여 보내주게되면 일관되게 보낼 수 있게 된다.
이러한 이유로 Base64로 사용한다.
'기타' 카테고리의 다른 글
Mockoon에 대해 (0) | 2024.04.17 |
---|---|
link 태그의 리소스 우선순위 제어 (0) | 2024.03.06 |
간단 Webpack 실습 (0) | 2024.03.01 |
시멘틱웹 (1) | 2024.02.27 |
영상 최적화에 대해 (0) | 2022.05.02 |