정상우
hELLO.
정상우
전체 방문자
347,834
오늘
919
어제
691
  • hELLO. (120)
    • 컴퓨터과학 (4)
      • 알고리즘 & 자료구조 (4)
    • 언어 & 프레임워크 (63)
      • Go (23)
      • PHP & Laravel (40)
    • 웹 (7)
    • 블록체인 (12)
      • 메인넷 (9)
      • 암호화폐 플랫폼 (3)
    • 포트폴리오 (10)
    • 칼럼 (19)
      • 에세이 (4)
      • 개발자스럽게 살기 (13)
      • 회고 (2)
    • 티스토리 (5)

블로그 메뉴

  • ⚡ 개발자 이력서
  • 🌟 깃허브
  • 💻 강의
  • ✨ 예제코드
  • ⭐ 브런치
  • 태그 클라우드
  • 방명록

공지사항

  • 2차 도메인을 설정했습니다 ✨

인기 글

  • [Laravel] 라라벨 프레임워크⋯
    2021.06.10
    [Laravel] 라라벨 프레임워크⋯
  • 'REST' 를 보다 'RESTful' 하게⋯
    2021.08.14
    'REST' 를 보다 'RESTful' 하게⋯
  • JWT(JSON Web Token)의 개념부⋯
    2021.07.29
    JWT(JSON Web Token)의 개념부⋯
  • 깃허브를 포트폴리오로 쓰려면⋯
    2021.12.25
    깃허브를 포트폴리오로 쓰려면⋯
  • 암호화폐 트레이딩 봇을 만들었⋯
    2021.05.12
    암호화폐 트레이딩 봇을 만들었⋯

태그

  • 개발
  • 개발 리뷰
  • 라라벨
  • 코딩테스트
  • Algorithm
  • 포트폴리오
  • go
  • 프로그래머스
  • php
  • 블록체인

최근 댓글

  • 공유해주셔서 감사합니다:)) 덕⋯
    wanderlust_sol
  • 감사합니다 ~~ :)
    정상우
  • 고맙습니다 :)
    정상우
  • 자료 받으면서 원래 댓글 잘 안⋯
    뷰스토리_
  • 다크모드 지원하는 스킨 찾고⋯
    PilTok

최근 글

  • 개발자와 엔지니어, 그 사이에서
    2022.05.10
    개발자와 엔지니어, 그 사이에서
  • 아임포트(Iamport)로 결제기능⋯
    2022.04.03
    아임포트(Iamport)로 결제기능⋯
  • 아임포트(Iamport)로 결제기능⋯
    2022.04.01
    아임포트(Iamport)로 결제기능⋯
  • [Laravel] 카페24 호스팅에 라⋯
    2022.03.29
    [Laravel] 카페24 호스팅에 라⋯
  • 2021년 회고―, 성찰
    2021.12.31
    2021년 회고―, 성찰

티스토리

hELLO · Designed By 정상우.
정상우

hELLO.

티스토리 스킨 프레임워크를 만들었습니다 (aka. 티도리)
티스토리

티스토리 스킨 프레임워크를 만들었습니다 (aka. 티도리)

2020. 4. 5. 05:22

티도리 프레임워크

티도리 프레임워크는 개인 블로그를 위해 티스토리 스킨을 만들려고 하다가 현 티스토리 스킨 개발환경이 지닌 너무나도 구닥다리 방식에 현기증을 느낀 나머지 직접 개발환경을 만들어보자는 생각에 탄생한 프레임워크입니다. 티도리는 오직 티스토리 스킨 제작만을 위해 구성되었습니다. 현재 사용 중인 스킨 또한 티도리로 개발되었습니다.

 

세상은 변했지만, 티도리 프레임워크가 등장하기 이전까지 티스토리 스킨 개발 방법은 여전히 과거에서 벗어나질 못했었습니다. skin.html, style.css 에 기능별로 분리되지 않은 채 모든 코드를 욱여넣어야 했으며, Webpack 과 같은 번들러를 사용하지 않기 때문에 nodejs, npm 와 같이 자바스크립트 생태계에 중요한 요소들을 제대로 사용할 수 없었습니다. 그렇다는 이야기는 자바스크립트 프레임워크 또한 제대로 사용할 수 없었다는 것을 말합니다. 이는 스킨 개발자에게 있어서 일반 사용자에게 많은 기능을 보여줄 수 없음을 의미했고, 장기적으로는 생산성의 저해를 초래했습니다.

 

https://tidory.com/

 

티스토리 스킨 프레임워크, 티도리(TIDORY)

오직 티스토리 스킨만을 위한 프레임워크

tidory.com

티도리 프레임워크는 일반적인 웹페이지가 아닌 오직 티스토리 스킨 제작에만 초점을 맞추고 제작되었습니다. 개발 환경, 서버, 배포 등이 모두 티스토리 스킨을 위해 사용됩니다. 따라서 기존의 자바스크립트 기반 웹 프레임워크와는 다른 느낌을 주게됩니다. 이는 런타임에 로드되는 것이 아니며 컴파일러의 형태로 동작합니다. 그 이야기는 소스코드를 작성하고 빌드를 하면 정적인 형태로 skin.html, style.css, images 폴더 등으로 스킨의 배포를 위해 구성된다는 이야기입니다.

