플러터 <-> 자바스크립트 UTF-8 한글 인코딩 디코딩 flutter <-> javascript UTF-8 encoding decoding

플러터에서 utf8.encode를 사용하여 인코딩을 하면 int 배열이 생성이 된다.

그 상태로 자바스크립트에서 decodeURIComponent를 쓰면 제대로 디코딩이 되지 않는다.

이유는 자바스크립트의 decodeURIComponent 함수는 16진수 형태만 디코딩 할 수 있기 때문이다.

따라서 10진수 형태를 toString(16)으로 16진수로 바꿔준 뒤 각 요소 앞에 %를 붙여준 뒤 decodeURIComponent를 써야 정상적으로 디코딩이 된다.

아래는 그 예제이다.

플러터에서 아래와 같이 인코딩된 한글을 자바스크립트로 작성된 서버로 보낸다.

print(utf8.encode('티스토리'));
// I/flutter (19297): [237, 139, 176, 236, 138, 164, 237, 134, 160, 235, 166, 172]

decodeURIComponent를 써서 디코딩을 해보려 하지만 제대로 되지 않는다.

console.log(decodeURIComponent([237, 139, 176, 236, 138, 164, 237, 134, 160, 235, 166, 172]));
// 237,139,176,236,138,164,237,134,160,235,166,172

아래와 같이 인코딩된 배열의 각 요소를 16진수로 변환해주고 각 요소 앞에 %를 붙여준 뒤 decodeURIComponent를 써야 아래와 같이 올바른 디코딩 결과를 얻을 수 있다.

var recvData = [237, 139, 176, 236, 138, 164, 237, 134, 160, 235, 166, 172];
var decodedData = '';
for (var i = 0; i < recvData.length; i++) {
decodedData += '%' + recvData[i].toString(16);
}
recvData = decodeURIComponent(decodedData);
console.log(recvData)
// "티스토리"