210. 모델-뷰-컨트롤러 (MVC, Model-View-Controller) - UI 비즈니스 로직 분리 웹 애플리케이션 스프링 프레임워크 아키텍처 패턴 프론트엔드 백엔드

핵심 인사이트: 옛날 초보 웹 개발자는 login.jsp 파일 1개 안에 HTML(디자인 껍데기) 코드와 자바(Java) DB 접속 코드를 위아래로 미친 듯이 섞어 짰다. 화면을 파란색으로 바꾸려다 실수로 DB 코드를 건드려 회사가 망했다. 빡친 선배들이 외쳤다. "야! 웹 개발할 때 제발 3개로 칼같이 찢어놔! 사용자 눈에 보이는 예쁜 껍데기(View) 폴더 하나 파! 그리고 DB에서 데이터 물고 오는 놈(Model) 폴더 따로 파! 마지막으로 사용자가 버튼 누르면 '야 모델! DB 긁어와! 야 뷰! 긁어온 데이터로 예쁘게 화면 그려!'라고 중간에서 지휘하는 뇌(Controller) 폴더를 파! 이 3개가 서로 침범하지 않게 격리해라!!" 전 세계 모든 웹 프레임워크(Spring, Django)의 심장을 지배하는 영원한 진리, MVC 패턴이다.

Ⅰ. 스파게티 코드의 끔찍한 말로

  • 화면 UI 코드와 데이터 처리 코드가 뒤섞이면 디자이너와 백엔드 개발자가 같은 파일을 열고 싸워야 합니다. "야 네가 HTML 태그 건드려서 내 자바 코드 터졌잖아!" (협업 불가, 유지보수 극악).

Ⅱ. MVC (Model-View-Controller) 패턴의 개념 🌟

  • 개념: 사용자 인터페이스(UI)가 있는 애플리케이션을 개발할 때, 시스템을 역할을 명확하게 구분한 3가지 핵심 컴포넌트인 **M(모델: 데이터와 비즈니스 로직), V(뷰: 화면과 UI), C(컨트롤러: 이 둘을 이어주는 지휘자)**로 완벽하게 쪼개어 설계하는 아키텍처 패턴입니다.

Ⅲ. MVC 3대 천왕의 철저한 역할 분담 🌟 핵심 기출 🌟

이들의 룰을 어기면 MVC를 쓰는 의미가 없습니다.

1. Model (모델) - "순수한 데이터와 두뇌"

  • 역할: 애플리케이션의 핵심인 **정보(Data)와 그 정보를 처리하는 비즈니스 규칙(로직)**을 몽땅 짊어진 놈입니다. (예: 유저의 잔고 데이터, 송금 수수료 계산 공식).
  • 절대 룰: 모델은 자기가 처리한 데이터가 '파란색 글씨로 그려질지, 모바일 화면으로 그려질지(View)' 단 1%도 몰라야 합니다. 오직 순수한 데이터 덩어리와 연산에만 집중하는 장인입니다.

2. View (뷰) - "멍청한 화가"

  • 역할: 사용자의 눈에 보이는 화면(HTML, CSS, UI 픽셀)을 예쁘게 그리는 역할만 전담합니다.
  • 절대 룰: 뷰는 뇌가 없습니다! 뷰 안에 데이터 계산 로직이나 DB 비밀번호가 들어있으면 미친 짓입니다. 오직 컨트롤러가 "자, 이 데이터(이름: 홍길동)로 화면 띄워!" 하고 던져주는 재료만 받아서 빈칸에 예쁘게 색칠만 하는 멍청한 화가여야 합니다.

3. Controller (컨트롤러) - "오케스트라 지휘자" 🌟

  • 역할: 모델과 뷰는 서로 얼굴을 모릅니다. 둘을 이어주는 절대적인 브로커이자 지휘자입니다.
  • 동작 흐름 (웹사이트 클릭 시):
    1. 유저가 '장바구니 보기' 버튼을 클릭하면, 그 요청(Request)이 Controller의 입으로 꽂힙니다.
    2. Controller가 지시합니다. "어이 Model! 쟤 장바구니 DB 엑셀 파일 당장 긁어와!"
    3. Model이 데이터를 긁어와서 Controller에게 던져줍니다.
    4. Controller는 그 데이터를 들고 이번엔 View에게 던집니다. "야 View! 내가 Model한테 받아온 이 장바구니 데이터 넣어서 예쁜 HTML 웹페이지 한 장 뚝딱 그려내!!"
    5. 뷰가 그린 완성된 HTML 화면을 유저 모니터에 뿌려줍니다.

Ⅳ. 왜 MVC가 전 세계 표준인가?

  1. 분업의 기적: 백엔드 자바 개발자는 Model과 Controller 폴더만 봅니다. 프론트엔드 디자이너는 View 폴더만 봅니다. 파일이 완벽히 쪼개져 있어 서로 코드 충돌(Conflict)이 나지 않습니다.
  2. 미친 재사용성: 똑같은 장바구니 데이터(Model)를 가지고, Controller가 "웹 브라우저 View로 그려!" 하면 PC 홈페이지가 되고, "안드로이드 View로 그려!" 하면 모바일 앱이 됩니다. 심장(Model)은 단 1줄도 안 고치고 껍데기(View)만 무한대로 재활용할 수 있는 기적입니다.

📢 섹션 요약 비유: 코딩 창에 화면과 로직을 다 섞어 짜는 짓은 식당에서 **'요리사 혼자 손님 테이블에 앉아 고기를 썰고 불판을 피우고 돈까지 받는 짓'**입니다. 테이블이 더럽고 요리도 다 태워 먹습니다. 이를 분리한 MVC 아키텍처는 철저하게 분업화된 **'최고급 3성급 레스토랑'**입니다. **View(뷰)**는 손님의 눈을 즐겁게 하는 화려한 **'인테리어와 접시 플레이팅'**입니다. 접시(View)는 자기가 무슨 요리를 담을지 생각하지 않고 그저 예쁘게 세팅만 준비합니다. **Model(모델)**은 주방 안쪽 보이지 않는 곳에서 고기를 굽고 육수를 끓이는 **'메인 셰프'**입니다. 셰프는 자기가 구운 고기가 금접시에 담길지 은접시에 담길지(UI) 알 바 아닙니다. 오직 완벽한 맛(데이터)에만 집중합니다. 마지막으로 **Controller(컨트롤러)**는 홀과 주방 사이를 뛰어다니는 **'수석 지배인(매니저)'**입니다. 손님이 주문을 하면 지배인(컨트롤러)이 받아 셰프(모델)에게 고기를 구우라 시키고, 다 구워진 고기를 가져다 접시(뷰) 위에 예쁘게 담아 손님 테이블에 내어줍니다. 셰프와 접시가 1도 마주칠 일 없이, 지배인의 완벽한 통제 하에 최고의 요리와 서비스가 분리되어 창출되는 소프트웨어 공학 최고의 교과서 구조입니다.