[새싹x코딩온] 웹 개발자 부트캠프 과정 6주차 회고(1)

티스토리 뷰

SeSAC

[새싹x코딩온] 웹 개발자 부트캠프 과정 6주차 회고(1) | MVC 패턴과 MYSQL 연결

1-roo 2024. 12. 4. 10:02

1. 이번 목표:
MySQL을 MVC패턴에 연결시켜보자!

2. 배운 내용 요약

폴더구조

express-mvc-mysql/
├── controller/
│ └── Cuser.js
├── model/
│ └── User.js
├── views/
│ └── index.ejs
├── routes/
│ └── user.js
├── app.js
└── config.js

config.js - 데이터베이스 설정

// config.js
// MySQL 데이터베이스 연결 설정 파일

const mysql = require('mysql');

// 데이터베이스 연결 정보
const db = mysql.createConnection({
  host: 'localhost',      // 데이터베이스 호스트
  user: 'root',           // 사용자명
  password: 'password', // 비밀번호
  database: 'testdb',     // 사용할 데이터베이스 이름
});

// 데이터베이스 연결
db.connect((err) => {
  if (err) throw err;
  console.log('MySQL Connected...');
});

module.exports = db; // 다른 파일에서 사용할 수 있도록 내보내기

model/User.js - 사용자 데이터 모델

// model/User.js
// 사용자 관련 데이터베이스 작업을 처리하는 모델

const db = require('../config'); // 데이터베이스 연결 설정 가져오기

// 모든 사용자 가져오기
exports.getAllUsers = (callback) => {
  db.query('SELECT * FROM users', callback);
};

// 새로운 사용자 추가
exports.createUser = (data, callback) => {
  db.query('INSERT INTO users SET ?', data, callback);
};

// 사용자 정보 업데이트
exports.updateUser = (id, data, callback) => {
  db.query('UPDATE users SET ? WHERE id = ?', [data, id], callback);
};

// 사용자 삭제
exports.deleteUser = (id, callback) => {
  db.query('DELETE FROM users WHERE id = ?', id, callback);
};

controller/Cuser.js - 사용자 요청 처리

// controller/Cuser.js
// 클라이언트 요청을 처리하고 모델과 상호작용

const User = require('../model/User'); // 데이터 모델 가져오기

// 모든 사용자 가져오기
exports.getAllUsers = (req, res) => {
  UserModel.getAllUsers((err, results) => {
    if (err) throw err;
    res.render('index', { users: results }); // index.ejs에 사용자 데이터 전달
  });
};

// 새로운 사용자 추가
exports.createUser = (req, res) => {
  const { name, email } = req.body; // 요청에서 이름과 이메일 추출
  UserModel.createUser({ name, email }, (err, results) => {
    if (err) throw err;
    res.redirect('/'); // 작업 완료 후 홈으로 리다이렉트
  });
};

// 사용자 정보 업데이트
exports.updateUser = (req, res) => {
  const { name, email } = req.body; // 요청에서 새 데이터 추출
  const id = req.params.id;         // URL에서 사용자 ID 추출
  UserModel.updateUser(id, { name, email }, (err, results) => {
    if (err) throw err;
    res.redirect('/'); // 작업 완료 후 홈으로 리다이렉트
  });
};

// 사용자 삭제
exports.deleteUser = (req, res) => {
  const id = req.params.id; // URL에서 사용자 ID 추출
  UserModel.deleteUser(id, (err, results) => {
    if (err) throw err;
    res.redirect('/'); // 작업 완료 후 홈으로 리다이렉트
  });
};

routes.user.js - 라우터 설정

// routes/user.js
// 사용자 관련 라우팅 정의

const express = require('express');
const router = express.Router();
const UserController = require('../controller/Cuser'); // 컨트롤러 가져오기

// GET: 모든 사용자 조회
router.get('/', UserController.getAllUsers);

// POST: 새로운 사용자 추가
router.post('/user', UserController.createUser);

// PATCH: 사용자 정보 업데이트
router.patch('/user/:id', UserController.updateUser);

// DELETE: 사용자 삭제
router.delete('/user/:id', UserController.deleteUser);

