탬플릿 엔진 없이 화면 구성하기
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>')
})
매 페이지를 생성할 때마다 이런 식으로 추가를 해야하는 불편함
HTML 코드를 추가해야하는데 JavaScript 언어 위에서 작성하려니 불편함
따라서 이런 불편함을 없애고 편하게 작업하기 위한 방법 --> 탬플릿 엔진 사용
--> 템플릿 엔진은 사용하면 일관된 양식의 HTML 파일에다가 그때그때 원하는 데이터를 동적으로 삽입해서 우리가 원하는 형태의 홈페이지를 구성할 수 있게 됨
탬플릿 엔진 사용의 장점
-
많은 코드를 줄일 수 있다.
→ 대부분의 Template Engine은 기존의 HTML에 비해서 간단한 문법을 사용한다 -
재사용성이 높다.
→ 웹페이지 혹은 웹앱을 만들 때 똑같은 디자인의 페이지에 보이는 데이터만 바뀌는 경우가 굉장히 많다. -
유지보수에 용이하다.
→ 하나의 Template을 만들어 여러 페이지를 렌더링하는 작업에는 또 다른 이점이 있다.
탬플릿 엔진 - ejs 설치
npm install ejs
ejs 간단한 사용법
index.js에 추가
app.set('views', __dirname + '/views');
app.set('view engine', 'ejs');
app.get('/test', (req, res) => {
let name = req.query.name;
res.render('test', {name});
})views라는 폴더에 ejs파일들이 들어갈 것이라는 세팅
app.set('views', __dirname + '/views');
app.set('view engine', 'ejs');views라는 폴더에 ejs파일들이 모아져 있을 것이라고 위 코드에서 세팅 했으므로 해당 폴더 내의
test.ejs파일의 내용을 불러와서 render()
app.get('/test', (req, res) => {
let name = req.query.name;
res.render('test', {name});
})--> path가 /test일 경우 해당 코드가 실행됨( response됨 )
--> 이전처럼 res.send( 'html코드' ) 메소드를 사용하여 직접 그려주지 않고,
res.render()를 사용하여 ejs파일 ( 위의 코드의 경우 test라는 이름의 파일 즉 --> test.ejs파일 )을 불러와 그려준다.
--> 또한 동시에 name이라는 변수의 데이터를 query형식으로 받아 ejs파일에 데이터를 전달하고 있다.
--> 데이터를 받는 방식은 body로 받는 방식과 query로 받는 방식 등등이 있는데 여기서는 query형식으로 받았다.view 폴더를 생성 후, 그 안에 생성한 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>
</html>
--> 완전한 html코드 --> 이것이 위의 render를 통해 호출되어 그려짐
---> body부분에 <%= name %> 은 위의 index.js에 추가된 코드에서 {name}으로 전달한 데이터가 할당됨
www.도메인/test?name=Willy
-
해당 도메인으로 접근
-
/test라는 이름의 path로 라우터가 유도해줌
-
해당 path에서 query형식으로 name이라는 변수에 해당하는 값 Willy를 받음
-
이 path는 ejs파일을 통해 화면을 구성하므로 render코드를 통해 text.ejs파일에 접근,
동시에 name 변수에 해당하는 값 Willy가 test.ejs로 전달됨 -
test.ejs에서 name변수에 해당하는 값 Willy가 적용되어 코드를 구성 --> 이 내용을 response
-
response 된 코드가 브라우저에 그려짐
[회사에서도 템플릿 엔진 쓰나요?]
회바회(회사 by 회사)입니다. 장고, 노드, 라라벨같은 웹 프레임워크에서 템플릿엔진을 사용해서 홈페이지를 만드는 경우도 있지만 최근 프론트/백엔드로 나뉘어진 개발 문화에서는 프론트 개발은 별도의 프레임워크를 사용하기 때문에 템플릿엔진을 쓰지 않는 곳도 많이 있습니다. React, Vue.js 등의 프론트엔드 프레임워크를 사용하면 이 자체로 화면을 구성하는 기능을 포함하고 있습니다. 따라서 프론트엔드가 화면을 보여주는 view 부분은 대부분 맡게 되고 백엔드 서버는 데이터를 가공/제공 하는 역할만 하게 됩니다.
