[React] 엑셀 업로드(xlsx,csv-UTF-8) 에러 발생 - solved

CSV 파일이고 UTF-8 형식인데, 업로드된 파일을 사용하면 한글이 깨져서 나왔다.
뭐가 문제인지,,, ChatGpt 가 도와줬다

에러 코드

const handleDrop = useCallback(async (acceptedFiles: FileList | null) => {
    if (acceptedFiles && acceptedFiles.length > 0) {
      const file = acceptedFiles[0];
      const reader = new FileReader();
      const formData = new FormData();
      formData.append("file", file);

      reader.onload = async (e) => {
        if (e.target && e.target.result) {
          const data = new Uint8Array(e.target.result as ArrayBuffer);
		  const workbook = XLSX.read(data, { type: "array", bookVBA: true });

          const sheetName = workbook.SheetNames[0];
          const sheet = workbook.Sheets[sheetName];
          const jsonData: RowData[] = XLSX.utils.sheet_to_json<RowData>(sheet);
          const filteredData = jsonData.filter(
            (row) => row["매입상태"] !== "승인취소"
          );
          const tablesByCode: { [code: string]: RowData[] } = {};
          filteredData.forEach((row) => {
            const code = row["카테고리"];
            if (!tablesByCode[code]) {
              tablesByCode[code] = [];
            }
            tablesByCode[code].push(row);
          });

          setUploadedFile(file);
          setTablesByCode(tablesByCode);
          let countCheck = 0;
          let countCredit = 0;

          filteredData.forEach((row) => {
            const 이용구분 = row["이용구분"];
            if (이용구분.includes("체크")) {
              countCheck++;
            } else if (이용구분.includes("신용")) {
              countCredit++;
            }
          });

          let preferCardType = "";
          if (countCheck > countCredit) {
            setPreferCardType("체크카드");
          } else if (countCheck < countCredit) {
            setPreferCardType("신용카드");
          } else {
            console.log("체크와 신용의 갯수가 같음:", countCheck);
            setPreferCardType("체크카드 & 신용카드");
          }

          setPreferCardType(preferCardType);


        }
      };
		reader.readAsArrayBuffer(file);

    }
  }, []);

해결 소스

const handleDrop = useCallback(async (acceptedFiles: FileList | null) => {
    if (acceptedFiles && acceptedFiles.length > 0) {
      const file = acceptedFiles[0];
      const reader = new FileReader();
      const formData = new FormData();
      formData.append("file", file);

      reader.onload = async (e) => {
        if (e.target && e.target.result) {
  
          const text = e.target.result as string; // 파일 데이터를 텍스트로 변환
          const workbook = XLSX.read(text, { type: "binary", bookVBA: true });
          const sheetName = workbook.SheetNames[0];
          const sheet = workbook.Sheets[sheetName];
          const jsonData: RowData[] = XLSX.utils.sheet_to_json<RowData>(sheet);
          const filteredData = jsonData.filter(
            (row) => row["매입상태"] !== "승인취소"
          );
          const tablesByCode: { [code: string]: RowData[] } = {};
          filteredData.forEach((row) => {
            const code = row["카테고리"];
            if (!tablesByCode[code]) {
              tablesByCode[code] = [];
            }
            tablesByCode[code].push(row);
          });

          setUploadedFile(file);
          setTablesByCode(tablesByCode);
          let countCheck = 0;
          let countCredit = 0;

          filteredData.forEach((row) => {
            const 이용구분 = row["이용구분"];
            if (이용구분.includes("체크")) {
              countCheck++;
            } else if (이용구분.includes("신용")) {
              countCredit++;
            }
          });

          let preferCardType = "";
          if (countCheck > countCredit) {
            setPreferCardType("체크카드");
          } else if (countCheck < countCredit) {
            setPreferCardType("신용카드");
          } else {
            console.log("체크와 신용의 갯수가 같음:", countCheck);
            setPreferCardType("체크카드 & 신용카드");
          }

          setPreferCardType(preferCardType);


        }
      };

      reader.readAsText(file, "UTF-8");
    }
  }, []);

요로케 해결해야했다.

const text = e.target.result as string; // 파일 데이터를 텍스트로 변환
const workbook = XLSX.read(text, { type: "binary", bookVBA: true });

reader.readAsText(file, "UTF-8");