Template Language
Static Web Page
누가 어떻게 요청하든 미리 저장되어 있던 HTML 파일을 그대로 응답
Dynamic Web Page
요청한 사람과 요청한 내용에 따라 각각 다른 내용으로 편집한 HTML을 응답
웹 초창기 - CGI
int main(void)
{
char *data;
long m,n;
printf("%s%c%c\n", "Content-Type:text/html",13,10);
printf("<TITLE>Multiplication results</TITLE>\n");
printf("<H3>Multiplication results</H3>\n");
data = getenv("QUERY_STRING");
if(data == NULL)
printf("<P> Error in passing data from form to script.");
else if(sscanf(data,"m=%ld&n=%ld",&m,&n)!=2)
printf("<P>Error! Invalid data. Data must be numeric.");
else
printf("<P>The product of %ld and %ld is %ld.",m,n,m*n);
return 0;
}
Template Engine
- 템플릿과 데이터를 결합해 문서를 생성하는 프로그램, 혹은 라이브러리
- 템플릿을 작성할 때 사용하는 언어를 템플릿 언어라고 함
EJS
Embedded JavaScript Template #
- Node.js 생태계에서 가장 많이 사용되는 템플릿 엔진
- 문법이 단순
- JavaScript 코드를 템플릿 안에서 그대로 쓸 수 있음
- .ejs VSCode Extension
Example
<%# index.ejs %>
<html>
<head>
<title><%= title %></title>
</head>
<body>
<div class="message">
<%= message %>
</div>
<% if (showSecret) { %>
<div>my secret</div>
<% } %>
</body>
</html>
Express에서 EJS 사용하기
-
ejs 설치
$ npm install --save ejs -
template engine 설정
app.set('view engine', 'ejs') -
res.render()
const data = { title: 'Template Language', message: 'Hello EJS!', showSecret: true } res.render('index.ejs', data)
EJS 예제
Serving Static Files
// `public` 폴더에 있는 파일을 `/static` 경로 아래에서 제공
app.use('/static', express.static('public'))
<!-- 템플릿 파일에서 참조할 수 있음 -->
<link rel="stylesheet" href="/static/index.css">
<script type="text/javascript" src="/static/index.js"></script>