mygomii

[Node] #Express - 템플릿 엔진(1) (Jade) 본문

Node.js

[Node] #Express - 템플릿 엔진(1) (Jade)

mygomii 2018. 5. 24. 14:34
반응형

템플릿 엔진중에서 Jade에 대해서 알아보겠습니다.
홈페이지:http://expressjs.com/ko/guide/using-template-engines.html
위 홈페이지 들어가시면 설치방법이 나와있습니다.
cmd을 띄어주시고 우리의 프로젝트 NodeTest 디렉토리에 들어와주세요

그 다음 Jade를 설치를 해보겠습니다.
npm install jade --save



이렇게 설치를 해주세면 됩니다.
홈페이지에 보시면 사용방법이 나와있습니다.



위에처럼요
우리의 프로젝트에서 전에 만들었던 main.js에 작성을 해보겠습니다.
전에 views라는 디렉토리를 만들겠습니다.



이렇게 views라는 폴더를 만들어주세요.
main.js 에 밑에 코드를 써주세요


1
2
app.set('view engine', 'jade');
app.set('views', './views'); //생략 가능함 
cs


사용할 템플릿엔진을 지정해주고, views라는 템플릿이 있는 디렉토리를 지정해주었습니다.
관습적으로 디렉토리는 views라고 사용합니다. 그래서 저 두번째코드를 생략가능하다고 합니다.
views디렉토리에 temp.jade 파일을 만들어보겠습니다.


jade 문법이 생소하실텐데요
우리가 아는 html 파일은 밑에 소스처럼사용됩니다.


1
2
3
4
5
6
7
8
9
10
11
12
13
<!DOCTYPE html>
<html>
<head>
<title>mygomii</title>
</head>
<body>
    <ul>
        <li>coding</li>
        <li>coding</li>
        <li>coding</li>
    </ul>
</body>
</html>
cs

하지만  Jade는 생소하면서도 간단하게 사용됩니다.
밑에 소스처럼 열고닫고 안해도 되고 한줄만쓰면 html파일처럼 사용가능합니다.
하지만 들여쓰기를  잘 해야합니다.

1
2
3
4
5
6
7
8
9
html
    head
        title='mygomii'
    body
        h1 Hello Jade
        ul
            li coding
            li coding
            li coding
cs

main.js 를 실행을 시키시고
주소에 localhost:3000/template 치고 들어가시면


Jade 문법을 사용했지만 요소검사(F12)를 해보시면 기존 html 파일과 같다는 것을 확인할 수 있습니다.












반응형

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

[Node] #Express - 템플릿 엔진(2) (Jade)  (0) 2018.05.29
[Node] #Express - 정적파일(static)  (0) 2018.05.16
[Node] #Express설치/Hello world띄우기  (0) 2018.05.15
[Node] #npm으로 모듈설치(2) - underscore  (0) 2018.05.10
[Node] #npm으로 모듈설치(1) - underscore  (0) 2018.05.09
'Node.js' Related Articles more