# SpreadJS 개별 모듈

## Content

SpreadJS 모듈은 NPM에서 사용할 수 있습니다. Webpack, Rollup, ESBuild, Vite와 같은 최신 JavaScript 빌드 도구와 번들러는 SpreadJS NPM 패키지(모듈, 플러그인, 리소스 포함)와 원활하게 작동합니다. 또한, SpreadJS를 프로젝트 빌드 프로세스에 통합하면 이러한 도구의 기능을 최대한 활용할 수 있습니다.
다음 주제를 참조하여 개별 모듈과 함께 SpreadJS를 사용하십시오.

* [Webpack에서 SpreadJS 시작하기](/spreadjs/docs/v18/javascript_frameworks/spreadjs-with-individual-modules/spreadjs-with-webpack)
* [Vite에서 SpreadJS 시작하기](/spreadjs/docs/v18/javascript_frameworks/spreadjs-with-individual-modules/spreadjs-with-vite)
* [Rollup에서 SpreadJS 시작하기](/spreadjs/docs/v18/javascript_frameworks/spreadjs-with-individual-modules/spreadjs-with-rollup)
* [ESBuild에서 SpreadJS 시작하기](/spreadjs/docs/v18/javascript_frameworks/spreadjs-with-individual-modules/spreadjs-with-esbuild)
* [Angular CLI에서 SpreadJS 시작하기](/spreadjs/docs/v18/javascript_frameworks/spreadjs-with-individual-modules/spreadjs-with-angular)
* [Create React App에서 SpreadJS 시작하기](/spreadjs/docs/v18/javascript_frameworks/spreadjs-with-individual-modules/spreadjs-with-create-react-app)
* [Create Vue에서 SpreadJS 시작하기](/spreadjs/docs/v18/javascript_frameworks/spreadjs-with-individual-modules/spreadjs-with-create-vue)

## 설치 명령어

NPM에서 제공되는 모듈 설치 명령어:
`@mescius/spread-common`
`@mescius/spread-calc-engine`
`@mescius/spread-calc-engine-basic-functions`
`@mescius/spread-calc-engine-advanced-functions`
`@mescius/data-manager`
`@mescius/spread-sheets-core`
`@mescius/spread-sheets-bindings`
`@mescius/spread-sheets-cell-types`
`@mescius/spread-sheets-sparklines`
`@mescius/spread-sheets-search`
`@mescius/spread-sheets-outlines`
`@mescius/spread-sheets-floating-objects`
`@mescius/spread-sheets-comments`
`@mescius/spread-sheets-tables`
`@mescius/spread-sheets-touch`
`@mescius/spread-sheets-conditional-formatting`
`@mescius/spread-sheets-cell-state`
`@mescius/spread-sheets-data-validation`
`@mescius/spread-sheets-filter`
`@mescius/spread-sheets-fill`
`@mescius/spread-sheets-context-menu`
`@mescius/spread-sheets-formula-textbox`
`@mescius/spread-sheets-outline-column`
`@mescius/spread-sheets-drag-merge`
`@mescius/spread-sheets-statusbar`
`@mescius/spread-sheets-auto-merge`
`@mescius/spread-sheets-calc-engine`
`@mescius/spread-sheets-hyperlink`
`@mescius/spread-sheets-namebox`
`@mescius/spread-sheets-input-mask`
이 모듈들은 플러그인과 리소스와 함께 사용할 수 있으며, 빌드 도구 또는 CLI에서 "`@mescius/spread-sheets`"를 "`@mescius/spread-common`"으로 별칭(alias)으로 설정해야 합니다.

> **참고:** "`@mescius/spread-sheets`"는 위 개별 노드 모듈("@mescius/spread-common" 등)을 포함하는 단일 모듈이며, 함께 사용하면 알 수 없는 오류가 발생할 수 있습니다.

## 모듈 의존성 표

#### 모듈 내 의존성

