...
Pug 태그 문법
Pug와 HTML 문법 구성을 서로 비교해가며 익혀보자.
기본 태그 입력
Script / Style 태그
- 안에 다른 언어 (js, css)를 쓰는 특별한 태그는 반드시 뒤에 점. 을 찍어주어야 인식된다.
태그 속성 입력
id / class 속성 입력
- div 같은건 생략이 가능하다
Attributes(속성) 입력
1. 속성 하나 넣기
2. 속성 여러개 넣기
3. 속성에 자바스크립트 매핑
4. Boolean 속성 처리
- boolean속성은 true일 때만 표시
텍스트 넣기
- 엘리먼트 다음에 한칸 띄고 내용을 적으면 된다.
- 유의 할점은, 태그 쓰고 한칸 스페이스 띄면 바로 평문 처리되니 조심하자
- 긴 문장을 입력하려면 pip | 을 쓰면 된다.
인라인 태그(inline Tags)
- 인라인 태그 처리 하려면 다음칸에서 들여쓰기를 해주던가,
- 아예 안에다 <>태그를 넣는다.
주석(Comments)
- 기본적으로 주석은 // 이다
- 하지만 pug에서만 주석을 보고 싶다면, //- 을 써준다. 컴파일된 html에선 안보이는걸 확인할 수 있다.
Pug 변수 사용
로컬 변수
-문자 뒤에 자바스크립트 문법으로 변수를 정의할 수 있다.
변수 렌더링
- =이나 #{}으로 변수 렌더링 가능
- = 뒤에는 자바스크립트 문법 사용 가능하라고 보면 된다
이스케이프 값
- 변수 값을 이스케이프 할 수도, 하지 않을 수도 있다.
- 그림처럼 기본적으로 이스케이프되는 이유는 보안상의 이유다.
- 이스케이프되지 않은 자바스크립트코드를 이용하고 싶으면 != 를 이용하면 된다.
이스케이프 문자(Escape String)
일련의 특수문자를 총칭한다.
HTML 문서에선 꺾쇠 와 같은 문자는 태그 문법으로 사용되기 때문에, 문자열로서의 순수 꺾쇠 문자를 표현하기 위해서는 또다른 문자 포맷으로 표현한다.
동적 변수
- Node.js와 함께 사용할때, 변수를 받아서 동적 페이지를 만들어야 할때 사용한다.
- "/" path로 접속했을시, index.pug 문서로, 렌더링을 해주면서
message변수 값을 전달한다.
// Node Express.js
app.route("/").get((req, res) => {
res.render("index", { message: "Pug is HONEY" });
});res.locals 객체에 넣으면 전역 변수같이 미들웨어간 공유되는 템플릿 변수를 지정해줄수 도 있다.
이 전역 변수는 여러 pug 문서에 전역으로 공유된다.
Pug에서는 이 값을, 아래와 같이 처리한다.
<!-- index.pug -->
doctype html
html(lang="en")
head
title MyPug
body
p.message #{message} // 노드에서의 템플릿 변수가 이쪽에 들어간다<!-- 결과 html -->
<!DOCTYPE html>
<html lang="en">
<head>
<title>MyPug</title>
</head>
<body>
<p class="message">Pug is HONEY</p> <!-- 노드 변수값이 매핑됨 -->
</body>
</html>Pug 조건문
if 문
case - when 문
Pug 반복문
each in 문
- for in 이나 each in으로 반복문을 돌릴수 있다.
- 값과 인덱스 역시 가져올수 있다.
each in else 문
- 삼항연산자 로도 사용 가능
자바스크립트 코드와 조합
- 위에서 언급했다 싶이, Pug 템플릿 파일 안에서 자바스크립트 코드를 사용할 수 있다.
- 하이픈 문자
-를 사용하여, 하이픈 문자 다음에 오는 코드를 자바스크립트 코드로 처리하고 다음 줄을 pug 코드로 조합하는 방법이다.
Pug 템플릿
include문
- include로 파일 경로 지정하여, pug 파일에 또다른 pug 파일을 매핑하여 넣을 수 있음
- 헤더, 푸터, 내비게이션 등의 공통 부분을 따로 관리할 수 있어 편리
- 실제로 html을 안쓰고 pug와 같은 template engine을 사용하는 핵심적인 이유
- pug파일 뿐만아니라 평범한 text 파일도 include를 이용해서 불러 올 수 있다.
block 문
- 위의 include문과 같은 템플릿 역할을 하는 문법이지만 좀더 다채로운 확장이 가능하다
먼저 layout.pug 파일을 만든다.
layout이란 말 그대로 레이아웃이다. 공통된 템플릿을 짜 놓는 것이다.
그리고 extends layout.pug를 통해서 부모 템플릿을 상속받으면, 레이아웃.pug의 해당 block 에 body.pug에서 설정한 block이 입력되서 html이 완성되는 식이다.
그래서 공통되는 부분은 놔두고, 자주 바뀌는 부분만 block으로 관리하면 동적으로 html을 구상할 수 있다.
이것을 통해 header, content, footer로 나눠서 미리 header, footer는 작성해두고 content부분만 코딩하는 방식으로 사용 가능하다.
append / prepend
- 위에서 처럼 그냥 extends 하고 block을 쓰면 부모인 layout.pug 파일의 block을 덮어씌워 버리는데,
- append/prepend를 이용하면 부모 block을 유지한 채 붙일 수 있다.
block vs includes 비교
단순히 어떤 파일 또는 코드 덩어리를 미리 만들어놓고 불러온다는 기능만 봤을 때는 block(extends)과 includes는 같다.
하지만 자잘한 차이가 있는데 다음과 같이 정리할 수 있다.
- block은 ".pug 파일만" 불러올 수 있고 includes는 모든 파일(txt, css, js, ...)을 불러 올 수 있다.
- block은 extends로 상속받기 위해서 기본적인 뼈대(layout), 공통적인 부분(블록)을 만드는 것이 목적.
그래서 당연하게 같은 pug파일을 불러오며(확장) 1번만 불러서 확장하는게 보통. - includes는 때에 따라서 같은 코드가 적용되어야 할 때 여러 번 불러오는게 가능.
block은 확장 가능하지만 includes는 확장할 수 없다. - includes는 모든 파일을 문자 그대로(=정적 파일) 불러오기 때문에 수정, 재정의(오버라이딩)가 불가능.
그러나 block은 다른 파일에서 extends로 불러온 후에 재정의하거나 새로 추가할 수 있다. (= 동적)
Pug 함수
Mixin
- 믹스인은 재사용가능한 블럭을 만드는 것이라 할 수 있다.
- 함수처럼 선언(mixin)하고 사용(+)하면 된다.
- 함수처럼 argument를 받아서 사용할 수 있다.
- 믹스인에서 속성을 적용할 수도 있고, ...items 처럼 유동적인 매개변수를 받을 수도 있다.
- block과 함께 사용해서 사용하면 더 다양하게 사용 가능하다.
- 믹스인 안에 block을 두고, 실행할때 들여쓰기로 설정해주면 block 인자로서 들어간다.
+article("Hello World") // 인자
p This is my // block 에 들어갈 인자(?)
p Amazing article // block 에 들어갈 인자(?)# 참고자료
인용한 부분에 있어 만일 누락된 출처가 있다면 반드시 알려주시면 감사하겠습니다
이 글이 좋으셨다면 구독 & 좋아요
여러분의 구독과 좋아요는
저자에게 큰 힘이 됩니다.
