티도리 시작하기

티스토리 스킨 제작 프레임워크

티도리티스토리 스킨 제작 을 위해 고안된 프레임워크 입니다. 개발자의 입맛에 맞게 다양한 기능을 사용하여 신속하고 재사용성이 높은 스킨제작을 목적으로 하고 있습니다.
* 프레임워크는 어플리케이션을 빠르게 개발하기 위해 제공되는 '틀' 같은 존재입니다.
프레임워크 관련 피드백 및 질문사항, 구인관련 사항은 pronist@naver.com 으로 보내주시면 감사하겠습니다.

시작하기 전에

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

Programming Language: HTML, CSS, JS

Extension: Pug

Package Manager: npm

* npm(Node Package Manager): npm 은 자바스크립트 모듈 및 라이브러리가 등록되어있는 저장소를 사용하여 자신 또는 다른 사람이 제작한 패키지를 관리할 수 있도록해주는 도구입니다. 서버에서 사용하는 node.js 와 관련이 깊습니다.
* Pug: PugHTML 페이지의 코드 길이를 줄여주고 각종 부가기능을 추가하여 마크업을 빠르게 작성할 수 있도록 해주는 확장언어 입니다.

설치하기

먼저 npm 을 통해 모듈을 설치해야 합니다. tidory 모듈은 티도리 프로젝트 템플릿 과 상호작용하여 작동합니다. CLI(Command Line Interface) 상에서 명령을 통해 실행합니다.

$ npm install -g tidory

* 티도리 모듈에 대한 문서는 npm 패키지에 포함되어 있습니다. https://www.npmjs.com/package/tidory 를 참고해주시기 바랍니다.
* CLI(Command Line Interface): CLI 는 명령줄을 사용하여 지시를 내릴 수 있는 환경을 말합니다. Windows 에서 사용하는 cmd, powershell 이나 리눅스터미널(Terminal) 정도가 있습니다.

티도리 프로젝트 설치

Tidory 를 설치했다면, 프로젝트 템플릿을 git 저장소로 부터 받아올 수 있습니다. 다음과 같은 명령을 사용하여 템플릿을 받아온 뒤, 해당 폴더로 이동합니다.

$ tidory new <TISTORY_SKIN_NAME> $ cd TISTORY_SKIN_NAME $ npm install

* 기본 프로젝트 템플릿은 티도리 github 페이지에서 찾을 수 있습니다. https://github.com/pronist/tidory-starter-template
데모로 작성되어있는 앱을 어떻게 실행시키면 될까요? 간단하게 알아보도록 하겠습니다. tidory start 명령을 사용하면 http://localhost:8080 주소로 webpack-dev-server 를 실행시킬 수 있습니다. 템플릿 파일이 수정되면 자동으로 리로드 됩니다.

$ tidory start

추가적으로, 프로젝트 템플릿에는 설정파일(.env).env.example 이라는 이름으로 되어있습니다. 해당 파일의 이름을 .env 파일로 변경해주세요.