| **패키지** | **의존성** |
| --- | --- |
| @mescius/spread-common |  |
| @mescius/spread-calc-engine | @mescius/spread-common |
| @mescius/spread-calc-engine-basic-functions | @mescius/spread-common<br>@mescius/spread-calc-engine |
| @mescius/spread-calc-engine-advanced-functions | @mescius/spread-common<br>@mescius/spread-calc-engine |
| @mescius/data-manager | @mescius/spread-common<br>@mescius/spread-calc-engine |
| @mescius/spread-sheets-core | @mescius/spread-common |
| @mescius/spread-sheets-bindings | @mescius/spread-common<br>@mescius/spread-sheets-core |
| @mescius/spread-sheets-cell-types | @mescius/spread-common<br>@mescius/spread-sheets-core |
| @mescius/spread-sheets-sparklines | @mescius/spread-common<br>@mescius/spread-calc-engine<br>@mescius/spread-sheets-core<br>@mescius/spread-sheets-calc-engine |
| @mescius/spread-sheets-search | @mescius/spread-common<br>@mescius/spread-sheets-core |
| @mescius/spread-sheets-outlines | @mescius/spread-common<br>@mescius/spread-sheets-core |
| @mescius/spread-sheets-floating-objects | @mescius/spread-common<br>@mescius/spread-sheets-core |
| @mescius/spread-sheets-comments | @mescius/spread-common<br>@mescius/spread-sheets-core |
| @mescius/spread-sheets-tables | @mescius/spread-common<br>@mescius/spread-calc-engine<br>@mescius/spread-sheets-core<br>@mescius/spread-sheets-calc-engine<br>@mescius/spread-sheets-conditional-formatting<br>@mescius/spread-sheets-cell-types<br>@mescius/spread-sheets-filter<br>@mescius/spread-sheets-bindings<br>@mescius/spread-sheets-outlines<br>@mescius/spread-sheets-outline-column |
| @mescius/spread-sheets-touch | @mescius/spread-common<br>@mescius/spread-sheets-core |
| @mescius/spread-sheets-conditional-formatting | @mescius/spread-common<br>@mescius/spread-calc-engine<br>@mescius/spread-sheets-core<br>@mescius/spread-sheets-calc-engine |
| @mescius/spread-sheets-cell-state | @mescius/spread-common<br>@mescius/spread-sheets-core |
| @mescius/spread-sheets-data-validation | @mescius/spread-common<br>@mescius/spread-calc-engine<br>@mescius/spread-sheets-core<br>@mescius/spread-sheets-calc-engine<br>@mescius/spread-sheets-conditional-formatting |
| @mescius/spread-sheets-filter | @mescius/spread-common<br>@mescius/spread-calc-engine<br>@mescius/spread-sheets-core<br>@mescius/spread-sheets-calc-engine<br>@mescius/spread-sheets-conditional-formatting<br>@mescius/spread-sheets-cell-types<br>@mescius/spread-sheets-bindings<br>@mescius/spread-sheets-outlines<br>@mescius/spread-sheets-outline-column |
| @mescius/spread-sheets-fill | @mescius/spread-common<br>@mescius/spread-calc-engine<br>@mescius/spread-sheets-core<br>@mescius/spread-sheets-calc-engine |
| @mescius/spread-sheets-context-menu | @mescius/spread-common<br>@mescius/spread-calc-engine<br>@mescius/spread-sheets-core<br>@mescius/spread-sheets-calc-engine |
| @mescius/spread-sheets-formula-textbox | @mescius/spread-common<br>@mescius/spread-calc-engine<br>@mescius/spread-sheets-core<br>@mescius/spread-sheets-calc-engine<br>@mescius/spread-sheets-conditional-formatting<br>@mescius/spread-sheets-cell-types<br>@mescius/spread-sheets-filter<br>@mescius/spread-sheets-bindings<br>@mescius/spread-sheets-outlines<br>@mescius/spread-sheets-outline-column<br>@mescius/spread-sheets-tables |
| @mescius/spread-sheets-outline-column | @mescius/spread-common<br>@mescius/spread-sheets-core<br>@mescius/spread-sheets-outlines |
| @mescius/spread-sheets-drag-merge | @mescius/spread-common<br>@mescius/spread-sheets-core |
| @mescius/spread-sheets-statusbar | @mescius/spread-common<br>@mescius/spread-calc-engine<br>@mescius/spread-sheets-core<br>@mescius/spread-sheets-calc-engine<br>@mescius/spread-sheets-context-menu |
| @mescius/spread-sheets-auto-merge | @mescius/spread-common<br>@mescius/spread-sheets-core |
| @mescius/spread-sheets-calc-engine | @mescius/spread-common<br>@mescius/spread-calc-engine<br>@mescius/spread-sheets-core |
| @mescius/spread-sheets-hyperlink | @mescius/spread-common<br>@mescius/spread-calc-engine<br>@mescius/spread-sheets-core<br>@mescius/spread-sheets-calc-engine |
| @mescius/spread-sheets-namebox | @mescius/spread-common<br>@mescius/spread-calc-engine<br>@mescius/spread-sheets-core<br>@mescius/spread-sheets-calc-engine<br>@mescius/spread-sheets-cell-types |
| @mescius/spread-sheets-input-mask | @mescius/spread-common<br>@mescius/spread-calc-engine<br>@mescius/spread-sheets-core<br>@mescius/spread-sheets-calc-engine<br>@mescius/spread-sheets-cell-types |

#### 플러그인 내 의존성

