뷰 분리

시작 전 html 문서는 제거한다.

MVC(모델-뷰-컨트롤러) 형태로 패턴을 만들기 위해 요소 분리 과정이 필수적이다.

MVC - 용어 사전 | MDN

이외에도 MVVM (모델-뷰-뷰모델), MVP (모델-뷰-프리젠터), MVW (모델-뷰-왓에버)가 있지만, 일단 MVC 형태로 구분해본다.

1. view 최적화

npm install ejs -s

ejs 모듈을 설치한다.

다음, 폴더와 파일을 다음과 같이 만들고 코드를 수정한다.

Untitled

app.js

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

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

app.get("/", (req, res) => {
  res.render("home/index");
});
app.get("/login", (req, res) => {
  res.render("home/login");
});

app.listen(3000, () => {
  console.log("서버 실행");
});

index.ejs

<!DOCTYPE html>
<html lang="ko">
  <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>
    현재 위치: 루트
  </body>
</html>

login.ejs