[Backend] Nodejs ejs 적용

Node js ejs 적용

안녕하세요. 개발자 개발 까마귀입니다.

오늘은 템플릿 엔진인 ejs를 어떻게 적용하는지 알려드리겠습니다.

일단 express와 ejs를 깝니다.

설치 후

const express = require("express");
const app = express();
const path = require("path");

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

views 엔진 등록과 views를 등록할 views 폴더를 지정 해줍니다.

제 폴더 구조입니다.

폴더 구조는 각자 다르니 경로는 알아서 정하세요.

const express = require("express");
const app = express();
const path = require("path");

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

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

app.listen(8081, function() {
    console.log("80801 server start");
})

전체 코드입니다. 엔진 등록을 해줬으니 서버를 생성후 render로 해서 페이지를 부릅니다.

viws 파일 구조입니다.

header.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>
<head>header</head>

footer.ejs

    <footer>
        footer
    </footer>
</body>
</html>

index.ejs

<%- include('./header') %>
    <div class="wrapper">
        <div>
            <h1>Hello</h1>
        </div>
    </div>
<%- include('./footer') %>

이렇게 한 다음 include로 해서 header와 footer를 불러들입니다. 아주 편하죠?

짜잔! 네 아주 쉽게 만들었습니다. 마치 react와 vue 처럼 컴포넌트를 불러들여서 블럭처럼 페이지를 만듭니다.

그래서 저는 웬만한 프로젝트는 ejs 아니면 nunjucks를 사용하고 페이지 양이 많고 규모가 좀 크면 React를 사용합니다. 규모가 커도 잘만 하면 끄덕 없습니다. ㅎㅎ

만약 내가 render한 홈페이지 마다 다른 데이터를 전하고싶다면 어떻게 할까요?

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

이렇게 2번째 인잔에 전하고싶은 데이터를 적은 다음

<%- include('./header') %>
    <div class="wrapper">
        <div>
            <h1><%- hello %></h1>
        </div>
    </div>
<%- include('./footer') %>

적은 key값을 views에서 받아 코딩하면됩니다. 여기서 <%- %> 이거나 <%= %> 하면 됩니다.

ejs 템플릿 엔진말고 nunjucks나 pug 등 템플릿 엔진은 많은데 2~3개 정도 알면 좋습니다.

감사합니다.

'프로그래밍 > Backend' 카테고리의 다른 글

[Backend] Node.js 하위 폴더 읽기 및 파일 찾기 (0)	2021.09.15
[Backend] Nodejs router (0)	2021.03.29
[Backend] express routing 원리 (0)	2021.03.14
[Backend] Nodejs MVC 패턴 (0)	2021.02.14
[Backend] Nodejs Express로 웹 서버 만들기 (0)	2021.02.07