Home 로그인 페이지 만들기 - 01
Post
X

로그인 페이지 만들기 - 01

게시 2023/01/28 업데이트 2025/01/15
By Psmin
5 m읽는 시간

로그인 페이지를 만들어보자.

  • 이전에 작성한 MVC 패턴에서 이어집니다.

View 파일 만들기

오픈소스를 활용해 로그인 페이지를 views 폴더에 만들어보겠습니다.

오픈소스는 Codepen 사이트를 활용하겠습니다.

Codepen 에서 login으로 검색해 적당한 페이지를 선택해 HTML 부분은 views 폴더에 가져오고 CSS 부분은 public 폴더의 css 폴더로 가져옵니다.

register-form 부분은 따로 꺼내 register.ejs파일로 만들겠습니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

<!-- Copyright (c) 2022 by Aigars Silkalns (https://codepen.io/colorlib/pen/rxddKy) -->

<!-- login.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" />

    <!-- CSS link -->
    <link rel="stylesheet" href="/css/user/login.css" />

    <title>로그인 페이지</title>
  </head>
  <body>
    <div class="login-page">
      <div class="form">
        <form class="login-form">
          <input type="text" placeholder="username"/>
          <input type="password" placeholder="password"/>
          <p id="button">login</p>
          <p class="message">Not registered? <a href="/user/register">Create an account</a></p>
        </form>
      </div>
    </div>
    </div>
  </body>
</html>



1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113

/* Copyright (c) 2022 by Aigars Silkalns (https://codepen.io/colorlib/pen/rxddKy) */

/* login.css */

@import url(https://fonts.googleapis.com/css?family=Roboto:300);

.login-page {
  width: 360px;
  padding: 8% 0 0;
  margin: auto;
}
.form {
  position: relative;
  z-index: 1;
  background: #ffffff;
  max-width: 360px;
  margin: 0 auto 100px;
  padding: 45px;
  text-align: center;
  box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);
}
.form input {
  font-family: "Roboto", sans-serif;
  outline: 0;
  background: #f2f2f2;
  width: 100%;
  border: 0;
  margin: 0 0 15px;
  padding: 15px;
  box-sizing: border-box;
  font-size: 14px;
}
.form p.validationMsg {
  text-align: left;
  color: #ef3b3a;
  font-family: "Roboto", sans-serif;
  margin: 0 0 15px;
  font-size: 10px;
}
.form #button {
  font-family: "Roboto", sans-serif;
  text-transform: uppercase;
  outline: 0;
  background: #4caf50;
  width: 90%;
  border: 0;
  padding: 15px;
  color: #ffffff;
  font-size: 14px;
  -webkit-transition: all 0.3 ease;
  transition: all 0.3 ease;
  cursor: pointer;
}
.form #button:hover,
.form #button:active,
.form #button:focus {
  background: #43a047;
}
.form .message {
  margin: 15px 0 0;
  color: #b3b3b3;
  font-size: 12px;
}
.form .message a {
  color: #4caf50;
  text-decoration: none;
}
.container {
  position: relative;
  z-index: 1;
  max-width: 300px;
  margin: 0 auto;
}
.container:before,
.container:after {
  content: "";
  display: block;
  clear: both;
}
.container .info {
  margin: 50px auto;
  text-align: center;
}
.container .info h1 {
  margin: 0 0 15px;
  padding: 0;
  font-size: 36px;
  font-weight: 300;
  color: #1a1a1a;
}
.container .info span {
  color: #4d4d4d;
  font-size: 12px;
}
.container .info span a {
  color: #000000;
  text-decoration: none;
}
.container .info span .fa {
  color: #ef3b3a;
}
body {
  background: #76b852; /* fallback for old browsers */
  background: rgb(141, 194, 111);
  background: linear-gradient(
    90deg,
    rgba(141, 194, 111, 1) 0%,
    rgba(118, 184, 82, 1) 50%
  );
  font-family: "Roboto", sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

Router 설정

Routes 폴더에 MVC 틀을 만들 때와 마찬가지로 route_user.js파일을 만들어 Express Router를 작성합니다.

1
2
3
4
5
6
7
8
9

import express from "express";
import ctrl from "../controllers/controller_user.js";

const router = express.Router();

router.get("/login", ctrl.output.login);
router.get("/register", ctrl.output.register);

export default router;

서버 파일인 app.js와 라우터 파일 route_user.js 파일을 미들웨어로 연결합니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

import express from "express";
import path from "path";
import "dotenv/config";
import bodyParser from "body-parser";

import testRouter from "./src/routes/route_test.js";
import userRouter from "./src/routes/route_user.js";

const app = express();
const __dirname = path.resolve();

// 정적 파일
app.use("/", express.static(`${__dirname}/src/public`));

// 앱 세팅
app.set("views", "./src/views");
app.set("view engine", "ejs");

// 미들웨어
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));

// router
app.use("/", testRouter);
app.use("/user", userRouter);

// 3000 포트로 서버 오픈
app.listen(3000, () => {
  console.log("express server on port 3000");
});

Controller 설정

Controller 역시 controller_user.js 파일에 output, process 객체로 나누어 작성하겠습니다.

1
2
3
4
5
6
7
8
9
10
11
12
13

const output = {
  login: (req, res) => {
    res.render("user/login");
  },

  register: (req, res) => {
    res.render("user/register");
  },
};

const process = {};

export default { output, process };

테스트

서버를 열고 잘 동작 하는 지 확인해보겠습니다.

  1. localhost:3000/login 주소로 접속해봅니다.

    test-02

    작성한 login.ejs 파일이 잘 출력되는 것을 확인할 수 있습니다.

  2. localhost:3000/login/register 주소로 접속해보겠습니다.

    test-03

    작성한 register.ejs 파일이 잘 출력되는 것을 확인할 수 있습니다.

결론

저번 포스트에서 만들어 놓은 MVC 패턴을 활용해 로그인 페이지를 띄워보았습니다.

다음 포스트에서는 js 파일을 작성해 로그인, 회원가입 기능을 구현해보겠습니다.

Project, Login Page
MVC
이 기사는 저작권자의 CC BY 4.0 라이센스를 따릅니다.

Recent Update
Link