FE코크
탄산 가득 시원한 개발일지
FE코크
전체 방문자
오늘
어제
  • 분류 전체보기 (43)
    • 우아한테크코스 (22)
      • 우아한테크코스4기 (4)
      • 우아한테크코스3 (10)
      • 회고록 (8)
    • Web (0)
      • HTTP 웹 기본지식 (0)
    • JavaScript (2)
    • React.js (12)
    • 알고리즘 풀이 (2)
    • HTML, CSS (4)
    • 기타 (1)
      • 일상 (0)
      • 후기 (1)

블로그 메뉴

  • 홈
  • 태그
  • 방명록

공지사항

인기 글

태그

  • CSS
  • 회고
  • 노마드코더
  • react.js
  • prop drilling
  • 프론트엔드
  • 주간회고
  • 알고리즘
  • 백준
  • JavaScript
  • React.DOM
  • 우테코
  • state
  • jsx
  • 4기
  • 우테코4기
  • 우아한테크코스 3기
  • 리액트
  • 코어자바스크립트
  • react
  • Reactjs
  • Props
  • 회고록
  • 재택하고싶은데
  • createRoot
  • 개발자
  • 레벨1회고
  • 자바스크립트
  • 우아한테크코스
  • 프리코스

최근 댓글

최근 글

티스토리

hELLO · Designed By 정상우.
FE코크

탄산 가득 시원한 개발일지

우아한테크코스 3기 프리코스 최종 미션(3) - MVC패턴
우아한테크코스/우아한테크코스3

우아한테크코스 3기 프리코스 최종 미션(3) - MVC패턴

2021. 1. 8. 15:30
MVC 패턴이란?
Model, View, Controller 역할 및 규칙
MVC패턴으로 미션하기
참고

MVC패턴이란?

Model, View, Controller의 약자로 소프트웨어 공학에서 사용되는 소프트웨어 디자인 패턴 중 하나이다.

 

디자인 패턴이란?

소프트웨어를 개발하는 중에 발생했던 문제점들을 정리하여 자주 발생하는 문제들을 해결하기 위해 규칙을 정해 놓은 개발 방법으로 모듈이나 기능을 재사용하고 같은 규칙으로 인해 팀원들 간의 소통을 원활하게 해주는 것을 말한다.

 

이렇게 만들어진 MVC패턴을 자세히 알아보면

Model : 애플리케이션의 데이터, 자료, 사용자가 필요로 하는 데이터를 의미하고 DB의 테이블과 대응된다.
View : 사용자에게 보여주는 User Interface를 의미한다.
Controller : Model과 View를 연결시켜주고 이벤트들을 처리, 흐름 제어를 담당한다.

MVC 패턴

MVC패턴의 로직을 보면

출처 생활코딩

즉 MVC 패턴은 Model, View, Controller 각각의 역할에 따라 기능을 분리하여 유지보수를 용이하게 하고 프로그램의 확장성을 높이는 방법이다. 

Model, View, Controller 역할 및 규칙

Model

애플리케이션의 정보, 데이터를 나타내며 데이터베이스, 상수, 문자열 등 이와같은 변수들이 데이터에 해당된다.

또한 Model에서는 View나 Controller에 대한 정보가 전혀 없으며, 데이터의 변경에 대한 처리방법을 구현해야 한다.

View

텍스트박스, 라벨, 버튼 등 사용자 인터페이스 요소들을 나타내며 데이터 및 객체의 입력 및 출력을 담당한다.

즉 사용자들에게 보여지는 화면이다. View에서는 Model이나 Controller에 대한 정보가 전혀 없으며, 화면에 필요한 정보를 저장하지 않아야 하고, 그저 전달 받은 데이터를 화면에 보여주기만 해야 합니다. Model과 같이 변경이 일어난다면 변경에 대한 처리방법을 구현해야 한다.

Controller

