(Node.js) MVC 디자인 패턴

MVC 패턴 NodeJS에 적용해 보기!!

 

0. MVC패턴을 적용하게 된 계기

1. MVC패턴이란

2. MVC 패턴을 선택한 이유

3. MVC 패턴에 대한 간단한 설명

4. 나의 MVC패턴 적용 전 / 후 Server Tree

5. 후기

 

0. 잊고 있던 디자인 패턴 ( MVC 패턴)

 

글 작성을 시작하기 전에

 

디자인 패턴... 이전에 국비교육을 다닐 때 지나가는 듯이 들었던 기억이 있다

 

그리곤 나중에 제대로 알아봐야겠다라고 생각하고 잊어버렸던 거 같다

 

그렇게 어느 날...

 

친한 N사 백엔드 개발자를 만나면서 궁금해하길래 내 gitHub를 보여줬다

 

그 녀석이 보자마자 하는 말은...

 

뭐야 형... 이거 패턴이 왜 이래?

이야기를 듣고 나선 아차 싶으면서 잊었던 디자인패턴이라는 것이 생각났다

 

그렇게 다시 디자인패턴을 알아봐야겠다라고 생각 했고

 

그중에서도 MVC패턴을 찾아서 적용해보려고 한다

 

 

 

 

1. MVC패턴이란 ?

 

MVC 패턴

 

2. MVC 패턴 선점이유

 

• 애플리케이션을 구성할 때 각자 맡은 역할대로 소스코드를 구분하여 코딩하고 유지보수 및 신규기능 추가를 더 수월하게 하겠다는 의도
• Java에서 매우 많이 쓰이는 패턴으로 같이 작업하는 백엔드 인원들이 다가오기 수월한 패턴이라고 생각해서 적용

 

3. MVC 패턴에 대한 설명

• Model
  • 데이터를 관리하고 처리, 데이터베이스, 처음의 정의하는 상수, 초기화값, 변수
  • MySQL로 Sequelize를 사용해서 ORM 하여 DB를 구성
• View
  • 사용자에게 보이는 인터페이스를 제공
• Controller
  • 사용자의 요청을 처리하고 Model과 View를 연결
  • 기능을 수행하는 함수들 및 로직 폴더, 대부분의 요청에 대한 처리, 함수 선언을 한 곳에 모아둔 폴더
  • 데이터와 사용자인터페이스 요소들을 잇는 다리역할
    • 사용자가 데이터를 클릭하고, 수정하는 것에 대한 "이벤트"들을 처리하는 부분

 

4. 나의 MVC 패턴 적용하기 전 / 후 Server Tree

 

MVC 패턴을 적용하기 전

 

나에게는 익숙했지만... 일을 같이 하는 개발자들이 다가가기 어려웠다고 이야기를 했었다

 

그래서 고민고민하다가 Java Spring에서 많이 쓰인다고 하는 MVC패턴을 적용했다

 

4-1. 적용 전 백엔드 서버 Tree

 

├─config

├─build

├─models

├─src

└─upload

.env

.gitignore

.prettierrc

package.json

README.md

index.ts

tsconfig.json

before_Tree

이런 식으로 그냥.. config폴더에 DB 설정파일 두고 models에는 DB 테이블 관련 파일들...

그 외 소스파일들은 src 폴더에 싹 다 집어넣고 사용했다

 

그때 당시에는 몰랐지만, 같이 이방식으로 공부한 게  아니라면 다들 어려워할 수 있다는 걸 알아챘다

 

 

4-2. 적용 후 백엔드 서버 Tree

 

├─config

├─controllers

├─models

├─routes

├─upload

└─utils

.env

.gitignore

.prettierrc

package.json

README.md

server.ts

tsconfig.json

 

after MVC 패턴 적용 후

 

• config : 서버와 DB가 시작할 때 처리되는 파일들을 모아둔 폴더
• controllers : 기능에 따른 관리 파일들을 모아둔 폴더
• models : DB의 테이블명과 해당 컬럼들의 대한 속성 파일들을 모아둔 폴더
• routes : 사용자의 요청에 따른 API url 분산해둔 폴더
• upload : 업로드된 파일을 저장해 두는 폴더
• utils : 기타 자주 쓰이거나 공통으로 사용하는 모듈, 설정 값들을 관리 (interface, multer 등등)

 

5. MVC 패턴 적용 후기

 

위와 같이 기능에 대한 controller를 나눠서 쪼개놨더니 기존에 Java를 배우던 개발자들이 보기 쉬워졌다고

 

그제야 이야기해 줬다 ㅋㅋㅋㅋ

 

( 불편한 거 있으면 이야기해 줘.... 난 몰랐단 말이야...)

 

폴더 내 파일이름도 기능+Controller로 하자고 해서 적용했고

 

단순히 API 라우터 내에 실행되는 기능들도 네이밍을 해서 함수화 하여서 controller에 분리해두니

 

협업하는 과정에서 다들 이전보다 편하다고 이야기해 줬다

 

사실 이 지금이 상태도 MVC를 적용하고 직후의 상태는 아니다

 

계속해서 바꾸고 바꾸고 공통적으로 사용하거나 각 파일별 interface파일은 별도로 존재했다가 하나로 합치는 등

 

누군가 이런 식으로 하면 어때? 혹은 변화를 주고 회의를 진행함으로써 조금이라도 편하고 보편화된 방법을 수용하려고

 

노력 중에 있다

 

P.S 뭐.. ㅋㅋㅋ 많은 분들이 보고 있지는 않지만 누군가 보고 좀 더 괜찮은 방법이 있다면 따끔하게 알려주세요!!!

 

감사합니다 !!