6주차에는 nodejs mvc패턴과 mysql을 연결하여 db데이터를 가져와서 사용하는 방법을 배웠다.
MVC패턴이란??
MVC (Model-View-Controller)는 소프트웨어 아키텍처 패턴 중 하나로, 사용자 인터페이스(UI)와 비즈니스 로직을 분리하고, 소프트웨어를 세 가지 주요 구성 요소로 분리하여 설계하는 방법입니다.
MVC 패턴은 다음과 같이 구성됩니다.
- Model : 데이터와 관련된 로직을 담당하는 부분입니다. 데이터의 유효성 검사나 데이터베이스와의 상호 작용 등을 처리합니다.
- View : 사용자 인터페이스를 담당하는 부분입니다. 모델이 가지고 있는 데이터를 시각적으로 표현하며, 사용자의 입력을 받아 컨트롤러로 전달합니다.
- Controller : 모델과 뷰 사이의 상호 작용을 관리하는 부분입니다. 사용자 입력을 처리하고 모델을 업데이트합니다. 또한, 모델이 변경되었을 때, 뷰를 업데이트하도록 합니다.
이렇게 구성된 MVC 패턴은 소프트웨어를 관리하기 쉽고 유지 보수하기 쉽게 만들어 줍니다. 또한, 각 구성 요소는 독립적으로 개발될 수 있기 때문에 개발 작업을 효율적으로 분업할 수 있습니다.
Model
모델은 데이터베이스와 상호작용하는 부분입니다.
const mysql = require('mysql');
const conn = mysql.createConnection({
host: 'localhost',
user: 'user',
password: '1234',
database: 'codingon'
})mysql 변수로 mysql모듈을 불러와줍니다.
conn 변수로 mysql과의 연결을 해주는 커넥션을 생성해줍니다.
exports.postSignin = (data, callback) => {
const sql = `SELECT * FROM users WHERE id = '${data.id}' AND pw = '${data.pw}';`;
conn.query(sql, (err, rows) => {
if (err) throw err;
callback(rows);
})
}인자로 data,callback을 주었으며
conn.query는 sql변수에 작성된 sql코드를 실행시켜
row라는 인자로 반환시킵니다.
View
사용자 인터페이스를 담당하는 부분입니다. ejs템플릿으로 구현했습니다.
html이라고 생각하면 됩니다.
<!DOCTYPE html>
<html lang="ko">
<%- include('include/include', { title: '로그인' })%>
<body>
<h1>로그인</h1>
<!--
[로그인] 버튼을 클릭하면 profile.ejs에서 특정 유저 정보를 보여주어야 하기 때문에
userid 정보를 value에 저장(POST /user/signin 요청의 응답을 받은 후 수행)하여
폼(input)이 보이지 않도록 hidden 처리함
-->
<form name="form_info" action="/user/profile" method="POST">
<input type="hidden" name="userid" />
</form>
<form name="form_login">
<label for="userid">ID</label>
<input id="userid" type="text" name="userid" required /><br />
<label for="password">Password</label>
<input id="password" type="password" name="pw" required /><br />
<button type="button" onclick="login();">Login</button>
</form>
<!-- TODO: href 속성값 설정하기 -->
<a href="/user/signup">Register</a>
<script>
// TODO: [Login] 버튼 클릭시 서버에 로그인 요청하기
// POST /user/signin
const form = document.forms["form_login"];
const hiddenForm = document.forms["form_info"];
function login() {
let formData = {
id: form.userid.value,
pw: form.pw.value,
};
axios({
method: "POST",
url: "/user/signin",
data: formData,
}).then((res) => {
hiddenForm.userid.value = res.data.id;
if (res.data === "") {
alert("로그인 실패");
} else {
alert("로그인 성공");
hiddenForm.submit();
}
});
}
</script>
</body>
</html>
로그인 버튼을 클릭시 db에 로그인 정보를 넘겨주며 로그인정보가 db에 존재하는 값과 일치할 시 로그인 성공 ! 이라는 메세지를 반환하며 로그인 정보가 일치하지 않을 시 로그인 실패를 반환합니다.
hiddenForm을 이용해 id값으로 로그인성공여부를 판별하여 데이터의 중복성을 줄였습니다.
Controller
컨트롤러는 모델과 뷰의 상호작용을 조절하는 부분입니다.
expressjs를 사용하여 라우팅을구현하고 모델과 뷰를 조합합니다.
// index.js
const express = require('express');
const controller = require('../controller/Cuser');
const router = express.Router();
router.post('/user/signin', controller.postSignin);// Cuser.js
const User = require('../model/User');
exports.postSignin = (req, res) => {
User.postSignin(req.body, (result) => {
res.send(result[0]);
})
}결론적으로 위에 작성한 로직은,
view에서 로그인 정보를 axios post로 요청을 보냅니다.
post로 요청은 index.js에서 라우팅되어 Cuser.js로 이동합니다
Cuser.js에서 require하여 가지고 있는 User객체에 접근, User 객체 안에 postSignin에 인자로 req.body와 result함수를 넘겨줍니다.
넘겨준 데이터는 data와 callback이라는 인자로 받아지며
모델의 exports.postSignin에 접근하여 sql로직을 처리하고 sql로직을 바탕으로 나온 리턴값을 callback함수의 인자인 rows로 다시 Cuser.js에 보냅니다 그러면 result라는 함수의 인자값이 rows와 동일한 값을 지니며
res.send로 result값을 보낸다면 axios에서 요청한 값이 data로 전달됩니다.
복잡할 수 있지만 반드시 알아두어야 하는 개념이기에 많은 복습이 필요할 것 같습니다.
