MVC 구조에 대해 간단하게 알아보자!

MVG 수업을 한창 듣는데.. 뭔가 와닿지 않는다. 개발의 규모가 커지면 각 파트를 나눠서 각기 팀별로 개발을 해야하기 때문에 구조를 나눈다는 것 같은데..

MVC를 단순화 한 도식이다. 보면 알겠지만 MVC는 해당 모델의 핵심인 모델 뷰 그리고 컨트롤의 약자이다.

이렇게만 봐서는 이해가 잘 가지 않는다. 조금만 더 일반적인 예시를 들어 직관적으로 이해해 보도록하자

거대한 레스토랑이 있다고 가정하자. 그러면 해당 레스토랑에는 식자재창고와 주방 그리고 음식을 나르는 웨이터와 음식을 먹는 손님이 있을꺼다.

Model: 여기서 모델은 주방이라고 생각하자. 손님(우리들)이 원하는 메뉴를 받아 실제 메뉴에 맞는 요리(데이터)를 만드는 곳이다.

Veiw: 뷰는 식사 테이블이라고 생각하면 된다. 손님(우리들)은 우리가 원하는 요청에 따라 만든 요리(데이터)만을 여기서 볼 수 있다. 주방에서 어떻게 지지고 볶는지는 전혀 알 수 없지만, 원하는 음식을 눈앞에서 보는 공간이다.

Controllor: 컨트롤러는 주방에서 요리를 받아서 우리에게 가져다주는 웨이터라고 생각하면 딱 맞다. 처음 우리가 앉아서 원하는 메뉴(데이터)를 이야기하면 웨이터가 해당 사항을 주방에 전달하고 주방에서는 우리가 원하는 요리(데이터)를 알맞게 조리해서 다시 웨이터에게 넘겨주면, 해당 웨이터가 다시 우리가 요청한 메뉴를 알맞은 요리(데이터)로 전달해준다고 생각하면 된다.

dataBase: 여기는 식자재 창고라고 생각하면 된다. 주방에서 우리가 원하는 요리(데이터)를 만들려고 할때 필요한 가공되지 않은 원재료(rawData)들이 필요할텐데, 그때마다 필요한 원자재들을 식자재창고에서 끌어다 쓴다고 생각하면 된다.

말로만해서는 뭔소리인지 확실히 감이 오지 않을 꺼다.

express, ejs, mysql을 통해 아주 간단한 코드를 이용해서 일단 한번 직접 만들어 보도록하자.

1. 프로젝트 설정

mkdir mvc-example # 프로젝트 디렉토리 생성

cd mvc-example # 디렉토리로 이동

npm init -y # 기본 설정으로 package.json 생성

npm install express ejs mysql2 # Express, EJS, MySQL2 패키지 설치

2. 폴더 구조

mvc-example/

│

├── app.js

├── controllers/

│ └── noteController.js

├── models/

│ └── noteModel.js

├── views/

│ └── notes.ejs

└── routes/

└── noteRoutes.js

3. Model (noteModel.js)

javascript

const mysql = require('mysql2'); // MySQL 모듈을 불러옴

// MySQL 연결 풀 생성

const pool = mysql.createPool({

host: 'localhost', // 데이터베이스 호스트

user: 'root', // 데이터베이스 사용자

password: 'password', // 데이터베이스 비밀번호

database: 'mvc_example' // 데이터베이스 이름

});

// NoteModel 객체 정의

const NoteModel = {

// 모든 노트를 가져오는 메서드

getAllNotes(callback) {

pool.query('SELECT * FROM notes', (error, results) => { // SQL 쿼리를 실행하여 모든 노트를 선택

if (error) throw error; // 오류가 발생하면 예외를 던짐

callback(results); // 결과를 콜백 함수에 전달

});

}

};

module.exports = NoteModel; // NoteModel 객체를 모듈로 내보냄

4. Controller (noteController.js)

const NoteModel = require('../models/noteModel'); // NoteModel 모듈을 불러옴

// NoteController 객체 정의

const NoteController = {

// 노트를 보여주는 메서드

showNotes(req, res) {

NoteModel.getAllNotes((notes) => { // 모든 노트를 가져옴

res.render('notes', { notes }); // 가져온 노트를 notes.ejs 뷰에 전달하여 렌더링

});

}

};

module.exports = NoteController; // NoteController 객체를 모듈로 내보냄

5. View (notes.ejs)

<!DOCTYPE html>

<head>

<title>Notes</title>

</head>

<body>

<h1>Notes</h1>

<ul>

<% notes.forEach(note => { %>

<% }) %>

</ul>

</body>

</html>

6. Routes (noteRoutes.js)

const express = require('express'); // Express 모듈을 불러옴

const router = express.Router(); // 라우터 객체 생성

const NoteController = require('../controllers/noteController'); // NoteController 모듈을 불러옴

router.get('/notes', NoteController.showNotes); // '/notes' 경로에 GET 요청이 들어오면 showNotes 메서드를 실행

module.exports = router; // 라우터 객체를 모듈로 내보냄

7. Main Application (app.js)

const express = require('express'); // Express 모듈을 불러옴

const app = express(); // Express 애플리케이션 객체 생성

const noteRoutes = require('./routes/noteRoutes'); // 노트 라우트 모듈을 불러옴

app.set('view engine', 'ejs'); // 뷰 엔진을 EJS로 설정

app.use('/', noteRoutes); // 루트 경로에 노트 라우트를 사용

app.listen(3000, () => { // 애플리케이션이 3000번 포트에서 듣기 시작

console.log('Server is running on port 3000'); // 서버가 시작되었음을 로그로 출력

});

아주 간단한 코드로 예시를 만들었으니, 찬찬히 몇번 읽다보면 아 이렇게 서로서로 연결이 되고 있구싶은 감이 딱 잡힐꺼다. 해당 구조들은 상당히 유기적으로 연결되어 있는데, MVC모델을 작동하는데 있어 app.js는 멀티탭에 큰 전원 스위치고 Routes/router들은 그 안에 있는 작은 전원 스위치들이라고 생각하면 머리속에서 도식화 시키는데 있어 도움이 될꺼다.

해당모델은 기능이 하나하나 추가될 수록 점점 엮이는게 많아지면서 이해하기가 어려우니, 지금처럼 아주 간단한 코드를 통해 먼저 완전 이해될 수 있도록 계속해서 읽고 이해하고 직접 짜보다가 머리속 MVC구조가 내장화가 됐다 싶으면 하나하나 어려운 기능들을 추가하는 걸 추천한다.

해당 포스팅이 조금이라도 MVC구조를 이해하는데 어려움을 겪는 나같은 생짜 코린이에게 조금이라도 도움이 됬길 바라며..

이런거 이해 못해도 먹고 살길은 많으니깐 걱정하지 말고

일단 지금은 고생한 뇌를 위해 알콜 한사발 들이키도록 하자!

By2~

저작자표시 비영리 변경금지

코딩비쿠

MVC 구조에 대해 간단하게 알아보자!

티스토리툴바