템플릿엔진은 정적페이지와 동적페이지의 장점과 단점을 결합한 형태의 새로운 체계이다.
템플릿을 읽어 문법에 따라 HTML 파일로 변환시켜주는 모듈이다.
코드상단에 html작성하면 html의 시작태그와 끝나는태그를 자동으로 생성해준다.
head title body 코드도 자동으로 생성한다.
템플릿 엔진 안에서는 for문이나 변수도 사용할수 있다.
사용방법
cmd 창에서 npm 패키지 디렉터리로 들어가 npm install jade --save 를 입력해 설치한다.
npm패키지 디렉터리에다 views라는 디렉터리를 생성하고 (관습적으로 views 라는 이름을 많이사용)
views 폴더에 temp.jade 라는 파일을 생성한다.
app.js파일의 코드를 작성한다.
app.set('view engine,'jade'); 코드를 작성해 템플릿 엔진을 세팅하고 express와 연결한다.
app.set('views','./views'); 코드는 템플릿이 있는 디렉터리를 express에게 알려주는 코드이다.
res.render('temp'); temp.jade 파일을 찾아 템플릿 파일을 jade 문법에따라서 해석한 결과를 사용자에게 응답하는코드
render() 함수의 두번째매개변수로는 해당 jade파일에서 사용할 객체에 변수를 담아 전달해준다.
app.js
|
var express = require('express'); var app = express(); app.locals.pretty = true; //템플릿 엔진 코드에 들여쓰기 적용해주는 코드 app.set('view engine','jade'); //템플릿 엔진을 세팅하고 express와 연결하는 코드 app.set('views','./views'); //템플릿이 있는 디렉터리를 express에게 알려주는 코드 app.use(express.static('public')); app.get('/template',function(req,res){ res.render('temp',{time:Date(),title:'jade'}); //렌더링메소드 템플릿파일을 읽어와 사용자에게 전송 }); //첫번째인자는 파일명 두번째 인자로 객체에 현재시간 과 문자열 담아 temp파일에 주입 app.get('/', function(req,res){ res.send('Hello World'); }); app.listen(3000,function(){ //3000번 포트 리스닝 console.log('Connected 3000 port'); //리스닝이 실행되면 콘솔에 출력 }); |
jade는 줄바꿈시에 태그가 되어버리기 때문에 태그와 같은줄에 내용을 작성해야 한다.
- 를 붙여줘야 jade엔진에서 for문이 동작한다.
변수를 사용하려면 app.js파일에서 객체를 만들어 jade 파일에 주입시켜야한다.
태그에 =를붙이고 주입된 변수명을 입력하면 변수의 값을 불러올수 있다.ex)div= time
temp.jade
| html head title= title //app.js에서 받은 변수 body h1 hello jade ul -for(var i =0; i<5;i++) //-를 붙여줘야 jade엔진에서 for문이 동작한다. li coding div= time //app.js에서 받은 변수 |
'Node.js' 카테고리의 다른 글
| post 방식 데이터 전달 / 사용 (0) | 2017.02.26 |
|---|---|
| URL을 이용한 get방식 데이터 전달 / 사용 (0) | 2017.02.26 |
| 정적페이지 / 동적페이지 표현 (0) | 2017.02.26 |
| Express 로 웹 애플리케이션 만들기 (0) | 2017.02.26 |
| 모듈 (0) | 2017.02.26 |
