01

티도리 프레임워크

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

티도리 프레임워크는 티스토리 스킨을 제작하기 위한 전용 프레임워크입니다. 티스토리 스킨을 개발하기 위해 프레임워크까지 배워야 할까요? 우리가 기본적으로 티스토리 스킨을 개발할 때는 개발단계, 테스트 단계, 스킨적용 및 배포 단계의 3단계를 거치게됩니다. 프레임워크는 각 단계에서 발생하는 여러가지 불편사항을 해결하기 위해 개발됩니다. 단계별로 발생하는 문제와 프레임워크에서의 해결 방법을 알아보겠습니다.

디자인과 코드 작성

  1. 다양한 기능을 제공하는 확장 HTML, CSS 템플릿 엔진은 수동으로 컴파일해서 사용해야 하며, skin.html, style.css 에 티스토리 스킨에서 사용할 모든 기능(Header, Content, Sidebar, Footer 등)을 모두 몰아넣어 작성해야합니다.

    템플릿 - 템플릿과 코드 분할

  2. SPA(Single Page Application) 프레임워크npm 사용에 제약이 많습니다.

    프레임워크 - 뷰 & 리액트

  3. 템플릿과 컴포넌트를 따로 분리하여 필요할 때 재활용하거나 다른 사람이 작성한 코드를 포함시키기 어렵습니다.

    패키지 - 템플릿과 컴포넌트 재활용

테스트

  1. 적용된 스킨의 모습을 확인하려면 스킨편집에 들어가서 코드를 복사 붙여넣기 하고, 정적 리소스 파일(.js, .png 등)을 업로드 해야합니다. 소스코드에 변경사항이 있을 경우에는 파일을 다시 업로드 해야합니다.

    시작하기 - 개발 서버와 프리뷰 서버

빌드 및 배포

  1. 스킨을 적용하려면 스킨편집에 직접 들어가서 코드를 복사 붙여넣기하고 파일을 업로드해야하거나 스킨저장소에 수동으로 업로드해야 합니다.

    빌드 및 배포 - 자동화