뷰 & 리액트

컴포넌트(Component)

뷰 또는 리액트 컴포넌트(Component) 를 사용하면 티스토리 스킨을 어플리케이션(Application) 레벨까지 올릴 수 있습니다. npm 이 가진 방대한 레포지토리를 사용하여 라우팅과 데이터베이스 모듈을 사용할 수도 있습니다. 두 프레임워크 중 하나라도 사용하면 SPA(Single Page Application) 을 만들기 위한 준비는 완료 된 것입니다.

언제 사용해야 할까?

사용자에게 커스텀을 허용하지 않는 경우, 컴포넌트는 자바스크립트를 통해 렌더링되고 웹팩을 통해 번들링 되기 때문에 커스텀하기 정말 어렵습니다.
스킨 코드와 완전 무관한 경우, skin.html 내부에 있는 자바스크립트가 아닌, app.js 로 렌더링되는 DOM(Document Object Model)티스토리 치환자 및 전용 태그 를 해석하지 못합니다. 따라서 컴포넌트에는 스킨과 무관한 코드가 들어가야 합니다. 예를 들어 사이드바에 구글 애드센스를 설치하고 싶은 경우가 있겠습니다.

뷰(Vue.js)

assets/components/hello-world.vue
        
<template>
  <h1>Tistory skin framework, Tidory</h1>
</template>
<script>
  export default {
    /** empty */
  }
</script>
*.pug

//- container
div#app
  //- 뷰 컴포넌트를 사용합니다.
  hello-world
뷰 컴포넌트 를 템플릿에서 사용하려면 webpack.entry.js 에 컴포넌트를 등록해야 인식합니다. Vue.component 메서드를 이용하여 컴포넌트를 전역적으로 등록하시기 바랍니다.
webpack.entry.js
      
import Vue from 'vue'

Vue.component(
  'hello-world',
   require('~/assets/components/hello-world.vue').default
);

new Vue({
  el: '#app',
});

리액트(React)

assets/components/HelloWorld.js
        
import React from 'react'

class HelloWorld extends React.Component {
  render() {
    return (
      <h1>Tistory skin framework, Tidory</h1>
    )
  }
}

module.exports = HelloWorld;
*.pug

//- container
div#app
리액트 컴포넌트 를 템플릿에서 사용하려면 ReactDOM 을 사용하여 webpack.entry.js 에 컴포넌트를 바인딩하세요.
webpack.entry.js
      
import React from 'react'
import ReactDOM from 'react-dom'

const HelloWorld = require('~/assets/components/HelloWorld');

const rootElement = document.getElementById('app');
ReactDOM.render(<HelloWorld />, rootElement);