Node.js 템플릿 엔진
Node.js 에서 사용하는 템플릿 엔진은 굉장히 많이 있다. (pug(jade), ejs, handlebars, mustache 등)
그 중에 자주 사용되는 pug 문법을 정리한다.
https://pugjs.org/api/getting-started.html
여기서 language reference를 보면 pug 문법을 더 명확하게 이해할 수 있다.
* pug를 사용하는 이유
- 사실 어떤 템플릿 엔진을 사용해도 상관없다.
예를들어 ejs는 html 태그에 부분적인 입력,수정을 하기 때문에 html문법에 이미 적응한 사람이 보기에 쉬울 것이다. 하지만 pug는 코드를 간소화시켰고, 컴파일한 후에 html문서를 렌더링하는 형식이라 생산성이 높아지기 때문에 새로 문법을 익히는데 시간은 조금 걸리지만 장기적으로 봤을 때 이득이다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
doctype html
html(lang='en')
head
title Pug
script(type='text/javascript').
foo = true;
bar = function () {};
if (foo) {
bar(1 + 5)
}
body
h1 Pug - node template engine
#container.col
p You are amazing
p
| Pug is a terse and simple
| templating language with a
| strong focus on performance
| and powerful features.
|
[pug파일]
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
|
<!DOCTYPE html>
<html lang="en">
<head>
<title>Pug</title>
<script type="text/javascript">
foo = true;
bar = function () {};
if (foo) {
bar(1 + 5)
}
</script>
</head>
<body>
<h1>Pug - node template engine</h1>
<div id="container" class="col">
<p>You are amazing</p>
<p>
Pug is a terse and simple
templating language with a
strong focus on performance
and powerful features.
</p>
</div>
</body>
</html>
|
[pug에서 렌더링 된 html파일]
* 기본예제에서 보다시피 Pug에서 가장 중요한 것은 들여쓰기다.
아주 예민해서 Tab으로 들여쓰는 코드를 작성했으면 계속 Tab으로 들여쓰도록 통일해야하고, 띄어쓰기(Space) 두 번을 사용한다면 계속해서 띄어쓰기 두 번으로 통일해야 한다.
특징적인 것을 살펴보면
1. 일단 html에서 닫는 태그가 없다 (</head>, </body>, </title> 등)
들여쓰기로 어디서 부터 어디까지인지 구분하기 때문에 닫는 태그를 적을 필요가 없다.
2. 들여쓰기한 이후에 공백까지가 태그로 된다.
title Pug 로 쓰여있으면 title태그안에 Pug가 들어간 것을 확인할 수 있다. 마찬가지로 h1 pug~~, p You are ~~ 를 봐도 다 첫번째 문자열이 태그로 들어간다.
내가 원하는 태그를 넣고 싶으면 'content 123' 이런식으로 쓰면 '<content>123</content>' 가 만들어진다.
3. 태그 사이가 아닌 태그의 속성으로 넣으려면 ()괄호 사용.
html(lang='en') , script(type='text/javascript')
4. 여러줄 입력할 때 ( | ) 로 작성.
5. id입력할 때 #container 처럼 #입력 (태그없을 때는 div가 자동적으로 들어가나보다)
6. 클래스는 .col 처럼 .입력
Pug(Jade) 문법 정리 요약
Tags(태그)
- 일반적인 태그 입력
- 태그에 클래스 입력
div.user => <div class="user"></div>
div.user.btn => <div class="user btn"></div>
- 태그에 아이디 입력
div#user => <div id="user"></div>
Plain Text(평문)
- 일반 문장 (태그에서 인라인 가능)
p hello <em>world</em> => <p>hello <em>world</em></p>
- 긴 문장 (pip이용 '|' )
|
1
2
3
4
5
|
p
| The pipe always goes at the beginning of its own line,
| not counting indentation.
<렌더링 후>
<p>The pipe always goes at the beginning of its own line, not counting indentation.</p>
|
- 태그 안에 블럭처리 (ex css, javasciprt) (.) 온점으로 처리함.
(긴 문장이지만 파이프 안씀 script, style, textarea등..)
- 변수 받아 동적 삽입하기 (인터폴레이션)
.txt #{name} and #{email} , { name : 'jeong-pro', email : 'jeong123@naver.com' }
=> <div class="txt">jeong-pro and jeong123@naver.com</div>
* 노드에서 컨텍스트(?)를 넘겨줄 때 사용
Comments(주석)
- 한줄 주석
// 주석입니다
- 여러 줄 주석
들여쓰기로 여러 줄을 주석처리하고 pug에서만 주석을 보고싶으면 //- 를 입력하면 됨.
Attributes(속성)
- 속성 하나 넣기
a(href='google.com') Google => <a href="google.com">Google</a>
- 속성 여러개 넣기
|
1
2
3
4
5
6
7
|
input(
type='checkbox'
name='agreement'
checked
)
<렌더링 후>
<input type="checkbox" name="agreement" checked="checked" />
|
- 속성에 자바스크립트 문법을 방해할 수 있는 문자 처리 ("", '')
|
1
2
3
4
5
6
|
div(class='div-class' (click)='play()') // 에러남
div(class='div-class', (click)='play()') // ,로 처리
div(class='div-class' '(click)'='play()') // '로 처리
<렌더링 후>
<div class="div-class" (click)="play()"></div>
|
- 속성 동적 삽입 하기 (인터폴레이션)
a(href="/#{url}") Link
- Boolean 속성 처리 (boolean속성은 true일 때만 표시)
Template inheritance(템플릿 상속)
위와 같은 layout.pug 파일이 있다면 이것을 상속받을 수 있다.
extends layout.pug를 통해서 템플릿을 상속받으면 해당 'block' 에 입력된다.
이것을 통해 header, content, footer로 나눠서 미리 header, footer는 작성해두고 content부분만 코딩하는 방식으로 사용 가능하다.
(include는 밑에서 설명.)
- append/prepend
위에서 처럼 그냥 extends 하고 block을 쓰면 부모인 layout.pug파일의 block을 덮어씌워 버리는데,
append/prepend를 이용하면 부모block을 유지한 채 붙일 수 있다.
Case(case조건문)
Switch문 처럼 사용가능
Code(코드)
Pug 템플릿 파일 안에서 자바스크립트 코드를 사용할 수 있다.
방법 3가지 중 하나는 ( - ) 를 사용 하는 것이다. - var friends = 0 처럼!
'-'(하이픈) 을 이용하면 조건문 반복문등을 사용할 수 있다.
두 번째 방법은 '='을 이용해서 이스케이프된 버퍼 코드를 쓸 수 있다.
- var foo = 'bar'
h1 =foo
를 쓰면 <h1>bar</h1> 이런식으로 사용 가능하다.
* 위 그림처럼 이스케이프되는 이유는 보안상의 이유다.
이스케이프되지 않은 자바스크립트코드를 이용하고 싶으면 '!=' 를 이용하면 된다.
그러면 'This code is <escaped>!' 라고 나올 것이다.
Conditionals(조건절)
일급 조건문에서 - 선택적 괄호를 허용한다. (아래와 같이 사용이 가능하다 정도로 이해...)
Filters(필터)
- Makedown이나 scss 같은 필터를 미리 만들어 놓고 ( : ) 로 필터를 적용하는 문법이다.
커스텀필터를 만들어서 사용할 수 있다. 자세한 내용은 Pug페이지 참조.
Includes(인클루드)
위 처럼 파일을 분할해서 불러오는 역할을 하는 기능이다. pug파일 뿐만아니라 평범한 text 파일도 include를 이용해서 불러 올 수 있다.
Iteration(반복)
- Pug 에서는 each 와 while 두가지 반복문을 지원한다.
else문, 삼항연산자도 사용 가능
Mixins(믹스인)
- 믹스인은 재사용가능한 블럭을 만드는 것이라 할 수 있다. 그래서 그것을 재사용한다.
함수처럼 선언(mixin)하고 사용(+)하면 된다. argument를 받아서 사용하는 것도 볼 수 있다.
block과 함께 사용해서 사용하면 더 다양하게 사용 가능하다.
믹스인 안에 block을 두고 추가적으로 p This is my ~~ 이런식으로 추가한 것을 볼 수 있다.
믹스인에서 속성을 적용할 수도 있고
...items 처럼 유동적인 매개변수를 받을 수도 있다.
Mixin의 활용이 무궁무진하다.
출처: https://jeong-pro.tistory.com/65 [기본기를 쌓는 정아마추어 코딩블로그]
'Web > Js' 카테고리의 다른 글
| vue native event 란? (0) | 2022.01.25 |
|---|---|
| [redux-saga] redux-saga 알아보기 (0) | 2022.01.20 |
| redux-saga의 주요함수(delay, call, put, all, takeEvery, takeLatest) (0) | 2021.06.03 |
| Javascript) str to int / int to str (0) | 2020.06.23 |
| JavaScript) 속성(attribute)값으로 태그(elements) 찾기 (0) | 2020.06.23 |