TidoryContainer

Documents

DocumentsContent

GetStarted

시작하기 전에

Tidory 프레임워크를 시작하기 전에 다음과 같은 도구들이 필요합니다.

Programming Language: HTML, CSS

Optional: Pug, JS

Bundler: Webpack

Configuration Management: git

Package Manager:npm

설치하기

% git clone https://github.com/pronist/tidory.git

의존성 설치

프로젝트를 시작하기전에 의존성을 설치해야합니다. 의존성 리스트는 package.json에 정의되어 있습니다. npmNode.js 에서 주로 사용되는 Package Manager입니다. 사용방법을 모른다면, npm의 사용법을 먼저 숙지해야 합니다.

% npm Install

개발 서버 시작

데모로 작성되어있는 앱을 어떻게 실행시키면 될까요? 간단하게 알아보도록 하겠습니다. npm start 명령으로 webpack-dev-server 를 실행시킬 수 있습니다. 템플릿 파일이 수정되면 자동으로 리로드 됩니다.

% npm start

배포 환경 빌드

티스토리에서 적용되는 특수한 환경으로 웹팩에 의해 번들링된 에셋(*.bundle.js)자동으로 주입되지 않도록설정되어 있습니다. 따라서 수동으로 넣어야합니다. 티스토리에 스킨을 등록하기 전, Only for PRODUCT 주석처리가 되어있는 부분을 해제하여 빌드해야 합니다. 기본 프로젝트 템플릿에 주석이 해제되어 있습니다.
 layout/default.pug

doctype html

html(lang="ko")
	head
		//- Only for PRODUCT
		link(rel="stylesheet" href="./style.css")

	//- Only for PRODUCT
	script(type="text/javascript", 
		src="./images/tidory.vendor.bundle.js")
	script(type="text/javascript", 
		src="./images/tidory.bundle.js")   

% npm run build

다음과 같이 프로젝트 폴더 내부에 있는 dist 폴더에 배포전용 빌드가 되어있는 모습을 볼 수 있습니다.
dist/
├── images/
│   ├── tidory.bundle.js
│   ├── tidory.vendor.bundle.js
├── preview256.jpg
├── preview560.jpg
├── preview1600.jpg
├── index.xml
├── skin.html
└── style.css