로그인 정보를 서버로 요청해보자.
Nodemon 모듈
기능 구현을 하기 전 Nodemon 모듈을 설치해보겠습니다.
Nodemon 모듈은 Node.js 서버가 실행 중인 상태에서 Javascript 코드의 변경을 감지해 변경할 때 마다 실행해주는 Node.js의 패키지입니다.
js코드의 변경 결과를 바로바로 확인 할 수 있어 서버를 재실행하는 작업을 생략할 수 있습니다.
1
2
3
4
5
// 설치 명령어
npm i nodemon
// 실행 명령어
nodemon index.js
따라서 package.json 파일을 수정해 앞으로는 nodemon으로 서버를 실행하겠습니다.
1
2
3
4
5
6
7
8
9
10
// package.json
...
// 서버 실행 명령어 (npm start) 를 수정해줍니다.
"scripts": {
"start": "nodemon app.js",
},
...
EJS 파일 수정
이전 포스트에서 작성했던 login.ejs파일에 DOM을 활용할 수 있도록 수정해줍니다.
- input 태그에 id 값 설정
button 태그를 p 태그로 바꿔 id 값 설정 (생략 가능)
변경 시 css 파일의 button => #button 으로 변경
- 작성할 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
31
32
33
34
35
36
37
38
39
40
<!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" />
<!-- script 삽입 -->
<!-- axios 모듈을 사용하기 위해 링크 -->
<script
src="https://cdnjs.cloudflare.com/ajax/libs/axios/1.3.5/axios.min.js"
integrity="sha512-nnNHpffPSgINrsR8ZAIgFUIMexORL5tPwsfktOTxVYSv+AUAILuFYWES8IHl+hhIhpFGlKvWFiz9ZEusrPcSBQ=="
crossorigin="anonymous"
referrerpolicy="no-referrer"
></script>
<!-- 로그인 기능 구현한 js 파일 링크 -->
<script defer src="/js/user/login.js" type="module"></script>
<title>로그인 페이지</title>
</head>
<body>
<div class="login-page">
<div class="form">
<form class="login-form">
<input id="id" type="id" placeholder="아이디" />
<input id="password" type="password" placeholder="비밀번호" />
<p id="button">LOGIN</p>
<p class="message">
Not registered? <a href="/user/register">Create an account</a>
</p>
</form>
</div>
</div>
</body>
</html>
<!-- Copyright (c) 2022 by Aigars Silkalns (https://codepen.io/colorlib/pen/rxddKy) -->
DOM 활용 Js 파일 작성
DOM을 활용해 로그인 기능을 구현해보겠습니다.
서버에 보내는 요청은 axios 모듈을 사용해보겠습니다.
다음에 fetch, axios 모듈에 대해 포스팅하면서 자세히 알아보기로 하고 이번엔 간단하게 사용해보겠습니다.
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
"use strict";
const id = document.querySelector("#id"),
password = document.querySelector("#password"),
loginBtn = document.querySelector("#button");
loginBtn.addEventListener("click", login);
async function login() {
if (!id.value) return alert("아이디를 입력해주세요.");
if (!password.value) return alert("비밀번호를 입력해주세요.");
const req = {
id: id.value,
password: password.value,
};
try {
const res = await axios({
url: "/user/login",
method: "post",
data: req,
});
console.log(res.data);
} catch (err) {
console.log(err);
}
}
Router 작성
사용자가 입력한 로그인 정보를 서버에 보내기 위해 route_user.js 파일에 POST방식으로 라우터를 추가합니다.
1
2
3
4
5
6
7
8
9
10
11
12
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);
Router.post("/login", ctrl.process.login);
Router.post("/register", ctrl.process.register);
export default Router;
Controller 작성
controller_user.js 파일의 process 부분에 작성합니다.
우선 데이터가 서버로 잘 넘어가는지만 확인해보겠습니다.
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
const output = {
login: (req, res) => {
res.render("user/login");
},
register: (req, res) => {
res.render("user/register");
},
};
const process = {
login: (req, res) => {
// post 방식으로 넘어온 데이터는 req.body에 담겨 있습니다.
console.log(req.body);
res.send("로그인 완료");
},
register: (req, res) => {
console.log(req.body);
res.send("회원가입 완료");
},
};
export default { output, process };
테스트
로그인 페이지에서 아이디로 ‘1’, 비밀번호로 ‘1’을 입력해보겠습니다.
서버
![server-log]()
요청과 함께 보낸 데이터가 console.log로 잘 출력되는 것을 확인할 수 있습니다.
웹 페이지
![client-log]()
controller에서 설정한 로그인 완료 문구가 잘 출력되는 것을 확인할 수 있습니다.
결론
다음 포스트에서는 AWS RDS에 users 스키마를 만들고 서버와 연동해보겠습니다.