Documents

DocumentsContent

디렉터리 구조

프레임워크 아키텍쳐

디렉터리 구조를 자세히 살펴보기 이전에, 좀 더 쉬운 이해를 위해 폴더와 파일이 어떤 역할을 하는지 대략적으로 표현해보았습니다.
간단하게 정리하자면, app.pug 는 스킨의 기본구조이자 layouts/*.pug 에서 상속하며, index.pug 에서 views/*.pug 를 불러오는 것으로 최종적으로 합치게 됩니다. 이후 티스토리 설정파일 과 함께 tidory dist 를 통해 배포전용 으로 만듭니다.
프레임워크 아키텍쳐

디렉터리 구조

├── assets/
├── docs/
│     ├── index.xml
│     ├── preview256.jpg
│     ├── preview560.jpg
│     └── preview1600.jpg
├── images/
├── test/
│     └── QUnit-tidory.config.js
├── layouts/
│     └── default.pug
├── views/
├── app.pug
├── index.pug
├── tidory.config.js
├── webpack.base.conf.js
└── webpack.entry.js

assets/*

해당 디렉터리의 용도는 webpack.entry.js 에 포함할 파일들을 넣는 용도이며, 필수적이기 않기 때문에 디렉터리 이름을 변경할 수 있습니다.

docs/*

티스토리 스킨 업로드에 필요한 파일이 위치하고 있습니다. index.xml, preview256.jpg, preview560.jpg, preview1600.jpg, 프로덕션 빌드dist 폴더로 이동합니다.

images/*

보통 프레임워크에서 정적파일의 폴더이름은 static 으로 처리 될 수 있습니다만, 티스토리에서는 images 폴더로 모든 정적파일 을 관리합니다. 템플릿에서는 다음과 같이 포함될 수 있습니다.

<img src="./images/favicon.png">

test/*.js

테스트케이스를 작성하기위한 전용 디렉터리입니다. 티도리 API 가 제공하는 각종기능을 시험해볼 때 유용합니다. 관련 설정파일로는 QUnit-tidory.config.js 파일이 있습니다. 이 글의 설정파일 부분에서 언급될 tidory.config.js 파일과 사용법이 동일합니다. 테스트 관련 부분은 테스트 시작하기 부분을 참고하세요.

템플릿 구조

템플릿 관련 파일을 살펴보기 전에 템플릿이 어떤 계층 으로 이루어져 있는지 간단하게 그림으로 살펴봅시다.
템플릿 구조

app.pug

html 의 기본적 구조가 선언되어 있는 템플릿입니다. block HEADhead 태그의 마지막 부분이며, index.pug 파일에서 설정됩니다. block TISTORY 부분은 스킨의 몸통 부분입니다. layouts/default.pug 파일에서 설정됩니다.
app.pug

doctype html

html(lang="ko")
  head
    //- TISTORY RSS
    link(rel="alternate", type="application/rss+xml", 
       title="[##_title_##]", href="[##_rss_url_##]")
    //- meta
    meta(charset="utf-8")
    meta(name="viewport" content="user-scalable=no, 
       initial-scale=1.0, maximum-scale=1.0, 
       minimum-scale=1.0, width=device-width")
    //- End of Head
    block HEAD

  body(id="[##_body_id_##]")
    //- TISTORY main content
    block TISTORY

layouts/*.png

레이아웃 파일이 들어갈 수 있습니다. default.pug 파일이 기본적으로 생성되어 있으며, 이는 index.pug 에서 기본 레이아웃으로 사용됩니다. 기본적으로 레이아웃 파일은 app.pug 파일을 상속받아 사용합니다.
layouts 폴더에 있는 기본 레이아웃인 default.pug 는 다음과 같습니다.
default.pug

extends ../app

block TISTORY
  s_t3
    div#__tidory
      block TIDORY

views/*.png

pug 템플릿 파일이 위치할 폴더입니다. 보통 index.pug 파일의 block TIDORY 부분에서 템플릿파일을 포함시킵니다. 소스구조는 분활해서 구성하는 것이 원칙입니다. 템플릿 분리 부분을 참고하세요.

index.pug

skin.html 파일로 변환될 pug의 메인 템플릿 입니다. 기본적으로 layouts/default.pug 파일을 상속받으며, block HEAD 의 경우 app.pug, block TIDORY 부분은 layouts/default.pug 파일에서 찾을 수 있습니다.
index.pug

extends ./layouts/default

//- End of head
block HEAD
  title [##_title_##] :: [##_page_title_##]

  <!--[if lt IE 9]>
  script(src="https://t1.daumcdn.net/tistory_admin/lib/jquery/jquery-1.12.4.min.js")
  <![endif]-->
  <!--[if gte IE 9]><!-->
  script(src="https://t1.daumcdn.net/tistory_admin/lib/jquery/jquery-3.2.1.min.js")
  <!--<![endif]-->

block TIDORY
  include views/HelloWorld

설정파일

티도리 API 를 호출하고, 스킨 미리보기 를 위한 정보를 입력하고, 기본 웹팩 설정 을 변경할 수 있으며, 번들링 될 에셋 포함설정 등을 하기위한 파일입니다.

tidory.config.js

tidory.config.js 파일은 3.0.0 버전부터 추가 된 tidory API 함수를 호출하기 위한 파일입니다. 프로젝트 템플릿에 포함되어 있습니다.
tidory.config.js
        
const tidory = require('tidory');

/** 
 * tidory.config.js
 * 
 * Configuration for Tidory Framework
 * you can call APIs such as Directive, Event .etc
 * 
 * When sources will be compiled, this is referenced
 */

