v3.0.0 마이그레이션 가이드

이번 메이저 버전 업데이트에서는 5가지 변화가 있었다.

1. 네이밍 통일

먼저 TUI(Toast UI) 제품 네이밍을 통일하는 작업이 있었다. 크게 네 가지 영역의 네이밍이 변경되었으며, 아래 표에서 변경 사항들을 꼭 확인하길 바란다.

변경 사항

	변경 전	변경 후
네임스페이스	tui.component.Datepicker	tui.DatePicker
리포지터리명	tui.component.date-picker	tui.date-picker
패키지명	tui-component-datepicker	tui-date-picker
번들 파일명	tui-component-datepicker	tui-date-picker

2. API 변경

네이밍 변경과 함께 DatePicker 컴포넌트 생성 API가 변경되었다.

// create instance of DatePicker
// before using 'tui.component.Datepicker' namespace
var instance = new tui.DatePicker(selector, options);

또한 Calendar, DateRangePicker 컴포넌트 생성 API도 변경되었다.

기존에는 tui.component 네임스페이스를 사용하여 생성하였는데,

// create instance of Calendar
var instance = new tui.component.Calendar(selector, options);

// create instance of DateRangePicker
var instance = new tui.component.DateRangePicker(options);

다음과 같이 DatePicker 컴포넌트의 static 메서드를 호출하여 생성하는 방식으로 변경되었다.

// create instance of Calendar
var instance = tui.DatePicker.createCalendar(selector, options);

// create instance of DateRangePicker
var instance = tui.DatePicker.createRangePicker(options);

더 자세한 사용 방법은 API 및 예제 페이지에서 확인할 수 있다.

3. TimePicker 컴포넌트 분리

TimePicker 컴포넌트의 리포지터리가 분리되었다.

DatePicker 컴포넌트에서 타임피커 기능을 사용하는 방식은 이전 버전과 동일하나, 반드시 아래 리포지터리를 참조해 파일을 추가한 후 사용해야 한다.

TimePicker 신규 리포지터리

• https://github.com/nhnent/tui.time-picker

파일 추가

// browser enviroment
...
<link href="../bower_components/tui-time-picker/dist/tui-time-picker.css" rel="stylesheet">
<link href="../dist/tui-date-picker.css" rel="stylesheet">
...
...
<script type="text/javascript" src="../bower_components/tui-time-picker/dist/tui-time-picker.js"></script>
<script type="text/javascript" src="../dist/tui-date-picker.js"></script>
...

4. 브랜치 추가

리포지터리에 master, gh-pages 브랜치 외 2개 브랜치가 추가되었다.

• production : 번들 파일 폴더(dist)를 포함하는 브랜치
• develop : 개발 브랜치이며 외부 PR(Pull Request)를 받기 위한 용도로 추가됨

5. npm 등록

마지막으로 npm에 등록되어 nodejs 환경에서 개발이 가능해졌다.

$ npm install tui-date-picker
$ npm install tui-date-picker@<version>

다음과 같이 require 함수를 호출해 컴포넌트를 사용할 수 있으며, 네임스페이스 대신 CommonJS 방식으로 개발하는 것을 권장한다.

var DatePicker = require('tui-date-picker');
var instance = new DatePicker(options);