JSP & Servlet

MVC모델을이용한 웹 애플리케이션작성

2/36

Contents

학습 목표

MVC모델을 이용한 웹 애플리케이션 작성에 관한 간단한 튜토리얼 수행

간단한 웹 애플리케이션 작성을 통해 웹 애플리케이션의 전체 개발 과정

을 이해

MVC 개발 모델을 이해

내 용

웹 애플리케이션 개발 과정

화면 설계

애플리케이션 아키텍처 설계

개발 환경 및 배포 환경 구축

프로그램 개발 및 테스트 - 반복적인 개발과 테스트 기법

3/36

1. 사용자 화면 설계

• 브라우저 화면에 보여줄 내용 설계

• 가장 상위 수준에서의 설계

2. 애플리케이션 아키텍처 설계

• 모듈 구성 설계

• 모듈간의 인터페이스 설계

• MVC 모델 적용

1. 웹 애플리케이션 개발 과정 (1)

4/36

3. 개발 환경 및 배포 환경 구축

• 개발 환경 구축

• 배포 환경 구축

4. 반복적인 개발 및 테스트

• 반복적인 개발 – Unified Process

• 테스트 주도 개발 - TDD

1. 웹 애플리케이션 개발 과정 (2)

5/36

웹 애플리케이션 이름 : BeerAdvisor

주요 서비스 내용

• 사용자의 취향(색깔 등)을 입력받아 적절한 맥주를 추천

• 각종 맥주에 대한 유용한 정보를 제공

2. 간단 MVC 튜토리얼 개요

6/36

사용자 인터페이스 화면 설계

• 간단 실습을 위해 사용자 입력 화면 및 결과 출력 화면 2개만 지원

3. 웹 애플리케이션 사용자 화면 설계

7/36

웹 애플리케이션 아키텍처 설계

• 프로그램 모듈 구성 및 모듈 간의 인터페이스 설계

• MVC(Model-View-Control) 모델을 적용

• BeerAdvisor 웹 애플리케이션 모듈 구성:

– Model

» 사용자 입력에 적절한 맥주 목록 생성

» 일반 자바 클래스로 구현 – BeerExpert 클래스

– View

» 추천 맥주 목록을 출력하는 결과 화면을 생성

» JSP로 구현 – result.jsp

– Control

» 사용자의 요청에 의해 실행, 요청 내용에 맞추어 모델에서 적절히 데이터 처리하도록 하며,

처리 결과를 뷰에 넘겨 요청 요건에 맞는 출력 화면을 생성하도록 함.

» Servlet으로 구현 – BeerSelect.java

4. 웹 애플리케이션 아키텍처 설계 (1)

8/36

웹 애플리케이션 아키텍처 설계 : MVC 모델

• 비즈니스 로직과 프리젠테이션 로직의 분리

4. 웹 애플리케이션 아키텍처 설계 (2)

“스펙은 항상변한다”

9/36

웹 애플리케이션 아키텍처 설계 : 모듈 구성

4. 웹 애플리케이션 아키텍처 설계 (3)

StaticPage

DynamicPage

MVC Model

10/36

웹 애플리케이션 실행 과정

• HTML(정적 컨텐츠) 요청/응답 과정

4. 웹 애플리케이션 아키텍처 설계 (4)

11/36

웹 애플리케이션 실행 과정

• 서블릿(동적 컨텐츠) 요청/응답 과정

4. 웹 애플리케이션 아키텍처 설계 (5)

12/36

개발 디렉토리 구성

• 사용하는 웹 컨테이너에 맞게 개발 디렉토리를 구성

5. 개발 환경 구성

13/36

웹 컨테이너의 배포 디렉토리 구성

6. 배포 환경 구성

14/36

웹 애플리케이션 개발 및 테스트 수행 단계

1. 사용자가 제일 먼저 볼 HTML 폼을 생성하여 테스트한다

2. 컨트롤러 서블릿 버전 1을 만든다. 버전 1에서는 HTML 폼이 서블릿을 호출할 때