module.exports = router; // app.js에서 사용할 수 있도록 내보내기

views/index.ejs - 화면 구성

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>User Management</title>
</head>
<body>
  <h1>User List</h1>
  <ul>
    <% users.forEach(user => { %> <!-- 서버에서 전달된 사용자 데이터 반복 -->
      <li><%= user.name %> (<%= user.email %>)</li>
    <% }) %>
  </ul>

  <!-- 사용자 추가 폼 -->
  <h2>Add New User</h2>
  <form action="/user" method="POST">
    <input type="text" name="name" placeholder="Name" required>
    <input type="email" name="email" placeholder="Email" required>
    <button type="submit">Add User</button>
  </form>
</body>
</html>

app.js - 애플리케이션 초기화

// app.js
// Express 애플리케이션 초기화 및 서버 실행

const express = require('express');
const bodyParser = require('body-parser');
const userRoutes = require('./routes/user'); // 사용자 라우터 가져오기

const app = express();

// EJS 템플릿 엔진 설정
app.set('view engine', 'ejs');

// body-parser 미들웨어로 요청 데이터 처리
app.use(bodyParser.urlencoded({ extended: false }));

// 사용자 라우터 등록
app.use('/', userRoutes);

// 서버 실행
const PORT = 8080;
app.listen(PORT, () => {
  console.log(`Server running on http://localhost:${PORT}`);
});

MYSQL 테이블 생성

CREATE DATABASE testdb;

USE testdb;

CREATE TABLE users (
  id INT AUTO_INCREMENT PRIMARY KEY,
  name VARCHAR(10) NOT NULL,
  email VARCHAR(100) NOT NULL
);

DESC users;

SELECT * FROM users;

3. 회고

드디어 내가 제일 약한 MVC패턴의 시간이다. 처음에는 MVC 패턴의 분리가 익숙하지 않아서, 각 역할이 어디에서 처리되는지 혼란스러웠는데 계속 하다보니 조금씩 이해가 되는 것 같다. 하지만 콜백 함수 쪽은 아직 나에겐 어려운 것 같다. 실습으로 회원가입, 로그인, 회원정보 수정 및 삭제를 하는 연습을 했는데, 계속 에러가 나는 터라 여기저기 로그를 엄청 찍어보며 오류를 찾아내느라 힘들었다. 내게 취약한 점은 요청을 보낼 때 데이터를 넘기는 부분과, 요청을 받았을 때 그 데이터를 처리하는 data라는 객체인 것 같다.

데이터베이스 작업은 모델에서, 사용자 요청 처리는 컨트롤러에서, 화면 출력은 뷰에서 처리한다는 개념은 글로는 아는데 이걸 직접 코딩을 하며 내가 알고있는 개념은 아직 정립이 제대로 되지 않았다는 것을 깨달았다. 백엔드에서 매우 중요한 MVC를 익숙하게 만들 수 있도록 내가 짠 코드도 다시 한 번 찬찬히 살펴보며 공부해야겠다.

'SeSAC' 카테고리의 다른 글

[새싹x코딩온] 웹 개발자 부트캠프 과정 7주차 회고(1) \| Sequelize_relation 테이블 간 관계 (1)	2024.12.09
[새싹x코딩온] 웹 개발자 부트캠프 과정 6주차 회고(2) \| Sequelize (1)	2024.12.06
[새싹x코딩온] 웹 개발자 부트캠프 과정 5주차 회고(2) \| SQL, MVC 패턴의 이해 (1)	2024.11.27
[새싹x코딩온] 웹 개발자 부트캠프 과정 5주차 회고(1) \| multer 모듈을 이용한 파일 업로드 (0)	2024.11.25
[새싹x코딩온] 웹 개발자 부트캠프 과정 4주차 회고(2) \| form으로 get, post 요청 보내기 / express 서버에서의 비동기 http통신 (0)	2024.11.21

공지사항

최근에 올라온 글

최근에 달린 댓글

Total

Today

Yesterday

링크

TAG more

« 2026/06 »
일	월	화	수	목	금	토
	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

글 보관함

1-roo 님의 블로그

티스토리 뷰