| **패키지** | **의존성** |
| --- | --- |
| @mescius/spread-sheets-languagepackages | @mescius/spread-common<br>@mescius/spread-calc-engine |
| @mescius/spread-sheets-io | @mescius/spread-common<br>@mescius/spread-sheets-core |
| @mescius/spread-sheets-charts | @mescius/spread-common<br>@mescius/spread-calc-engine<br>@mescius/spread-sheets-core<br>@mescius/spread-sheets-calc-engine<br>@mescius/spread-sheets-floating-objects |
| @mescius/spread-sheets-shapes | @mescius/spread-common<br>@mescius/spread-calc-engine<br>@mescius/spread-sheets-core<br>@mescius/spread-sheets-calc-engine<br>@mescius/spread-sheets-floating-objects |
| @mescius/spread-sheets-barcode | @mescius/spread-common<br>@mescius/spread-calc-engine<br>@mescius/spread-sheets-core<br>@mescius/spread-sheets-calc-engine<br>@mescius/spread-sheets-sparklines |
| @mescius/spread-sheets-print | @mescius/spread-common<br>@mescius/spread-calc-engine<br>@mescius/spread-sheets-core<br>@mescius/spread-sheets-calc-engine |
| @mescius/spread-sheets-pdf | @mescius/spread-common<br>@mescius/spread-calc-engine<br>@mescius/spread-sheets-core<br>@mescius/spread-sheets-calc-engine<br>@mescius/spread-sheets-print |
| @mescius/spread-sheets-slicers | @mescius/spread-common<br>@mescius/spread-calc-engine<br>@mescius/spread-sheets-core<br>@mescius/spread-sheets-calc-engine<br>@mescius/spread-sheets-floating-objects<br>@mescius/spread-sheets-shapes<br>@mescius/spread-sheets-conditional-formatting<br>@mescius/spread-sheets-cell-types<br>@mescius/spread-sheets-filter<br>@mescius/spread-sheets-bindings<br>@mescius/spread-sheets-outlines<br>@mescius/spread-sheets-outline-column<br>@mescius/spread-sheets-tables |
| @mescius/spread-sheets-pivot-addon | @mescius/spread-common<br>@mescius/spread-calc-engine<br>@mescius/spread-sheets-core<br>@mescius/spread-sheets-calc-engine<br>@mescius/spread-sheets-floating-objects<br>@mescius/spread-sheets-shapes<br>@mescius/spread-sheets-conditional-formatting<br>@mescius/spread-sheets-cell-types<br>@mescius/spread-sheets-filter<br>@mescius/spread-sheets-bindings<br>@mescius/spread-sheets-outlines<br>@mescius/spread-sheets-outline-column<br>@mescius/spread-sheets-tables<br>@mescius/spread-sheets-slicers<br>@mescius/spread-sheets-formula-textbox |
| @mescius/spread-sheets-tablesheet | @mescius/spread-common<br>@mescius/spread-calc-engine<br>@mescius/spread-sheets-core<br>@mescius/spread-sheets-calc-engine<br>@mescius/spread-sheets-conditional-formatting<br>@mescius/spread-sheets-cell-types<br>@mescius/spread-sheets-filter<br>@mescius/spread-sheets-bindings<br>@mescius/spread-sheets-outlines<br>@mescius/spread-sheets-outline-column<br>@mescius/spread-sheets-tables<br>@mescius/spread-sheets-formula-textbox<br>@mescius/spread-sheets-context-menu<br>@mescius/spread-sheets-statusbar<br>@mescius/data-manager<br>@mescius/spread-sheets-auto-merge<br>@mescius/spread-sheets-cell-state<br>@mescius/spread-sheets-data-validation |
| @mescius/spread-sheets-ganttsheet | @mescius/spread-common<br>@mescius/spread-calc-engine<br>@mescius/spread-sheets-core<br>@mescius/spread-sheets-calc-engine<br>@mescius/spread-sheets-conditional-formatting<br>@mescius/spread-sheets-cell-types<br>@mescius/spread-sheets-filter<br>@mescius/spread-sheets-bindings<br>@mescius/spread-sheets-outlines<br>@mescius/spread-sheets-outline-column<br>@mescius/spread-sheets-tables<br>@mescius/spread-sheets-formula-textbox<br>@mescius/spread-sheets-context-menu<br>@mescius/spread-sheets-statusbar<br>@mescius/data-manager<br>@mescius/spread-sheets-auto-merge<br>@mescius/spread-sheets-cell-state<br>@mescius/spread-sheets-data-validation<br>@mescius/spread-sheets-tablesheet |
| @mescius/spread-sheets-reportsheet-addon | @mescius/spread-common<br>@mescius/spread-calc-engine<br>@mescius/data-manager<br>@mescius/spread-calc-engine-basic-functions<br>@mescius/spread-calc-engine-advanced-functions<br>@mescius/spread-sheets-core<br>@mescius/spread-sheets-calc-engine<br>@mescius/spread-sheets-tables<br>@mescius/spread-sheets-bindings<br>@mescius/spread-sheets-components<br>@mescius/spread-sheets-floating-objects<br>@mescius/spread-sheets-sparklines<br>@mescius/spread-sheets-statusbar<br>@mescius/spread-sheets-cell-state<br>@mescius/spread-sheets-cell-types<br>@mescius/spread-sheets-conditional-formatting<br>@mescius/spread-sheets-data-validation<br>@mescius/spread-sheets-filter<br>@mescius/spread-sheets-context-menu<br>@mescius/spread-sheets-print<br>@mescius/spread-sheets-shapes<br>@mescius/spread-sheets-charts<br>@mescius/spread-sheets-datacharts-addon<br>@mescius/spread-sheets-tablesheet<br>@mescius/spread-sheets-reportsheet-addon |

