09

패키지

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

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

@tidory 티도리 7.1

@tidory 별칭은 미리 정의된 별칭입니다. 템플릿 내에서 특별하게 동작합니다. @tidory/my-package 형식으로 사용하면 node_modules/@tidory/my-package/index.pug 를 포함하며 만약 다른 템플릿을 포함시키고 싶다면 @tidory/my-package/other 와 같은 방식으로 포함시킬 수 있습니다.

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

include 하려는 패치가 존재하는 디렉토리라면 기본적으로 그 아래에 있는 index.pug 를 가리키게 됩니다. 그러나 디렉토리가 아닌 파일이라면 해당 파일을 가리킵니다.

package.json 티도리 7.1

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

{
  "name": "@tidory/my-package",
  "main": "index.js"
  "version": "1.0.0"
}

모듈과 패키지 종속 티도리 7.1

티도리 패키지가 다른 NPM 패키지티도리 패키지에 종속할 수 있을까요?

뷰 & 리액트 컴포넌트

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

오직 컴포넌트만을 티도리 패키지에 포함시킬 필요는 없습니다. 티도리 패키지에는 템플릿 파일이 포함되어 있으므로 해당 템플릿파일에서 컴포넌트를 사용하는 경우도 있을 수 있을 수 있습니다. @tidory 스코프 아래에 생성된 패키지는 리액트 컴포넌트에서 사용하는 jsx 템플릿 스트링을 해석할 수 있습니다.

티도리 패키지

우리가 npm 을 사용하는 이상, 패키지에서 또 다른 티도리 패키지에 종속하는 것도 할 수 있습니다. 다른 티도리 패키지의 템플릿에 접근하는 방법도 프로젝트 템플릿에서 티도리 패키지에 접근하는 것과 다르지 않습니다. 그저 @tidory 별칭을 하십시오.

(adsbygoogle = window.adsbygoogle || []).push({});