우테코 프리코스 1주차 미션이 끝나고 다른 사람들의 코드를 보니 프론트임에도 불구하고 많은 분들이 객체 지향적으로, MVC 패턴을 적용해 코드를 구현한 사실에 놀랐다.

나는 하나의 App.js 파일 안에 모든 로직을 구현했다. 그래서인지 하나의 클래스에서 하는 역할이 여러가지라서 가독성도 떨어지고 코드가 지저분해 보였다. 따라서 적절한 기준에 맞춰 최대한 코드를 분리하는 것이 필요하다고 생각했다.

실제 다른 MVC 패턴을 적용한 코드들은 한 곳에 모든 코드를 두지 않고 '1 클라스 1 역할'을 목표로 코드가 깔끔하고 가독성이 좋으며 유지보수에도 뛰어나 보였다. 또한 우테코 커뮤니티 채널에도 MVC 패턴, 객체지향적 코드에 대한 얘기가 끊임없이 나오는 모습을 보고 이것들의 중요성을 깨닫고 학습을 시작하게 되었다.

MVC 패턴 학습을 통해 1주차 코드도 리팩토링하고 2주차에도 이를 적용해 코드를 짤 계획이다.

1. MVC 패턴

모델-뷰-컨트롤러(model–view–controller, MVC)는 소프트웨어 공학에서 사용되는 소프트웨어 디자인 패턴이다. 이 패턴을 성공적으로 사용하면, 사용자 인터페이스로부터 비즈니스 로직을 분리하여 애플리케이션의 시각적 요소나 그 이면에서 실행되는 비즈니스 로직을 서로 영향 없이 쉽게 고칠 수 있는 애플리케이션을 만들 수 있다.

그리고 과거에는 View에 모든 비즈니스 로직까지 넣어 코드의 길이가 길어지고 유지보수가 힘들었으나 최근에는 MVC모델은 코드를 3가지 형태로 나누어 개발을 하는 MVC가 기본적인 디자인패턴이 되어 사용되고 있다

(출처: https://youtu.be/ogaXW6KPc8I?si=gcZfUdlsLThoH1Hq)

• model은 데이터 관련된 부분
• controller는 모델과 뷰의 중개자 역할을 하는 부분
• view는 사용자한테 보여지는 부분

2. MVC를 지키며 코딩하는 방법 (5가지 원칙)

(1) model은 controller와 view에 의존하지 않아야한다.
= model 내부에 controller와 view에 관련된 코드가 있으면 안됨
view에서 import로 사용하지 않아야한다

(2) view는 오직 model에만 의존해야 한다. controller에는 의존하면 안된다.
view 내부에는 model의 코드만 있을 수 있고 controller의 코드가 있으면 안된다.

(3) view가 model로부터 데이터를 받을 때는 사용자마다 다르게 데이터를 보여주어야 하는 데이터에 대해서만 받아야한다.
UI(레이아웃) + model로부터 받은 데이터 = view 인 것이다.

(4) controller는 model과 view에 의존해도 된다.
= controller 내부에는 model과 view의 코드가 있을 수 있다.
왜냐하면 controller는 중개자 역할이면서 전체 로직을 구성하기 때문이다.

(5) view가 model로부터 데이터를 받을 떄 반드시 controller에서 받아야 한다.

3. MVC 패턴의 구성 요소 - Model, View, Controller

(1) Model

모델은 컨트롤러가 호출을 하면 DB와 연동하여 사용자의 입출력 데이터를 다루는 일과 같은 데이터와 연관된 비즈니스 로직을 처리하는 역할을 한다.

(2) View

View는 사용자에게 화면(UI)을 보여준다. 사용자와 상호작용을 하며 컨트롤러로부터 받은 모델의 결과값을 사용자에게 화면으로 출력하는 일을 한다.

(3) Controller

Controller는 Model과 View 사이를 이어주는 인터페이스 역할을 한다. 즉, Model이 데이터를 어떻게 처리할지 알려주는 역할을 한다.