papa-parse란?

npm download 수치만 일주일에 거의 3백만 건이 넘어가는 훌륭한 라이브러리 인 듯하다. 한국어를 지원하기 때문에 다른 라이브러리를 찾지 않고 이녀석만 줄창 쓰고 있다. 필요는 하지만 항상 쓰는 것은 아니어서 방법을 계속 까먹고 있기 때문에 지금처럼 정리하지 않으면 안될 것 같다.

npm i papaparse && npm i @types/papaparse

타입을 함께 설치해줘야만 하는 귀찮음이 있다. 데이터를 가공하는 것을 unparse => packing 개념, parse => 데이터를 가져오는 것으로 이해해야 편하다.

/lib/papa.tsx

import Papa, { UnparseConfig } from 'papaparse'

export const unparseData = (data: any[], fileName: string, config: UnparseConfig) => {
	const csv = Papa.unparse(csv, config )
    const blob = new Blob([csv], { type: "text/csv;charset=utf-8;" });
  	const url = URL.createObjectURL(blob);

  	const download = () => {
      const link = document.createElement("a");
      link.href = url;
      link.setAttribute(
        "download",
        fileName.includes(".csv") ? fileName : fileName + ".csv"
      );
      link.click();
    };

  return { download, url, fileName, csv };
}

주의할 점

data로 받는 배열은 원시타입인 string/number/등을 넣는 간단한 배열을 넣게 되면 오류가 발생한다. 그러므로 꼭 객체 형태로 넣어야 한다. 이 때 값의 이름들을 한국어로 작성하면 예쁜 형태의 엑셀 파일을 만들 수 있다.

Bom 이라던가 encording을 한다던가 할 필요는 전혀 없다. fileName을 encode 했을 때 한국어를 #$$ 이런 식으로 변환하기 때문에 전혀 고려 대상이 아니다. Copilot, ChatGPT 의 한국어 지원은 아직 많이 미약한 상태인듯하다.

UnparseConfig에 들어가는 옵션들을 다루면서 깊게 이해가 필요한 듯 하다.