NextJS에서 SpreadJS 시작하기

SpreadJS는 Windows, Linux, Mac 등 다양한 플랫폼용 웹 애플리케이션 개발을 가능하게 하는 React 기반 프레임워크인 NextJS를 지원합니다. NextJS는 TypeScript 지원, 하이브리드 정적 및 서버 렌더링, 라우트 사전 가져오기, 스마트 번들링 등 프로덕션에 필요한 모든 기능을 제공합니다.

자세한 내용은 https://nextjs.org/docs/getting-started 를 참고하세요.

이 튜토리얼에서는 SpreadJS를 사용하는 Next.js 애플리케이션을 만드는 방법을 안내합니다.

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

   애플리케이션 루트 폴더에 components라는 폴더가 없으면 생성하세요.

2. 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>);
   }

3. 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/ 에서 실행됩니다.