[모각코] ReactJS 프로젝트 시작하기(2) - json 파일만들기

이번시간에는 저번시간에 만들었던 excel 파일을 리액트에서 사용할수있도록 json 파일로 변환하고 이를 api로서

쓸수있게끔 작업해보았다.

일단 결론 부터 말하자면..코드로 변환하는건 아직 구현하지못했다.

모각코 시간내내 관련해서 찾아보고 실행해보고 라이브러리도 이것저것 깔아보았는데.. .. .

import React, { useState } from "react";
import * as XLSX from "xlsx";
import api from "./api.xlsx";

console.log(api);
class ExcelToJson extends React.Component {
  constructor(props) {
    super(props);
    this.handleClick = this.handleClick.bind(this);
    this.state = {
      file: "",
    };
  }

  handleClick(e) {
    this.refs.fileUploader.click();
  }

  filePathset(e) {
    e.stopPropagation();
    e.preventDefault();
    var file = e.target.files[0];
    this.setState({ file });
  }

  readFile() {
    var f = this.state.file;
    var name = f.name;
    const reader = new FileReader();
    reader.onload = (evt) => {
      // evt = on_file_select event
      /* Parse data */
      const bstr = evt.target.result;
      console.log("evt", evt.target.result);
      const wb = XLSX.read(bstr, { type: "binary" });
      /* Get first worksheet */
      const wsname = wb.SheetNames[0];
      const ws = wb.Sheets[wsname];
      /* Convert array of arrays */
      const data = XLSX.utils.sheet_to_csv(ws, { header: 1 });
      /* Update state */
      console.log(this.convertToJson(data)); // shows data in json format
    };
    reader.readAsBinaryString(f);
  }

  convertToJson(csv) {
    var lines = csv.split("\n");

    var result = [];

    var headers = lines[0].split(",");

    for (var i = 1; i < lines.length; i++) {
      var obj = {};
      var currentline = lines[i].split(",");

      for (var j = 0; j < headers.length; j++) {
        obj[headers[j]] = currentline[j];
      }

      result.push(obj);
    }

    //return result; //JavaScript object
    return JSON.stringify(result); //JSON
  }

  render() {
    return (
      <div>
        <input
          type="file"
          id="file"
          ref="fileUploader"
          onChange={this.filePathset.bind(this)}
        />
        <button
          onClick={() => {
            this.readFile();
          }}
        >
          Read File
        </button>
      </div>
    );
  }
}

export default ExcelToJson;

위와 같은 코드를 구글링하던 와중에 발견하였다.

근데 우리가 원하는건 로컬에서 파일을 넣어주고, 그 파일을 json 변수로 반환해줘서 다른파일들에서 이를 사용할수있게끔하는거였는데

이건 gui 형식으로 버튼을 눌러서 "파일을 업로드"하고 이를 json 변수를 반환해주는 형식이다...

문제는 나는 온라인에 파일을 업로드하는게 아니라 로컬에서 바로 연결해주는,어떻게 보면 더 쉽고 간단한 방식을 원하는데 엑셀 파일을 더군다나 특이한 확장자라서 바로 넣어줄수없고 변환을 해줘야한다.

그래서 위의 코드에서는 FileReader() 함수를 통해서 변환해주는데 이를  로컬에서 연결해준 파일로 바로 넣어주면

계속 알수없는 에러들이 떴다;;

결국에는 온라인 컨버터를 사용해서 json 파일로 만들었다..일단 데이터 있어야 화면도 구성할수있기때문에..

https://products.aspose.app/cells/ko/conversion/excel-to-json

EXCEL에서 JSON로 변환기

해당 사이트를 이용해서 json형식으로 바꿔보앗따..헤헤

사실 json 형식은 중괄호, 대괄호 이렇게 두가지 형식으로 구성되고 순서에 따라서 되게 다양한 형식으로 구성된다고 알고있는데  일단 제일 간단한 형태로 변환이 됐기때문에 이걸로 해보고 안되면 추후에 수정하려고한다.

코드에서 사용할땐 위와같이 호출해줄 이름도 같이 덧붙여줘야함ㅇㅇ

더불어 나의 담당파트는 localStorage랑  search 기능 구현인데

localStorage의 경우 recoil 기능을 쓰면된다고 추천받았다ㅎ.ㅎ 

따라서 다음 모각코시간까지 recoil을 학습하고, 기능을 구현하려고한다