[요약] 자바스크립트에서의 base64 인코딩

자바스크립트의 인코딩에 관련하여 좋은 포스팅이 있어 요약해보았습니다. (코드 부분을 함께 읽으면 좋기에 아래 첨부한 포스팅을 읽어보시는걸 추천합니다!) 참고문헌 https://velog.io/@superlipbalm/base64-encoding 요약 btoa(), atob() * js 에서 base64 인코딩 및 디코딩을 위한 핵심 함수입니다. * btoa() : 문자열 -> base 64 * atob() : base64 -> 문자열 * 이 기능은 ASCII 문자 또는 단일 바이트로 표현할 수 있는 문자가 포함된 문자열에서만 동작합니다 (유니코드에서는 작동안함) 유니코드와 자바스크립트에서의 문자열 * 유니코드 : 문자 인코딩의 글로벌 표준이며, 특정 문자에 숫자를 할당합니다 * 이러한 숫자를 ‘코드 포인트’ 라고 합니다. * 코드 포인트를 컴퓨터가 어디서든 일관되게 해석할 수 있도록 바이트 시퀀스로 만드는 두가지 방법이 있는데, 이를 UTF-8, UTF-16 이라 하며, * UTF - 8 : 1바이트~4바이트(바이트당 6비트)를 코드포인트가 사용가능합니다. * UTF - 16: 항상 2바이트(16비트)로 처리합니다. * 자바스크립트는 문자열을 UTF-16으로 처리합니다. * 즉, btoa()사용을 통해 제대로 인코딩 되지 않다면, 이는 utf-16 의 단일 바이트를 넘어서는 문자를 base64로 인코딩하려고 했기에 생겨난 문제입니다. TextEncoder, TextDecoder 사용 * 유니코드를 인코딩할 때 발생하는 문제를 아래와 같은 순서로 해결할 수 있습니다. * (아래 참고문헌 참조) TextEncoder를 통해 UTF-16 -> UTF-8 변경(Uint8Array)합니다. * String.fromCodePoint()를 통해 Uint8Array -> 각 바이트를 코드포인트로 처리하여 모두 단일 바이트로 표현할 수 있는 코드 포인트 문자열 생성합니다. * 반대과정인 디코딩도 동일합니다 TextEncoder, TextDecoder 사용시 유의할점 (론 서로게이트 문제) * 문제가 있다면, 예를 들어 치즈 이모지의 코드포인트는 129472 인데, 16비트의 최대 숫자는 65535이기에 최대치를 넘겨버렸습니다. * 자바스크립트의 UTF-16 에서는 이를 처리할 때 문제가 있습니다. (론 서로게이트 문제) * 이에 에러를 표현해주어야 하는데, TextDecoder 에서는 이를 다른 문자열로 자동적으로 대체해버립니다. * 이를 확인하기 위해서는 isWellFormed() 라는 함수가 있습니다. * 문자열에 론 서로게이트가 포함되어있다면 에러를 발생시키게 됩니다. * 브라우저에서 isWellFormed 를 지원하지 않는다면 encodeURIComponent를 사용해도 괜찮습니다.