2w_Express - Template Engine

YoonJu Lee·2021년 7월 21일

Team_ Sparta_ Node.js 기초반

목록 보기

4/8

1. Template Engine

많은 코드를 줄일 수 있다.
→ 대부분의 Template Engine은 기존의 HTML에 비해서 간단한 문법을 사용한다.
재사용성이 높다.
→ 웹페이지 혹은 웹앱을 만들 때 똑같은 디자인의 페이지에 보이는 데이터만 바뀌는 경우가 굉장히 많다.
유지보수에 용이하다.
→ 하나의 Template을 만들어 여러 페이지를 렌더링하는 작업에는 또 다른 이점이 있다.

2. Template Engine 중의 ejs 설치

$ npm install ejs

< 설치 후, package.json directory >

: ejs 설치 완료.

3. ejs 파일 추가.

1) views directroy 생성 > test.ejs 파일 추가.

< test.ejs >

<!DOCTYPE html>
<html lang="en">
  <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Document</title>
  </head>
  <body>
      Hi. My name is <%= name %><br>
  </body>
</htm

2) index.js 수정

1) ejs 셋팅

ejs 사용하는 directory 알려줌.

app.set('views', __dirname + '/views');

ejs를 view engine으로써 사용하겠다.

app.set('view engine', 'ejs');

2) 셋팅한 ejs 사용하기!
=> 경로가 /test 로 들어올 경우, 뿌려준다.


app.get('/test', (req, res) => {
  let name = req.query.name;
  res.render('test', {name});
})

3) 실행 화면

4. 왜 화면이 조금 다를까?

ejs파일에서..

Hi. My name is <%= name %><br>

1) 중간에 이 부분이 있는데요 저 뒷부분에 <%= name %> 이게 있지만 실제 화면에서는 아무것도 보이지 않습니다. 이부분이 ejs 템플릿 문법으로 만약에 name 이라는 변수가 넘어온 것이 있으면 그것을 출력하는 것인데 지금 우리가 넘겨준 것이 없으므로 아무것도 출력하지 않습니다.
2) 2. 그럼 그 변수를 넘겨준다는 표현은 무엇일까요? 앞서 index.js 파일 부분을 다시 보겠습니다.

app.get('/test', (req, res) => {
  let name = req.query.name;
  res.render('test', {name});
})

여기서 보면 render를 하는데 test 와 {name} 두 개의 인자를 넘겨줍니다. 이는 test.ejs 파일을 그리란 뜻이고 그 ejs 파일에 name 값을 객체로 넘겨준다는 의미입니다. 그렇다면 우리는 name 값을 안 넘겨줘서 아무것도 안 뜬 것은 아닙니다. 분명 여기서 name 이라는 변수를 위에서 생성해서 넘겨주고 있습니다.
브라우저에서 url 을 변경해 봅시다. http://localhost:3000/test?name=sparta