Model(데이터)과 View(사용자 인터페이스)를 연결하는 역할을 합니다. 즉, 사용자가 데이터를 클릭하고 수정하는 것에 대한 이벤트를 처리하는 부분이다. Controller는 Model이나 View에 대한 정보가 있어야 한다. Model이나 View의 변경을 모니터링 해야 한다. 애플리케이션의 메인 로직 역할을 한다.

 

MVC패턴으로 미션하기

프리코스 미션 Model

프리코스 최종 미션을 보면 초기 데이터 설정 부분이 있다. 이 데이터가 MVC패턴의 Model이다.

초기 데이터 설정

프리코스 미션 View

미션의 화면을 MVC 패턴의 View이다.

 

 

미션에 대해 잠시 설명하면 사용자가 데이터를 입력하면 Model에 있는 데이터와 비교하고 결과값을 도출하기 위한 특정 로직을 통해 얻은 결과값을 다시 화면에 출력하는 미션이다.

 

다시 화면을 보면 화면에서 데이터를 입력 받는 부분과 결과를 보여주는 부분으로 나눌수 있다

 

사용자가 데이터를 입력하면 View에 입력된 데이터를 Controller에서 이벤트를 처리를 통해 Model에서 입력된 데이터와 비교하고 로직을 거쳐 결과값을 도출하여 다시 View에 화면에 보여줄 데이터를 보내준다.

 

프리코스 미션 Controller

Model과 View의 변경을 모니터링하면서 이벤트처리 및 애플리케이션의 흐름을 제어하는 메인 로직 역할을 한다.

 


참고

luckygg.tistory.com/182

 

[Design Pattern] MVC(Model-View-Controller) 패턴 이야기 #1

MVC 패턴의 필요성 디자인 패턴을 알기 전에는 하나의 클래스 안에 온갖 코드가 존재했었습니다. 기능별로 그리고 성격에 따라 아무리 모듈화 하였다고 한들, 예를 들어 버튼 컨트롤의 이벤트에,

luckygg.tistory.com

wooaoe.tistory.com/15

 

[개발자 면접 대비] MVC 패턴 이란? (Model 1, Model 2)

MVC 패턴 파헤치기 https://coding-factory.tistory.com/69 참고 👩‍💻 MVC 패턴이란? MVC - Model, View, Controller의 합성어로 소프트웨어 공학에서 사용되는 소프트웨어 *디자인 패턴이다. *디자인 패턴이..

wooaoe.tistory.com

m.blog.naver.com/jhc9639/220967034588

 

[개발자 면접준비]#1. MVC패턴이란

​오늘은 개발자면접에 많이 나오기도 하는 MVC패턴에 대해서 알아보고자 합니다. 과연 MVC패턴이 무...

blog.naver.com

 

'우아한테크코스 > 우아한테크코스3' 카테고리의 다른 글

우아한테크코스 3기 프리코스 최종 미션(5) - App 설정  (0) 2021.01.08
우아한테크코스 3기 프리코스 최종 미션(4) - 데이터초기설정  (0) 2021.01.08
우아한테크코스 3기 프리코스 최종 미션(2) - 개발 환경 설정 & 파일 구조  (0) 2021.01.08
우아한테크코스 3기 프리코스 최종 미션(1) - 미션 내용  (0) 2021.01.07
우아한테크코스 3기 프리코스 최종 미션  (0) 2021.01.07
    '우아한테크코스/우아한테크코스3' 카테고리의 다른 글
    • 우아한테크코스 3기 프리코스 최종 미션(5) - App 설정
    • 우아한테크코스 3기 프리코스 최종 미션(4) - 데이터초기설정
    • 우아한테크코스 3기 프리코스 최종 미션(2) - 개발 환경 설정 & 파일 구조
    • 우아한테크코스 3기 프리코스 최종 미션(1) - 미션 내용
    FE코크
    FE코크
    공부한 내용을 적는 블로그

    티스토리툴바