[TIL]20241113 MYVM 디자인 패턴

 

▶MYVM 디자인 패턴이란?

MYVM은 'Model-View-ViewModel'의 약자로, 원래는 주로 프론트엔드 개발에서 UI와 비즈니스 로직을 분리하기 위해 사용하는 디자인 패턴이다. 이 패턴은 각 구성 요소가 자신의 역할을 명확히 가지며 서로의 결합도를 낮춰 코드의 유지보수성과 확장성을 높이는 것을 목표로 한다. 하지만 이 개념은 백엔드에서도 활용될 수 있다. 특히, 로직과 데이터의 분리를 강조하여 복잡한 백엔드 시스템에서 각 요소가 독립적으로 작동할 수 있도록 도움을 준다.

 

이 패턴은 Model, View, ViewModel로 나뉜다. 

• Model: 시스템의 핵심 데이터와 비즈니스 로직을 담고 있는 부분이다. 데이터베이스와의 상호작용, 도메인 로직을 처리하는 것이 이 영역의 역할이다. 예를 들어, 엔티티 클래스와 관련된 비즈니스 로직이 이 부분에 포함된다.
• View: 사용자가 직접적으로 볼 수 있는 화면이다. 백엔드에서는 실제 사용자가 볼 수 있는 부분은 아니지만, API를 통해 데이터를 제공하는 역할을 한다고 생각할 수 있다. View는 데이터를 사용자에게 전달하거나 사용자로부터 입력받은 데이터를 전달하는 인터페이스 역할을 한다.
• ViewModel: View와 Model 사이에서 중재자 역할을 한다. View와 직접적으로 데이터를 주고받으면서 필요한 데이터를 가공하거나 변환하는 일을 맡는다. ViewModel은 Model의 데이터와 View가 필요로 하는 형태를 맞추는 과정에서 비즈니스 로직을 간단하게 구현할 수 있도록 돕는다.

---

▶MYVM 디자인 패턴의 필요성

MYVM 디자인 패턴을 사용하면 여러 가지 이점이 있다.

첫 번째로, 유지보수성이 높아진다. Model, View, ViewModel의 역할이 명확하게 나누어져 있기 때문에 각 요소가 독립적으로 개발되고 테스트될 수 있다. 예를 들어, 비즈니스 로직이 변경되어도 View와 ViewModel은 영향을 받지 않으며, 반대로 UI가 변경되어도 Model의 로직은 수정할 필요가 없다.

두 번째로, 결합도를 낮추어 코드의 재사용성을 높인다. 각 구성 요소가 독립적으로 존재하기 때문에, 필요한 부분만 쉽게 수정하거나 재사용할 수 있다. 예를 들어, ViewModel에서 데이터를 가공하는 로직을 다른 View에서도 사용할 수 있기 때문에 중복 코드를 줄일 수 있다.

---

▶백엔드에서의 MYVM 적용

MYVM은 주로 프론트엔드에서 UI와 로직을 분리하는 데 사용되지만, 백엔드에서도 응용할 수 있다. 특히 복잡한 비즈니스 로직을 다루는 경우, 이 패턴을 사용하여 데이터 처리 로직과 API 엔드포인트를 명확히 분리할 수 있다. 이를 통해 코드를 더 이해하기 쉽게 만들고, 각 부분을 독립적으로 개발하고 테스트할 수 있다.

예를 들어, 백엔드 API를 개발할 때 클라이언트에게 데이터를 제공하는 컨트롤러에서 비즈니스 로직을 직접 처리하기보다는, 이 로직을 ViewModel로 이동시켜 데이터 처리와 API 요청을 명확히 분리할 수 있다. 이렇게 하면 컨트롤러는 오직 API 요청을 받아들이고, 적절한 서비스를 호출한 후 데이터를 반환하는 일만 담당하게 된다.

 

▷기존의 복잡한 비즈니스 로직을 ViewModel로 이동시켜 컨트롤러의 역할을 단순화한 예

@RestController
public class GamingSetupController {

    private final GamingSetupService gamingSetupService;
    private final GamingSetupViewModel gamingSetupViewModel;

    public GamingSetupController(GamingSetupService gamingSetupService, GamingSetupViewModel gamingSetupViewModel) {
        this.gamingSetupService = gamingSetupService;
        this.gamingSetupViewModel = gamingSetupViewModel;
    }

    @GetMapping("/gaming-setup/{player}")
    public ResponseEntity<GamingSetupResponseDto> getGamingSetup(@PathVariable String player) {
        Optional<GamingSetup> gamingSetup = gamingSetupService.findByPlayer(player);
        if (gamingSetup.isPresent()) {
            GamingSetupResponseDto responseDto = gamingSetupViewModel.convertToResponse(gamingSetup.get());
            return ResponseEntity.ok(responseDto);
        }
        return ResponseEntity.notFound().build();
    }
}

