이미지 인코딩 방식

이번 이미지 편집 하는 프로그램을 사용하고 imgbb라는 이미지 서버를 사용하면서
이미지 인코딩 방식에 관심이 생겼다.
모르면 이해가 되지 않기때문에 프로그래머라면 알아야한다고 생각이 들어서 탐구하게 되었다.

---

간단하게 말하면
인코딩(Encoding)이란 특정 방식으로 변환시키는 것을 말한다
그와 반대 되는 개념으로 디코딩(Decoding)이란 인코딩 된 것을 복원하는 것을 말한다

먼저 Binary Data에 대해서 알아야한다.

Binary Data

컴퓨터는 이진수로 데이터를 저장하고 표현합니다. 이진수는 단순히 1과 0의 집합입니다. 각각의 이진수에서 1 혹은 0으로 되어있는 자리를 비트(bit)라고 합니다. 이는 Binary digit의 약자입니다. 예를 들어, 숫자 12를 변환하려면 컴퓨터는 12를 이진수인 1100로 변환해야 합니다.

우리가 다루는 데이터 중에는 문자열도 있고 이미지, 비디오 형식도 있습니다. 컴퓨터는 모든 유형의 데이터를 이진수로 변환하는 법을 알고 있습니다.

---

요약 : binary data는 컴퓨터를 위한 2진수 데이터이다.

Character Set(문자 집합)
Character Set은 각각문자를 숫자로 나타낼 수 있도록 정의해놓은 규칙입니다. 각각 문자에 해당하는 숫자를 표로 정리해 놓은 것으로 유니코드, 아스키코드가 그 예입니다.

문자를 숫자로 나타내는 것에 규칙이 있는 것처럼 숫자를 바이너리 데이터로 나타내는 데에도 규칙이 있습니다. 정확히 말하면 숫자를 몇 bit로 나타낼 것인가를 정하는 것입니다. 이것을 Character Encoding이라고 부릅니다.

Character Encoding의 정의중 하나가 UTF-8 입니다. UTF-8은 문자가 바이트 단위로 인코딩 되어야 합니다.
1바이트는 8개 비트의 집합을 의미합니다. 즉 8개의 1 또는 0을 의미합니다. 그래서 문자를 바이너리로 나타내는데에는 8개의 1과 0으로 된 집합이 사용됩니다.

---

요약 : Character Set은 문자를 숫자로 나타내는 정의다.
유니코드 아스키코드가 대표적 예시

그리고 UTF-8은 1바이트(8비트)로 표기하는 것을 의미한다.
8개의 1과 0으로 문자와 숫자를 표현하는 것이다.

Base64

base64 인코딩이란? binary data를 text로 바꾸는 처리와 그 방식을 뜻한다. binary data를 6bit씩 자른 뒤, base64 색인표에 따라 치환하여 ASCII 문자열로 바꾼다. 그런데 그냥 ASCII(아스키) 문자열이 아니라, ASCII 중 제어문자와 일부 특수문자를 제외한 64개의 안전한 출력문자만 사용하여 바꾼다.

binary data를 바로 ASCII 인코딩을 하면 문제가 발생할 수 있기 때문에, base64 인코딩을 한다.

1. ASCII는 7비트로 문자를 표현하기 때문에 8비트로 구성된 이진 데이터를 직접 ASCII로 변환하면 정보 손실이 발생합니다.
2. 이진 데이터는 0과 1로 이루어져 있어 일반적인 텍스트 형태로 표현하기에 적합하지 않습니다
   그래서 base64 인코딩을 사용하여 이진 데이터를 텍스트 형태로 안전하게 변환합니다.

기존 ASCII 코드는 시스템간 데이터를 전달하기에 안전하지 않다. 모든 Binary 데이터가 ASCII 코드에 포함되지 않으므로 제대로 읽지 못한다. 반면 Base64는 ASCII 중 제어문자와 일부 특수문자를 제외한 53개의 안전한 출력 문자만 이용하므로 Binary 데이터 전달에 더 적합하다.

결론

이미지를 편집할 때는 일반적으로 binary data를 사용하는 것이 효율적입니다. 이미지 파일 자체는 이진(binary) 데이터로 구성되어 있기 때문에, 편집 작업을 수행할 때에는 이진 데이터를 직접 다루는 것이 자연스럽고 효율적이다.
이미지의 크기를 조정하거나 자르는 등의 작업을 할 때에는 이진 데이터를 다루는 것이 편리합니다.

반면에, base64는 이진 데이터를 텍스트로 인코딩하는 방식입니다. 이미지를 base64로 인코딩하면 이진 데이터가 문자열로 변환됩니다. base64는 주로 데이터 전송이나 텍스트 형식으로 사용할 때 유용합니다. 예를 들어, 이미지를 텍스트 형태로 저장하거나 다른 시스템에 전송해야 할 때에는 base64 인코딩을 사용할 수 있습니다.

      const reader = new FileReader();
      reader.readAsDataURL(e.target.files[0]);
      

로컬 파일을 읽을 때 사용되는 FileReader API를 통해 파일을 읽으면, 초기에는 블롭 형태로 데이터가 오고, readAsDataURL 메서드를 사용하면 Data URL 형태로 데이터를 읽습니다. Data URL은 base64 인코딩된 텍스트 형태입니다.

결론은 binary data를 사용하고 주고 받는 것이 좋으나, 이진데이터로 나타내기때문에, 텍스트 외에 다른 데이터 형식도 포함 할 수 있다.
그래서 텍스트 형태로 주고 받아야하는 경우에는 base64로 변경하여서 이미지를 다루는 것이 좋다

---

마무리

React-image-crop을 사용할 때 디버깅하면 쉬울줄 알았다.
하지만 이미지라는 것을 어떻게 변환해서 사용하는지 몰랐고, 공부하면서 조금씩 알게 되었다.
UTF-8이라던지, 유니코드라던지 코드스테이츠에서 배웠지만 가물가물했는데 이번 기회를 통해서 CS지식이 는거 같아서 좋다.

또한 라이브러리는 base64로 데이터를 받아주기때문에 그에 맞추어서 변경해야하는 문제가 있다. 크롤링을 하려면 네이버나 구글을 써야한ㄷ. 네이버에는 cors오류를 걸어났고, 구글에는 받아오는 횟수에 제한을 걸어서 이 이슈를 어떻게 이겨내야할지 고민이 된다. 쉽지 않을 것같다.

https://humahumahuma.tistory.com/217
https://blue-boy.tistory.com/227
https://velog.io/@ragnarok_code/node.js-Buffer-Stream-Binary-Data%EC%9D%B4%EB%9E%80#binary-data%EB%9E%80-