[]
        
(Showing Draft Content)

NuxtJS에서 SpreadJS 시작하기

SpreadJS는 VueJS 기반 웹 앱 개발 프레임워크인 NuxtJS를 지원합니다. NuxtJS는 개발을 쉽고 빠르며 체계적으로 만들어 줍니다. NuxtJS는 React.js 프레임워크인 NextJS와 매우 유사합니다. NuxtJS의 주요 기능으로는 폴더 구조, 서버 사이드 렌더링(SSR), 정적 렌더링, 코드 분할 등이 있습니다.

자세한 내용은 https://nuxtjs.org/docs/get-started/installation 를 참고하세요.

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

Vue2

Nuxt.js 애플리케이션 생성하기

Nuxt.js 애플리케이션을 만드는 가장 쉬운 방법은 Create Nuxt App 도구를 사용하는 것입니다.

  1. 명령 프롬프트 또는 터미널에서 다음 명령어를 실행하여 Nuxt.js 프로젝트를 생성하세요.

    npx create-nuxt-app nuxt2WithSJS

    터미널에서 설정 메시지가 표시되면 필요한 옵션을 선택하고 Enter 키를 눌러 확인하세요. 터미널이 프로젝트를 설치하고 생성할 때까지 잠시 기다리세요. 여러 질문이 나오면 다음과 같이 응답할 수 있습니다:

    Project language: JavaScript
    Project manager: Npm
    UI framework: None
    Template engine: HTML
    Nuxt.js modules: Axios
    Linting tools: ESLint
    Testing framework: None
    Rendering mode: Single Page App
    Deployment target: Static
    Development tools: jsconfig.json
    Continuous integration: None
    Version control system: Git
  2. 터미널에 다음 명령어들을 입력하세요.

    cd nuxt2WithSJS
    npm run dev
  3. 브라우저에서 다음 링크를 열면 NuxtJS 환영 페이지가 표시됩니다.

    http://localhost:3000/

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

SpreadJS 설치하기

  1. SpreadJS 패키지를 설치하세요.

    npm install --save @mescius/spread-sheets-vue

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

  2. components 폴더에 SpreadSheet.vue 파일을 생성하고, 다음 코드를 추가하세요. 컴포넌트를 초기화하기 전에 유효한 SpreadJS 라이선스 키를 입력할 수 있습니다.

    <template>
    <div>
        <gc-spread-sheets :hostClass='hostClass'>
            <gc-worksheet :dataSource="dataTable">
                <gc-column :width="width" :dataField="'preferredFullName'"></gc-column>
                <gc-column :width="width" :dataField="'jobTitleName'"></gc-column>
                <gc-column :width="width" :dataField="'phoneNumber'"></gc-column>
                <gc-column :width="width" :dataField="'region'"></gc-column>
            </gc-worksheet>
        </gc-spread-sheets>
    </div>
    </template>
    
    <script>
    import '@mescius/spread-sheets/styles/gc.spread.sheets.excel2016colorful.css'
    import '@mescius/spread-sheets-vue'
    import * as GC from "@mescius/spread-sheets";
    
    // SpreadJS 라이선싱
    var SpreadJSKey = "xxx";          // 유효한 라이선스 키를 입력하세요.
    GC.Spread.Sheets.LicenseKey = SpreadJSKey;
    
    export default {
        data() {
            return {
                hostClass: 'spread-host',
                width: 100
            }
        },
        computed: {
            dataTable() {
                return [{
                        "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"
                    }
                ];
            }
        }
    }
    </script>
    
    <style scoped>
    .spread-host {
        width: 600px;
        height: 600px;
    }
    </style>
  3. pages/index.tsx 파일의 기본 내용을 아래 코드로 교체하세요.

    <template>
    <div>
        <h1>
            Adding Spreadsheets to a Jamstack Application
        </h1>
        <p>
            Nuxt.JS v2 + SpreadJS demo
        </p>
        <SpreadSheet />
    </div>
    </template>

실행 및 테스트하기

앱은 npm run dev 명령어로 실행할 수 있습니다.

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

Vue3

Nuxt.js 애플리케이션 생성하기

Nuxt.js 애플리케이션을 만드는 가장 쉬운 방법은 Create Nuxt App 도구를 사용하는 것입니다.

  1. 명령 프롬프트나 터미널에서 다음 명령어를 실행하여 Nuxt.js 프로젝트를 생성하세요.

    npx nuxi init nuxt3WithSJS
  2. 터미널에 다음 명령어들을 입력하세요.

    cd nuxt3WithSJS
    npm install
    npm run dev
  3. 브라우저에서 다음 링크를 열면 NuxtJS 환영 페이지가 표시됩니다.

    http://localhost:3000/

  4. 현재 터미널을 닫고, Visual Studio Code 또는 다른 IDE에서 nuxtjs-with-spreadjs 폴더를 열어주세요.

SpreadJS 설치하기

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

    npm install --save @mescius/spread-sheets-vue

    애플리케이션 루트 폴더에 components 폴더가 없다면, 새로 생성하세요.

  2. SpreadSheet.vue라는 JavaScript XML 파일을 생성하고, components 폴더에 추가하세요. 컴포넌트를 초기화하기 전에 유효한 SpreadJS 라이선스 키를 입력할 수 있습니다.

    <template>
    <div>
        <gc-spread-sheets :hostClass='hostClass'>
            <gc-worksheet :dataSource="dataTable">
                <gc-column :width="width" :dataField="'preferredFullName'"></gc-column>
                <gc-column :width="width" :dataField="'jobTitleName'"></gc-column>
                <gc-column :width="width" :dataField="'phoneNumber'"></gc-column>
                <gc-column :width="width" :dataField="'region'"></gc-column>
            </gc-worksheet>
        </gc-spread-sheets>
    </div>
    </template>
    
    <script>
    import '@mescius/spread-sheets/styles/gc.spread.sheets.excel2016colorful.css'
    import {
        GcSpreadSheets,
        GcWorksheet,
        GcColumn
    } from '@mescius/spread-sheets-vue'
    
    import * as GC from "@mescius/spread-sheets";
    
     // SpreadJS 라이선싱
     var SpreadJSKey = "xxx";          // 유효한 라이선스 키를 입력하세요.
     GC.Spread.Sheets.LicenseKey = SpreadJSKey;
    
    export default {
        components: {
            GcSpreadSheets, GcWorksheet, GcColumn
        },
        data() {
            return {
                hostClass: 'spread-host',
                width: 100
            }
        },
        computed: {
            dataTable() {
                return [{
                        "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"
                    }
                ];
            }
        }
    }
    </script>
    
    <style scoped>
    .spread-host {
        width: 600px;
        height: 600px;
    }
    </style>
  3. app.vue 파일의 기본 내용을 아래 코드로 교체하세요.

    <template>
    <div>
        <h1>
            Adding Spreadsheets to a Jamstack Application
        </h1>
        <p>
            Nuxt.JS v3 + SpreadJS demo
        </p>
        <SpreadSheet />
    </div>
    </template>
  4. nuxt.config.ts 파일을 아래와 같이 변경하세요:

    // https://nuxt.com/docs/api/configuration/nuxt-config
    export default defineNuxtConfig({
        ssr: false,
        components: true
    })

실행 및 테스트하기

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

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