대딩코딩/웹개발 스터디

[Express] 4. View

시데브 2023. 12. 1. 14:38

Ejs

  • Embedded JavaScript Template
  • 기존의 자바스크립트는 html과 script가 태그로 분리되어 있어 script를 html에 적용하기에 어려움이 있었다.
  • 반면에 ejs는 html의 태그처럼 자바스크립트 내용을 삽입할 수 있다.
  • 이로 인해 페이지를 동적으로 짜는 것이 기존보다 훨씬 수월해진다.
//설치 코드
npm install ejs

 

template의 내용을 views/index.ejs 파일로 옮긴다.

 

 파일명: index.ejs

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>WEB</h1>
    <ol>
        <% for(let topic of topics) { %>
            <li><%= topic.title %></li>
        <% } %>
    </ol>
    <a href="/post/create">create</a>
</body>
</html>

 

 

 파일명: main.js

const express = require('express');
require('dotenv').config();
const mysql = require('mysql2/promise');

const app = express();
const port = 3000;

//view engine: 서버에서 js로 만든 변수를 보내줘서 클라이언트에서 활용할 수 있도록 해주는 엔진
//정적인 HTML을 동적으로 만들어줌
app.set('view engine', 'ejs');  //view engine을 ejs로 설정
app.set('views', 'views');  //경로 설정

const db = mysql.createPool({
    host: process.env.DB_HOST,
    user: process.env.DB_USER,
    password: process.env.DB_PASSWORD,
    database: process.env.DB_NAME
});



app.get('/', async (req, res) => {
    const query = 'SELECT * FROM Topics;';  
    const topics = await db.query(query);

    res.render('index.ejs', {topics: topics[0]});   //렌더링: HTML파일을 받아 브라우저에 제공하는 과정
});

app.listen(port, () => {
    console.log(`Example app listening on port ${port}`);
});

 

>> 코드의 길이가 현저하게 줄어든 것을 확인할 수 있다.

 

 

 

 

참고자료

 

Ejs에 대해

EJS는 Embedded JavaScript Template의 약어로 템플릿 엔진 모듈입니다. 이 글에서는 EJS에 대한 설명과 문법에 대해 설명합니다.

velog.io

 

728x90
반응형