깃허브 블로그를 쓰다가 티스토리로 정착을 하게 되었는데 조금 불편함을 느끼게 되어서 진행해보는 티스토리 스킨 제작기
0. 티스토리 스킨 가이드
티스토리 스킨 가이드도 있는데, 이 가이드를 참고해서 만들어 볼 예정이다.
소개 · GitBook
티스토리 스킨 가이드 티스토리에서는 스킨을 통해서 사이트를 자유롭게 디자인할 수 있습니다. 스킨은 치환자를 사용하여 제작되고 사용된 치환자에는 티스토리의 데이터가 대입되어 티스토
tistory.github.io
티스토리 스킨 가이드에 보면, 파일 구조는 다음과 같이 나와있다.
이 중에서 index.xml, skin.html, style.css, script.js를 본인의 입맛에 맞게 수정하면 된다.
SKIN ─┬─ index.xml
├─ skin.html
├─ style.css
├─ preview.gif
├─ preview256.jpg
├─ preview560.jpg
├─ preview1600.jpg
└─ images ─┬─ script.js
├─ background.jpg
├─ background.jpg
└─ background.jpg
일단 가이드에 나오는 구조를 보면, 이미지를 제외하고 기본적으로 다음과 같은 구조로 만들 수 있다.
SKIN ─┬─ index.xml
├─ skin.html
├─ style.css
└─ images ── script.js
1. Typescript 적용
이제 스킨 제작을 위한 기본적인 세팅을 진행해야 하는데,
요즘 타입스크립트를 배우고 있어서 타입스크립트를 통해 개발을 진행해 보았다.
npm init -y # package.json 생성
npm install typescript
npx tsc --init # tsconfig.json 생성
구성한 tsconfig.json은 다음과 같다.
{
"compilerOptions": { // 컴파일 옵션
"allowJs": true, // js 파일 컴파일 허용 여부
"target": "es2016", // 컴파일 버전 설정
"module": "es6", // 모듈 버전 설정 (require 문법, import 문법...)
"removeComments": true, // 컴파일 시 주석 제거,
"outDir": "images", // outDir 폴더에 변환된 js 파일 저장,
"strict": true , // strict 관련 켜기
"noImplicitAny": true, // type 지정 필수
"strictNullChecks": true, // null, undefined가 참조 하는 것 방지
"esModuleInterop": true, // 모든 import에 대한 namespace 생성 여부
},
"include": [ // 컴파일 할 파일 경로 설정 (src 하위의 모든 .ts 파일)
"src/script.ts"
]
}
그래서 기본적인 폴더 구조는 이렇게 구성되었다.
SKIN ─┬─ node_modules/ // npm
├─ images
⎪ └─ script.js
├─ src
⎪ └─ script.ts
├─ package.json
├─ package-lock.json
├─ tsconfig.json
├─ index.xml
├─ skin.html
└─ style.css
2. TailwindCSS 적용
CSS는 사용해봤던 styled-components를 사용해볼까 했는데 조금 더 편하게 스타일을 적용할 수 있는 방법이 없을까 찾아보다가,
TailwindCSS를 발견하게 되었다.
나랑 똑같은 생각을 하고서 TailwindCSS를 사용하신 분의 글을 발견했는데,
요약해보자면
styled-components방식이나 scss 등의 방식은 하나의 스타일만 추가할 때에도 새로운 컴포넌트명을 지어서 그 안에 원하는 스타일을 하나하나 작성해야 하는 방식이라 번거롭다는 특징을 가지고 있었는데,
TailwindCSS는 Bootstrap과 비슷하게 Utility-First 콘셉트를 가지고 편하게 스타일링을 할 수 있다는 것이다.
근데, 그럼 Bootstrap을 사용하면 되지 않나...? 했는데,
Bootstrap과의 차이점은 기본적인 스타일을 가진 것이 아님에도 불구하고 일관적인 스타일링을 할 수 있다는 점이다.
Bootstrap으로 개발된 사이트들을 보면 모두 동일한 스타일을 가진 것을 볼 수 있지만,
(Bootstrap에서 제일 좋으면서도 힘들었던 특징이었다. 너무 자기만의 스타일이 강력해..)
TailwindCSS는 제공되는 Utility를 활용하지만, Bootstrap보다 더 유연하게 커스텀하여 사용할 수 있다고 생각한다.
3. PostCSS, Autoprefixer 적용
TailwindCSS, tailwind.config.js을 설치하면서, postCSS, Autoprefixer 도 함께 설치해준다.
TailwindCSS v2 이후에는 IE를 지원하지 않기 때문에 크로스 브라우징을 대응해주는 PostCSS의 autoprefixer를 같이 사용해줘야 한다.
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p # tailwind.config.js, postcss.config.js 생성그러고 postcss.config.js를 생성하여 다음과 같이 설정해주고,
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
};tailwind.config.js에도 다음과 같이 설정해준다.
/** @type {import('tailwindcss').Config} */
module.exports = {
content: ['./src/**/*.{ts, tsx, js, jsx}'], // tailwindcss를 사용할 위치
darkmode: 'class', // 다크모드 ('media' : OS에 따라, 'class' : 스위칭 가능)
theme: {
extend: {},
},
plugins: [],
}그러고 나서는 메인 css파일에 TailwindCSS를 추가해준다. 나는 style.css을 생성하여 추가해주었다.
/* src/style.css */
@tailwind base;
@tailwind components;
@tailwind utilities;이후 TailwindCSS를 빌드해본다. 그러면 ./src/style.css의 파일이 ./dist/style.css에 빌드가 되는 걸 확인할 수 있다.
npm tailwindcss -i ./src/style.css -o ./dist/style.css
4. Webpack 적용
원래는 package.json에 해당 스크립트를 추가하여 쉽게 빌드를 진행하면 되는데,
여기선 typescript와 TailwindCSS를 같이 배포하기 위해 webpack을 함께 사용하기로 했다.
이때, Webpack은 typescript를 이해하지 못하기 때문에 ts-loader도 함께 설치해준다.
npm install -D webpack webpack-cli ts-loader
Webpack을 일단 설치하고, ts-loader를 참고하여 webpack.config.js파일을 다음과 같이 구성한다.
const path = require('path');
module.exports = {
entry: './src/script.ts', // webpack이 번들링을 시작하는 것
mode: 'production', // development(개발), production(운영), none
module: {
rules: [ // 모듈에 대한 규칙 (로더 설정, 파서 옵션 등)
{
test: /\.tsx?$/,
use: 'ts-loader', // 로더에 대한 옵션
exclude: /node_modules/,
}
]
},
resolve: { // 모듈 요청 해석 옵션
extensions: ['.tsx', '.ts', '.js'] // 사용한 확장자
},
output: { // 번들(합친 파일) 저장하는 파일, 경로 설정
filename: 'script.js',
path: path.resolve(__dirname, 'dist/images'),
},
};
package.json에 script를 추가하고, 실행을 해보면 잘 되는 걸 확인할 수 있다.
"scripts": {
"build": "webpack"
},npm run build
5. mini-css-extract-plugin 적용
하지만, webpack.config.json의 설정은 여기서 끝난 게 아니다...
이렇게 번들을 진행하게 되면 js 파일 하나로만 파일이 생성이 되는데, 티스토리에서 원하는 것은 css, js가 나눠진 파일이다.
그래서 mini-css-extract-plugin를 활용하면 css가 분리되어 build가 된다.
이것 외에도 postcss-loader를 설치하여 css 로더에 대한 옵션을 같이 추가한다.
npm install -D mini-css-extract-plugin postcss-loader
설치를 진행하고, mini-css-extract-plugin과 postcss설정을 참고하여 webpack.config.json파일을 수정해줘야 한다.
const path = require('path');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
module.exports = {
entry: './src/script.ts', // webpack이 번들링을 시작하는 것
mode: 'production', // development(개발), production(운영), none
module: {
rules: [ // 모듈에 대한 규칙 (로더 설정, 파서 옵션 등)
{
test: /\.tsx?$/,
use: 'ts-loader', // 로더에 대한 옵션
exclude: /node_modules/,
},
{
test: /\.css$/i,
use: [MiniCssExtractPlugin.loader, "css-loader", "postcss-loader"],
exclude: /node_modules/,
},
]
},
resolve: { // 모듈 요청 해석 옵션
extensions: ['.tsx', '.ts', '.js'] // 사용한 확장자
},
output: { // 번들(합친 파일) 저장하는 파일, 경로 설정
filename: 'script.js',
path: path.resolve(__dirname, 'dist/images'),
},
plugins: [new MiniCssExtractPlugin({filename: '../style.css'})],
};* build를 할 때는 script.ts에 해당 css 주소를 import 한 후에 진행해야 확인이 가능하다.
6. webpack-dev-server 적용
로컬에서 먼저 개발을 진행한 후 적용할 예정이기 때문에,,,먼저 webpack-dev-server를 설치해준다.
npm install -D webpack-dev-server
그리고, webpack.config.js에 해당 내용을 설정하고,
devServer: {
static: {
directory: path.resolve(__dirname, "dist"),
},
port: 3000,
},
package.json의 script에 해당 내용 설정
"start": "webpack serve --open --mode=development --hot"
그리고 나서는 터미널에 다음 명령어를 실행시키면 확인할 수 있다.
npm run start
여기서 나는 skin.html이라는 이름으로 작성을 해두었기 때문에...skin.html을 들어가면 개발한 화면을 확인할 수 있다.
댓글