Servlet & JSP 입문 (MVC패턴)

MVC 패턴의 역사

웹 개발의 역사는 결국 **"어떻게 하면 사용자에게 더 빠르고 편하게 화면을 보여줄 것인가?"**에 대한 고민의 과정입니다.

MVC 패턴

1. 흐름 한눈에 보기 (작동 순서)

1. 사용자 (예나님): React 화면에서 버튼을 클릭합니다.
2. 클라이언트 (React): "어이 백엔드! 부산 데이터 좀 줘!"라고 요청을 보냅니다. 이때 보내는 방식이 RESTful 방식입니다. (과거엔 SOAP를 썼지만 너무 무거워서 이제 안 써요!)
3. 백엔드 (Spring Boot): 요청을 받고 DB에서 데이터를 꺼내 예쁘게 가공합니다.
4. 응답: Spring Boot가 RESTful 규칙에 맞춰 데이터(JSON)를 React에게 던져줍니다.
5. 표현 (React): 받은 데이터를 가지고 화면의 필요한 부분만 샥- 바꿉니다.

 

기술	비유	실제 하는 일
React	스마트 키오스크	사용자가 만지는 화면입니다. 버튼을 누르면 서버에 신호를 보내고, 받은 데이터를 화면에 예쁘게 배치합니다.
RESTful	카톡 메시지 형식	React와 Spring Boot가 대화할 때 쓰는 언어 규칙입니다. "가볍고 빠르게 핵심만 말하자!"는 규칙입니다.
SOAP	딱딱한 공문서	RESTful 이전에 쓰던 규칙입니다. 너무 복잡하고 무거워서 요즘 웹/앱 서비스에서는 거의 퇴출되었습니다.
Spring Boot	스마트 주방장	React의 요청을 받아서 실제로 데이터를 찾고 계산하는 로직을 수행합니다. 서버를 돌리는 엔진입니다.

왜 SOAP 대신 RESTful인가? (신호의 차이)

• SOAP 방식 (과거): "안녕하십니까, 부산 여행지 목록을 정중히 요청드리는 바입니다. (봉투 크기만 10MB)" → 너무 느리고 무거움.
• RESTful 방식 (현재): "GET /busan-trips" (끝) → 엄청 가볍고 빠름.

🕵️‍♂️ 그림으로 보는 핵심 포인트 설명

그림의 흐름을 따라가며 각 기술의 역할을 다시 한번 정리해 드릴게요.

1. React (클라이언트/화면): 사용자가 만지는 **'스마트 키오스크'**입니다. "부산 맛집 보여줘!"라는 버튼을 누르면, 직접 데이터를 찾지 않고 서버에 요청을 보냅니다.
2. RESTful (무전기/카톡 통신): React와 Spring Boot가 대화할 때 쓰는 규칙입니다.
   • 그림처럼 GET /restaurants?city=busan 같이 주소창에 핵심만 적어서 보냅니다. (이게 바로 카톡처럼 간편한 방식!)
   • 과거의 SOAP는 이 요청 하나를 보내기 위해 엄청나게 크고 복잡한 XML 문서를 봉투에 담아야 했습니다.
3. Spring Boot (백엔드/자바 서버): 요청을 받는 **'스마트 주방장'**입니다. Java 코드로 작성된 로직을 실행하여 DB에서 데이터를 꺼내고 가공합니다.
4. JSON (데이터 형식): Spring Boot가 React에게 보내는 **'데이터 양식'**입니다. {이름: "해운대 국밥", 별점: 5} 처럼 아주 가볍고 읽기 쉬운 구조로 되어 있어, RESTful 통신에 가장 적합합니다.
5. 화면 표현 (React): Spring Boot로부터 JSON 데이터를 받은 React는 페이지 전체를 다시 그리지 않고, 맛집 목록 부품(Component)만 샥- 갈아끼웁니다. 그래서 사용자는 화면이 끊김 없이 부드럽게 바뀐다고 느낍니다.

---

1. 애플릿 (Applet): "내 컴퓨터로 짐을 다 가져와서 조립하기"

옛날 방식입니다. 사용자가 웹사이트에 접속하면, 서버가 실행 파일(프로그램)을 통째로 사용자의 컴퓨터로 보냅니다.

