Pug
Pug는 템플릿 엔진입니다.
HTML의 정적인 단점을 개선하여 반복문, 조건문, 변수 등을 사용할 수 있고 동적인 페이지 작성이 가능합니다.
특징
꺾쇠가 필요없습니다.
기존 html보다 코드가 간결합니다.
들여쓰기로 계층 구조를 표현합니다.(중요)
셋팅
저는 vscode에서 prettier 익스텐션을 사용하는데, 기본 prettier는 pug 확장자를 지원하지 않습니다.
그래서 추가적으로 pug를 인식하도록 플러그인을 설치 해줘야 했습니다.
npm i -D prettier @prettier/plugin-pug들여쓰기가 중요하다보니 prettier를 활용했습니다.
express로 사용할 경우,
//pug 파일 폴더 지정
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'pug');
사용해보기
style , script
p
| 안녕하세요
| 여러 줄 입력 할 때
br
| 태그도 중간에 넣을 수 있습니다
style.
h1 {
font-size: 36px;
}
script.
const name = 'jiho';
console.log(name);
pug에서 style과 script를 작성 할 때에는 style 과 script는 뒤에 . 을 꼭 써줘야 합니다.
변수 사용 - node.js에서 전달하기
router.get('/', function(req,res,next) {
res.locals.title = 'zih0'; // locals를 이용해 변수를 전달 할 수도 있고,
res.render('index', {title: 'zih0'}); // render 두번째 인자 객체로 pug에 변수를 넣을 수 있습니다.
});
h1= title pug에서 =은 변수를 사용할 때 씁니다. node.js에서 전달해준 변수 title을 위와 같이 사용하면<h1>zih0</h1>라는 html이 작성됩니다.
변수 사용 - pug에서 직접 사용하기
- const title = 'zih0' // - 를 이용해 변수 선언 가능
h1 # {title}
반복문
ul
each fruit, index in ['사과', '배', '오렌지']
li= (index+1) + '번째' + fruiteach in을 사용해 반복문 사용이 가능합니다.
조건문
if isLoggedIn
div 로그인 중
else
div 로그인 해주세요.
if else문으로 분기 처리 가능합니다.
include
//header.pug
header
a(href='/') Home
a(href='/about') About
// footer.png
footer
div 푸터
//main.png
include header
main
h1 메인
include footer위처럼 컴포넌트로 관리 가능합니다.
extends 와 block
//layout.pug
doctype html
html
head
title= title
link(rel='stylesheet', href='/style.css')
block style
body
header 헤더
block content
footer 푸터
block script
//body.pug
extends layout
block content
main
p lorem~~~~~
block script
script(src='/main.js')레이아웃을 정할 수 있습니다.
공통된 레이아웃을 정의한 다음에, 가져와서 block 부분만 수정하여 사용할 수 있습니다.
+ 0908 추가
이전까지는 pug를 node.js에서 render 해주는 방식으로만 쓸 수 있는 줄 알았는데,
webpack을 이용해서 백엔드 연결 없이, pug만으로 프론트엔드를 구성할 수 있다는 걸 얼마 전에 알았습니다.
아래는 pug와 scss를 사용하기 위해 작성한 webpack 설정 파일입니다.
pug를 html로 작성해주는 작업을 위해서 html-webpack-plugin, pug-loader 을 설치했고,
sass, scss를 js로 만들어 연동시키기 위해서는 mini-css-extract-plugin css-loader sass-loader를 설치했습니다.
npm i -D html-webpack-plugin, pug-loader
npm i -D mini-css-extract-plugin css-loader sass-loader//webpack.config.js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports = {
mode: 'development',
entry: {
document: './views/index.pug',
style: './sass/style.scss',
main: './js/index.js',
},
output: {
filename: '[name].bundle.js',
path: path.resolve(__dirname, 'dist'),
},
plugins: [
new HtmlWebpackPlugin({
template: './views/index.pug',
}),
new MiniCssExtractPlugin(),
],
module: {
rules: [
{
test: /\.pug$/,
use: ['pug-loader'],
},
{
test: /\.scss$/,
use: [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader'],
},
{
test: /\.js$/,
exclude: '/node_modules',
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env'],
},
},
},
],
},
devServer: {
host: 'localhost',
port: 5500,
},
};
댓글