DataBase - MVC Patten 이해하기

안녕하세요.

Hynn 입니다.

 

이번 포스팅에서는 데이터베이스로 분류하기는 했지만, 이번 프로젝트를 하면서, 가장 중요하게 느끼게 된, MVC 패턴의 개념과 실제 적용에 대해서 작성해보고자 합니다.

 

이전까지는 단순히 언어의 구문, 개념에 대한 학습을 진행했다면, 이번 포스팅에서 다루는 것은,

주어진 스택을 이용해서 개발을 진행해나갈때, 어떠한 과정을 가지고 진행하는지, 순서도 및 과정을 어떻게 흐르도록 설계해야 하는지,

그에 대한 것을 다루려고 합니다.

 

==========

1. MVC 패턴이란?

2. 흐름도 실제 스케치하기

==========

1. MVC 패턴이란?

MVC ( Model View Controller) 패턴은, 소프트웨어 공학산업에서 쓰이는, 소프트웨어 디자인 패턴입니다. 

이 패턴 모델의 핵심은, 바로 아래의 3가지로 요약할 수 있습니다.

1. 사용자 인터페이스(UI) 에서 비즈니스 로직을 분리함
2. Application 시각적 요소와 Back-end 를 분리
3. 비즈니스 로직(Back-end) 를 서로 영향을 주지 않고 쉽게 수정이 가능

즉, 여태까지의 학습하면서 배운 방식으로는 1개의 HTML 에는 각각 1개의 CSS/JavaScript 파일로 구성했다면, 이제 각각을 나누게 함으로써, 각 구동역활을 정하여 그에 맞는 코드를 작성함으로써, 어떠한 파트의 문제인지를 쉽게 파악할 수 있는 구조로 생성이 가능하다는 것입니다.

 

여기서 Model, View Controller 이 3개의 역활을 각각 알아보도록 하겠습니다.

 

• Model : 상태의 변화가 발생하면, 뷰와 컨트롤러에 통보합니다. 이를 통해 뷰는 최신의 결과를 화면에 출력하고, 컨트롤러는 상황에 맞는 명령을 추가/수정/제거 할 수 있습니다. 
• View : 실제 사용자가 볼 화면을 출력합니다.
• Controller: 모델에 명령을 보냄으로서, 모델의 상태를 변경할 수 있습니다. 또한 연결된 뷰에 명령을 보냄으로, 모델의 표시방법을 변경할 수 있습니다.

이를 그림으로 구현하면 아래와 같이 표시할 수 있습니다.

 

2. 실제 스케치하기

 

이제 실제 스케치를 표현해보도록 하겠습니다.

실제 화면을 스케치하기 위해서,

이번 프로젝트 당시에 프로젝트 작성 이전에 스케치한 사항의 실제 예제를 가지고 설명을 드리면 더 좋을 듯 합니다.

 

실제 구현의 대한 기본 기능을 정리해보면 위의 그림과 같은 개념으로 접근했습니다.

이를 위해서는 아래의 단계로 작성이 필요합니다.

 

 

1) MySQL DB에서 실제 사용할 테이블의 구조설정

- a. User Table 구조화 (회원가입 정보)

- b. Board (게시판) 구조화 

- c. Comment 구조화

- d. LikeIt (좋아요) 구조화

2) 정적 파일(HTML/CSS) 생성 및 완성

3) 필요 NPM Module 설치

- a. 주어진 Module 설치 - Express, Nunjcuks, mysql2 

 

4) Part 분리

- a. Board

- b. Join

 

5) 각 Part 별 구현필요 기능 정리

a. Join

- 1. 회원가입 Form 생성

- 2. ID중복생성검사

- 3. 로그인 기능

- 4. 회원정보 수정

 

b. Board

- 1. 게시판 리스트 출력 

- 1-a . 좋아요, 조회수, 댓글, 작성자 및 작성일자 표시 

- 2. 게시글 조회

- 2-a. 게시글 내용, 좋아요, 댓글 표시

- 3. 게시글 수정

- 3-a. 게시글의 수정정보를 DB에 Update 구현 

- 4. 게시글 작성

- 4-a. 작성 게시글이 DB에 전달 및 저장

 

6) 파트별 Route,Controller, Service 및 Repository 작업

 

7) 정적 파일에 적용되어야할 Event 생성 ( Public/Js) 

 

8) 최종 구동 확인 

 

실제 구동에 있어서, 이러한 단계적 작업이 얼마나 중요한지 협업 프로젝트를 처음 진행하면서 깨달은 바가 많습니다.

꼭 MVC 패턴을 따져가면서 적용할 것은 아니지만, 이러한 흐름도가 없다면, 실제 코드를 전문적으로 잘 작성하더라, 결국에는 일관성이 떨어지고, 작업에서 이러한 중복/ 불필요한 작업 및 각자 다른 작업의 흐름도로 인해 문제가 발생될 수 있기 때문에, 

이러한 스케치를 반드시 준수해야 한다고 생각합니다.

 

감사합니다.