EJS템플릿 엔진으로 동적 html 제공하기

온라인 상점이나 SNS사이트 등의 동적 데이터가 있는 모든 웹사이트에서는 동적으로 HTML콘텐츠를 구성해야 하고, 이를 위해서 템플릿을 사용한다. Express에는 공식적으로 지원하는 여러 가지의 템플릿 엔진이 존재하는데(각 템플릿 엔진은 서로 다른 문법을 사용함) 가장 인기 있는 것은 EJS이다.

공식 사이트
https://www.npmjs.com/package/ejs

설치는 vs code의 터미널에서 npm install ejs로 하면 된다. 설치 후 EJS템플릿 엔진을 추가하려면 express를 불러오고 set메서드를 사용한다.

const app = express();

app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'ejs');

set메서드는 express에 대한 특정 옵션을 설정할 수 있는 메서드이다.

‘view engine’옵션은 vue파일을 html로 다시 보내기 전에 ‘view engine’이라는 엔진을 사용하겠다는 소리이다. 이 때 두 번째 파라미터인 엔진이름은 당연히 ejs.

‘views’옵션은 템플릿 엔진으로 처리하려는 템플릿 파일을 찾을 위치를 express에 알리는 것이다. 두 번째 파라미터로는 템플릿 파일의 경로를 준다(현재 html파일이 views폴더에 있기 때문에 path.join(__dirname, 'views'));로 설정함.)

이제 views에 들어있는 html파일들의 확장자를 html에서 ejs로 바꾼다. 확장자를 바꿈으로써 이것들이 EJS가 파싱해야 하는 템플릿임을 명시하는 것이다.

템플릿 엔진은 HTML코드를 생성하기 때문에 기존 HTML 파일의 내용은 하나도 바꿀 필요가 없다.

app.get('/', function(req, res){
    const filePath = path.join(__dirname, 'views', 'index.html')
    res.sendFile(filePath);
});

app.get('/restaurants', function(req, res){
    const filePath = path.join(__dirname, 'views', 'restaurants.html')
    res.sendFile(filePath);
})

이제 이렇게 경로를 하나하나 설정할 필요가 없이 res객체에 render메서드를 사용하여 HTML을 제공할 수 있다.

app.get('/', function(req, res){
    res.render('index');
});

app.get('/restaurants', function(req, res){
    res.render('restaurants');
})

render메서드는 템플릿을 말 그대로 렌더링한다. 즉 엔진에 의해 파싱된 템플릿파일을 HTML로 변환하여 브라우저에 응답으로 전달하는 것이다. 파라미터로는 템플릿 파일의 이름을 전달한다.

그러므로

app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'ejs');

에서 ejs엔진을 명시했으므로 ejs를 통해 템플릿 파일이 파싱되고 HTML로 변환된다.

이제 보이는 페이지는 하나도 변화가 없으나 ejs엔진의 도움으로 동적으로 생성된 html이다. 이제 여기에 논리나 동적 콘텐츠를 삽입할 수가 있다.

예를 들어

<p>we found X restaurants.</p>

에서 X를 저장된 데이터의 수로 변환하고 싶다면

<p>we found <%= numberOfRestaurants %> restaurants.</p>

와 같이 써준다. numberOfRestaurants의 값이 이제 동적으로 바뀔 수 있다. numberOfRestaurants는 값을 저장하는 placeholder의 이름이다. 아무렇게나 지어도 됨.

app.get('/restaurants', function(req, res){
    const filePath = path.join(__dirname, 'data', 'restaurants.json');
    const fileData = fs.readFileSync(filePath);
    const storedRestaurants = JSON.parse(fileData);
    res.render('restaurants', { numberOfRestaurants: storedRestaurants.length});
})

이제 배열에 경로를 통해 접근한 뒤 length메서드로 그것의 길이를 구하여 render메서드에 객체로 넣어준다. 이 객체에는 템플릿에서 키로 참조하는 모든 변수나 placeholder를 지정할 수 있다.

현재 배열의 길이는 1이므로

페이지를 봐보면

html자체가 새로 작성되어 브라우저에 전달된 것을 볼 수 있다. 매우 신기..