[]
        
(Showing Draft Content)

NextJS에서 SpreadJS 시작하기

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 앱 생성하기

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