09

패키지

티도리 패키지 티도리 7.1

프레임워크의 또 하나의 특징은, 다른 사람이 작성한 코드를 프로젝트에 포함 시킬 수 있다는 점입니다. 티도리 프레임워크 또한 패키지를 작성하는 것으로 다른 사람에게 자신의 코드를 제공할 수 있습니다.

├── index.pug
├── package.json
├── LICENSE
└── README.md

티도리 패키지의 기본 폴더구조이며 필수적인 것은 아닙니다. 하지만 프로젝트 템플릿에서 기본적으로 포함하는 템플릿은 index.pug 입니다. 기본 패키지 예제는 default-header 예제를 참고해주세요.

패키지 개발

티도리 패키지는 취급NPM 패키지로 취급하기 때문에 package.json 이 필수적입니다. 티도리 패키지는 다른 패키지와는 달리 테스트하기 어려운 점이 있는데, 우리가 기존에 사용하던 tidory-cli 를 사용하면 개발 서버, 프리뷰 서버를 똑같이 이용할 수 있습니다. 티도리에 등록된 패키지인 default-header, default-sidebar, example 레포지토리를 사용하면 패키지 개발을 조금 더 쉽게할 수 있습니다.

package.json

패키지 매니저는 npm 을 사용하지만 본질적으로 NPM 패키지라고 보기에는 무리가 있습니다. 따라서 패키지에는 이름에 제약을 걸어둡니다. 티도리 패키지는 @tidory 스코프 아래에 두는 것을 원칙으로 합니다. 또한 NPM 레지스트리에 공표(Publish) 하는 일이 없도록 하십시오. 레지스트리는 github 를 사용하세요.

{
  "name": "@tidory/package",
  "main": "index.js"
  "version": "1.0.0",
  "files": [
    "index.js",
    "index.pug",
    "LICENSE",
    "README.md"
  ]
}

패키지로 제공된 레포지토리에는 env, tidory.config.js 등 개발을 위한 파일이 포함되어 있는데, 티도리 프로젝트 템플릿에서 포함할 때는 의미가 없으므로 files 배열에 포함시킬 필요가 없습니다. 하지만 컴포넌트 또는 템플릿이 위치하는 디렉토리가 있다면 그것을 추가시켜야 합니다.

뷰 & 리액트 컴포넌트

티도리 프레임워크는 뷰 컴포넌트리액트 컴포넌트 해석이 가능합니다. 티도리 패키지 내부에서 컴포넌트를 당연히 포함시킬 수 있습니다. 기존에 app.js 에서 작성했던 것을 그대로 index.js 에 작성하면 됩니다. 컴포넌트가 포함된 패키지는 default-sidebar 예제를 참고해주세요.

@tidory

@tidory 별칭은 미리 정의된 템플릿 별칭입니다. @tidory/package 형식으로 사용하면 node_modules/@tidory/package/index.pug 를 포함하며 만약 같은 패키지에 속한 다른 템플릿을 포함시키고 싶다면 @tidory/package/HelloWorld 와 같은 방식으로 포함시킬 수 있습니다.

//- node_modules/@tidory/my-package/index
include @tidory/my-package
//- node_modules/@tidory/my-package/HelloWorld
include @tidory/my-package/HelloWorld

다른 티도리 패키지를 종속하는 패키지를 개발할 때도 @tidory 별칭을 사용하여 포함시킬 수 있습니다.