MVVM 패턴

MVVM (Model-View-ViewModel) 패턴을 다음과 같이 정의하고 있습니다.

마크업 언어나 GUI 코드를 비즈니스 로직 또는 백엔드 로직과 분리하여 개발하는 소프트웨어 디자인 패턴

이 정의를 다시 정리해 보면 '화면 앞단(프론트엔드)의 화면 동작과 관련된 로직과 화면 뒷단(백엔드)의 데이터베이스 데이터 처리 로직을 분리하여 더 깔끔하게 코드를 구성한다'는 것입니다.

 

참고로 웹 초창기에는 프런트엔드 영역이라는 구분이 따로 없었습니다. 화면 요소를 꾸미는 HTML, CSS코드와 데이터베이스에서 데이터를 가져와 제어하는 Java코드가 한 파일에 섞이면서 가독성이 현저하게 떨어졌습니다. 이러한 코드 떄문에 작성자뿐만 아니라 협업자들도 소스 코드를 읽는 데 애를 먹었습니다.

그래서 이러한 문제점을 해결하기 위한 일환으로 MVVM 패턴을 사용하기 시작 한 것이죠. MVVM 패턴은 Vue뿐만 아니라 최신 프론트엔드 프레임워크인 리액트에도 적용되어 있을 정도로 요즘에는 대중적인 화면 개발 패턴으로 자리매김했습니다.