NextJS에서 SpreadJS 시작하기

SpreadJS는 Windows, Linux, Mac과 같은 다양한 플랫폼용 웹 애플리케이션을 개발할 수 있는 React 기반 프레임워크인 NextJS를 지원합니다.

NextJS는 TypeScript 지원, 하이브리드 정적 및 서버 렌더링, 라우트 사전 가져오기, 스마트 번들링 등 프로덕션에 필요한 모든 기능을 제공합니다.

자세한 내용은 https://nextjs.org/docs/getting-started를 참조하십시오.

Next.js 앱 생성

Next.js 애플리케이션을 생성하는 가장 쉬운 방법은 CLI에서 create-next-app 명령을 사용하는 것입니다.

1. 명령 프롬프트 또는 터미널에서 다음 명령을 실행하여 Next.js TypeScript 프로젝트를 생성합니다.

   npx create-next-app@latest

2. 프로젝트 이름을 입력합니다. 예: nextjs-with-spreadjs.

3. 터미널에서 구성 메시지가 표시되면 필요한 옵션을 선택하고 Enter 키를 눌러 확인합니다.

   터미널이 프로젝트를 설치하고 생성할 때까지 잠시 기다립니다.

4. 의존성이 설치되면 터미널에서 다음 명령을 입력하여 프로젝트를 시작합니다.

   cd nextjs-with-spreadjs
   npm run dev

5. 브라우저에서 http://localhost:3000을 열면 NextJS 환영 페이지가 표시됩니다.

6. 현재 터미널을 닫고 Visual Studio Code 또는 IDE에서 nextjs-with-spreadjs 폴더를 엽니다.

SpreadJS 설치

1. SpreadJS 패키지를 설치합니다.

   npm install @mescius/spread-sheets-react

2. SpreadSheet.jsx라는 JavaScript XML 파일을 생성하고 app 폴더에 추가한 후 다음 코드를 입력합니다.

   컴포넌트를 초기화하기 전에 유효한 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>);
   }

3. index 파일 내용을 변경합니다. app/page.tsx 파일의 기본 내용을 다음 코드로 교체합니다.

   'use client';
   
   import dynamic from "next/dynamic";
   
   const SpreadSheet = dynamic(
     () => {
       return import("../SpreadSheet");
     },
     { ssr: false }
   );
   
   export default function Home() {
     return (
       <div>
         <h1>
         Next.JS + Spreadsheets demo
         </h1>
         <SpreadSheet />
       </div>
     )
   }

스타일 가져오기

app 폴더에 있는 globals.css 파일에 다음 줄을 추가하여 SpreadJS CSS를 가져옵니다.

@import '@mescius/spread-sheets/styles/gc.spread.sheets.excel2016colorful';

앱 실행 및 테스트

npm run dev 명령으로 애플리케이션을 실행할 수 있습니다.

기본적으로 프로젝트는 http://localhost:3000/에서 실행됩니다.