npm 기반의 어플리케이션에 Wijmo 참조하기
Wijmo는 다양한 JavaScript UI 컨트롤을 제공하며, 현대 개발자들이 주로 사용하는 npm, CDN, 다운로드 가능한 ZIP 파일을 통해 사용할 수 있습니다.
npm 설치나 CDN 참조 방식을 선택하더라도, **Wijmo Dev Kit**을 함께 다운로드하는 것을 권장합니다. Dev Kit에는 패키지 외에도 수백 개의 샘플, 소스 코드, 참조 애플리케이션 등이 포함되어 있습니다.
Wijmo 패키지 설치하기
Wijmo는 npm에서 @mescius 범위(scope) 아래 여러 wijmo.* 패키지로 제공됩니다.
@mescius/wijmo.all은 Wijmo 전체 라이브러리의 최신 릴리스를 포함하는 패키지를 의미합니다.
하지만 실제로는 사용하는 프레임워크나 컨트롤 종류에 따라 특정 버전이나 일부 패키지만 필요한 경우가 많습니다.
참고:
npm 패키지(Wijmo 포함)를 사용하려면 컴퓨터에 Node.js가 설치되어 있어야 합니다.
아래는 NodeJS 커맨드 프롬프트에서 사용할 수 있는 Wijmo 패키지 설치 명령어 목록입니다:
패키지 | 명령어 | 다운로드 항목 |
|---|---|---|
릴리즈 버전 |
| 전체 Wijmo 라이브러리 (모든 패키지) |
RC 빌드* |
| 릴리즈 후보(Release Candidate) 버전 전체 |
nightly 빌드* |
| 최신 nightly 빌드 |
PureJS 패키지 |
| PureJS 전용 패키지 |
Angular2 패키지 |
| PureJS + Angular2 패키지 |
React 패키지 |
| PureJS + React 패키지 |
Vue2 패키지 |
| PureJS + Vue2 패키지 |
WebComponents 패키지 |
| PureJS + WebComponents 패키지 |
특정 컨트롤 패키지 |
| 컨트롤 단위 또는 프레임워크별 컨트롤 패키지 |
스타일 패키지** |
| Wijmo의 CSS 스타일 및 테마 파일 (SCSS 소스 포함) |
문화권 패키지 |
| 언어/국가별 포맷 및 UI 문자열 파일 |
* RC 및 나이트리 빌드는 테스트용이며, 개발 환경에서는 사용을 권장하지 않습니다.
** 스타일 패키지는 다른 Wijmo 패키지를 설치할 때 자동으로 다운로드되므로 별도로 설치할 필요는 없습니다.
애플리케이션에 Wijmo 추가하기
이 섹션에서는 애플리케이션에 다음과 같은 Wijmo 파일을 추가하는 방법을 다룹니다:
순수 JavaScript 모듈
스타일 파일
문화권 파일
프레임워크 모듈
참고:
Wijmo 패키지는 언어 버전 및 모듈 형식 조합에 따라 여러 가지 JavaScript 파일 포맷을 제공합니다.
이에 대한 자세한 내용은 NPM 모듈 포맷 항목을 참고 부탁드립니다.
Wijmo 자바스크립트 모듈 추가
TypeScript 또는 Babel을 사용하는 애플리케이션에는 ES2015 import 구문을 이용해 Wijmo 모듈을 추가할 수 있으며 모듈 이름 앞에 "@mescius/"를 붙여 지정합니다.
아래 코드는 wijmo.grid 모듈을 가져오고 FlexGrid 컨트롤의 인스턴스를 생성합니다.
import * as wjcGrid from '@mescius/wijmo.grid';
let grid = new wjcGrid.FlexGrid('#hostElement');만약 ES5 코드를 사용할 경우, CommonJS require() 함수를 이용해 모듈을 불러옵니다:
var wjcGrid = require('@mescius/wijmo.grid');
var grid = new wjcGrid.FlexGrid('#hostElement'); Wijmo 스타일 추가
컨트롤이 정상적으로 표시되려면 wijmo.css 스타일 파일이나 테마 파일을 애플리케이션에 추가해야 합니다.
CSS 파일 추가 방법은 다음과 같습니다:
HTML 페이지에 link 태그 추가
<!--wijmo.css 또는 theme css 파일의 경로 지정 -->
<link href="../node_modules/@mescius/wijmo.styles/wijmo.css" rel="stylesheet" />또는
<link href="../node_modules/@mescius/wijmo.styles/themes/wijmo.theme.cerulean.css " rel="stylesheet" />ESM import문 사용
import '@mescius/wijmo.styles/wijmo.css';상대 경로를 사용한 import문 사용
import '../node_modules/@mescius/wijmo.styles/wijmo.css';참고:
import 문에서 경로 포맷은 사용하는 번들러나 런타임 모듈 로더 설정에 따라 달라질 수 있습니다.
싱글 페이지 애플리케이션(SPA)에서는 루트 모듈에서 한 번만 CSS 파일을 import하면 충분합니다.
Wijmo 문화권 파일 추가하기
특정 문화권 적용도 스크립트 태그나 import 문으로 설정할 수 있으며 모든 문화권 파일은 @mescius/wijmo.cultures 패키지 안에 있습니다.
script 태그를 사용한 import문 사용
<!-- 문화권 파일의 경로 지정 -->
<script href="../node_modules/@mescius/wijmo.cultures/wijmo.culture.ko.min.js" />ESM import문 사용
<!-- 이 경우 한국어 문화권 파일 지정 -->
import '@mescius/wijmo.cultures/wijmo.culture.ko';또는 import문에 상대 경로를 사용할 수 있습니다.
import '../node_modules/@mescius/wijmo.cultures/wijmo.culture.ko'; import 문에 지정하는 경로 형식은 애플리케이션에서 사용하는 번들러나 런타임 모듈 로더 및 그 설정에 따라 달라질 수 있습니다.
프레임워크 추가하기
Wijmo는 모든 주요 JavaScript 프레임워크를 지원합니다. 지원되는 프레임워크 목록은 지원 프레임워크 항목을 참고해주시기 바랍니다.
각 프레임워크별 모듈을 애플리케이션에 추가하는 방법은 해당 프레임워크의 상세 문서에서 확인할 수 있습니다.