→ 여기서 GamingSetupViewModel 클래스는 데이터를 가공하고 변환하는 책임을 지고 있다. 이렇게 하면 컨트롤러의 역할이 단순화되고, 데이터 처리 로직이 분리되어 더 쉽게 이해할 수 있다.

public class GamingSetupViewModel {

    public GamingSetupResponseDto convertToResponse(GamingSetup gamingSetup) {
        return new GamingSetupResponseDto(
                gamingSetup.getId(),
                gamingSetup.getPlatform(),
                gamingSetup.getPlayer(),
                gamingSetup.getDpi(),
                gamingSetup.getGeneralSens(),
                gamingSetup.getVerticalSens(),
                gamingSetup.getAimSens(),
                gamingSetup.getResolution(),
                gamingSetup.getMonitor(),
                gamingSetup.getMouse(),
                gamingSetup.getKeyboard(),
                gamingSetup.getHeadset()
        );
    }
}

→ GamingSetupViewModel 클래스는 데이터를 가공하고 필요한 형태로 변환하는 역할을 맡는다. 이렇게 ViewModel을 사용하면 View와 Model 간의 의존성이 줄어들고, 각 부분을 독립적으로 수정하고 테스트할 수 있어 코드의 유지보수성이 크게 향상된다.

---

▶MYVM 디자인 패턴과 MVC 패턴의 차이점

MYVM 디자인 패턴과 MVC 패턴은 비슷한 점도 있지만, 몇 가지 차이점이 있다.

• MVC 패턴:
  • Model: 데이터와 비즈니스 로직을 관리하는 부분이다.
  • View: 사용자에게 보여지는 UI를 담당하는 부분이다.
  • Controller: 사용자의 요청을 처리하고 Model과 View를 연결해주는 부분이다.
  MVC에서 Controller는 사용자 요청을 받아 Model을 업데이트하거나 View를 통해 사용자에게 데이터를 제공하는 역할을 한다.
• MYVM 패턴 (Model-View-ViewModel):
  • Model: 데이터와 비즈니스 로직을 포함한다.
  • View: 사용자 인터페이스로, 데이터를 보여주거나 입력을 받는 역할을 한다.
  • ViewModel: View와 Model 사이에서 데이터를 가공하고, 필요에 따라 로직을 처리하는 중재자 역할을 한다.
  MYVM에서는 ViewModel이 View와 Model 간의 중간 다리 역할을 하며, 데이터를 View가 사용할 수 있는 형태로 가공해준다. ViewModel은 UI와의 직접적인 상호작용은 하지 않지만, 데이터를 준비하여 View에 제공하는 역할을 하여 비즈니스 로직의 독립성을 강화한다.
• MVC에서는 Controller가 사용자 요청을 받아 Model과 View를 연결하지만, MYVM에서는 ViewModel이 중간에서 데이터를 가공하고 UI에 맞게 조정하는 역할을 한다. MYVM은 특히 데이터 바인딩을 강조하며, 프론트엔드 프레임워크(예: Angular, Vue)와 함께 사용될 때 유용하다.

백엔드에서는 MVC가 좀 더 전통적인 패턴이지만, MYVM의 개념을 활용해 비즈니스 로직과 데이터 가공 로직을 명확하게 분리함으로써 코드의 복잡성을 줄이고 테스트 용이성을 높일 수 있다.

---

MYVM 디자인 패턴을 적용하며 느낀 점

MYVM 디자인 패턴을 처음 학습하고 적용해보면서 느낀 점은, 코드의 책임을 분리하는 것은 역시나 중요한다는 것이다. 처음에는 Model, View, ViewModel이라는 개념이 조금 복잡하게 느껴졌지만, 각 부분이 맡은 역할을 명확히 이해하고 나니 코드의 구조가 훨씬 깔끔해졌다. 특히, 비즈니스 로직과 데이터 변환 로직이 명확히 분리되면서, 코드의 가독성과 테스트 용이성이 크게 개선되었다. 또한, 이렇게 작성된 코드는 다른 팀원들도 더 쉽게 이해할 수 있다고 생각이되고, 내가 아닌 다른 사람이 이 코드를 수정하거나 확장할 때도 덜 혼란스러울 것이라는 생각이 들었다. 팀 프로젝트에서는 각자 맡은 부분을 명확히 구분하고, 서로의 코드를 쉽게 이해할 수 있는 것이 매우 중요한데, MYVM 패턴은 이러한 협업에 큰 도움이 된다고 느꼈다.

---

MYVM 디자인 패턴은 코드를 더 이해하기 쉽게 만들고, 유지보수성과 확장성을 높이는 데 큰 도움이 된다. 특히 백엔드에서도 데이터 처리 로직과 API 엔드포인트를 명확히 분리하는 방식으로 응용할 수 있다는 점에서 매우 유용하다.