Javascript/Typescript

[JavaScript] CSV파일 한글 깨짐 현상 해결: ANSI인코딩 저장 방법

범데이 2023. 6. 11. 01:05

1. 문제 현상

JavaScript로 데이터를 CSV파일로 내보내었는데, Microsoft Excel 프로그램에서 이를 열어보니 한글이 깨져보이는 현상이 발생하였다. 이를 해결한 과정을 포스팅으로 정리해본다.

 

 

 

2. 해결 과정

 

문제의 csv파일을 notepad로 열어서 “다른 이름으로 저장” 을 해보면, 하단에 인코딩 방식을 볼 수 있는데, “UTF-8”로 지정되어있음을 확인할 수 있다. 따라서, 이 인코딩 방식을 수정해주어야 함을 느끼고 인코딩 방식을 “ANSI”로 지정하여 저장하고 싶었다.

 

 

그러나, JavaScript에서 데이터를 CSV 파일로 저장할 때, 인코딩을 “ANSI”로 지정하는 것은 언어 자체에서 직접 지원하지 않는다. "ANSI"는 일반적으로 Windows 시스템에서 사용되는 인코딩을 의미하지만, JavaScript는 표준으로 Unicode를 사용한다. 따라서 JavaScript에서는 기본적으로 “UTF-8” 인코딩을 사용하여 텍스트를 다룬다.

 

 

그러나 특정 상황에서 "ANSI" 인코딩이 필요한 경우에는 다음과 같은 방법을 사용할 수 있다:

  1. JavaScript에서 CSV 파일을 생성할 때, 텍스트를 UTF-8로 인코딩한 후 BOM(Byte Order Mark)을 추가한다. BOM은 파일의 시작 부분에 추가되는 특수한 바이트 시퀀스로, 텍스트 인코딩을 식별하는 데 사용됩니다. 일부 텍스트 편집기 및 스프레드시트 프로그램은 BOM을 인식하여 "ANSI"로 해석할 수 있다.
var csvData = "your,csv,data,here";
var utf8Bom = "\\\\uFEFF";
var csvContent = utf8Bom + csvData;

// csvContent를 파일로 저장하는 로직 추가

위의 코드에서 csvData는 실제 CSV 데이터를 포함하는 문자열이고, utf8Bom은 UTF-8 BOM을 나타내는 문자열이다. csvContent 변수에는 BOM이 추가된 UTF-8로 인코딩된 CSV 데이터가 포함된다.

 

 

(추가 설명) BOM(Byte Order Mark)이란 유니코드에서 엔디안을 구별하기 위해 사용되는 문자라고 한다. 이렇게 하면, 문서 맨 앞에 눈에 보이지 않는 특정한 바이트를 넣어서 이것을 해석하게 함으로써 해당 문서가 제대로 된 캐릭터셋 값을 가지도록 하는 원리이다.

 

 

위와 같이 데이터를 수정하여 저장한 후, 확인해보면, csv파일의 인코딩 방식이 “UTF-8(BOM)”으로 지정되게 된다. 이를 마찬가지로 Microsoft Excel로 열어보면, 한글이 정상적으로 보임을 확인할 수 있다.

 


#References

https://blog.iolate.kr/234

https://www.boolsee.pe.kr/phantom-menace-of-utf-8-with-bom/

https://m.blog.naver.com/PostView.naver?isHttpsRedirect=true&blogId=oohyes&logNo=221225380751

반응형