Jamstack 응용 프로그램에 스프레드시트 추가하기

고급기능 Jamstack 응용 프로그램에 스프레드시트 추가하기

추천0

페이지 정보

작성자 GrapeCity

작성일 2021-08-18 15:38 조회 780회 댓글 0건

본문

관련링크

Jamstack 응용 프로그램은 개발하기 쉽고 뛰어난 성능을 제공하지만 대부분 사전 렌더링되고 정적이라는. 문제가 있습니다. 하지만 꼭 그럴 필요는 없습니다! 정적 응용 프로그램은 사이트의 고정된 부분에 적합하지만 Jamstack 응용 프로그램은 동적 대화형 컴포넌트도 통합할 수 있습니다.

이 실습 튜토리얼에서는 Next.js로 만든 Jamstack 응용 프로그램에 SpreadJS 스프레드시트를 추가하는 방법을 단계별로 살펴보겠습니다. Next.js React 프레임워크는 서버 측 사전 렌더링을 즉시 제공합니다.

시작하기

시작하기 전에 npm과 함께 Node.js가 설치되어 있는지 확인하십시오. 그러지 않으면 다음 메서드 중 하나를 사용하여 설치하십시오.

공식 웹사이트에서 운영 체제에 적합한 설치 바이너리를 받으십시오.
시스템의 공식 패키지 관리자를 사용하십시오.
nvm과 같은 노드 버전 관리자를 사용하십시오.

CSS 스타일용 Bootstrap 4가 통합된 이 템플릿을 기반으로Next.js 응용 프로그램을 만드는 것부터 시작하겠습니다. 이렇게 하려면 새 명령줄 인터페이스(CLI)로 이동하여 다음 명령을 실행합니다.

 npx create-next-app --example with-react-bootstrap nextspreadjsdemo

npx 유틸리티는 노드 패키지를 실행합니다. 버전 5.2 이상에서 npm과 함께 번들로 제공됩니다.

npx 덕분에 create-next-app을(를) 설치할 필요가 없습니다. 그러나 시스템에 create-next-app을 설치하려면 다음 명령을 대신 실행하십시오.

 npm install create-next-app --global

다음으로 프로젝트의 폴더로 이동하여 다음 명령을 사용하여 개발 서버를 실행합니다.

  cd nextspreadjsdemo  
  npm run dev

그런 다음 웹 브라우저로 http://localhost:3000/으로 이동하여 실행 중인 응용 프로그램을 확인합니다. 이 시점에서 GrapeCity 응용 프로그램의 스크린샷입니다:

nextjs

이것은 부트스트랩 카드가 있는 최소 스타일의 사용자 인터페이스(UI)입니다. 프로젝트의 pages/index.js 파일에서 편집할 수 있습니다.

스프레드시트 추가

이제 Next.js 응용 프로그램을 설정했으므로 Jamstack 응용 프로그램에서 SpreadJS를 설정하는 방법을 단계별로 살펴보겠습니다.

새 명령줄 인터페이스로 이동하여 프로젝트 폴더에서 다음 명령을 실행하여 npm에서 @grapecity/spread-sheets-react를 설치합니다. 이 패키지는 SpreadJS React 래퍼 컴포넌트를 제공합니다.

    npm install @grapecity/spread-sheets-react

다음으로 명령을 사용하여 프로젝트 내부에 components/SpreadSheet.jsx 파일을 만듭니다.

  mkdir components && cd components  
  touch SpreadSheet.jsx

파일을 생성했으면 components/SpreadSheet.jsx 파일을 열고 다음 가져오기를 추가합니다.

import React, { useState } from "react";  
import { SpreadSheets, Worksheet, Column } from "@grapecity/spread-sheets-react";  
import * as GC from "@grapecity/spread-sheets";

그런 다음에 다음 줄을 추가하여 평가판 라이센스를 설정합니다.

GC.Spread.Sheets.LicenseKey = window["evalKey_V14"];

다음으로 함수를 정의합니다.