• 특징: 내 컴퓨터(클라이언트) 성능을 빌려 쓰기 때문에 화려한 그래픽 구현이 가능했지만, 파일을 다 내려받을 때까지 기다려야 해서 속도가 매우 느렸습니다. * 현재: 보안 문제와 속도 때문에 지금은 거의 쓰이지 않고 HTML5나 JavaScript가 그 자리를 대신하고 있습니다.

2. 서블릿 (Servlet): "주방에서 요리 다 해서 접시만 내주기"

애플릿의 단점(느린 속도)을 해결하기 위해 등장했습니다. 프로그램 실행을 사용자 컴퓨터가 아닌 서버에서 다 해버리는 방식입니다.

• 특징: 사용자가 "이거 보여줘!"라고 요청하면, 서버가 자바(Java) 코드를 막 실행해서 결과(데이터)만 딱 보내줍니다.
• 문제점: 요리는 잘하는데(로직 계산), 그 결과를 예쁜 그릇에 담는 것(HTML 화면 만들기)이 너무 힘들었습니다. 자바 코드 안에 HTML 코드를 일일이 타이핑해야 했거든요.

3. JSP (JavaServer Page): "메뉴판 양식에 음식 이름만 채워넣기"

서블릿의 불편함을 개선하기 위해 나왔습니다. 기본 틀은 HTML(웹 화면 양식)인데, 그 안에 필요한 데이터만 자바 코드로 살짝 끼워 넣는 방식입니다.

• 특징: 서블릿과 하는 일은 똑같지만, 화면(View)을 만들기가 훨씬 편합니다.
• 서블릿 vs JSP: * 서블릿은 "자바 파일 안에 HTML이 들어있는 형태" → 계산기, 데이터 처리에 유리.
  • JSP는 "HTML 파일 안에 자바 코드가 들어있는 형태" → 결과 화면 보여주기에 유리.

 

🎤 면접 답변 가이드: "MVC 패턴이란 무엇인가?"

"MVC 패턴은 소프트웨어 공학에서 사용하는 **'역할 분담 디자인 패턴'**입니다. 하나의 애플리케이션을 **Model(데이터), View(화면), Controller(제어)**라는 세 가지 역할로 나누어 개발하는 방식입니다.

이렇게 나누는 이유는 '유지보수의 효율성' 때문입니다. 화면을 수정할 때 데이터 로직을 건드릴 필요가 없고, 데이터 구조가 바뀌어도 화면 디자인에 영향을 주지 않도록 설계하는 것이 핵심입니다."

---

🧩 항목별 핵심 역할 (식당 비유)

이해를 돕기 위해 **'레스토랑 시스템'**에 비유해 보겠습니다.

구분	역할 (Role)	식당 비유	쉬운 설명
Model	데이터 & 비즈니스 로직	냉장고 & 재료	데이터베이스에서 정보를 가져오거나 가공하는 '알맹이'입니다. 화면이 어떻게 생겼는지는 전혀 관심이 없습니다.
View	사용자 인터페이스 (UI)	접시 & 플레이팅	사용자에게 보여지는 화면(HTML, JSP 등)입니다. 모델로부터 받은 데이터를 출력만 할 뿐, 직접 데이터를 수정하지는 않습니다.
Controller	중간 제어 (Bridge)	주방장 (셰프)	사용자의 요청(주문)을 받아 모델에게 "재료 준비해"라고 시키고, 준비된 데이터를 뷰에게 "이 접시에 담아줘"라고 전달하는 관리자입니다.

---

🛠 왜 MVC를 써야 하나요? (면접용 추가 점수 답변)

1. 동시 개발 가능: 디자이너는 View를 작업하고, 백엔드 개발자는 Model과 Controller를 작업하여 분업 효율이 극대화됩니다.
2. 유연한 확장성: 예를 들어, 웹 서비스에서 모바일 앱으로 확장할 때 Model의 비즈니스 로직은 그대로 두고 View만 새로 만들면 됩니다.
3. 디버깅 용이성: 화면에 문제가 생기면 View를, 데이터 계산이 틀리면 Model을 확인하면 되므로 문제 해결이 빠릅니다.

---

💡 한 줄 요약

"MVC는 데이터(Model)와 화면(View) 사이의 의존성을 없애기 위해, 중간 관리자(Controller)를 두어 코드를 깔끔하고 관리하기 쉽게 만드는 전략입니다."

 

 

앞서 배운 MVC 패턴이라는 '설계 도면'을 실제로 구현하기 위해 사용하는 **'공구 세트'**들이 바로 Spring과 Vue.js 같은 프레임워크입니다. 하나씩 핵심만 짚어드릴게요.

