# npm 기반의 어플리케이션에 Wijmo 참조하기

## Content

**Wijmo**는 다양한 JavaScript UI 컨트롤을 제공하며, 현대 개발자들이 주로 사용하는 npm, CDN, 다운로드 가능한 ZIP 파일을 통해 사용할 수 있습니다.

npm 설치나 CDN 참조 방식을 선택하더라도, \*\*[Wijmo Dev Kit](https://www.mescius.co.kr/wijmo/download)\*\*을 함께 다운로드하는 것을 권장합니다. Dev Kit에는 패키지 외에도 수백 개의 샘플, 소스 코드, 참조 애플리케이션 등이 포함되어 있습니다.

## Wijmo 패키지 설치하기

Wijmo는 npm에서 `@mescius` 범위(scope) 아래 여러 `wijmo.*` 패키지로 제공됩니다.
`@mescius/wijmo.all`은 Wijmo 전체 라이브러리의 최신 릴리스를 포함하는 패키지를 의미합니다.
하지만 실제로는 사용하는 **프레임워크**나 **컨트롤 종류**에 따라 특정 버전이나 일부 패키지만 필요한 경우가 많습니다.

>type=info
> 참고:
> npm 패키지(Wijmo 포함)를 사용하려면 컴퓨터에 **Node.js**가 설치되어 있어야 합니다.

아래는 NodeJS 커맨드 프롬프트에서 사용할 수 있는 Wijmo 패키지 설치 명령어 목록입니다:

| **패키지** | **명령어** | **다운로드 항목** |
| --- | --- | ------- |
| 릴리즈 버전 | `npm install @mescius/wijmo.all` | 전체 Wijmo 라이브러리 (모든 패키지) |
| RC 빌드\* | `npm install @mescius/wijmo.all@rc` | 릴리즈 후보(Release Candidate) 버전 전체 |
| nightly 빌드\* | `npm install @mescius/wijmo.all@nightly` | 최신 nightly 빌드 |
| PureJS 패키지 | `npm install @mescius/wijmo.purejs.all` | PureJS 전용 패키지 |
| Angular2 패키지 | `npm install @mescius/wijmo.angular2.all` | PureJS + Angular2 패키지 |
| React 패키지 | `npm install @mescius/wijmo.react.all` | PureJS + React 패키지 |
| Vue2 패키지 | `npm install @mescius/wijmo.vue2.all` | PureJS + Vue2 패키지 |
| WebComponents 패키지 | `npm install @mescius/wijmo.webcomponents.all` | PureJS + WebComponents 패키지 |
| 특정 컨트롤 패키지 | `npm install @mescius/wijmo.{control}` 또는 `npm install @mescius/wijmo.{framework}.{control}` | 컨트롤 단위 또는 프레임워크별 컨트롤 패키지 |
| 스타일 패키지\*\* | `npm install @mescius/wijmo.styles` | Wijmo의 CSS 스타일 및 테마 파일 (SCSS 소스 포함) |
| 문화권 패키지 | `npm install @mescius/wijmo.cultures` | 언어/국가별 포맷 및 UI 문자열 파일 |

\* RC 및 나이트리 빌드는 테스트용이며, 개발 환경에서는 사용을 권장하지 않습니다.
\*\* 스타일 패키지는 다른 Wijmo 패키지를 설치할 때 자동으로 다운로드되므로 별도로 설치할 필요는 없습니다.

## 애플리케이션에 Wijmo 추가하기

이 섹션에서는 애플리케이션에 다음과 같은 Wijmo 파일을 추가하는 방법을 다룹니다:

* 순수 JavaScript 모듈
* 스타일 파일
* 문화권 파일
* 프레임워크 모듈

>type=info
> 참고:
> Wijmo 패키지는 언어 버전 및 모듈 형식 조합에 따라 여러 가지 JavaScript 파일 포맷을 제공합니다.
> 이에 대한 자세한 내용은 [NPM 모듈 포맷](https://demo.mescius.co.kr/wijmo/docs/GettingStarted/NPM-Module-Formats) 항목을 참고 부탁드립니다.

### Wijmo 자바스크립트 모듈 추가

TypeScript 또는 Babel을 사용하는 애플리케이션에는 ES2015 `import` 구문을 이용해 Wijmo 모듈을 추가할 수 있으며 모듈 이름 앞에 `"@mescius/"`를 붙여 지정합니다.
아래 코드는 wijmo.grid 모듈을 가져오고 FlexGrid 컨트롤의 인스턴스를 생성합니다.

```javascript
import * as wjcGrid from '@mescius/wijmo.grid'; 
let grid = new wjcGrid.FlexGrid('#hostElement');
```

만약 ES5 코드를 사용할 경우, CommonJS `require()` 함수를 이용해 모듈을 불러옵니다:

```auto
var wjcGrid = require('@mescius/wijmo.grid'); 
var grid = new wjcGrid.FlexGrid('#hostElement'); 
```

### Wijmo 스타일 추가

컨트롤이 정상적으로 표시되려면 `wijmo.css` 스타일 파일이나 테마 파일을 애플리케이션에 추가해야 합니다.
CSS 파일 추가 방법은 다음과 같습니다:

#### HTML 페이지에 link 태그 추가

```html
<!--wijmo.css 또는 theme css 파일의 경로 지정 --> 
<link href="../node_modules/@mescius/wijmo.styles/wijmo.css" rel="stylesheet" />
```

또는

```html
<link href="../node_modules/@mescius/wijmo.styles/themes/wijmo.theme.cerulean.css " rel="stylesheet" />
```

#### ESM import문 사용

```javascript
import '@mescius/wijmo.styles/wijmo.css';
```

#### 상대 경로를 사용한 import문 사용

```auto
import '../node_modules/@mescius/wijmo.styles/wijmo.css';
```

>type=info
> 참고:
> import 문에서 경로 포맷은 사용하는 번들러나 런타임 모듈 로더 설정에 따라 달라질 수 있습니다.
> 싱글 페이지 애플리케이션(SPA)에서는 루트 모듈에서 한 번만 CSS 파일을 import하면 충분합니다.

## Wijmo 문화권 파일 추가하기

특정 문화권 적용도 스크립트 태그나 import 문으로 설정할 수 있으며 모든 문화권 파일은 `@mescius/wijmo.cultures` 패키지 안에 있습니다.

#### script 태그를 사용한 import문 사용

```html
<!-- 문화권 파일의 경로 지정 --> 
<script href="../node_modules/@mescius/wijmo.cultures/wijmo.culture.ko.min.js" />
```

#### ESM import문 사용

```javascript
<!-- 이 경우 한국어 문화권 파일 지정 -->
import '@mescius/wijmo.cultures/wijmo.culture.ko';
```

또는 import문에 상대 경로를 사용할 수 있습니다.

```auto
import '../node_modules/@mescius/wijmo.cultures/wijmo.culture.ko'; 
```

import 문에 지정하는 경로 형식은 애플리케이션에서 사용하는 번들러나 런타임 모듈 로더 및 그 설정에 따라 달라질 수 있습니다.

## 프레임워크 추가하기

Wijmo는 모든 주요 JavaScript 프레임워크를 지원합니다. 지원되는 프레임워크 목록은 [지원 프레임워크](https://demo.mescius.co.kr/wijmo/docs/GettingStarted/Introduction) 항목을 참고해주시기 바랍니다.
각 프레임워크별 모듈을 애플리케이션에 추가하는 방법은 해당 프레임워크의 상세 문서에서 확인할 수 있습니다.