export default function SpreadSheet() {  

const [spreadBackColor, setSpreadBackColor] = useState('aliceblue');  
const [sheetName, setSheetName] = useState('Empolyees');  
const [hostStyle, setHostStyle] = useState({  
width: '100%',  
height: '700px'  
});  
const dataArr = [  
{  
"jobTitleName":"Developer",  
"preferredFullName":"Romin Irani",  
"region":"CA",  
"phoneNumber":"408-1234567"  
},  
{  
"jobTitleName":"Developer",  
"preferredFullName":"Neil Irani",  
"region":"CA",  
"phoneNumber":"408-1111111"  
},  
{  
"jobTitleName":"Program Directory",  
"preferredFullName":"Tom Hanks",  
"region":"CA",  
"phoneNumber":"408-2222222"  
}  
];  
const [data, setData] = useState(dataArr);  
const [columnWidth, setColumnWidth] = useState(200);  
return (  
<SpreadSheets backColor={spreadBackColor} hostStyle={hostStyle}>  
<Worksheet name={sheetName} dataSource={data}>  
<Column dataField='preferredFullName' width={columnWidth}></Column>  
<Column dataField='jobTitleName' width={columnWidth}></Column>  
<Column dataField='phoneNumber' width={columnWidth}></Column>  
<Column dataField='region' width={columnWidth}></Column>  
</Worksheet>  
</SpreadSheets>);  
}

useState 후크를 사용하여 스프레드시트 이름, 색상, 열 너비, 스타일 및 데이터를 저장할 일부 상태 변수를 정의합니다.

그런 다음 스프레드시트, 워크시트 및 열 React 컴포넌트를 사용하여 스프레드시트를 만듭니다. 이는 SpreadJS와 React로 스프레드시트를 만드는 첫 번째 방법입니다.

다음 섹션에서는 JavaScript 메서드를 사용하는 두 번째 방법을 살펴보겠습니다.

다음으로 pages/index.jsx 파일을 열고 다음과 같이 업데이트합니다.

import { Container, Row, Col } from 'react-bootstrap';  
import dynamic from "next/dynamic";  
const SpreadSheet = dynamic(  
() => {  
return import("../components/SpreadSheet");  
},  
{ ssr: false }  
);  

export default function Home() {  

return (  
<Container>  
<h1>  
Adding Spreadsheets to a Jamstack Application  
</h1>  
<p>  
Next.JS + SpreadJS demo  
</p>  
<Container>  
<Row className="justify-content-md-between">  
<Col>  
<SpreadSheet />  
</Col>  
</Row>  
</Container>  
</Container>  
)  
}

이제 style/index.css 파일을 열고 다음 줄을 추가합니다.

@import "@grapecity/spread-sheets/styles/gc.spread.sheets.excel2013white.css";

이것은 SpreadJS CSS를 응용 프로그램으로 가져옵니다.

다음과 같이 구성 요소를 가져오는 경우 주의하세요.

import SpreadSheet from "../components/SpreadSheet";

다음과 같은 오류가 발생합니다. 참조 오류: 문서가 정의되지 않았습니다.

SpreadJS가 브라우저에서만 사용할 수 있는 문서 개체에 응답하기 때문입니다.

Node.js에서는 문서가 정의되어 있지 않습니다. 이 오류를 방지하려면 다음 명령을 사용하여 서버가 아닌 클라이언트에서 이 컴포넌트를 렌더링하도록 Nest.js에 지시해야 합니다.

const SpreadSheet = dynamic(  
() => {  
return import("../components/SpreadSheet");  
},  
{ ssr: false }  
);

Next.js에서 클라이언트측 전용 컴포넌트를 렌더링하는 방법은 여러 가지가 있습니다.

예에서는 동적 가져오기를 사용하여 스프레드시트 컴포넌트를 가져오고 srr: false를 설정하여 구성 요소가 서버 측에서 렌더링되지 않도록 합니다.

JSON 파일에서 데이터 로드

JavaScript 배열에서 로드된 데이터로 스프레드시트를 표시하는 방법을 살펴보았으므로 이제 JSON 파일에서 데이터를 로드하는 방법을 살펴보겠습니다.

components/SpreadSheet.jsx 파일로 돌아가서 다음과 같이 업데이트합니다.

const [data, setData] = useState([]);  
const [columnWidth, setColumnWidth] = useState(200);  

useEffect(()=>{  
async function getData(){  
const res = await fetch("data.json");  
const data = await res.json();  
setData(data.employees);  

console.log(data);  
}  

getData();  
},[]);

먼저 useState 후크를 사용하여 두 가지 상태 변수 data와 columnWidth를 정의합니다.

다음으로 useEffect 후크 내에서 JavaScript 가져오기 메서드와 Async/Await를 사용하여 JSON 데이터 파일을 가져옵니다.

