티도리 5.x

새로운 기능

MVC(Model, View, Controller) 를 기반으로하는 SPA(Single Pagr Application) 을 작성할 수 있도록 구성되었으며, 전역변수Pug 가 제공하는 변수와 결합되어 이제 @{...} 와 같은 고유의 문법체계는 사용하지 않습니다. 그 외에 컨트롤러 단에서 모듈을 빠르게 불러올 수 있도록 별칭 을 추가하였습니다.

MVC(Model, View, Controller)

MVC(Model, View, Controller) 를 기반으로하는 SPA(Single Page Application) 을 작성할 수 있습니다. 모델(Model) 은 브라우저가 제공하는 WebSQL, IndexedDB, LocalStorage 중에 적절하게 선택하여 사용합니다. 뷰(View) 는 기존 Pug 템플릿으로 작성되며 컨트롤러(Controller) 는 필자가 개발한 Trickr 를 사용하여 가짜 라우팅(Fake Routing) 을 구현합니다.
모델(Model): 데이터베이스
뷰(View): 페이지 템플릿
컨트롤러(Controller): 라우팅

별칭

컨트롤러(Controller) 에서 모델(Model) 을 부를 때, 코드를 포함시켜야 하는데 경로가 길어 불편할 수 있습니다. 이를 해소하기 위해 특정 디렉토리에 별칭을 만들어 호출할 수 있도록 하였습니다.
자세한 내용은 별칭 에서 알아볼 수 있습니다.

Usage

*.javascript
        
// database/models/user
const user = require('@models/user')        

퍼그와 전역변수

분리되어있던 전역변수Pug 의 변수가 결합되어 이제 전역변수로도 퍼그가 제공하는 모든기능을 사용할 수 있습니다. 그에 따라 일부 사용방법이 변경되어 페이지의 보간법에 따라 사용하며, 전역객체 TIDORY 내부에 저장됩니다.
자세한 내용은 전역변수 에서 알아볼 수 있습니다.

제거

제거 된 기능으로는 새로 추가된 기능에 의한 제거입니다. 테스트 프레임워크 종속성 완화를 위해 tidory test 명령이 제거되었습니다. 퍼그와 전역변수 가 결합됨에 따라 전역변수를 지원하기 위해 만들어졌던 각종 디렉티브(클래스, 조건부, 리스트) 가 모두 제거되었습니다.

tidory test

tidory test 명령은 QUnit Framework 에 종속되어있었습니다. 이러한 종속은 좋지 않다고 판단하여 제거하고 프로젝트 종속성으로 변경하였습니다. 사용자는 얼마든지 테스트 프레임워크를 변경할 수 있습니다.

디렉티브

퍼그와 전역변수 의 결합에 따라 조건부 해석, 리스트 렌더링, 클래스 바인딩 와 관련된 디렉티브는 모두 제거되었습니다. 이제 퍼그가 제공하는 기능과 혼란을 겪지 않고 일관성있게 사용할 수 있습니다. 디렉티브 힘들게 만들어놨는데..ㅠㅠ
조건부 해석: t-if, t-else, t-if-else
리스트 렌더링: t-for
클래스 바인딩: t-class

변경사항

전역변수 의 동작 변경에 따라 사용자 정의 디렉티브 를 정의할 때 필요한 파라매터가 일부 변경되었습니다. MVC(Model, View, Controller) 개념의 추가에 따라 디렉터리 구조가 변경되었습니다.

사용자 정의 디렉티브

전역변수 의 작동방식 변경에 따라 기존에 콜백함수 두 개를 받던 사용자 정의 디렉티브 의 매개변수가 콜백함수를 한 개만 받습니다. 이는 전역변수 이후에 처리됩니다.
자세한 내용은 사용자 정의 디렉티브 에서 알아볼 수 있습니다.

디렉터리 구조

MVC(Model, View, Controller) 개념의 추가에 따라 디렉터리 구조가 변경되었습니다. 티도리 고유 설정파일은 config 폴더로 옮겨졌으며, 데이터베이스를 위한 database 폴더와 라우터 를 위한 routes 폴더가 추가되었습니다.
├── assets/
├── config/
│     ├── tidory.config.js
│     └── tidory.preview.conf.js
├── database/
│     ├── models/
│     └── schemas/
├── docs/
│     ├── index.xml
│     ├── preview256.jpg
│     ├── preview560.jpg
│     └── preview1600.jpg
├── images/
├── layouts/
│     └── default.pug
├── routes/
│     ├── config/
│     ├── middlewares/
│     ├── controllers/
│     ├── views/
│     └── index.js
├── test/
│     └── tidory.config.js
├── views/
├── app.pug
├── index.pug
├── webpack.base.conf.js
└── webpack.entry.js