Electron+React 프로젝트에서 엑셀 다운로드 기능 구현 (export-from-json, xlsx)

안녕하세요:) 개발자 우디입니다! 아래 내용 관련하여 작업 중이신 분들께 도움이되길 바라며 글을 공유하니 참고 부탁드립니다😊
(이번에 벨로그로 이사오면서 예전 글을 옮겨적었습니다. 이 점 양해 부탁드립니다!)

작업 시점: 2022년 5~7월

배경

• 편하게 마커 정보를 검토하기 위해 바로 엑셀로 다운로드 받을 수 있도록 구현함.
• 엑셀 다운로드 관련하여 찾아보다가, 다운로드 수도 많고 업데이트도 비교적 최근에 이루어진 export-from-json 라이브러리 활용하기로 결정.

export-from-json

• 관련 조사

  • JSON 형식을의 자료를 plain text, css, html, json, csv, xls, xml 등의 형식으로 내보내기 해주는 라이브러리.
    • JavaScript Object Notation (JSON)
      • Javascript 객체 문법으로 구조화된 데이터를 표현하기 위한 문자 기반의 표준 포맷.
      • 웹 어플리케이션에서 데이터를 전송할 때 일반적으로 사용(서버에서 클라이언트로 데이터를 전송하여 표현하려거나 반대의 경우)

• 사용법

  • 설치

    yarn add export-from-json

  • 기본 설명

    • CommonJS, EcmaScript 모듈, UMD 가져오기를 지원함.
      • CommonJS
        • NodeJs 환경에서 자바스크립트 모듈을 사용하기 위해 만들어진 모듈 시스템.
        • 모듈을 외부에서 사용할 수 있도록 내보낼 때는 exports, module.exports와 같은 키워드를 사용하며, 외부에서 모듈을 불러올 때는 required를 사용함.
      • EcmaScript
        • Ecma 인터내셔널에 의해 제정된 ECMA-262 기술 규격에 의해 정의된 범용 스크립트 언어
        • ECMAScript 모듈(ESM)은 웹에서 모듈을 사용하기 위한 사양임.
        • Webpack은 ECMAScript 모듈을 최적화하기 위한 처리를 지원함.
      • AMD(Asynchronous Module Definition)
        • CommonJS 그룹에서 의견이 맞지 않아 나온 사람들이 만든 그룹.
        • 비동기 모듈에 대한 표준안을 다루는 그룹
        • CommonJS가 서버쪽에서 장점이 많은 반면, AMD는 브라우저 쪽에서 더 큰 효과를 발휘함.
        • 브라우저에서는 모든 모듈이 다 로딩될 때까지 기다릴 수 없기 때문에 비동기 모듈 로딩방식으로 구동
      • UMD(Universal Module Definition)
        • CommonJS 와 AMD로 나뉘는 걸 통합하기 위한 하나의 패턴.
    • 프론트 엔드 다운로더를 기본 프로세서로 사용함.
    • 브라우저 환경에서는 기본 프로세서에 콘텐츠 크기 제한이 있으므로 콘텐츠 크기가 클 경우에는 서버 측 솔루션 사용 고려하기.

  • 모듈 시스템에서의 사용 예시.

    import exportFromJSON from 'export-from-json'
    
    const data = [{ foo: 'foo'}, { bar: 'bar' }]
    const fileName = 'download'
    const exportType =  exportFromJSON.types.csv
    
    exportFromJSON({ data, fileName, exportType })

  • 타입 설명
    

    • JSON은 parse(구문 분석) 가능한 JSON 문자열 또는 serialization(직렬화) 가능한 JavaScript 개체를 의미.
    • beforeTableEncode 예시

      exportFromJSON({
          data: jsonData,
          fileName: 'data',
          exportType: exportFromJSON.types.csv,
          beforeTableEncode: rows => rows.sort((p, c) => p.fieldName.localeCompare(c.fieldName)),
      })

  • 실제 코드에 적용

    import exportFromJSON from 'export-from-json';
    ...
    const data = newMarkerData;
    const fileName = 'download';
    const exportType = 'xls';
    exportFromJSON({ data, fileName, exportType });

  • 코드 적용 결과

    • 엑셀에 원하는 정보가 잘 담겨서 다운로드 됨.

xlsx

• 엑셀 파일 형식인 xlsx 파일을 다루는 라이브러리.
• xlsx 파일을 읽고 쓰고 변환하고 분석할 수 있고, 엑셀의 다양한 기능과 형식을 지원함.
• 브라우저와 node.js에서 모두 사용 가능.
• 작동 방식
  • 새로운 워크북 셍성 → json을 sheet에 적합한 데이터로 변환 → 워크북에 시트 추가 → 엑셀 파일 생성.
• 다양한 형식으로 변환 가능.
  • XLSX.utils.sheet_to_csv
  • XLSX.utils.sheet_to_txt
  • XLSX.utils.sheet_to_html
  • XLSX.utils.sheet_to_json
  • XLSX.utils.sheet_to_formulae
• 실제 코드 적용

  const xlsx = require('xlsx');
  ...
  const book = xlsx.utils.book_new();
  const dataJSON = xlsx.utils.json_to_sheet(allChatFrequentWordArr);
  xlsx.utils.book_append_sheet(book, dataJSON, 'All Chatting');
  xlsx.writeFile(book, fileName);

• 코드 적용 결과
  • 역시나 엑셀에 원하는 정보가 잘 담겨서 다운로드 됨.

export-from-json vs xlsx ?

• 직접 사용해본 결과, xlsx가 더욱 사용하기 편했음
  • 다양한 형식 변환 지원
    • xls보다 최신 형식인 xlsx 형식도 지원 -> 본 작업에서는 대량의 데이터를 다뤄야 하는데, xls보다 용량이 크다는 xlsx의 장점을 잘 활용할 수 있었음
      
  • 브라우저, node 환경 모두에서 간편하게 사용할 수 있음

배우고 느낀 점

• 개발을 하다보면 다양한 라이브러리들을 활용하게 되는데, 기능이 유사한 라이브러리가 여러개 있을 수 있으니 잘 살펴보고 선택해야겠다.
• 여러 라이브러리들 중에서 어떤 것을 선택하는게 좋을지에 대해서도 계속해서 고민해 봐야겠다.