그런 다음 가져온 데이터를 데이터 상태 변수에 할당합니다.

다음으로 public/ 폴더 안에 data.json 파일을 생성하고 다음 데이터를 추가합니다.

{  
"employees": [  
{  
"jobTitleName": "Developer",  
"preferredFullName": "Romin Irani",  
"region": "CA",  
"phoneNumber": "408-1234567"  
},  
{  
"jobTitleName": "Developer",  
"preferredFullName": "Neil Irani",  
"region": "CA",  
"phoneNumber": "408-1111111"  
},  
{  
"jobTitleName": "Program Directory",  
"preferredFullName": "Tom Hanks",  
"region": "CA",  
"phoneNumber": "408-2222222"  
}  
]  
}

이때 응용 프로그램은 다음과 같아야 합니다.

jamstack

차트 추가

이제 응용 프로그램에 차트와 시각화를 추가해 보겠습니다.

Excel과 마찬가지로 SpreadJS는 스프레드시트 데이터를 사용하여 차트 생성과 표시를 지원합니다. 다양한 유형의 2차원 차트를 렌더링하고 해당 요소를 사용자 정의하여 사용자가 데이터를 효율적으로 시각화할 수 있습니다.

차트를 사용하여 데이터 집합의 추세와 패턴을 분석할 수 있습니다. 지난 4년 동안의 판매 데이터가 있다고 가정해 봅시다. 차트를 이용하면 어느 해에 판매량이 가장 많았는지 쉽게 확인할 수 있습니다.

SpreadJS의 차트 기능 덕분에 모든 차트 요소를 React의 기본 데이터 바인딩 지원과 동기화 상태를 유지하면서 응용 프로그램의 데이터를 시각화할 수 있습니다.

스프레드시트에서 차트를 사용하기 전에 먼저 @grapecity/spread-sheets-charts 패키지를 사용하여 차트 지원으로 SpreadJS를 확장해야 합니다.

명령줄 인터페이스로 이동하여 프로젝트의 루트 폴더에서 다음 명령을 실행합니다.

  npm install @grapecity/spread-sheets-charts

이제 구성 요소/SpreadSheet.jsx 파일로 돌아가서 다음과 같이 패키지를 가져옵니다.

  import '@grapecity/spread-sheets-charts';

그런 다음 두 번째 워크시트를 추가하여 차트를 표시하고 workbookInitialized 이벤트를 다음과 같이 설정합니다.

<SpreadSheets backColor={spreadBackColor} hostStyle={hostStyle} workbookInitialized={workbookInit}>  
...  
<Worksheet name= "Chart">  
</Worksheet>  
</SpreadSheets>

다음으로 SpreadSheet 컴포넌트에 다음 코드를 추가합니다.

let dataArray = [  
["", '2012', '2013', '2014', '2015', '2016', '2017'],  
["Chrome", 0.3782, 0.4663, 0.4966, 0.5689, 0.6230, 0.6360],  
["FireFox", 0.2284, 0.2030, 0.1801, 0.1560, 0.1531, 0.1304],  
["IE", 0.3214, 0.2491, 0.2455, 0.1652, 0.1073, 0.0834],  
];  

const workbookInit = (spread) => {  

let chartSheet = spread.getSheet(1);  
chartSheet.setArray(0, 0, dataArray);  

chartSheet.suspendPaint();  
let chart = chartSheet.charts.add(('Chart1'), GC.Spread.Sheets.Charts.ChartType.line, 30, 85, 800, 350, "A1:H4", GC.Spread.Sheets.Charts.RowCol.rows);  
spread.resumePaint();  
};

workbookInitialized 이벤트는 스프레드 초기화 후에 발생합니다. 할당된 이벤트 콜백에서 초기화된 스프레드시트 개체에 액세스할 수 있습니다.

먼저 6년 동안의 브라우저 사용을 포함하는 데이터 배열을 정의합니다. 그런 다음 workbookInit 함수를 정의합니다.

스프레드시트를 참조하기 위해 workbookInit 함수를 workbookInitialized 이벤트에 바인딩합니다.

그런 다음 getSheet 메서드를 사용하여 차트를 표시하려는 시트에 액세스합니다.

시트의 setArray 메서드를 사용하여 브라우저가 데이터를 사용하도록 설정하고 chart.add 메서드를 사용하여 데이터 배열의 꺾은선형 차트를 표시합니다. 결과는 다음과 같습니다.