06

환경설정

tidory.config.js 티도리 7.0

tidory.config.js 파일은 티도리 프레임워크를 위한 환경설정 파일입니다. 템플릿에서 쓰이는 변수가 아닌, 오직 프레임워크의 동작만을 위해 사용되는 환경변수만 선언되는 파일입니다. 예를 들어 빌드 및 배포를 위한 티스토리 세션 값이나 프리뷰를 보기위한 모드 설정 등이 해당됩니다.

module.exports = { 
  /**
   * Tistory skin name
   */
  name: 'TIDORY',

  /**
   * Tistory session cookie value
   */
  ts_session: new String(),

  /**
   * Tistory blog URL
   */
  url: new String(),

  /** 
   * Preview
   */
  preview: {
    /**
     * Preview Mode
     * 
     * index 
     * entry 
     * category 
     * tag,
     * location
     * media,
     * guestbook
     */
    mode: 'index'
  },

  /**
   * Build
   */
  build: {
    /**
     * Assets public path
     */
    public_path: new String()
  },

  /**
   * Template aliases
   */
  alias: {
    // as String
    '@styl': 'assets/styl',
    // as Function
    '@md': fn => fn.replace(/^@md/, 'assets/md')
  },

  /**
   * Webpack configuration extends
   */
  extends(webpackConfig) {
    // ...
  }
}

name 티도리 7.1

배포할 티스토리 스킨 이름입니다. tidory store 명령어에서 사용됩니다.

ts_session

티스토리 세션 값입니다. 티스토리에 로그인 한 이후 쿠키 저장소에 보면 TSSESSION 이라는 값이 있는데, 그것을 넣으면 됩니다. 해당 변수는 세션값이기에 절대 외부로 노출되어서는 안 되며 해당 프레임워크에는 스킨을 프리뷰하거나 배포하기 위한 용도로만 사용됩니다.

url

티스토리 블로그 주소입니다. 세션과 마찬가지로 프리뷰하거나 배포하기 위해 사용됩니다. 자신이 가지고 있는 블로그여야 합니다.

preview.mode

프리뷰 모드입니다. 프리뷰 서버를 사용할 때 어느 페이지를 기점으로 프리뷰 할 지 설정합니다. 홈, 글, 카테고리, 태그, 위치로그, 미디어로그, 방명록 모드가 있으며 각각 index. entry, category, tag, location, media, guestbook 에 대응합니다.

build.public_path

컴포넌트 자원 공개경로를 설정합니다. 컴포넌트와 같이 자바스크립트를 통해 이미지와 같은 리소스를 사용하면 티스토리에 의해 경로가 자동으로 변환되지 않아 올바르게 로드될 수 없습니다. 따라서 공개 경로(Public Path)를 설정해주어야 합니다. 해당 주소는 블로그마다 다릅니다. 공개 경로는 다음과 같이 생겼습니다.

https://tistory1.daumcdn.net/tistory/2710108/skin/images

alias 티도리 7.1

템플릿 별칭을 설정합니다. 문자열로 지정을 해줄 수도 있고 함수형태로 사용할 수도 있습니다. 함수의 파라매터는 해당 별칭이 사용된 자원의 파일 이름입니다. 템플릿에서는 다음과 같이 적용됩니다.

//- assets/styl/app.styl
include @styl/app.styl

extends(webpackConfig: object)

웹팩 설정 확장입니다. 파라매터로 웹팩 오브젝트가 들어가며 기본 웹팩설정 이외에 확장해서 사용할 수 있습니다. 다음과 같이 사용할 수 있습니다.

extends(webpackConfig) {
  webpackConfig.module.rules.push({
    test: /.styl(us)?$/,
    use: [
      'vue-style-loader',
      'css-loader',
      'stylus-loader'
    ]
  });
}

.env 티도리 5.2

.env 환경설정 파일은 템플릿 내부 또는 app.js 에서 사용하는 상수 설정 파일입니다. 프레임워크에서 직접 사용하는 것이 아닌 템플릿에서 사용된다는 점에서 tidory.config.js 와 구별됩니다. 예를 들어 티스토리에 API에 등록된 앱을 사용하기 위해 다음과 같이 티스토리 API 로그인을 위한 상수가 정의되어 있다고 가정해봅시다.

TISTORY_CLIENT_ID=dc08305218d22fb1af479b044d4707d0
TISTORY_CALLBACK=http://localhost:8080

이제 이렇게 정의된 환경변수는 템플릿 내부컴포넌트에서 사용할 수 있습니다. 환경변수는 컴파일 타임process.env 객체 아래에 정의됩니다. 다음과 같이 말이죠!

form(method="GET" action="https://www.tistory.com/oauth/authorize/")
  input(type="hidden" 
    name="client_id"
    value=`${process.env.TISTORY_CLIENT_ID}`)
  input(type="hidden" 
    name="redirect_uri" 
    value=`${process.env.TISTORY_CALLBACK}`)
  input(type="hidden" name="response_type" value="token")
  button(type="submit") Sign in with TISTORY