[]
Wijmo는 다양한 JavaScript UI 컨트롤을 제공하며, 현대 개발자들이 주로 사용하는 npm, CDN, 다운로드 가능한 ZIP 파일을 통해 사용할 수 있습니다.
npm 설치나 CDN 참조 방식을 선택하더라도, **Wijmo Dev Kit**을 함께 다운로드하는 것을 권장합니다. Dev Kit에는 패키지 외에도 수백 개의 샘플, 소스 코드, 참조 애플리케이션 등이 포함되어 있습니다.
Wijmo는 npm에서 @mescius
범위(scope) 아래 여러 wijmo.*
패키지로 제공됩니다.
@mescius/wijmo.all
은 Wijmo 전체 라이브러리의 최신 릴리스를 포함하는 패키지를 의미합니다.
하지만 실제로는 사용하는 프레임워크나 컨트롤 종류에 따라 특정 버전이나 일부 패키지만 필요한 경우가 많습니다.
type=info
참고:
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 파일을 추가하는 방법을 다룹니다:
순수 JavaScript 모듈
스타일 파일
문화권 파일
프레임워크 모듈
type=info
참고:
Wijmo 패키지는 언어 버전 및 모듈 형식 조합에 따라 여러 가지 JavaScript 파일 포맷을 제공합니다.
이에 대한 자세한 내용은 NPM 모듈 포맷 항목을 참고 부탁드립니다.
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.css
스타일 파일이나 테마 파일을 애플리케이션에 추가해야 합니다.
CSS 파일 추가 방법은 다음과 같습니다:
<!--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" />
import '@mescius/wijmo.styles/wijmo.css';
import '../node_modules/@mescius/wijmo.styles/wijmo.css';
type=info
참고:
import 문에서 경로 포맷은 사용하는 번들러나 런타임 모듈 로더 설정에 따라 달라질 수 있습니다.
싱글 페이지 애플리케이션(SPA)에서는 루트 모듈에서 한 번만 CSS 파일을 import하면 충분합니다.
특정 문화권 적용도 스크립트 태그나 import 문으로 설정할 수 있으며 모든 문화권 파일은 @mescius/wijmo.cultures
패키지 안에 있습니다.
<!-- 문화권 파일의 경로 지정 -->
<script href="../node_modules/@mescius/wijmo.cultures/wijmo.culture.ko.min.js" />
<!-- 이 경우 한국어 문화권 파일 지정 -->
import '@mescius/wijmo.cultures/wijmo.culture.ja';
또는 import문에 상대 경로를 사용할 수 있습니다.
import '../node_modules/@mescius/wijmo.cultures/wijmo.culture.ko';
import 문에 지정하는 경로 형식은 애플리케이션에서 사용하는 번들러나 런타임 모듈 로더 및 그 설정에 따라 달라질 수 있습니다.
Wijmo는 모든 주요 JavaScript 프레임워크를 지원합니다. 지원되는 프레임워크 목록은 지원 프레임워크 항목을 참고해주시기 바랍니다.
각 프레임워크별 모듈을 애플리케이션에 추가하는 방법은 해당 프레임워크의 상세 문서에서 확인할 수 있습니다.