라우팅 모듈화를 통한 MVC 패턴 ::마이구미

이번 글은 MVC 패턴에 대해 다뤄본다.

MVC 패턴을 라우팅 모듈화를 통해 더 견고하게 만들어보자.

MVC란 무엇인가? 위키의 정의를 보자.

모델-뷰-컨트롤러(Model–View–Controller, MVC)는 소프트웨어 공학에서 사용되는 아키텍처 패턴이다. 이 패턴을 성공적으로 사용하면, 사용자 인터페이스로부터 비즈니스 로직을 분리하여 애플리케이션의 시각적 요소나 그 이면에서 실행되는 비즈니스 로직을 서로 영향 없이 쉽게 고칠 수 있는 애플리케이션을 만들 수 있다. MVC에서 모델은 애플리케이션의 정보(데이터)를 나타내며, 뷰는 텍스트, 체크박스 항목 등과 같은 사용자 인터페이스 요소를 나타내고, 컨트롤러는 데이터와 비즈니스 로직 사이의 상호동작을 관리한다

이해하기 쉽게 설명하자면, M - 데이터베이스, V - 웹 페이지 C - M, V의 중간자 역할이라고 볼 수 있다.

위와 같이 Model은 데이터베이스 관련, V는 보여지는 요소들, C는 제어하는 역할로 구분해서 코드를 짜게 제공하고 있는 것이 MVC 프레임워크다.

예를 들어, PHP는 코드이그나이터, JAVA는 스프링, Nodejs는 익스프레스를 들 수 있다.

현재는 개발하기에 신경 쓸 부분을 프레임워크를 통해 커버할 수 있어 너무도 당연한 개발도구가 되었다.

그래서 개발자를 뽑을 때도 프레임워크를 항상 명시하는 경우를 볼 수 있다.

또한, MVC 패턴으로 잘 개발했다고, 큰 어려움없이 일할 수 있다고 어필하는 곳도 많이 있다.

하지만 MVC 패턴으로 개발했다는 것이 무슨 의미인가?

본인의 경험으로 말해보겠다.

본인은 최근 MVC 패턴으로 구현된 소스를 유지보수하는 작업을 했다.

작업을 하기 전 본인도 똑같이 들었다. 

MVC 규칙대로 했으니 유지보수하기 쉬울 것이라고.

M, V, C 구분해서 파일을 만들어서 거기에 맞게 코드를 짜면 유지보수가 쉽다?

말도 안되는 소리다.

레거시 코드들이 남발해 있을 수도 있고, 내부에서 엉망진창일 가능성도 크다.

프레임워크의 단점은 너무나 프레임워크에 의존한다는 것이다.

MVC 규칙만 지키면서 개발만 하면 된다고 생각하는 개발자들이 존재한다.

규칙만을 의존하지 않고, MVC 패턴을 어떻게 더 견고하게 만들 수 있는 지 알아보자.

MVC 관계를 MVC만으로 보지 않고, 전체적으로 보면 아래와 같다.

웹 어플리케이션에서 볼 수 있는 MVC 구성요소이다.

Router라는 것을 볼 수 있다.

Router는 경로를 선택하기 위한 역할을 한다.

하나의 경로를 선택하여 이동하는 것을 라우팅이라고 한다.

라우팅은 URI(또는 경로) 및 특정한 HTTP 요청 메소드(GET, POST 등)인 특정 엔드포인트에 대한 클라이언트 요청에 애플리케이션이 응답하는 방법을 결정하는 것을 말합니다.

REST API 구조를 통해 사용자에 대해 만들어보자.

코드로 나타내면 아래와 같다. (express 프레임워크, ES6 기준)

// index.js

const express = require('express');
const bodyParser = require('body-parser');

const app = express();

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

app.get('/users', (req, res) => {..}

app.get('/users/:id', (req, res) => {..}

app.post('/users', (req, res) => {..}

app.delete('/users/:id', (req,res) => {..}

app.put('/users/:id', (req,res) => {..}

module.exports = app;

GET 방식 /users 라우터

GET 방식 /users/:id 라우터

POST 방식 /users 라우터

DELETE 방식 /users/:id 라우터

PUT 방식 /users/:id 라우터

위와 같이 각각의 하나의 경로가 라우팅이라고 보면 된다.

위와 같은 라우팅의 수가 많아진다면 가독성이 매우 떨어지게 된다.

흐름으로 본다면, index -> controllers 이렇게 흘러간다고 보면 된다.

라우팅을 모듈화를 통해 index -> router -> controllers 로 가독성을 높혀보자.

익스프레스에서는 이를 위해 제공하는 Router 클래스 활용할 수 있다.

Router를 통해 users와 관련된 라우팅들을 하나로 모듈화해보자.

전체 디렉토리 구조는 위와 같다.

api 폴더 안에 user 폴더를 생성하여 user에 관련된 파일들을 배치시켰다.

user 폴더안의 파일들의 목적은 아래와 같다.

index.js - 라우팅 모듈화

user.controller.js - user 관련 컨트롤러

user.spec.js - 테스트 코드 (신경 쓰지 않아도 된다)

 * 대부분 컨트롤러 파일안에 컨트롤러 관련 파일들이 존재한다.

하지만 여기서는 user 디렉토리 안에서 user 라우팅, user 컨트롤러를 배치시킴으로써, 유지보수가 한층 높아졌다.

// index.js

const express = require('express');
const bodyParser = require('body-parser');

const app = express();

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

app.use('/users', require('./api/user/index.js'));

module.exports = app;

각각의 라우팅을 선언해야하는 탓에 가독성이 떨어졌었지만, 라우팅 모듈화를 통해 간결해졌다.

그리고 라우팅의 모듈화 관련을 따로 파일로 관리한다.

// user/index.js

const express = require('express');
const router = express.Router();

const controller = require('./user.controller');

router.get('/', controller.index);

router.get('/:id', controller.show);

router.delete('/:id', controller.destroy);

router.post('/', controller.create);

router.put('/:id', controller.update);

module.exports = router;

본인은 위와 같은 구조로 개발하면 많은 측면에서 좋을 것이라고 생각한다.

아래 링크를 통해 더 자세히 확인하길 바란다.

다른 좋은 구조가 있다면 알려주면 감사하겠다.

NodeJS로 웹 서버 만들기

https://github.com/jeonghwan-kim/2016-webframeworks-codelab-nodejs

위 링크를 참고한 본인 Github URL

https://github.com/hotehrud/router_mvc