# Wijmo API 레퍼런싱

## Content

응용 프로그램에서 Wijmo 5를 사용하려면 HTML 페이지에 몇 가지 참조를 추가하여 주십시오.

먼저, MESCIUS 홈페이지에서 [Wijmo를 다운로드](https://www.grapecity.co.kr/download/wijmo-enterprise)합니다. zip 파일에는 샘플, 참조 애플리케이션 등이 포함되어 있으므로 npm과 함께 zip 파일을 다운로드하는 것을 권장드립니다.

Wijmo 애플리케이션에 필요한 최소한의 파일 세트는 다음과 같습니다:

* **wijmo.css:** 모든 Wijmo 컨트롤의 스타일을 지정하는 데 사용되는 CSS 규칙이 들어 있습니다.
* **wijmo.js:** [세계화/지역화](/wijmo/api/classes/Wijmo.Globalize.html), [이벤트](/wijmo/api/classes/Wijmo.Event.html), [컨트롤](/wijmo/api/classes/Wijmo.Control.html), 및 [CollectionView](/wijmo/api/classes/Wijmo.Collectionview.html) 클래스를 포함한 Wijmo 5 인프라가 들어 있습니다.

이 외에도 사용하시고 하는 기능에 따라 하나 이상의 추가 JS파일을 포함하십시오:

* **wijmo.grid.js:** [FlexGrid](/wijmo/api/classes/Wijmo_Grid.Flexgrid.html) 컨트롤이 들어 있습니다.
* **wijmo.chart.js:** [FlexChart](/wijmo/api/classes/Wijmo_Chart.Flexchart.html) 및 [FlexPie](/wijmo/api/classes/Wijmo_Chart.Flexpie.html) 컨트롤이 들어 있습니다.
* **wijmo.input.js:** [ComboBox](/wijmo/api/classes/Wijmo_Input.Combobox.html), [AutoComplete](/wijmo/api/classes/Wijmo_Input.Autocomplete.html), [InputDate](/wijmo/api/classes/Wijmo_Input.Inputdate.html), [InputTime](/wijmo/api/classes/Wijmo_Input.Inputtime.html), [InputNumber](/wijmo/api/classes/Wijmo_Input.Inputnumber.html), [InputMask](/wijmo/api/classes/Wijmo_Input.Inputmask.html), [ListBox](/wijmo/api/classes/Wijmo_Input.Listbox.html), [Menu](/wijmo/api/classes/Wijmo_Input.Menu.html), 및 [Calendar](/wijmo/api/classes/Wijmo_Input.Calendar.html) 컨트롤을 비롯한 여러 입력 컨트롤이 들어 있습니다.
* **wijmo.gauge.js:** [LinearGauge](/wijmo/api/classes/Wijmo_Gauge.Lineargauge.html), [RadialGauge](/wijmo/api/classes/Wijmo_Gauge.Radialgauge.html), 및 [BulletGraph](/wijmo/api/classes/Wijmo_Gauge.Bulletgraph.html)를 비롯한 여러 게이지 컨트롤이 있습니다.
* **wijmo.nav.js:** [TabPanel](/wijmo/api/classes/Wijmo_Nav.Tabpanel.html), 및 [TreeView](/wijmo/api/classes/Wijmo_Nav.Treeview.html)가 포함된 네비게이션 컨트롤이 있습니다.
* **wijmo.culture.*[CultureName]*.js:** 미국 영어 이외의 언어로 응용 프로그램을 개발하는 데 사용되는 문화 별 파일이 들어 있습니다.
* **wijmo.theme.*[ThemeName]*.css:** Wijmo 5 컨트롤의 모양을 사용자 지정하는 데 사용되는 CSS 규칙이 들어 있습니다. **wijmo.css** 대신 원하시는 테마를 사용하면 됩니다.

Wijmo에는 가장 널리 사용되는 JavaScript 프레임워크의 기본 컴포넌트로 컨트롤을 사용할 수있는 interop 모듈이 포함되어 있습니다:

* **wijmo.angular.js:** AngularJS 애플리케이션에서 Wijmo 컨트롤을 캡슐화하는 지시문을 포함합니다.
* **wijmo.angular2.js:** Angular 응용 프로그램에서 Wijmo 컨트롤을 캡슐화하는 컴포넌트가 포함되어 있습니다.
* **wijmo.react.js:** React 애플리케이션에서 Wijmo 컨트롤을 캡슐화하는 컴포넌트가 포함되어 있습니다.
* **wijmo.vue.js:** Vue 1.x 응용 프로그램에서 Wijmo 컨트롤을 캡슐화하는 컴포넌트가 포함되어 있습니다.
* **wijmo.vue2.js:** Vue 2.x 응용 프로그램에서 Wijmo 컨트롤을 캡슐화하는 컴포넌트가 포함되어 있습니다.
* **wijmo.knockout.js:** Knockout 응용 프로그램에서 Wijmo 컨트롤을 캡슐화하는 컴포넌트가 포함되어 있습니다.

파일의 참조하는 방법은 두 가지 옵션이 있습니다. Wijmo를 다운로드하고 필요한 파일을 응용 프로그램의 해당 폴더에 복사하거나 또는 콘텐츠 전송 네트워크(CDN)에서 클라우드에 호스팅 된 Wijmo 파일을 참조 할 수 있습니다. 아래 섹션은 이에 대한 예제를 보여줍니다.

## 로컬에 다운로드 하여 Wijmo 배포

Wijmo 파일을 다운로드하여 응용 프로그램 내의 폴더에 복사하십시오. Wijmo 스크립트 파일을 "scripts / vendors"라는 폴더에두고 "styles"라는 폴더의 CSS 파일을 HTML 페이지에 추가 할 수 있습니다:

```html
<!-- Wijmo 레퍼런스 (필수) -->
<link href="styles/wijmo.min.css" rel="stylesheet" />
<!-- 
    wijmo.min.css 대신에 아래와 같이 사용자 정의 테마 사용가능
    <link href="styles/themes/wijmo.theme.modern.min.css" rel="stylesheet"/>
-->
<script src="scripts/vendor/controls/wijmo.min.js"></script>

<!-- Wijmo 컨트롤 (옵션, 필요한 컨트롤 만 추가) -->
<script src="scripts/vendor/controls/wijmo.grid.min.js"></script>
<script src="scripts/vendor/controls/wijmo.chart.min.js"></script>
<script src="scripts/vendor/controls/wijmo.input.min.js"></script>
<script src="scripts/vendor/controls/wijmo.gauge.min.js"></script>

<!-- Wijmo custom culture (옵션, 원하는 문화권을 추가) -->
<script src="scripts/vendor/controls/cultures/wijmo.culture.ko.min.js"></script>

<!-- AngularJS and Wijmo directives (옵션, Angular/React/Vue/etc 어플리케이션에서 사용가능) -->
<script src="scripts/vendor/angular.min.js"></script>
<script src="scripts/vendor/interop/angular/wijmo.angular.min.js"></script>

<!-- Wijmo 배포라이선스키 적용 (배포 시 필요) -->
<script>
  wijmo.setLicenseKey(**'your license key goes here...'**);
</script>
```

## CDN에서 Wijmo 배포

이 경우 다운로드 할 내용이 없습니다. HTML 페이지에 다음 행을 추가하기만 하면 됩니다:

```html
<!-- Wijmo 레퍼런스 (필수) -->
<link href="https://cdn.mescius.com/wijmo/5.20252.42/styles/wijmo.min.css" rel="stylesheet"/><!-- 
    wijmo.min.css 대신에 아래와 같이 사용자 정의 테마 사용가능
<link href="https://cdn.mescius.com/wijmo/5.20251.40/styles/themes/wijmo.theme.modern.min.css" rel="stylesheet"/>
-->

<script src="https://cdn.mescius.com/wijmo/5.20252.42/controls/wijmo.min.js"></script>
<!-- Wijmo 컨트롤 (옵션, 필요한 컨트롤 만 추가) -->
<script src="https://cdn.mescius.com/wijmo/5.20252.42/controls/wijmo.grid.min.js"></script>
<script src="https://cdn.mescius.com/wijmo/5.20252.42/controls/wijmo.chart.min.js"></script>
<script src="https://cdn.mescius.com/wijmo/5.20252.42/controls/wijmo.input.min.js"></script>
<script src="https://cdn.mescius.com/wijmo/5.20252.42/controls/wijmo.gauge.min.js"></script>

<!-- Wijmo custom culture (옵션, 원하는 문화권을 추가) -->
<script src="https://cdn.mescius.com/wijmo/5.20252.42/controls/cultures/wijmo.culture.ko.min.js"></script>

<!-- AngularJS and Wijmo directives (옵션, Angular/React/Vue/etc 어플리케이션에서 사용가능) -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<script src="https://cdn.mescius.com/wijmo/5.20252.42/interop/angular/wijmo.angular.min.js"></script>

<!-- Wijmo 배포라이선스키 적용 (배포 시 필요) -->
<script>
  wijmo.setLicenseKey(**'your license key goes here...'**);
</script>
```

만약 가장 최신 버전을 항상 사용하고 싶으시다면 **5.latest** 레퍼런스에 버전 숫자를 교체하시면 됩니다.

다음과 같습니다.

```html
<!-- latest Wijmo version -->
<script src="https://cdn.mescius.com/wijmo/5.latest/controls/wijmo.min.js"></script>
<link href="https://cdn.mescius.com/wijmo/5.latest/styles/wijmo.min.css" rel="stylesheet"/>
```

>type=info
> 주의사항
>
> * CDN형태로 참조를 하시면 체험판이기 때문에 화면 오른쪽 하단에 Wijmo 워터 마크가 보이게 됩니다. 워터 마크를 표시하지 않으려면 정품을 구매하고 위에서 설명한대로 Wijmo를 로컬로 다운로드하여 배포해야합니다. 더 상세한 내용은 [Wijmo 어플리케이션 라이선싱](/wijmo/docs/GettingStarted/Licensing) 섹션을 참고해주세요.
> * 참조의 순서도 중요합니다. **wijmo.js** 모듈이 먼저 있어야하고 그 다음에 제어 모듈, 제어 확장이 있어야하며 **wijmo.angular** 모듈이 마지막에 포함되어야합니다.

**구매문의** \- 전화 : 1670\-0583 \| 이메일 : sales\-kor@mescius\.com