5. 템플릿 엔진 pug

티스토리 뷰

Node.js/Node.js 공부

5. 템플릿 엔진 pug

댕댕이발🐾 2018. 4. 12. 23:42

이번엔 템플릿 엔진이라는 걸 소개하는데 사용하는 엔진은 pug(현) jade(과거) 라 불렸던 템플릿 엔진 중에 하나이다. 현 시점에서 다운받으려면 pug를 써야한다. 일단 늘 그렇듯이 npm install을 해야한다.

$ npm install pug --save

뒤에 --save와 같은 옵션부분은 선택사항이지만 일단 모르면 --save를 기본 옵션으로 두고 사용해도 무관하다. 아마 현재 init 하고있는 디렉토리에 한해서만 npm을 install하는 것 같다. 즉 다른 디렉토리에서는 그 모듈을 다시 설치하지 않는 이상 사용 못한다고 생각하면 된다. 물론 -g라고해서 전역으로 설치하는 옵션도 있는데 npm을 포스팅하는건 아니니 일단 여기까지..

일단 웹페이지를 구성하려면 기본적으로 html 코드가 필요하다. html언어는 우리가 흔히 알듯이 <html> 태그가 있으면 </html> 와 같이 반드시 닫는 태그가 존재한다. (물론 자동완성으로 해주긴 하지만..)

pug와 같은 템플릿 엔진이 이러한 번거로움을 줄여준다. 닫는 태그들만 사라져도 일단 코드길이가 짧아지는 것도 있고, html 파일이 일단 분리가 되니 그것 또한 강점이다.

이전 포스팅에서 동적, 정적 파일 서비스에 관하여 글을 썼었는데 둘 다 장단점이 있었는데 템플릿 엔진을 사용함으로써 각각의 장점만 취할 수 있게 된다.

두 가지 형태의 pug 파일을 살펴보겠다.

1) 순수 html 코드만 있는 형태

1
2
3
4
5
6
7
8
9
10
11
html
    head
        meta(charset='utf-8')
    body
        form(action='/form_receiver' method='post')
            p
                input(type="text" name="title")
            p
                textarea(name='description')
            p
                input(type="submit" value="전송")
cs

뭔가 html 같긴한데 코드도 짧고.. 이게 뭔가 싶은데 pug에서는 들여쓰기로 하위태그를 구분한다. 이 페이지를 소스보기로 하면

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
  </head>
  <body>
    <form action="/form_receiver" method="post">
      <p>
        <input type="text" name="title">
      </p>
      <p>
        <textarea name="description"></textarea>
      </p>
      <p>
        <input type="submit" value="전송">
      </p>
    </form>
  </body>
</html>
Colored by Color Scripter
cs

이렇게 변환되어서 나오게 된다. pug 파일이 꺽쇠가 없어지고 닫는태그가 죄다 생략된 것을 볼 수 있다. 하지만 결국엔 똑같은 기능을 한다. 이걸로 pug의 모든 문법을 설명할 순 없고 나 또한 그 문법을 다 공부하진 않았다.. 
근데 html 파일에선 js 코드를 못쓴다고 했던게 크나큰 약점이 아니었던가? 하지만 pug 엔진에서는 그게 가능하다.


2) javascript 문법 포함
1
2
3
4
5
6
7
8
9
html
    head
        title=title
    body
        Written by JooHyeong Lee 
        ul
            -for(var i = 0; i<5; i++)
                li coding
        div=time
cs

보면 반복문과 시스템 시간을 나타내는 time을 사용한 것을 볼 수 있다. 단 앞에 - 를 붙이지 않으면 오류가 나니 주의. 해당 소스를 실행시키면 html 소스는 다음과 같다. 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<html>
  <head>
    <title>Pug</title>
  </head>
  <body>
    <Written>by JooHyeong Lee </Written>
    <ul>
      <li>coding</li>
      <li>coding</li>
      <li>coding</li>
      <li>coding</li>
      <li>coding</li>
    </ul>
    <div>Thu Apr 12 2018 23:26:41 GMT+0900 (JST)</div>
  </body>
</html>
Colored by Color Scripter
cs

지금까지 쭉 pug 파일만 설명을 해줬으나 결국엔 이걸 node js에서 사용해야하므로 몇가지 선언이 필요하다.

1
2
app.set('view engine','pug');
app.set('views','./views');


cs

이 두줄이 기존 app.js 파일에 필요하다. 물론 app. 을 쓰려면 require('express')를 해야하는건 당연하다.

첫 번째 줄은 템플릿 엔진으로 pug 라는 엔진을 쓰겠다고 선언하는 것이고, 두번째 줄은 pug 파일들이 존재하는 디렉토리를 설정하는 부분이다. 이것또한 관습적으로 views 라는 디렉토리를 만들어서 사용한다. 

첫번째 pug를 실행시키기 위한 라우터를 만들어주자. (나는 3000번 포트 사용 중)

1
2
3
app.get('/form',function(req,res) {
    res.render('form');
});
Colored by Color Scripter
cs

localhost:3000/form 의 경로로 라우터를 설정해준 것인데 기존의 send와는 달리 여기선 render라는 메소드를 작성하여 매개변수로 pug파일명을 넣는다. 즉 views 디렉토리 안에 있는 form.pug 파일을 실행시키는 것이다.

두번째 pug를 실행시키기 위한 라우터.

1
2
3
app.get('/temp',function(req,res){
    res.render('temp',{time:Date(),title:"Pug"});
});
Colored by Color Scripter
cs

localhost:3000/temp 의 경로로 접속하면 되는데 아까와 다르게 뒤에 나오는 매개변수가 더있는 것을 볼 수 있다
이는 pug에서 작성한 javascript 코드에서 필요한 값들을 여기서 넘겨주는 것이므로 

title=title

div=time

이 두 부분의 값을 필요로 하는 것이다. 순서 상관없이 { } 안에 필요로 하는 개수만큼 작성해주면 된다.

저작자표시

'Node.js > Node.js 공부' 카테고리의 다른 글

7. 파일 업로드 (multer 모듈 이용) (0)	2018.05.26
6. express 쿼리스트링 사용 (0)	2018.04.25
express(3) - 동적 파일서비스 (0)	2018.04.06
express(2) - 정적 파일서비스 (0)	2018.04.02
4. express (1) (0)	2018.03.26

공지사항

최근에 올라온 글

최근에 달린 댓글

Total

Today

Yesterday

링크

TAG more

« 2024/11 »
일	월	화	수	목	금	토
					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	26	27	28	29	30

글 보관함

T3ch

티스토리 뷰

5. 템플릿 엔진 pug

'Node.js > Node.js 공부' 카테고리의 다른 글

티스토리툴바