Node.js Crash Course Tutorial #7 - View Engines

EJS

 

문법을 배웠다

약간 jsp/php 같은 느낌이 있다

이렇게 사용하면 HTML 내에서도 JS를 사용 가능하고 또 다른 파일에서 저장한 데이터들을 불러와서 사용할 수 있다.

 

<% JS %>
<%= 변수 %>

 

APP.JS

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

// register view engine
app.set("view engine", "ejs");

//listen for request
app.listen(3000);

app.get("/", (req, res) => {
  const blogs = [
    { title: "Yoshi finds eggs", snippet: "Lorem ipsum" },
    { title: "Mario finds eggs", snippet: "Lorem ipsum" },
    { title: "How to defeat browser", snippet: "Lorem ipsum" },
  ];
  res.render("index", { title: "Home", blogs: blogs });

  //   res.send("<h2>Home Page</h2>");
  // res.sendFile("./views/index.html", { root: __dirname });
  //write과 다르게 자동적으로 텍스트 타입을 정해준다.
});

app.get("/about", (req, res) => {
  res.render("about", { title: "About" });
});

app.get("/blogs/create", (req, res) => {
  res.render("create", { title: "Create a new blog" });
});

// 가장 아래에 작성해야 한다
app.use((req, res) => {
  res.status(404).render("404", { title: "404" });
  // res.status(404).sendFile("./views/404.html", { root: __dirname });
});

// app.get("/about", (req, res) => {
// res.render("about", { title: "About" });
// res.send("<h2>About Page</h2>");
// res.sendFile("./views/about.html", { root: __dirname });
// });

 

 

nav.js

<nav>
  <div class="site-title">
    <p>A World Site</p>
  </div>
  <ul>
    <li><a href="/">Blogs</a></li>
  </ul>
  <ul>
    <li><a href="/about">About</a></li>
  </ul>
  <ul>
    <li><a href="/blogs/create">Create</a></li>
  </ul>
</nav>