const directive = tidory.Directive;
const event = tidory.Event;

// ...

module.exports = tidory

tidory.preview.conf

스킨 미리보기를 진행하기위해 반드시 설정해야 하는 파일입니다. 테스트 블로그의 URL, 로그인을 진행할 아이디, 비밀번호 와 미리보고 싶은 페이지를 지정하는 PREVIEW_URL 이 있습니다.
tidory.preview.conf.js
        
module.exports = {
  /**
   * IMPORTANT
   * 
   * Your TISTORY ID and PASSWORD is used only for PREVIEW .
   * It happens real login to TISTORY
   * http://__BLOG_URL__/member/security/accessLog
   * 
   * Must release login access control to 'All devices'.
   * http://__BLOG_URL__/member/security/device
   * 
   */
  "TISTORY_ID": "__TISTORY_ID__",
  "TISTORY_PASSWORD": "__TISTORY_PASSWORD__",

  /** YOUR BLOG URL */
  "BLOG_URL": "http://example.tistory.com",

  /** Preview URL */
  "PREVIEW_URL": "/"
} 

webpack.base.conf.js

Webpack기본 설정 으로 정해진 파일입니다. 해당 파일을 통해 기본적인 웹팩 설정을 변경할 수 있습니다. 설정 정보가 궁금하다면 웹팩의 공식 홈페이지를 참고해주시기 바랍니다 https://webpack.js.org/configuration/
webpack.base.conf.js
  
const path = require('path');

module.exports = {
  entry:  path.resolve(__dirname, './webpack.entry.js'),
  module: {
    rules: [
      {
        test: /.(png|jpe?g|gif|svg)(?.*)?$/,
        loader: 'url-loader'
      },
      {
        test: /.(mp4|webm|ogg|mp3|wav|flac|aac)(?.*)?$/,
        loader: 'url-loader'
      },
      {
        test: /.(woff2?|eot|ttf|otf)(?.*)?$/,
        loader: 'url-loader'
      },
      {
        test: /.js$/,
        exclude: /(node_modules|bower_components)/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['es2015']
          }
        }
      },
      {
        test: /.css$/,
        use:  ["style-loader", "css-loader"]
      },
      {
        test: /.pug$/,
        use: ['pug-loader']
      }
    ]
  }
}

webpack.entry.js

Webpack엔트리 로 정해진 파일입니다. 여기서는 번들링 될 모든 파일을 포함시켜야 하며 .css, .less, .js 등이 tidory.bundle.js 에 포함됩니다. webpack.base.conf.js 설정에 따라 포함시킬 수 있는 파일이 다르며 기본적으로 js, css 파일을 포함시킬 수 있습니다.
생성된 tidory.bundle.js 파일은 body 태그의 마지막부분에 포함됩니다. 이 파일에 포함시킬 것들은 주로 수정을 하지않는 라이브러리 입니다. 예를 들면 부트스트랩 과 같은 경우가 있겠습니다.
webpack.entry.js

 /* webpack.entry.js
  * 
  * Entry for bundling by webpack.
  * for example, if you have your own script, or plguin,
  * you can import that. 
  * ex) import "./bower_components/animate.css/animate.min.css"
  * 
  * you are able to include js, css
  * if you want to contain other scripts like .ts, .less, .sass,
  * set the loaders in ./webpack.base.conf.js
  * 
  * after import assets it will be contained in tidory.bundle.js
 */
* 여기에 포함되는 파일을 images 폴더에 넣으면 안됩니다.