발단

방위 데이터를 csv 로 뽑아낼 일이 있었는데,

위와 같이 '°' 문자열이 '째' 나오는 현상이 생겼다.

참고로 코드는 아래와 같고, 대략적으로 json 파일을 csv 로 다운로드 하는 코드 이다.

const csvContent = `data:text/csv;charset=utf-8,\uFEFF${[fields, ...rows].join('\n')}`; // Prepend the field names to the rows
const encodedUri = encodeURI(csvContent);
const link = document.createElement('a');
link.setAttribute('href', encodedUri);
link.setAttribute('download', `${fileName}.csv`);
link.click();
document.body.removeChild(link);

전개

문제가 생긴 부분은 아래의 부분이라는 생각이 들었고, 해당 부분을 어떻게 고치면 '°' 가 재대로 표시가 될까?
라고 gpt 에서 물어 보았다.

`data:text/csv;charset=utf-8,

결말

답변은 아래와 같이 코드를 수정해라는 답변을 주었으며, 실제로 아래 코드를 적용해보니,

data:text/csv;charset=utf-8,\uFEFF${[fields, ...rows].join('\n')}

위와 같이 잘 표시됨을 알 수 있었다.

설명

왜 이렇게 되는지 간략하게 설명을 하자면,

Excel은 CSV 파일을 열 때 BOM을 인식하고 파일의 인코딩을 한다고 한다.

이때, csvContent 변수 앞에 \uFEFF 이걸 추가하면, Excel이 UTF-8로 인코딩 된 내용을 제대로 표시한다고 한다.

위 설명이 조금 어려운데, 아무튼 인코딩의 문제였고, 다시한번 gpt 의 위대함을 새삼스럽게 느끼는 중이다.