---

1. Spring vs Spring Framework (백엔드의 중심)

사실 같은 말이지만, 면접에서는 **'거대한 생태계'**라고 이해하시면 완벽합니다.

• Spring Framework: 자바 개발자들이 MVC 패턴을 쉽게 구현할 수 있도록 미리 만들어둔 **'종합 선물 세트'**입니다. 데이터베이스 연결, 로그인 보안, 서버 설정 등을 일일이 코딩하지 않고 설정만으로 해결해 줍니다.
• Spring Boot: Spring Framework가 너무 방대하고 설정이 복잡해서, "클릭 몇 번으로 서버를 바로 실행하자!" 하고 나온 '간편 버전'입니다. 현재 대부분의 기업(Toss 포함)이 사용하는 표준입니다.

2. Vue.js (프론트엔드의 화면 담당)

앞서 JSP가 화면(View)을 만든다고 했죠? Vue는 그 JSP의 현대판 진화 버전입니다.

• 특징: 사용자가 버튼을 눌렀을 때 페이지 전체를 새로고침하지 않고, 바뀐 부분만 샥- 갈아끼워 주는 기술(SPA, Single Page Application)에 최적화되어 있습니다.
• 비유: JSP가 "인쇄된 전단지"라면, Vue는 "디지털 전광판"입니다. 실시간으로 데이터가 변하면 화면도 즉각 반응하죠.

1. Spring vs Spring Framework vs Spring Boot

이 셋은 별개의 기술이 아니라, 진화 단계라고 보시면 됩니다.

• Spring (또는 Spring Framework):
  • 정의: 자바 서버 개발을 위한 거대한 공구함 그 자체입니다.
  • 특징: 아주 강력하지만, 처음 사용할 때 설정을 하나하나 직접 해야 합니다. (예: "망치 꺼내고, 못 준비하고, 설계도 펴고..." 하는 과정을 코드로 다 써야 함)
  • 비유: 모든 부품을 내가 직접 조립해야 하는 레고 세트.
• Spring Boot:
  • 정의: Spring Framework를 더 쉽고 빠르게 쓸 수 있게 해주는 **'자동 조립 키트'**입니다.
  • 특징: "자주 쓰는 설정은 내가 미리 다 해둘게, 너는 로직만 짜!"라는 철학입니다. 서버(Tomcat)도 내장되어 있어 버튼 하나면 실행됩니다. 현재 실무에서는 90% 이상 Spring Boot를 씁니다.
  • 비유: 이미 핵심은 다 조립되어 있고, 내가 원하는 색칠만 하면 완성되는 반조립 키트.

정리: Spring은 전체 기술의 이름이고, Spring Framework는 그 몸체이며, Spring Boot는 그걸 편하게 쓰게 해주는 도구입니다. 자바 백엔드 개발자라면 지금 바로 Spring Boot를 공부하시면 됩니다.

---

2. Vue.js vs React (프론트엔드 라이벌)

자바로 만든 백엔드 데이터를 화면에 뿌려줄 때 쓰는 도구들입니다.

구분	Vue.js	React
만든 곳	에반 유 (개인/커뮤니티)	Meta (페이스북)
학습 난이도	쉬움. HTML/CSS와 비슷해서 금방 배움.	조금 어려움. 자바스크립트 실력이 중요함.
특징	정해진 규칙이 있어 코드가 깔끔함.	자유도가 매우 높고 생태계가 엄청나게 큼.
장점	한국 중소/중견기업 및 공공기관 선호.	Toss, 네이버, 카카오 등 대형 테크 기업 선호.
비유	모든 장비가 갖춰진 풀옵션 오피스텔.	내가 가구를 다 사야 하는 자유로운 빈 집.

💡 IT진입 개발자 맞춤 조언

현재 자바 백엔드를 공부 중이시고, Toss 같은 기업의 코딩 테스트를 준비 중이시라면 아래 로드맵을 추천드려요.

1. 백엔드: 자바 기초 → Spring Boot (MVC 패턴 적용해보기)
2. 프론트엔드: * 빠르게 결과물 Vue.js 
   • 테크 기업 취업 시장에서 더 강력한 무기를 갖고 싶다면 React
3. 데이터베이스: SQL 공부는 필수입니다. (Toss 코테에서도 SQL 문제가 자주 나옵니다.)