학습 - MVC의 사용

YoonSuk Choi·2024년 12월 4일

5주차

5주차_MVC

목록 보기

1/1

학습 - Windows 환경에서 MVC 구조 이해 및 학습

MVC란 무엇인가?

정의

MVC (Model-View-Controller):
소프트웨어 설계 패턴 중 하나로, 애플리케이션의 구조를 분리하여 유지보수성과 확장성을 높이는 데 초점
- Model: 데이터 및 비즈니스 로직을 담당
- View: 사용자에게 보여지는 화면 담당
- Controller: 사용자 입력을 처리하고 Model과 View 간의 연결 담당

MVC의 이점

역할 분리:
각각의 구성 요소가 독립적으로 동작하도록 설계
유지보수 용이:
특정 기능 변경 시 관련된 부분만 수정 가능
재사용성:
View와 Model이 분리되어 다양한 View에서 같은 데이터를 활용 가능

Windows 환경에서 MVC 구현

준비물

Node.js 설치
확장자 설치:

[Nod.js]
0.터미널 실행

1.터미널 위치 조정
cd [작업할 폴더 경로]
Ex) cd C:\Users\Administrator\Desktop\SeSAC\00_MVC 학습

2.패키지 초기화 및 설치
[Node.js]
1. 기본값 : npm init -y
="package.json"게 생성된다.
3. 이름지정 : npm install [패키지 이름]

3. package-lock.json 생성
npm install ejs

4.Express/의존성 설치(웹 구현 준비)
npm install express --save
이거 있어야함.
'''
express
'''

5.[.gitignore] 파일 작성(package-lock.json이 너무 커서 따로 분류해야함)
꼭 안에 
'''
/node_modules
package-lock.json
'''
를 적어 넣어야 사용 할 수 있다.

실행
- node 파일 이름.js
- Ex) node missing.js

프로젝트 초기화 및 구조 생성

MVC 폴더 구조 생성

node에서 설치 하는 방법도 있지만 익숙하지 않을 때는 직접 설치 해도 좋다.
폴더는 따로 생성 해주면 편하다.

내부 [ .js ] 또한 경로에 맞게 만들어주면 편함.

my-mvc-app/
├── controller/
│   └── Cuser.js
├── model/
│   └── User.js
├── routes/
│   └── user.js
├── views/
│   └── index.ejs
├── app.js
└── package.json

MVC 주요 파일 작성

app.js (앱 초기화 및 기본 설정)

const express = require('express');
const app = express();
const userRouter = require('./routes/user');

app.set('view engine', 'ejs');
app.set('views', './views');

app.use(express.json());
app.use(express.urlencoded({ extended: true }));

app.use('/user', userRouter);

app.listen(3000, () => {
    console.log('Server is running on http://localhost:3000');
});

routes/user.js (라우팅 설정)

const express = require('express');
const router = express.Router();
const userController = require('../controller/Cuser');

router.get('/', userController.getUsers);
router.post('/', userController.createUser);

module.exports = router;

controller/Cuser.js (컨트롤러 정의)

const User = require('../model/User');

exports.getUsers = (req, res) => {
    const users = User.getAll();
    res.render('index', { users });
};

exports.createUser = (req, res) => {
    const newUser = req.body;
    User.add(newUser);
    res.redirect('/user');
};

model/User.js (데이터 관리)

let users = [];

exports.getAll = () => users;

exports.add = (user) => {
    users.push(user);
};

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 List</title>
</head>
<body>
    <h1>User List</h1>
    <ul>
        <% users.forEach(user => { %>
            <li><%= user.name %></li>
        <% }); %>
    </ul>
    <form action="/user" method="POST">
        <input type="text" name="name" placeholder="Enter user name">
        <button type="submit">Add User</button>
    </form>
</body>
</html>

학습 포인트

Express.js를 사용한 서버 생성:
- 기본적인 라우팅 및 미들웨어 사용
EJS를 활용한 동적 View 구성:
- 데이터를 View에 전달하여 동적으로 렌더링
Model-Controller 간의 데이터 전달:
- Model에서 데이터를 가져오고 Controller에서 View로 전달
폼 데이터를 처리하고 사용자 추가 기능 구현:
- express.urlencoded를 사용하여 POST 요청 처리

코드를 입력하세요

YoonSuk Choi

Name : 최윤석(YoonSuk Choi)