pug
html(마크업 언어)는 정적인 언어로, 웹페이지의 '뼈대'를 담당한다.
여기에 css로 스타일링을 하고, js로 기능을 추가한다.
pug(구 jade)는 템플릿 엔진 중 하나인데, 템플릿 엔진은 js를 사용해 html을 렌더링 할 수 있게 해준다.
html 문법보다 조금 더 간략하고 더 좋은 기능들이 있어, html과 유사하게 생겼으나 문법은 다르다.
pug는 html을 pug의 문법으로 작성하면 html로 바꿔주는 기능을 한다.
pug는 express 패키지의 뷰 엔진이다.
쓰는 법
npm i pug
app.set("view engine", "pug");
pug를 먼저 설치해준다.
express는 html 파일을 저장할 수 있는 폴더의 기본 이름이 'views'이기 때문에 저렇게 해줘야 한다.
그리고 확장자 이름을 html이 아닌 pug로 적어주면 된다.
생긴 것
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
</head>
<body>
<h1>Hello World</h1>
<p>Pug is a terse and simple
templating language with a
strong focus on performance
and powerful features.</p>
</body>
</html>
티스토리 코드블록에 pug가 없어 html로 썼는데 딱 봐도 아래가 pug라는 걸 알 수 있다.
doctype html
html(lang="en")
head
title Document
body
h1 Hello World
p
| Pug is a terse and simple
| templating language with a
| strong focus on performance
| and powerful features.
보다시피 pug는 닫는 태그 없이 들여쓰기만으로 어디부터 어디까지가 해당 태그인지를 구분한다.
pug에 html 부분을 보면, 태그의 속성이 괄호로 표현되어 있다.
또 여러 줄을 입력할 때는 | 기호로 표현한다.
<div id="main" class="container"></div>#main.container
기본적으로 div 태그라 명시하지 않아도 되며, class나 id를 주는 방법은 js에서 하는 것과 동일하다.
ul
each item in ['Item 1', 'Item 2']
li= item
if condition
p 조건이 참입니다.
else
p 조건이 거짓입니다.
또한 이런 식으로 반복문이나 조건문을 바로 안에 넣을 수도 있다.
html이라면 js로 처리했을 부분이다.
특이점
block과 includes는 pug에서 템플릿 재사용과 확장을 위해 사용되는 중요한 기능이다.
먼저 block은 템플릿의 특정 영역을 정의하고, 이를 다른 파일에서 오버라이드할 수 있게 해준다.
주로 레이아웃 템플릿과 같이 사용해 재정의 된다.
// 기본 레이아웃 템플릿
doctype html
html
head
title My Site
body
block content
// 확장된 템플릿
extends layout
block content
h1 Welcome to My Page
p This is the content of the page.
// 결과
<!DOCTYPE html>
<html>
<head>
<title>My Site</title>
</head>
<body>
<h1>Welcome to My Page</h1>
<p>This is the content of the page.</p>
</body>
</html>
참고로 주석은 // 로 한다.
includes는 다른 pug 파일을 삽입할 때 사용한다.
약간 react에서 컴포넌트 만들고 그걸 불러와서 재사용하는 느낌이라고 이해된다.
// 헤더
header
h1 My Website
nav
ul
li: a(href="/") Home
li: a(href="/about") About
// 메인
doctype html
html
head
title My Site
body
include header
h2 Welcome!
p This is the main content.
// 결과
<!DOCTYPE html>
<html>
<head>
<title>My Site</title>
</head>
<body>
<header>
<h1>My Website</h1>
<nav>
<ul>
<li><a href="/">Home</a></li>
<li><a href="/about">About</a></li>
</ul>
</nav>
</header>
<h2>Welcome!</h2>
<p>This is the main content.</p>
</body>
</html>
block과 includes는 비슷해 보이지만 약간의 차이가 있다.
block의 경우, .pug 파일만 불러올 수 있지만 includes는 다른 확장자 이름을 가진 파일들도 불러올 수 있다.
block은 extends로 상속받기 위해 기본적인 뼈대나 공통적인 부분을 만드는 게 목적이다.
그렇기 때문에 당연히 같은 pug 파일을 불러와 확장하는 것이 보통이다.
반면 includes는 때에 따라 같은 코드가 적용될 수 있어 여러 번 불러올 수 있고, 확장은 불가하다.
확장 뿐만 아니라 수정이나 재정의도 불가능하기에 그대로만 써야 한다.
회사에서 사용하는 부분은 일단 이정도 인 것 같아서 여기까지만 정리
참고
pug가 뭐예요
pug가 몬데요 >pug는 html을 조금 더 세련되게 쓸 수 있는 템플릿 언어, express 뷰 엔진이다. npm으로 설치할 수 있다. 이걸 왜 쓰는데요 라면에 밥 말아서 먹고 싶다 이렇게 쓰는 것을 p 라면에 밥 말아
velog.io
[PUG] 📚 퍼그 문법 총정리 - 한눈에 마스터하기
Pug 태그 문법 Pug와 HTML 문법 구성을 서로 비교해가며 익혀보자. 기본 태그 입력 Script / Style 태그 안에 다른 언어 (js, css)를 쓰는 특별한 태그는 반드시 뒤에 점. 을 찍어주어야 인식된다. 태그 속
inpa.tistory.com
Getting Started – Pug
Getting Started Installation Pug is available via npm: $ npm install pug Overview The general rendering process of Pug is simple. pug.compile() will compile the Pug source code into a JavaScript function that takes a data object (called “locals”) as an
pugjs.org
'💬 이것저것' 카테고리의 다른 글
| [TIL; 4d] DOM 요소를 선택할 수 있는 메서드들 (1) | 2024.11.26 |
|---|---|
| [TIL; 2d] Promise의 정적 메서드 / as const VS Object.freeze VS enum / etc (1) | 2024.11.20 |
| [TIL; 1d] Polyfill / User-Agent / console (1) | 2024.11.19 |
