정적인 html을 이용하면, 클라이언트가 언제 요청을 해도 서버에서 항상 고정된 문서를 보내줄 수가 있다.
그런데, Templating Engines를 이용을 하면 템플릿(html 뼈대)만 만들어 놓고 클라이언트에서 서버에게 요청이 왔을 떄 서버에서 갖고 있는 데이터에 맞게 페이지를 동적으로 만들어서 클라이언트에게 보내줄 수 있다.
이때 사용하는 것이 Templating Engines이다.
ejs, pug 등 많은 엔진들이 존재한다. 그중 ejs가 보편적으로 사용되고 있다!
순수 자바스크립트로만 이루어져있을 때는 이런 템플릿 엔진을 사용해도 상관 ㄴㄴ하지만, 좀더 복잡한 서버사이드렌더링을 하려면 리액트와 Next.js를 활용해서 더 감칠맛나게 만들어볼 수있음!
EJS사용하는 법
동적으로 접근하고 싶은 것이 있다면, <%= %> 안에 넣어주면 된다. 이게 다이다.
기존의 html 문서의 형식은 그대로 따르면서, 동적으로 받아오고 싶은 곳만 <%= %> 로 대체한다.
EJS 설치
npm init 안했을 경우 먼저 한다음,
$ npm install ejs
패키지 있는지 없는지 확인하려면
$ npm view ejs
EJS활용
const http = require('http');
const fs = require('fs');
const ejs = require('ejs');
const name = "Seoyeon";
const courses = [
{name:'HTML'}, {name: 'CSS'},{name: 'JavaScript'}, {name: 'Node'}
]
// const http2 = require('http2'); // https
const server = http.createServer((req, res) => {
const url = req.url;
res.setHeader('Content-Type', 'text/html');
if (url === '/') {
ejs.renderFile('./template/index.ejs',{name}).then(data => res.end(data))
} else if (url === '/courses') {
ejs.renderFile('./template/courses.ejs',{name}).then(data => res.end(data))
} else {
ejs.renderFile('./template/not-found.ejs',{name}).then(data => res.end(data))
}
});
server.listen(8080);
실제로 서버에서 사용할때는 위에서 const name = 'seoyeon'이나 const = courses[] 배열처럼 메모리가 아니라 , 데이터베이스에 데이터를 영구적으로 저장해서, 영구적으로 저장된 데이터를 가지고와서 동적으로 html 파일을 만들어볼 수 있다.
ejs만을 사용하는 것도 좋지만, 리액트를 활용한다면 좀 더 화려하고 심플하게 리액트앱과 Next.js를 활용해서 서버사이드 렌더링을 할 수 있게된다.
지금까지 위에서 작성한 서버의 문제점은, html 파일만 제공하는, 즉 브라우저 클라이언트만 사용할 수 있는 서버이다. 우리의 api를 다른 클라이언트가 이용할 수 있도록 만드려면, to be continued.. 다음이시간에,,,
