자바스크립트 base64로 인코딩하는 경우 에러가 발생, btoa()

자바스크립트의 인코딩(encoding) 방법은 여러가지가 있습니다. 이 중에 가장 많이 사용되는 방법으로 아래와 같이 두 가지를 생각해볼 수 있죠... (여기서 escape()은 제외하겠습니다.)

• encodeURIComponent()
• btoa()

각각 목적이 다르기 때문에 무엇이 좋다 말하기는 어렵습니다. URL에 함께 전달할 파라미터의 값은 첫번째 방법으로 변환하죠. 그래야 이상없이 전달될 수 있기 때문입니다. 두번째는 이미지 등을 전달할 때 많이 사용됩니다.

# btoa() 문자열 인코딩시 에러발생

문제는 btoa()를 사용하여 인코딩할때 발생했습니다. 문자열을 인코딩할때 이 문자열을 사용자에게 입력받아 변환 후 데이터베이스에 저장하려했는데 아래와 같은 에러메시지가 인코딩 과정에서 발견되었습니다.

javascript btoa error contains characters outside of the Latin1 range

검색해보니 코딩의 문제보다 버그로 보였습니다. 다행인 점은 이를 해결할 수 있는 방법이 있었고 그 방법은 encode(), encodeURIComponent()를 사용하여 인코딩 후 다시 decode() 또는 decodeURIComponent()로 디코딩하면 해결되는 방법입니다. 다만 모든 케이스에 정확히 해결 가능한 것인지 명확하지 않아 완벽한 해결방법이 아니라는점입니다.

! 마치면서

혹시 동일한 이슈로 문제가 발생했다면 위 방법으로 해결해보세요. 제 경우 아예 다른 방법을 사용하였는데 인코딩으로 base64를 사용하지 않고 다른 방법으로 인코딩했습니다. 아니면 꼭 인코딩이 필요없다면 따옴표만 escape해주는 방법이 좋을 것 같습니다.