# 시작하기

## 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>KR\_SpreadJS\_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>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.calcengine.languagepackages.xxxx.min.js<br>gc.spread.pivot.pivottables.xxxx.min.js<br>gc.spread.report.reportsheet.xxxx.min.js<br>gc.spread.sheets.ai.xxxx.min.js<br>gc.spread.sheets.barcode.xxxx.min.js<br>gc.spread.sheets.calcworker.xxxx.min.js<br>gc.spread.sheets.charts.xxxx.min.js<br>gc.spread.sheets.collaboration.xxxx.min.js<br>gc.spread.sheets.datacharts.xxxx.min.js<br>gc.spread.sheets.formulapanel.xxxx.min.js<br>gc.spread.sheets.ganttsheet.xxxx.min.js<br>gc.spread.sheets.io.xxxx.min.js<br>gc.spread.sheets.legacycharts.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.slicers.xxxx.min.js<br>gc.spread.sheets.tablesheet.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/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을 통해 다운로드할 수 있습니다:

| 패키지 | 목적 |
| --- | --- |
| [spread-sheets](https://www.npmjs.com/package/@mescius/spread-sheets#spreadjs-kr) | Spreadsheet 패키지 |
| [spread-sheets-ai-addon](https://www.npmjs.com/package/@mescius/spread-sheets-ai-addon) | SpreadJS AI 어시스턴트 기능 |
| [spread-sheets-barcode](https://www.npmjs.com/package/@mescius/spread-sheets-barcode) | SpreadJS 바코드 기능 |
| spread-sheets-calc-worker | SpreadJS web worker 기능 |
| [spread-sheets-charts](https://www.npmjs.com/package/@mescius/spread-sheets-charts) | SpreadJS 차트 기능 |
| [spread-sheets-collaboration](https://www.npmjs.com/package/@mescius/spread-sheets-collaboration) | 스프레드시트 동시 작업 모듈 |
| [spread-sheets-collaboration-addon](https://www.npmjs.com/package/@mescius/spread-sheets-collaboration-addon) | 스프레드시트 동시 작업 기능 |
| [spread-sheets-collaboration-client](https://www.npmjs.com/package/@mescius/spread-sheets-collaboration-client) | 스프레드시트 동시 작업 클라이언트 모듈 |
| [spread-sheets-datacharts-addon](https://www.npmjs.com/package/@mescius/spread-sheets-datacharts-addon) | SpreadJS 데이터 차트 기능 |
| [spread-sheets-formula-panel](https://www.npmjs.com/package/@mescius/spread-sheets-formula-panel) | SpreadJS 수식 패널 기능 |
| [spread-sheets-ganttsheet](https://www.npmjs.com/package/@mescius/spread-sheets-ganttsheet) | SpreadJS 간트시트 기능 |
| [spread-sheets-io](https://www.npmjs.com/package/@mescius/spread-sheets-io) | SpreadJS 입출력 기능 |
| [spread-sheets-languagepackages](https://www.npmjs.com/package/@mescius/spread-sheets-languagepackages) | 언어 현지화 리소스 |
| [spread-sheets-legacy-charts](https://www.npmjs.com/package/@mescius/spread-sheets-legacy-charts) | SpreadJS 레거시 차트 기능 |
| [spread-sheets-pdf](https://www.npmjs.com/package/@mescius/spread-sheets-pdf) | SpreadJS PDF 내보내기 기능 |
| [spread-sheets-pivot-addon](https://www.npmjs.com/package/@mescius/spread-sheets-pivot-addon) | SpreadJS 피벗 테이블 기능 |
| [spread-sheets-print](https://www.npmjs.com/package/@mescius/spread-sheets-print) | SpreadJS 프린트 기능 |
| [spread-sheets-reportsheet-addon](https://www.npmjs.com/package/@mescius/spread-sheets-reportsheet-addon) | SpreadJS 리포트시트 기능 |
| [spread-sheets-shapes](https://www.npmjs.com/package/@mescius/spread-sheets-shapes) | SpreadJS 도형 기능 |
| [spread-sheets-slicers](https://www.npmjs.com/package/@mescius/spread-sheets-slicers) | SpreadJS 슬라이서 기능 |
| [spread-sheets-tablesheet](https://www.npmjs.com/package/@mescius/spread-sheets-tablesheet) | SpreadJS 테이블시트 기능 |

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

콘텐츠 보안 정책(CSP, Content Security Policy)은 XSS(Cross-Site Scripting)와 같은 콘텐츠 삽입 공격을 방지하는 데 도움이 되는 보안 메커니즘입니다. CSP는 HTTP 응답 헤더 또는 HTML `<head>` 내의 `<meta>` 요소를 통해 구성할 수 있으며, 브라우저에서 로드 및 실행이 허용되는 콘텐츠 소스를 정의합니다.

### CSP 구성

다음 방법 중 하나로 CSP를 정의할 수 있습니다.

#### HTTP 응답 헤더

웹 서버에서 `Content-Security-Policy` 헤더를 구성합니다.

#### HTML Meta 태그

```auto
<meta http-equiv="Content-Security-Policy" content="...">
```

두 방식 모두 `script-src`, `style-src`, `worker-src` 등의 지시문을 사용하여 허용된 콘텐츠 소스를 제어할 수 있습니다.

***

### SpreadJS와 CSP

SpreadJS는 런타임 시 스크립트, 스타일 및 선택적으로 Web Worker를 로드하는 클라이언트 측 JavaScript 컨트롤입니다.
애플리케이션에서 CSP를 활성화한 경우, SpreadJS 리소스가 정상적으로 로드 및 실행될 수 있도록 적절한 지시문을 구성해야 합니다. 그렇지 않으면 CSP 위반으로 인해 특정 기능(예: 가져오기/내보내기 또는 계산 Worker 기능)이 정상적으로 동작하지 않을 수 있습니다.
SpreadJS는 다음과 같습니다.

* `unsafe-eval` 불필요
* 스크립트에 대해 `unsafe-inline` 불필요
* 스타일에 대해 `unsafe-inline` 필요(자세한 내용은 아래 참고)
* 특정 기능 사용 시 적절한 `worker-src` 구성 필요

***

### SpreadJS 권장 CSP 지시문

필요한 지시문은 SpreadJS 배포 방식(CDN 또는 로컬 호스팅)에 따라 달라집니다.

#### 1\. Script Source

공식 CDN에서 SpreadJS 사용

```auto
script-src 'self' https://cdn.xxx.com;
```

SpreadJS를 로컬로 호스팅

```auto
script-src 'self';
```

>type=note
> SpreadJS는 `script-src`에 `unsafe-eval` 또는 `unsafe-inline`을 필요로 하지 않습니다. 더 나은 보안을 위해 활성화하지 않는 것을 권장합니다.

#### 2\. Style Source

SpreadJS는 런타임 시 인라인 스타일을 동적으로 적용합니다. 따라서 다음 지시문이 필요합니다.
공식 CDN에서 SpreadJS 사용

```auto
style-src 'self' 'unsafe-inline' https://cdn.xxx.com;
```

SpreadJS를 로컬로 호스팅

```auto
style-src 'self' 'unsafe-inline';
```

>type=note
> 현재 SpreadJS는 일부 기능 관련 스타일이 런타임 시 동적으로 생성 및 적용되기 때문에 `style-src`에 `unsafe-inline` 설정이 필요합니다.

#### 3\. Worker Source

`worker-src` 지시문은 다음 기능에 필요합니다.

* 가져오기/내보내기 API
* 계산 엔진 Worker 기능

SpreadJS는 `blob URL`을 사용하여 Web Worker를 동적으로 생성할 수 있습니다. 따라서 다음 구성이 필요합니다.

```auto
worker-src 'self' blob:;
```

이 설정은 다음을 허용합니다.

* **`self`** — 동일 출처(origin)에서 로드된 Worker
* **`blob:`** — Blob URL을 통해 동적으로 생성된 Worker

>type=note
> `worker-src`가 명시적으로 정의되지 않은 경우 일부 브라우저는 `script-src`를 대신 사용할 수 있습니다. 하지만 더 나은 호환성과 명확성을 위해 `worker-src`를 명시적으로 구성하는 것을 강력히 권장합니다.

## 전체 CSP 예제

### 예제 1: CDN에서 SpreadJS 사용

```auto
<meta http-equiv="Content-Security-Policy"
      content="
      default-src 'self'; 
      script-src 'self' https://cdn.xxx.com;
      style-src 'self' 'unsafe-inline' https://cdn.xxx.com;
      worker-src 'self' blob:;
      ">
```

### 예제 2: SpreadJS를 로컬로 호스팅

```auto
<meta http-equiv="Content-Security-Policy"
      content="
      default-src 'self';
      script-src 'self';
      style-src 'self' 'unsafe-inline';
      worker-src 'self' blob:;
      ">
```

>type=note
> `default-src` 지시문은 `script-src` 또는 `style-src`처럼 별도로 명시되지 않은 모든 리소스 유형에 대한 기본 정책을 정의합니다.