먼저 index.js에서 경로를 하나 추가해준다.
"use strict";
const express = require("express");
const router = express.Router();
const ctrl = require("./home.ctrl");
router.get("/", ctrl.output.home);
router.get("/login", ctrl.output.login);
router.get("/register", ctrl.output.register);
router.post("/login", ctrl.process.login);
module.exports = router;
다음으로 컨트롤러에서 output 객체에 register를 추가해준다.
"use strict";
const User = require("../../models/User");
const output = {
home: (req, res) => {
res.render("home/index");
},
login: (req, res) => {
res.render("home/login");
},
register: (req, res) => {
res.render("home/register");
},
};
const process = {
login: (req, res) => {
const user = new User(req.body);
const response = user.login();
return res.json(response);
},
};
module.exports = {
output,
process,
};
register 주소로 접근했을 때의 렌더할 화면을 만들기 위해 views/home 안에 register.ejs파일을 만들고, 다음과 같이 코드를 넣는다.
<!-- Copyright (c) 2022 by Aigars Silkalns (<https://codepen.io/colorlib/pen/rxddKy>) -->
<!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" />
<link rel="stylesheet" href="/css/home/login.css" />
<script defer src="/js/home/login.js"></script>
<title>Document</title>
</head>
<body>
<div class="login-page">
<div class="form">
<form class="login-form">
<input id="id" type="text" placeholder="아이디" />
<input id="name" type="text" placeholder="이름" />
<input id="pw" type="password" placeholder="비밀번호" />
<input id="confirm-pw" type="password" placeholder="비밀번호 확인" />
<button>sign up</button>
<p class="message">Already registered? <a href="/login">Login</a></p>
</form>
</div>
</div>
</body>
</html>
잘 작동한다면 git add, commit, push를 진행한다.