모던 자바스크립트 입문 - Chapter 17: MVC 모델에 기반을 둔 프로그램 설계 💻

자바스크립트로 복잡한 애플리케이션을 개발하다 보면 코드가 점점 복잡해지고 관리하기 어려워집니다.

모든 기능을 한 곳에 몰아넣으면 나중에 수정하거나 기능을 추가할 때 어디서부터 손을 대야 할지 막막해지죠.

이번 포스트에서는 코드를 체계적으로 구조화할 수 있는 MVC 모델 프로그램 설계 방법을 알아보겠습니다.

 

📌 목차

• MVC가 뭔가요?

---

📝 MVC가 뭔가요?

MVC는 Model-View-Controller의 줄임말로, 프로그램을 세 가지 역할로 나누어 구조화하는 설계 패턴입니다.

• Model (모델): 데이터와 비즈니스 로직을 담당
• View (뷰): 사용자에게 보여지는 화면을 담당
• Controller (컨트롤러): 사용자 입력을 처리하고 Model과 View를 연결

왜 MVC를 사용할까요?

// MVC 없이 작성한 코드 (모든 것이 섞여있음)
function updateCounter() {
    let count = 0; // 데이터
    count++; // 로직
    document.getElementById('display').textContent = count; // 화면 업데이트
    console.log('카운트:', count); // 출력
}

 

위 코드처럼 모든 것이 섞여있으면:

• 코드 수정이 어려움
• 재사용성이 떨어짐
• 테스트하기 복잡함

MVC로 구조화하기

// Model: 데이터와 로직 담당
class CounterModel {
    constructor() {
        this.count = 0;
    }
    
    increment() {
        this.count++;
        return this.count;
    }
    
    getCount() {
        return this.count;
    }
}

// View: 화면 표시 담당
class CounterView {
    constructor() {
        this.display = document.getElementById('display');
        this.button = document.getElementById('btn');
    }
    
    updateDisplay(count) {
        this.display.textContent = count;
    }
    
    bindButtonClick(handler) {
        this.button.addEventListener('click', handler);
    }
}

// Controller: Model과 View 연결
class CounterController {
    constructor(model, view) {
        this.model = model;
        this.view = view;
        
        // 버튼 클릭 이벤트 연결
        this.view.bindButtonClick(() => {
            const newCount = this.model.increment();
            this.view.updateDisplay(newCount);
        });
    }
}

// 사용법
const model = new CounterModel();
const view = new CounterView();
const controller = new CounterController(model, view);

MVC의 장점

• 관심사 분리: 각 부분이 명확한 역할을 가짐
• 재사용성: Model은 다른 View에서도 사용 가능
• 테스트 용이성: 각 부분을 독립적으로 테스트 가능
• 유지보수성: 한 부분을 수정해도 다른 부분에 영향 최소화

---

📚 마무리 정리

오늘 배운 MVC 모델을 정리하면:

 

MVC 패턴의 핵심

• Model: 데이터와 비즈니스 로직 분리
• View: 사용자 인터페이스만 담당
• Controller: 사용자 입력 처리와 Model-View 연결

💡 오늘 새롭게 알게 된 것

• MVC 패턴이 단순히 코드를 나누는 것이 아니라 각각의 명확한 책임을 부여하는 것입니다.
• 복잡한 애플리케이션도 작은 단위로 나누면 관리하기 쉬워진다는 점입니다.
• 생명 게임처럼 간단한 규칙으로도 복잡한 패턴을 만들 수 있다는 점입니다.

🤔 어려웠던 점

• 처음에는 코드가 오히려 복잡해 보일 수 있을거라고 생각이 듭니다.
• Model, View, Controller 간의 적절한 역할 분담을 정하는 것입니다.

🎯 다음 학습 계획

다음 포스팅에서는 생성자와 클래스 구문에 대해 알아보겠습니다.