EJS

1. EJS

EJS(Embedded JavaScript)는 HTML 안에 <%= %>, <% %> 문법을 이용해 JavaScript 코드를 삽입할 수 있도록 도와주는 템플릿 엔진입니다. 서버에서 데이터를 넘겨주면, 그 데이터를 HTML에 자동으로 넣어서 브라우저에 보낼 수 있게 해줍니다.

 

1.1 설치

   npm install ejs   

 

1.2  server.js

const http = require("http");

const fs = require("fs");

const ejs = require("ejs");

const path = require("path");

const server = http.createServer((req, res) => {

  if (req.url == "/") {

    const filePath = path.join(__dirname, "views", "index.ejs");

    // ejs.renderFile() : filePath에 name이라는 객체를 보냄

    ejs.renderFile(filePath, { name: "김사과" }, (err, data) => {

      if (err) {

        res.writeHead(500, { "Content-Type": "text/plain" });

        res.end("서버 오류");

        return;

      }

      res.writeHead(200, { "Content-Type": "text/html" });

      res.end(data);

    });

  } else if (req.url === "/users") {

    const filePath = path.join(__dirname, "views", "users.ejs");

    const users = ["김사과", "반하나", "이메론"];

    ejs.renderFile(filePath, { users }, (err, data) => {

      if (err) {

        res.writeHead(500, { "Content-Type": "text/plain" });

        res.end("서버 오류");

        return;

      }

      res.writeHead(200, { "Content-Type": "text/html" });

      res.end(data);

    });

  } else if (req.url === "/posts") {

    const filePath = path.join(__dirname, "views", "posts.ejs");

    const posts = [

      { title: "첫 글", content: "안녕하세요!" },

      { title: "둘째 글", content: "집가고싶어요" },

    ];

    ejs.renderFile(filePath, { posts }, (err, data) => {

      if (err) {

        res.writeHead(500, { "Content-Type": "text/plain" });

        res.end("서버 오류");

        return;

      }

      res.writeHead(200, { "Content-Type": "text/html" });

      res.end(data);

    });

  } else {

    res.writeHead(404, { "Content-Type": "text/plain" });

    res.end("페이지를 찾을 수 없습니다.");

  }

});

server.listen(3001, () => {

  console.log("서버 실행중");

});