시작하기

설치

먼저 프로젝트를 다운받아야 합니다. nodejs, npm 도구가 설치되어 있어야 합니다. create-tidory-app 패키지를 통해 진행합니다. 그 다음, 프로젝트의 내부로 들어가 종속된 npm 패키지를 설치합니다.

# Download Project
$ git clone https://github.com/tidory/tidory
# Move
$ cd tidory
# install node modules
$ npm install
설치 중 에러가 나는 경우, git 이 설치되어 있는지 살펴봐주시기 바랍니다.

템플릿과 코드 분할

티도리 프레임워크는 자바스크립트 템플릿 엔진인 pug 를 사용하며 마치 뷰나 스벨트를 사용하듯 template, javascript, style 이 모두 하나로 들어간 싱글페이지 템플릿의 형태로 작성할 수 있습니다. 템플릿을 사용하면 관심사에 적합한 코드만 템플릿에 작성할 수 있습니다. 예를 들어 Sidebar.pug 에는 사이드바와 관련된 코드만 있는 것이죠. 또한 퍼그에서 제공하는 믹스인(Mixin)과 같은 요소를 사용하면 언제든 재사용 가능한 템플릿을 만들 수 있습니다.

index.pug

예제코드로 들어가 있는 block TIDORY 아래의 코드 라인을 모두 제거하고, 다음과 같이 입력해봅니다. 코드에 block TIDORY 를 기재하지 않은 것은, index.pug 에 해당하는 특수한 것이기 때문이며, 대다수의 템플릿은 아래와 같은 형식으로 작성합니다.

//- skin.html
h1 Hello, world

//- script.js
script.
  console.log('Hello, world')

//- style.css
style.
  h1 { color: blue; }

위에 주석처리를 해 놓은 파일의 이름이 바로 싱글페이지 템플릿에서 각 파일로 코드가 분할되어 빌드된다는 이야기입니다. 스킨의 메인파일인 skin.html, 스타일을 담당하는 style.css, 사용자 정의 스크립트 파일인 script.js 로 분리됩니다.

개발 서버와 프리뷰 서버

티도리 프레임워크는 개발 서버와 프리뷰 서버를 지원하는데, 그 차이는 치환자의 적용 여부입니다. 개발 서버는 날 것 그대로를 보여주며, 프리뷰 서버는 티스토리 서버와의 통신으로 스킨이 티스토리에 적용되었을 때의 모습을 나타내어줍니다. 프리뷰 서버를 설정하려면 tidory.config.js 파일에 ts_session, url, preview 환경설정을 해야합니다. 또한 시작하기를 참고합니다. 하지만, 개발 서버는 별도의 설정이 필요없으므로 아래의 명령으로 켤 수 있습니다.

npm start # tidory start

개발 서버와 프리뷰 서버의 의미는 상당합니다. 바로 스킨 편집에 들어가서 코드를 조작할 필요가 없다는 점이죠! 이것만 하더라도 테스트를 위해 코드를 업로드하거나 복붙해야 하는 귀찮은 일을 줄여주는 것입니다.

빌드 및 배포

빌드는 사용자 및 티스토리 스킨에 적용하기 위해 개발용 소스코드를 skin.html, style.css 로 결과물을 내기 위해 사용합니다. npm run production 을 사용하여 dist 디렉토리에 있는 빌드 결과를 살펴볼 수 있습니다.

npm run production # tidory production

배포의 경우에는 환경설정에서 ts_session, url 을 설정해야 합니다. 배포는 블로그에 바로 적용하는 것과 스킨 저장소에 저장하는 것이 있습니다. 각 npm run deploy, npm run store 로 대응합니다. 이에 관해서는 빌드 및 배포를 참고할 수 있습니다.

더 읽을거리

티스토리 블로그 백업 프로그램을 만들었습니다.

hELLO. 티스토리 스킨을 소개합니다.

https://www.inflearn.com/course/%ED%94%84%EB%A0%88%EC%9E%84%EC%9B%8C%ED%81%AC/#

 

나만의 포트폴리오 블로그 만들기(feat. 티스토리 스킨) - 인프런

티스토리 스킨 개발방법을 익히고 필자가 만든 티스토리 스킨 개발 전용 프레임워크인 티도리에서 제공하는 빌드, 배포 자동화, 코드 분할과 같은 내용을 배웁니다. 초급 웹 개발 웹앱 디자인

www.inflearn.com

 

    '티스토리' 카테고리의 다른 글
    • hELLO 티스토리 스킨을 소개합니다.
    • 티스토리 블로그 백업 프로그램을 만들었습니다.
    • 내 블로그에 티스토리 스킨을 적용해보자
    • 티스토리 플러그인, 아직도 사용 안 하니?
    개발 도구, 자동화, 티도리 프레임워크, 티스토리 스킨
    정상우
    정상우
    과거의 배움으로 현재를 바꾸고 미래를 만듭니다. #25+2살 #INFJ #개발자 #브런치작가
    댓글쓰기
    다음 글
    티스토리 플러그인, 아직도 사용 안 하니?
    • 이전
    • 1
    • 2
    • 3
    • 4
    • 5
    • 다음

    티스토리툴바