넘겨준 파라미터 값을 출력하도록 작성하여 테스트한다.

3. BeerExpert 모델 클래스를 위한 테스트 클래스를 만들고 테스트한다(실제 모델

클래스는 복잡한 처리과정이 요구됨으로 간단한 테스트 클래스로 대신한다)

4. 서블릿 버전 2를 만든다. 버전 2에서는 BeerExpert 모델에게 맥주에 대한 조언을

구하는 기능을 추가하고 테스트한다.

5. 뷰 jsp를 만들고 서블릿 버전 3을 만든다. 버전 3에서는 뷰 JSP로 요청을 전달하

는 기능을 추가한다. 이 작업이 완료되면 전체 애플리케이션을 테스트한다.

7. 개발 & 테스트 (1)

15/36

첫 화면 HTML 페이지 코드 작성

• 사용자 입력 화면으로 정적 웹페이지로 작성

• 파일명: form.html

7. 개발 & 테스트 (2)

16/36

첫 화면 HTML 페이지 코드 배포 및 테스트

• $(TOMCAT_HOME)/webapps/Beer-v1/ 에 복사

• 톰캣 실행 & 페이지 테스트

– URL: http://localhost:8080/Beer-v1/form.html

7. 개발 & 테스트 (3)

17/36

서블릿 버전 1 작성 : BeerSelect.java

• HTML 폼에서 넘겨준 파라미터 값을 출력하여 테스트

7. 개발 & 테스트 (4)

18/36

서블릿 버전 1 작성 : BeerSelect.java

• 주요 클래스 APIs

7. 개발 & 테스트 (5)

19/36

서블릿 버전 1 배포 (1)

• 배포 서술자 파일(DD: Deployment Descriptor) 수정 : web.xml

7. 개발 & 테스트 (6)

20/36

[ 참고 ] URL의 서블릿 클래스 파일로의 맵핑 (1)

7. 개발 & 테스트 (7)

21/36

[ 참고 ] URL의 서블릿 클래스 파일로의 맵핑 (2)

7. 개발 & 테스트 (8)

22/36

[ 참고 ] URL의 서블릿 클래스 파일로의 맵핑 (3)

7. 개발 & 테스트 (9)

23/36

[ 참고 ] URL의 서블릿 클래스 파일로의 맵핑 (4)

7. 개발 & 테스트 (10)

24/36

서블릿 버전 1 배포 (2)

• 서블릿 클래스 컴파일 및 복사

7. 개발 & 테스트 (11)

25/36

서블릿 버전 1 테스트

7. 개발 & 테스트 (12)

26/36

모델 클래스 작성 & 컴파일

• 일반 자바 클래스로 구현 : BeerExpert 클래스

• 모델 클래스는 서블릿에 호출된다는 것을 알 필요가 없다

7. 개발 & 테스트 (13)

27/36

서블릿 버전 2 작성 (1)

• 모델 클래스 BeerExport를 사용하도록 수정

• 모델 클래스의 인스턴스를 생성하고 메소드를 호출

7. 개발 & 테스트 (14)

28/36

서블릿 버전 2 작성 (2)

7. 개발 & 테스트 (15)

29/36

서블릿 버전 2 컴파일, 배포, 테스트

7. 개발 & 테스트 (16)

30/36

뷰 JSP 작성 (1)

• 출력 화면을 동적으로 생성

• 파일명: result.jsp

7. 개발 & 테스트 (17)

31/36

뷰 JSP 작성 (2)

7. 개발 & 테스트 (18)

32/36

뷰 JSP 배포

7. 개발 & 테스트 (19)

33/36

서블릿 버전 3 작성 (1)

• 동적 출력 화면 생성을 위해 뷰 JSP로 요청을 전달(forwarding)

7. 개발 & 테스트 (20)

34/36

서블릿 버전 3 작성 (2)

7. 개발 & 테스트 (21)

35/36

서블릿 버전 3 작성 (3)

7. 개발 & 테스트 (22)

36/36

서블릿 버전 3 컴파일, 배포, 테스트

7. 개발 & 테스트 (23)