[]
SpreadJS는 Windows, Linux, Mac 등 다양한 플랫폼용 웹 애플리케이션 개발을 가능하게 하는 React 기반 프레임워크인 NextJS를 지원합니다. NextJS는 TypeScript 지원, 하이브리드 정적 및 서버 렌더링, 라우트 사전 가져오기, 스마트 번들링 등 프로덕션에 필요한 모든 기능을 제공합니다.
자세한 내용은 https://nextjs.org/docs/getting-started 를 참고하세요.
이 튜토리얼에서는 SpreadJS를 사용하는 Next.js 애플리케이션을 만드는 방법을 안내합니다.
참고: SpreadJS는 이제 NextJS 버전 14를 지원합니다. Next.js 애플리케이션을 생성하려면 설치된 Node.js 버전이 v18.17 이상이어야 합니다.
Next.js 애플리케이션을 생성하려면, 가장 간단한 방법은 CLI 도구에서 create-next-app 명령어를 사용하는 것입니다.
명령 프롬프트 또는 터미널에서 다음 명령어를 실행하여 Next.js TypeScript 프로젝트를 생성하세요.
npx create-next-app@latest
프로젝트 이름을 입력하세요. 예: nextjs-with-spreadjs.
터미널에 설정 메시지가 표시되면 필요한 옵션을 선택하고 Enter 키를 눌러 확인하세요.
터미널이 프로젝트를 설치하고 생성할 때까지 잠시 기다리세요.
의존성 설치가 완료되면, 터미널에 다음 명령어를 입력하여 프로젝트를 시작하세요.
cd nextjs-with-spreadjs
npm run dev
브라우저에서 http://localhost:3000 을 열면 NextJS 환영 페이지가 표시됩니다.
현재 터미널을 닫고 Visual Studio Code 또는 IDE에서 nextjs-with-spreadjs 폴더를 엽니다.
SpreadJS 패키지를 설치하세요.
npm install @mescius/spread-sheets-react
애플리케이션 루트 폴더에 components라는 폴더가 없으면 생성하세요.
components 폴더 안에 SpreadSheet.jsx라는 JSX 파일을 생성하고, 아래 코드를 추가하세요.
컴포넌트를 초기화하기 전에 유효한 SpreadJS 라이선스 키를 입력할 수 있습니다.
"use client";
import React, { useState } from "react";
import { SpreadSheets, Worksheet, Column } from "@mescius/spread-sheets-react";
import * as GC from "@mescius/spread-sheets";
// SpreadJS 라이선싱
var SpreadJSKey = "xxx"; // 유효한 라이선스 키를 입력하세요.
GC.Spread.Sheets.LicenseKey = SpreadJSKey;
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>);
}
index 파일 내용을 변경하세요. app/page.tsx 파일의 기본 내용을 다음 코드로 교체하세요.
import dynamic from "next/dynamic";
const SpreadSheet = dynamic(
() => {
return import("../components/SpreadSheet");
},
{ ssr: false }
);
export default function Home() {
return (
<div>
<h1>
Next.JS + Spreadsheets demo
</h1>
<SpreadSheet />
</div>
)
}
애플리케이션에 SpreadJS CSS를 임포트하려면, app 폴더에 있는 globals.css 파일에 다음 줄을 추가하세요.
@import '@mescius/spread-sheets/styles/gc.spread.sheets.excel2016colorful';
npm run dev
명령어로 애플리케이션을 실행할 수 있습니다.
기본적으로 프로젝트는 http://localhost:3000/ 에서 실행됩니다.