#### 리소스 내 의존성

| **패키지** | **의존성** |
| --- | --- |
| @mescius/spread-sheets-resources-ja | @mescius/spread-common<br>@mescius/spread-sheets-core |
| @mescius/spread-sheets-resources-ko | @mescius/spread-common<br>@mescius/spread-sheets-core |
| @mescius/spread-sheets-resources-zh | @mescius/spread-common<br>@mescius/spread-sheets-core |

## 모듈 사용 샘플 코드

#### 코어 모듈 사용 (전역 변수)

```html
<!DOCTYPE html>
<html>
<head>
 <title>Test SJS Modules with Global Variable</title>
 <link rel="stylesheet" type="text/css" href="./@mescius/spread-common/styles/gc.spread.sheets.excel2016colorful.css" />
</head>
<body>
 <div id="testDiv" style="width:100%;height:300px;"></div>
 <script type='text/javascript' src="./@mescius/spread-common/dist/gc.spread.common.min.js"></script>
 <script type='text/javascript' src="./@mescius/spread-sheets-core/dist/gc.spread.sheets.core.min.js"></script>
 <script type='text/javascript'>
 window.onload = function () {
 var spread = new GC.Spread.Sheets.Workbook(document.getElementById("testDiv"));
 };
 </script>
</body>
</html>
```

#### 코어 모듈 사용 (AMD)

```html
<!DOCTYPE html>
<html>
<head>
    <title>Test SJS Modules with AMD</title>
    <link rel="stylesheet" type="text/css"
        href="./@mescius/spread-common/styles/gc.spread.sheets.excel2016colorful.css" />
</head>
<body>
    <div id="testDiv" style="width:100%;height:300px;"></div>
    <script type='text/javascript' src="./require.js"></script>
    <script type='text/javascript'>
        window.onload = function () {
            require.config({
                paths: {
                    '@mescius/spread-common': './@mescius/spread-common/dist/gc.spread.common.min',
                    '@mescius/spread-sheets-core': './@mescius/spread-sheets-core/dist/gc.spread.sheets.core.min'
                }
            });
            require(['@mescius/spread-common', '@mescius/spread-sheets-core'], function (GC) {
                var spread = new GC.Spread.Sheets.Workbook(document.getElementById("testDiv"));
            });
        };
    </script>
</body>
</html>
```

#### 코어 모듈 사용 (CommonJS)

```javascript
import * as GC from "@mescius/spread-common";
import "@mescius/spread-sheets-core";
var spread = new GC.Spread.Sheets.Workbook(document.getElementById("testDiv"));
```

#### Sparklines 모듈 사용 (CommonJS)

```javascript
import * as GC from "@mescius/spread-common";
import "@mescius/spread-calc-engine";
import "@mescius/spread-sheets-core";
import "@mescius/spread-sheets-calc-engine";
import "@mescius/spread-sheets-sparklines";
var spread = new GC.Spread.Sheets.Workbook(document.getElementById("testDiv"));
var sheet = spread.getActiveSheet();
sheet.suspendPaint();
sheet.setFormula(0, 0, '=PIESPARKLINE(0.25, "red"');
sheet.setRowHeight(0, 60);
sheet.resumePaint();
```

#### Print 모듈 사용 (CommonJS)

```javascript
import * as GC from "@mescius/spread-common";
import "@mescius/spread-calc-engine";
import "@mescius/spread-sheets-core";
import "@mescius/spread-sheets-calc-engine";
import "@mescius/spread-sheets-print";
var spread = new GC.Spread.Sheets.Workbook(document.getElementById("testDiv"));
var sheet = spread.getActiveSheet();
sheet.setValue(0, 0, "Hello SpreadJS!")
spread.print();
```

#### 한국어 리소스 모듈 사용 (CommonJS)

```javascript
import * as GC from "@mescius/spread-common";
import "@mescius/spread-sheets-core";
import "@mescius/spread-sheets-resources-ko";
var spread = new GC.Spread.Sheets.Workbook(document.getElementById("testDiv"));
```