템플릿 엔진을 사용하기 전 템플릿 엔진을 사용하지 않고, 바로 app.get에 html파일을 넣어보자.
app.get('/', (req, res) => {
res.send('<!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. I am with html<br>\
<a href="/hi">Say Hi!</a>\
</body>\
</html>')
})여기서 중요한 점은 send()안에 전체가 작은따옴표로 묶여있고, 마지막줄을 제외한 매 줄마다 마지막에 \ 문자가 들어있다.
그리고 내부에서 쓰이는 문자들은 다 큰 따옴표를 쓰고 있다.
이렇게 html을 app.get에 res.send에 넣어도 동작이 된다.
서버를 띄워보면 html이 잘 들어간 것을 알 수 있다.
하지만 이렇게 app.get마다 html파일을 집어 넣으면 index.js 파일 길이가 너무 길어져서 불편하다.
이 불편한 점을 해결하기 위해 템플릿 엔진을 사용하는 것이다.
템플릿 엔진의 장점은
1. 많은 코드를 줄일 수 있다.
2. 재사용성이 높다
3. 유지보수에 용이하다.
이렇게 세가지가 있다.
일단 템플릿 엔진을 사용하기 위해 템플릿 엔진을 설치해야 한다.
express에서 사용할 수 있는 템플릿 엔진은 종류가 많은데 그중 EJS라는 템플릿엔진을 사용 하겠다.
npm install ejs
터미널에서 이렇게 입력해주면 ejs가 다운로드 되는것을 볼 수 있다.
이제 템플릿엔진을 사용하기 위해 index.js파일에 코드를 추가해 준다.
app.set('views', __dirname + '/templates');
app.set('view engine', 'ejs');
app.get('/yolo', (req, res) => {
let name = req.query.name;
res.render('yolo', {name});
})위에 app.set 두줄은 템플릿 엔진을 사용하기 위해 필요한 것이다.
첫번째 app.set 에서 /templates 는 폴더 명이다.
폴더를 만들어야되는데 이름은 다르게 지어도 된다.
여기서 나는 templates로 지었다.
그리고 두번째 app.set은 건드릴 필요가 없다.
app.get은 일단 url을 정해준다.
여기서 나는 /yolo 로 해주었다.
그리고 name은 쿼리로 name을 가져오는 것인데 이것은 나중에 알아보자.
render로 yolo는 templates 안에 만든 파일 명이다.
나는 파일 명을 yolo.ejs로 만들어서 yolo로 지정해 준것이다.
그 옆에 name은 위에 적어둔 name을 가져가겠다 라는 뜻이라고 보면 된다.
이제 필요한 폴더와 파일을 만들어 보자.
전체 폴더에서 폴더를 하나 만든다.
여기서 나는 위에 말했듯이 templates라는 이름으로 만들었다.
그리고 그 안에 .ejs 파일을 만들어야된다.
여기서 나는 위에 말했듯이 yolo.ejs 라는 이름으로 만들었다.
다 만들고 yolo.ejs 파일에 html코드를 넣으면 된다.
<!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>
</html>나는 이렇게 넣어주었다.
전체 폴더를 한번 보여주자면
이런식으로 된다.
이제 서버를 실행 하고, url을 /yolo 로 가보면 정상적으로 나오는것을 볼 수 있다.
여기서 name은 값을 가져온게 없어서 안뜨는데 강제적으로 값을 주자면 들어간 url주소 옆에
?name=hyungu
이렇게 쳐서 넣어주면 페이지에 hyungu가 들어가서 나오는것을 확인할 수 있다.
이렇게 해서 템플릿 엔진에 대해 살펴 보았다.
