MVC을 다시 정리해보고, 적용해보자

🤔 우아한 테크코스 프리코스를 진행하며 상호간 코드리뷰를 할때 MVC 패턴을 많이 사용하시는 것을 봤다.
MVC가 무엇이고, 왜 사용하는지, 그리고 1주차 미션을 다시 보면서 어떻게 적용해볼 수 있을지 정리해보았다.

MVC?

MVC는 Model(모델), View, Controller로 구성되어있는 사용자 인터페이스와 데이터 제어를 구현하는데 사용되는 소프트웨어 디자인 패턴이다. 비즈니스 로직과 UI를 구분하는 것에 중점적으로 초점을 맞추고있다.

Model

모델은 프로그램에 필요한 데이터의 상태를 저장하고 관리한다. 그리고 데이터의 변동사항이 VIew에 반영될 수 있게끔한다. 사용자 UI나 컨트롤러와 별개로 존재한다.

View

프로그램의 데이터를 보여주는 방식을 정의하는 역할을 한다.

Model의 데이터를 시각적으로 보여주고, 사용자와 상호작용하는 인터페이스를 제공한다. 그리고 모델 상태 변경에 따라 UI를 업데이트 한다.

Controller

사용자 입력을 처리해서, 그에 따라 모델과 뷰를 업데이트하는 역할은 한다. 모델의 상태 변화를 감지하고, 상태 변화가 발생히면 변경에 대한 View의 업데이트를 담당한다.

MVC패턴을 사용하는 이유

• 각 컴포넌트가 독립적으로 존재하기 때문에 오류를 수정하고나, 요구사항에 따라 기능이 추가될 때 서로 영향을 받지 않는다.

• 독립적으로 존재하기 때문에 재사용성이 높다. 특히 모델과 뷴의 경우 여러 컨트롤러와 조합이 가능하다.

• 각 컴포넌트가 분리되어 있기 때문에 유닛 테스트, 통합텟스트를 독립적으로 수행이 가능하다.

• 각 컴포넌트의 역할이 명확하게 나누어져 있기 때문에 상호간 의존도가 낮아 프로그램의 복잡도가 낮다.

• 다른 컴포넌트와 연관이 없이 독립적이기 때문에 코드를 읽고 이해하기 쉽다.

MVC 적용해보기

❗ 우아한 테크코스 6기 프리코스 1주차 레포지토리
https://github.com/woowacourse-precourse/javascript-baseball-6

Model

• BaseBallNumber
  • 데이터: 랜덤 숫자 3개
  • 연산: checkResult : 볼/스트라이크 카운트

View

• InputView
  • getThreeNumber: 세 개 숫자를 입력받는다.
  • getEndGameManageNumber: 게임이 끝났을 때, 게임 재시작/종료를 위한 숫자를 입력받는다.
• OutputView
  • printGameStart: 게임 시작 문구를 출력한다.
  • printResult: 볼/스트라이크 현황을 출력한다.
  • printEndGame: 게임 종료 문구를 출력한다.

Controller

• GameController : 숫자게임의 흐름을 담당한다.

Reference

https://developer.mozilla.org/ko/docs/Glossary/MVC

https://ko.wikipedia.org/wiki/모델-뷰-컨트롤러