엑셀(.xlsx) 데이터를 firebase database에 넣기

로또번호를 이용한 토이프로젝트를 하면서 전회차 당첨번호 리스트가 필요했는데
동행복권 홈페이지에서 데이터를 엑셀파일로 받을 수 있었다.
해당 엑셀파일의 내용을 js에서 사용할 수 있게끔 데이터로 바꿀 수 있지않을까 찾아봤다.

먼저 xlsx 모듈을 설치해준다.

$ npm install xlsx

사용방법

모듈 사용

const xlsx = require('xlsx');

or

import * as xlsx from 'xlsx';



* 파일읽기
const fileData = xlsx.read(data, read_opts);

* json 형태로 데이터 표시
const data = xlsx.utils.sheet_to_json(sheet);

---

pages/addServerData.js

import React from "react";
import db from "../firebaseConfig";
import * as XLSX from "xlsx";
import { doc, setDoc } from "firebase/firestore";


export default function AddServerData() {
/* 
FlieReader 객체를 이용하여 업로드된 파일을 읽을 수 있다.

FileReader.readAsArrayBuffer()
  - 지정된 내용을 읽기 시작한다. 완료되면 속성에 파일의 데이터를 나타내는 result가 포함된다 

fileReader.onload
 - load이벤트 핸들러
*/ 
  const readExcel = async (file) => {
    const fileReader = new FileReader();
    fileReader.readAsArrayBuffer(file);
    fileReader.onload = async (e) => {
      if (!e.target) return;
      const bufferArray = e.target.result;
      const fileInformation = XLSX.read(bufferArray, {
        type: "buffer",
        cellText: false,
        cellDates: true,
      });
      
      const sheetName = fileInformation.SheetNames[0];
      const rawData = fileInformation.Sheets[sheetName];
      const data = XLSX.utils.sheet_to_json(rawData);
      try {
        for (let i = 0; i < data.length; i++) {
          const {
            drwNo,
            date,
            drwNo1,
            drwNo2,
            drwNo3,
            drwNo4,
            drwNo5,
            drwNo6,
          } = data[i];
          await setDoc(
            doc(db, "firstNums", "data"),
            {
              [drwNo]: [drwNo1, drwNo2, drwNo3, drwNo4, drwNo5, drwNo6],
            },
            { merge: true }
          );
        }
      } catch (error) {
        console.error("Error posting data to Firestore:", error);
      }
    };
  };

  const handleExcelFileChange = (e) => {
    if (!e.target.files) return;
    const file = e.target.files[0];
    readExcel(file);
  };

  return (
    <>
      <div className="flex-center">
        <input type="file" onChange={(e) => handleExcelFileChange(e)} />
      </div>
      <style jsx>{`
        .flex-center {
          display: flex;
          width: 100%;
          justify-content: center;
        }
      `}</style>
    </>
  );
}

addServerData 페이지에서 엑셀파일을 업로드하게되면 엑셀파일의 데이터를 읽어 json 형태로 데이터를 변환해준다.

변환된 데이터를 이용해 firebase database에 각 회차별로 데이터를 넣어주었다.
database에 데이터가 덮어 씌워지지않도록 {merge : true} 옵션을 추가 해줬다.