1. Express, 템플릿 엔진 소개
정적인 페이지와 동적인 페이지를 함께 결합한 새로운 체계 > 템플릿 엔진
2. Express, 템플릿 엔진 사용법
https://expressjs.com/ko/guide/using-template-engines.html
템플릿 엔진 안에 다양한 종류가 존재 -> jade 이용할 것.
$ npm install jade --save 이용해서 설치하기.
express에서 jade를 사용하기 위해선 아래 코드가 필요하다.
// Template Engine
app.set('view engine', 'jade'); // 템플릿 엔진으로 jade 연결.
app.set('views', './views'); // 템플릿이 위치한 디렉토리 지정, 생략해도 기본값은 ./views
app.get('/template', function(req, res){ //템플릿 엔진 이용한 라우팅
res.render('temp'); // 'temp' 템플릿 파일을 웹페이지로 렌더링해서 제공
})views 디렉토리를 생성하고 그 안에 temp.jade 파일을 생성해서 html 만 작성하고 저장 후 './template'에 접속하면 빈 화면이 나온다. 페이지 소스를 보면코드가 보이는 것을 확인할 수 있다.
render 코드가 temp.jade를 jade 문법으로 해석 후 렌더링해서 보여주는 것이다.
3. Express, 템플릿 엔진, Jade 문법
temp.jade 파일을 먼저 살펴보자.
html
head
title= _title
body
h1 Hello Jade
ul
-for(var i=0; i<5; i++)
li coding
div= time위의 파일에 대응되는 html 형식은 다음과 같다.
<html>
<head>
<title>Jade</title>
</head>
<body>
<h1>Hello Jade</h1>
<ul>
<li>coding</li>
<li>coding</li>
<li>coding</li>
<li>coding</li>
<li>coding</li>
</ul>
<div>Wed Feb 02 2022 17:19:26 GMT+0900 (대한민국 표준시)</div>
</body>
</html>jade 에서 태그 안에 새로운 태그를 위치하게 하려면 Tab 을 사용해야 한다.
그리고 프로그래밍 언어를 쓰기 위해서는 - 를 붙여야 한다.
변수를 사용하고 싶다면 = 을 붙이고, express에서 jade 파일을 호출할 때 인자로 변수 값을 다음과 같이 전달해 주어야 한다.
app.get('/template', function(req, res){ //템플릿 엔진 이용한 라우팅
res.render('temp', {time: Date(), _title: 'Jade'}); // 'temp' 템플릿 파일을 웹페이지로 렌더링해서 제공
})그 외에, jade 코드를 렌더링한 html 코드를 예쁘게(?) 보려면 아래 코드를 추가하면 된다.
app.locals.pretty = true;'스터디📖 > Node.js' 카테고리의 다른 글
| [nodejs 강좌] Node.js 를 이용해 웹애플리케이션 만들기 - 섹션 8. Express, POST 방식을 이용한 정보의 전달 (0) | 2022.02.03 |
|---|---|
| [nodejs 강좌] Node.js 를 이용해 웹애플리케이션 만들기 - 섹션 7. Express, URL 을 이용한 정보의 전달 (0) | 2022.02.03 |
| [nodejs 강좌] Node.js 를 이용해 웹애플리케이션 만들기 - 섹션 5. Express (0) | 2022.02.02 |
| [nodejs 강좌] Node.js 를 이용해 웹애플리케이션 만들기 - 섹션 4. 동기와 비동기 (0) | 2022.02.02 |
| [nodejs 강좌] Node.js 를 이용해 웹애플리케이션 만들기 - 섹션 3. 콜백 (Callback) (0) | 2022.02.01 |
