좀 더 쉽고 편리한 구조를 사용해보자! MVC 패턴 (2024.04.12)

YJ·2024년 4월 17일
post-thumbnail

블로그 작성법
목표 > 공부한 내용 > 얻었고, 앞으로 이걸 해봐야지 적기

✋ 수업 목표

  • MVC 패턴에 대해 배우자.
  • Java Swing 에 대해 배우자.

🤔 공부한 내용

MVC

대규모 프로젝트를 만들때 많이 사용되는 패턴인 MVC에 대해 알아보자.

MVC란?

출처: https://www.freecodecamp.org/news/the-model-view-controller-pattern-mvc-architecture-and-frameworks-explained/

  • Model: BE - DB, 로직
    데이터를 저장, 조회, 수정, 삭제 + 로직도 관리
    각종 백엔드의 일들을 여기서 처리
  • View: FE - 화면
  • Controller
  1. View를 켜는 역할
  2. 데이터를 전달 받기는 하나 자기가 가지지는 못하고 Model에게 전달

MVC 예시

  1. 사과 검색 > 사과 결과
  2. 사용자 입력: View
    엔터/검색 버튼 클릭
    : View -> 데이터를 전달 -> Controller -> 데이터를 전달 + 연산 요청 -> Model -> 데이터 연산 : Model -> 결과 전달 -> Controller -> 결과 전달 -> View
    다음 페이지 (원하는 결과를 들고 나타남)

화면이랑 로직은 분리 시켜놔야한다.
View 따로, Model 따로 독립적으로 분리시켜놔야한다.

MVC 장점

  • 각 구성 요소의 역할이 명확하게 분리되어 있어, 코드의 가독성과 유지 관리가 용이.
  • 구성 요소간의 낮은 결합도로 인해, 코드의 재사용성이 높아지며, 개별 구성 요소를 독립적으로 개발, 수정 및 테스트할 수 있습니다.
  • 동일한 모델을 여러 뷰에서 사용할 수 있으므로, 애플리케이션의 유연성이 향상됩니다.

MVC 도식도

MVC 문제

Main 함수에서 View를 통해 데이터를 전달하고, Controller에서 View로 부터 전달받은 데이터를 Model에게 전달하면서 연산을 요청하고 Model에서는 데이터를 연산하여 다시 Controller에게 보내고, Controller는 Model로부터 전달받은 데이터를 다시 View로 보내며 View에서는 연산된 결과 데이터를 화면에 뿌려주는 로직이 필요하다. 그러나, 문제는 View를 어떻게 실행하지에서 시작하였다.
Controller 부터 실행되는 문제가 발생한다.
어떻게 해결해볼까?

CalcDemo.java

public class CalcDemo {
    public static void main(String[] args) {
        new CalcController(new CalcModel());
    }
}

위 코드는 Java 프로그램을 시작하는 Main 함수 코드이다.
위 코드를 보면,
CalcController를 생성하면서 인자로 CalcModel을 생성하여 전달한다.
그러면, CalcView는 어디서 실행될까?
위에서 MVC 패턴의 로직을 보면,
첫 단계에서 View를 통해 Controller에게 데이터를 전달하는 과정 이 필요하다.
그러나, 현재 Main 함수를 보면 CalcView를 생성하는 부분이 보이지 않다. 어디서 생성되는 거지....?

CalcController.java

public class CalcController {
    CalcModel calcModel;

    // 모델 객체의 메소드 호출
    CalcController(CalcModel calcModel) {
        this.calcModel = calcModel;
        new CalcView(this);
    }

    // 메소드 -> 모델.plus();
    // 자바에서 값을 전달하는 방법은 '매개변수' 밖에 없다.
    public int plus(int num1, int num2) {
        return calcModel.plus(num1, num2);
    }
    // 버튼이 눌리면 데이터를 전달
}

방법은 바로 Controller를 생성할 때,
전달 받은 Model은 필드로 할당해주고
View는 새로 생성하여 this 키워드로 CalcView에 할당해주는 것이다.

CalcView.java

public class CalcView extends JFrame implements ActionListener {
    JTextField tf_num1 = new JTextField();
    JTextField tf_num2 = new JTextField();

    JButton btn_plus = new JButton("더하기");

    JLabel la_result = new JLabel("결과 출력");
    CalcController calcController;

    CalcView(CalcController calcController) {
        this.calcController = calcController;

        btn_plus.addActionListener(this);

        setSize(300, 200); // 창 크기
        setLayout(null); // 레이아웃 매니저 초기화

        tf_num1.setBounds(50, 50, 50, 40);
        tf_num2.setBounds(100, 50, 50, 40);
        btn_plus.setBounds(150, 50, 80, 40);
        la_result.setBounds(50, 100, 200, 40);


        add(tf_num1);
        add(tf_num2);
        add(btn_plus);
        add(la_result);

        // 창을 끄면, 프로그램 종료
        setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);

        setVisible(true);
    }

    @Override
    public void actionPerformed(ActionEvent e) {
        if (e.getSource() == btn_plus) {
            int num1 = Integer.parseInt(tf_num1.getText());
            int num2 = Integer.parseInt(tf_num2.getText());

            la_result.setText(
                    Integer.toString(calcController.plus(num1, num2)));
        }
    }
}

View는 java swing으로 개발해보았다.
이를 사용하기 위해, View class에서 JFrame을 상속하여 사용하였다.
actionPerformed 메서드에서 calcController의 plus 메서드를 호출하여
연산 버튼을 눌렀을 때,
사용자가 입력한 두 변수 값을 Controller로 전달하였다.
그리고 Controller는 Model로 값을 전달하였다.

CalcModel.java

/*
 * DB, 로직 : 데이터 처리
 */
public class CalcModel {
    // 매개변수 정수 2개 return 합
    public int plus(int num1, int num2) {
        return num1 + num2;
    }
}

Model에서는 Controller에서 전달 받은 데이터를 연산하여 다시 Controller로 반환하는 로직을 작성하였다.

위 코드들을 통해
View에서는 화면만을 담당하도록 하였다.
Controller에서는 View를 생성하고, 데이터를 올바른 처리 Model에게 전달하는 역할을 담당하도록 하였다.
Model에서는 Controller에서 데이터를 전달 받아 데이터를 관리하는 로직을 담당하도록 하였다.

😉 앞으로 이걸 해봐야지

앞으로 이제 Spring을 배울 것이다.
Spring에서는 MVC 패턴을
View - Controller - Service - Repository - DB
이런 형식으로 아키텍처를 구성하며
데이터를 전달하기 위해
DTO, Entity 등의 객체를 생성하여 전달한다고 알고 있다.

오늘 배운 MVC 패턴을 앞으로 진행할 프로젝트에 적용해보고
MVC의 유용성을 느껴보고 싶다.

profile
dev

0개의 댓글