# 시작하기

## Content

## 시스템 요구사항

SpreadJS는 다음 브라우저에서 사용 가능합니다:

* Microsoft Edge
* Mozilla FireFox
* Safari
* Google Chrome

브라우저는 반드시 HTML5를 지원해야 합니다.

> **참고**: SpreadJS는 Windows 11 및 Windows Server 2022/2025도 지원합니다.

## 다운로드 및 설치

### 번들 사용 방법

* ZIP 파일(SpreadJS.xxxx.zip)을 [다운로드](https://www.mescius.co.kr/spreadjs/download)한 후 시스템의 임시 폴더에 저장하고, 해당 파일을 지정한 폴더에 압축 해제합니다.

기본 SpreadJS 폴더(Windows 전용):

| **디렉터리** | **파일** | **설명** |
| ---- | --- | --- |
| \\SpreadJS.xxxx | LICENSE<br>MESCIUS\_KR\_EULA\_xxxxxx.pdf | 제품의 주요 디렉터리 |
| \\SpreadJS.xxxx\\css | gc.spread.sheets.x.x.x.css<br>gc.spread.sheets.excel2013darkGray.xxxx.css<br>gc.spread.sheets.excel2013lightGray.xxxx.css<br>gc.spread.sheets.excel2013white.xxxx.css<br>gc.spread.sheets.excel2016black.xxxx.css<br>gc.spread.sheets.excel2016colorful.xxxx.css<br>gc.spread.sheets.excel2016darkGray.xxxx.css | CSS 파일 |
| \\SpreadJS.xxxx\\definition | GC.spread.sheets.d.ts<br>gc.spread.excelio.d.ts | TypeScript API 정의 파일 |
| \\SpreadJS.xxxx\\samples |  | 위젯용 예제 페이지 |
| \\SpreadJS.xxxx\\scripts | gc.spread.sheets.all.xxxx.min.js | 플러그인을 제외한 모든 기능을 포함한 위젯용 최소화된 js 파일 |
| \\SpreadJS.xxxx\\scripts\\modules | gc.data.xxxx.min.js<br><br>gc.spread.calcengine.xxxx.min.js<br>gc.spread.calcengine.advancedfunctions.xxxx.min.js<br>gc.spread.calcengine.basicfunctions.xxxx.min.js<br>gc.spread.common.xxxx.min.js<br>gc.spread.sheets.automerge.xxxx.min.js<br>gc.spread.sheets.bindings.xxxx.min.js<br>gc.spread.sheets.calcengine.xxxx.min.js<br>gc.spread.sheets.cellstate.xxxx.min.js<br>gc.spread.sheets.celltypes.xxxx.min.js<br>gc.spread.sheets.comments.xxxx.min.js<br>gc.spread.sheets.components.xxxx.min.js<br>gc.spread.sheets.conditionalformatting.xxxx.min.js<br>gc.spread.sheets.contextmenu.xxxx.min.js<br>gc.spread.sheets.core.xxxx.min.js<br>gc.spread.sheets.datavalidation.xxxx.min.js<br>gc.spread.sheets.dragmerge.xxxx.min.js<br>gc.spread.sheets.fill.xxxx.min.js<br>gc.spread.sheets.filter.xxxx.min.js<br>gc.spread.sheets.floatingobjects.xxxx.min.js<br>gc.spread.sheets.formulatextbox.xxxx.min.js<br>gc.spread.sheets.hyperlink.xxxx.min.js<br>gc.spread.sheets.inputmask.xxxx.min.js<br>gc.spread.sheets.namebox.xxxx.min.js<br>gc.spread.sheets.outlinecolumn.xxxx.min.js<br>gc.spread.sheets.outlines.xxxx.min.js<br>gc.spread.sheets.search.xxxx.min.js<br>gc.spread.sheets.spacing.xxxx.min.js<br>gc.spread.sheets.sparklines.xxxx.min.js<br>gc.spread.sheets.statusbar.xxxx.min.js<br>gc.spread.sheets.tables.xxxx.min.js<br>gc.spread.sheets.touch.xxxx.min.js | 모듈형 js 파일 |
| \\SpreadJS.xxxx\\scripts\\interop | gc.spread.excelio.xxxx.min.js | 클라이언트 측 Excel 가져오기 및 내보내기 지원 파일 |
| \\SpreadJS.xxxx\\scripts\\interop\\angularjs | gc.spread.sheets.angularjs.xxxxx.min.js | AngularJS 지원 파일 |
| \\SpreadJS.xxxx\\scripts\\interop\\angular | gc.spread.sheets.angular.xxxxx.min.js | Angular 지원 파일 |
| \\SpreadJS.xxxx\\scripts\\interop\\react | gc.spread.sheets.react.xxxxx.min.js | React 지원 파일 |
| \\SpreadJS.xxxx\\scripts\\interop\\vuejs | gc.spread.sheets.vue.xxxxx.min.js | Vue 지원 파일 |
| \\SpreadJS.xxxx\\scripts\\resources | ja\\gc.spread.sheets.resources.ja.xxxxx.min.js<br>zh\\gc.spread.sheets.resources.zh.xxxx.min.js<br>ko\\gc.spread.sheets.resources.ko.xxxx.min.js | 일본어, 중국어, 한국어 리소스 파일 |
| \\SpreadJS.xxxx\\scripts\\plugins | gc.spread.pivot.pivottables.xxxx.min.js<br><br>gc.spread.sheets.barcode.xxxx.min.js<br>gc.spread.sheets.charts.xxxx.min.js<br>gc.spread.sheets.legacycharts.xxxx.min.js<br>gc.spread.sheets.formulapanel.xxxx.min.js<br>gc.spread.sheets.pdf.xxxx.min.js<br>gc.spread.sheets.print.xxxx.min.js<br>gc.spread.sheets.shapes.xxxx.min.js<br>gc.spread.sheets.tablesheet.xxxx.min.js<br>gc.spread.report.reportsheet.xxxx.min.js<br>gc.spread.sheets.ganttsheet.xxxx.min.js<br>gc.spread.calcengine.languagepackages.xxxx.min.js<br>gc.spread.sheets.io.xxxx.min.js<br>gc.spread.sheets.slicers.xxxx.min.js | 플러그인 파일 |

**SpreadJS 템플릿 디자이너 설치**

1. 다운로드한 ZIP 파일을 시스템의 임시 폴더에 저장하고, 그 후 파일을 디렉터리에 압축 해제합니다.
2. 사용 중인 환경에 맞는 설치 파일을 실행합니다.
3. 템플릿 디자이너를 실행하고 자물쇠 아이콘을 클릭한 뒤, 라이선스 키를 입력하여 활성화합니다.

| **플랫폼** | **설치** |
| --- | --- |
| Windows | SpreadJS-Designer.x.x.x.exe |
| Mac | SpreadJS-Designer.x.x.x.dmg |
| Linux | SpreadJS-Designer.x.x.x.AppImage |

기본 템플릿 디자이너 경로:

| **설치 디렉터리** | **설명** |
| ------- | --- |
| %Program Files%\\MESCIUS\\SpreadJS Designer\\x.x.x | 템플릿 디자이너 디렉터리 |

라이선스 관련 정보는 [체험판 및 라이선스 정보](/spreadjs/docs/v18/getstarted/trial_SpreadJS) 문서를 참조하시기 바랍니다.

### NPM 이용하기

NPM을 사용하여 SpreadJS 패키지를 설치하려면, Node 설치 관리자나 Node 버전 관리자를 사용하여 Node.js와 npm 명령줄 인터페이스를 설치해야 합니다.
Node.js 및 npm 명령줄 인터페이스를 시작하는 방법은 [npm 문서](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm)를 참조하세요.
SpreadJS 패키지는 NPM을 통해 다운로드할 수 있습니다:

| 패키지 | 목적 |
| --- | --- |
| [Spreadsheet](https://www.npmjs.com/package/@mescius/spread-sheets) | Spreadsheet 패키지 |
| [SpreadJS Designer ](https://www.npmjs.com/package/@mescius/spread-sheets-designer) | Spreadsheet 디자이너 컴포넌트 |
| [Shape Plugin](https://www.npmjs.com/package/@mescius/spread-sheets-shapes) | SpreadJS 도형 기능 |
| [TableSheet Plugin](https://www.npmjs.com/package/@mescius/spread-sheets-tablesheet) | SpreadJS 테이블시트 기능 |
| [Client-side Excel IO](https://www.npmjs.com/package/@mescius/spread-excelio) | SpreadJS Excel 입출력 패키지 |
| [SpreadJS CalcEngine](https://www.npmjs.com/package/@mescius/spread-sheets-languagepackages) | SpreadJS 계산 엔진 지원 |
| [Chart Plugin](https://www.npmjs.com/package/@mescius/spread-sheets-charts) | SpreadJS 차트 기능 |
| [BarCode Plugin](https://www.npmjs.com/package/@mescius/spread-sheets-barcode) | SpreadJS 바코드 기능 |
| [Pivot Plugin](https://www.npmjs.com/package/@mescius/spread-sheets-pivot-addon) | SpreadJS 피벗 기능 |
| [PDF Plugin](https://www.npmjs.com/package/@mescius/spread-sheets-pdf) | SpreadJS PDF 내보내기 기능 |
| [Print Plugin](https://www.npmjs.com/package/@mescius/spread-sheets-print) | SpreadJS 프린트 기능 |
| [SpreadJS IO Plugin](https://www.npmjs.com/package/@mescius/spread-sheets-io) | SpreadJS 입출력 기능 |
| [SpreadJS React](https://www.npmjs.com/package/@mescius/spread-sheets-designer-react) | React 용 SpreadJS 디자이너 컴포넌트 |
| [SpreadJS Vue](https://www.npmjs.com/package/@mescius/spread-sheets-designer-vue) | Vue 용 SpreadJS 디자이너 컴포넌트 |
| [SpreadJS Angular](https://www.npmjs.com/package/@mescius/spread-sheets-angular) | Angular 용 SpreadJS 래퍼 컴포넌트 |

## 콘텐츠 보안 정책 (CSP)

CSP는 웹사이트에서 불러오는 콘텐츠를 규제하고 허가하기 위해 HTTP 헤더나 메타 태그로 적용하는 보안 정책입니다.
CSP 지시어 참조(CSP Directive Reference)를 설정하려면, 서버에서 HTTP 응답 헤더를 구성하거나 HTML의 `<head>` 요소 내에 `<meta>` 태그를 설정하는 두 가지 방법 중 하나를 선택할 수 있습니다. 이를 통해 허용되거나 차단되는 콘텐츠를 정의하는 일련의 규칙을 생성할 수 있으며, 이러한 규칙은 콘텐츠 삽입(content injection) 및 크로스 사이트 스크립팅(XSS) 공격으로부터 웹사이트의 보안을 강화하는 데 도움을 줍니다.
SpreadJS는 내장 컨트롤로서 CSP 지침을 준수해야 하며, 코드에 잠재적인 공격 요소가 포함되지 않도록 해야 합니다. 따라서 아래에 안내된 대로 SpreadJS의 보안을 강화하기 위해 특정 CSP 규칙을 포함해야 합니다.

```typescript
// No Eval rule in TSLINT
eval("alert('XSS!')");

// No Implied Eval rule in TSLINT
setTimeout("alert('Hi!');", 100);
setInterval("alert('Hi!');", 100);
execScript("alert('Hi!')");
window.setTimeout("count = 5", 10);
window.setInterval("foo = bar", 10);

// No New Function rule in TSLINT
new Function("alert('XSS!')")();
```

가져오기 및 내보내기 API는 파일의 압축 및 해제를 위해 웹 워커를 사용합니다. 따라서 오류 발생을 막기 위해 사용자가 적절한 CSP 규칙을 반드시 설정해야 합니다.
예를 들어, 다음과 같은 CSP 규칙을 참고하세요:

```auto
<meta http-equiv="Content-Security-Policy" content="worker-src 'self' blob: 'unsafe-inline' 'unsafe-eval' data:">
```

이 CSP 규칙은 동일 출처에서 웹 워커를 로드하는 것과 웹 워커에 대해 Blob URI 사용을 허용하며, 그 내용은 다음과 같습니다:

* `worker-src 'self'`: 웹 워커가 문서와 동일한 출처(origin)에서만 로드되도록 제한합니다.
* `blob:`: 웹 워커에서 Blob URI 사용을 허용합니다.
* `'unsafe-inline'`: 인라인 스크립트 실행을 허용합니다.
* `'unsafe-eval'`: `eval()` 함수 및 문자열로 전달된 코드를 실행하는 유사 JavaScript 함수의 사용을 허용합니다.
* `data:`: data URI 사용을 허용합니다.