(1) JSP의 정의와 구성 요소 1

Java/Java_JSP

(1) JSP의 정의와 구성 요소 1

Unlimited00 2023. 9. 4. 20:19

1. JSP 등장 배경

* 초기 웹 프로그램은 서블릿을 이용해서 구현했다. 그런데 인터넷 사용자가 폭발적으로 증가하고 사용자에게 보여주는 화면의 기능이나 구성이 복잡해짐에 따라 사용자를 고려하는 화면 요구 사항도 점점 늘어났다. 그래서 현재는 프로그래머가 서블릿으로 화면을 구현하지 않고 주로 디자이너가 이 일을 담당하는 추세이다.

* 앞에서 살펴봤듯이 기존 서블릿에서 화면을 구현할 때는 서블릿의 응답 기능을 이용했다. 자바 코드를 이용해 HTML 태그를 브라우저로 전송하는 방식이다. 그런데 화면 구성이 복잡해짐에 따라 디자이너의 역할이 커지기 시작했는데 디자이너는 개발자와 달리 자바 코드에는 익숙하지 않은 경우가 많아 화면 기능 구현 시 많은 불편함이 있었다. 그래서 서블릿의 기능 중 별도로 화면 기능을 디자이너가 작업하기 쉽게 하기 위해 JSP가 등장했다.

(1) 서블릿으로 화면 구현 시 문제점

* 다음 코드는 웹 프로그램 기능을 구현할 때 사용하는 서블릿 코드의 예이다. 서블릿은 이처럼 응답 기능을 이용해 화면을 구현한다. 서블릿 코드는 간단한 기능이므로 화면 기능을 구현하기도 그리 어렵지 않다.

package sec04.ex02;

import java.io.IOException;
import java.io.PrintWriter;

import javax.servlet.ServletConfig;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;


@WebServlet("/login")
public class LoginServlet extends HttpServlet {
	
	public void init(ServletConfig config) throws ServletException {
		System.out.println("init 메서드 호출");
	}

	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		request.setCharacterEncoding("utf-8");
		response.setContentType("text/html;charset=utf-8");
		PrintWriter out = response.getWriter();
		String id = request.getParameter("user_id");
		String pw = request.getParameter("user_pw");
		System.out.println("아이디 : " + id);
		System.out.println("패스워드 : " + pw); // 비즈니스 로직
		
		String data = "<html>";
		data += "<body>";
		data += "아이디 : " + id;
		data += "<br />";
		data += "패스워드 : " + pw;
		data += "</body>";
		data += "</html>";
		out.print(data); // 뷰
	}

	public void destroy() {
		System.out.println("destroy 메서드 호출");
	}
	
}

다음 그림은 실제 운영 중인 온라인 서점, 즉 도서 쇼핑몰 화면이다. 그리고 그 화면을 구성하는 자바스크립트 및 HTML 코드이다.

* 딱 봐도 뭔가 복잡해 보인다. 이처럼 웹 사이트 화면 기능이 복잡해지면 화면을 나타내는 코드 구현 역시 복잡해 진다. 따라서 기존 서블릿이 처리하는 기능 중 비즈니스 로직 기능과 화면 기능을 분리해야 한다는 목소리가 점점 높아지고 있다.

* JSP는 디자이너 입장에서 화면의 수월한 기능 구현과 개발 후 화면의 편리한 유지관리를 목적으로 도입되었다. 기존 서블릿에서는 자바 코드를 기반으로 문자열을 사용해 HTML과 자바스크립트로 화면을 구현했으나, JSP는 이와 반대로 HTML, CSS와 자바스크립트를 기반으로 JSP 요소들을 사용해 화면을 구현한다.

* 즉, JSP의 등장 배경을 정리하면 다음과 같다.

[문제점]

- 웹 프로그램의 화면 기능이 복잡해지므로 서블릿의 자바 기반으로 화면 기능 구현 시 어려움이 발생한다.

- 디자이너 입장에서 화면 구현 시 자바 코드로 인해 작업이 어렵다.

- 서블릿에 비즈니스 로직과 화면 기능이 같이 있다 보니 개발 후 유지관리가 어렵다.

[해결책]

- 서블릿의 비즈니스 로직과 결과를 보여주는 화면 기능을 분리하자!

- 비즈니스 로직과 화면을 분리함으로써 개발자는 비즈니스 로직 구현에 집중하고, 디자이너는 화면 기능 구현에만 집중하자!

- 개발 후 재사용성과 유지관리가 훨씬 수월해진다!

(2) JSP의 구성 요소

* JSP라고 해서 기존의 웹 페이지를 구현하는 HTML 이나 자바스크립트와 관련이 없다는 말이 아니다. 여러 번 언급했듯이 JSP는 HTML과 CSS와 자바스크립트를 기반으로 JSP에서 제공하는 여러 가지 구성 요소들을 사용해 화면을 구현하는 기술이다. 주로 웹 프로그램의 화면 기능과 모델2 기반의 MVC에서 뷰(View) 기능을 담당한다.

* JSP의 구성 요소는 다음과 같다.

- HTML 태그, CSS 그리고 자바스크립트 코드

- JSP 기본 태그

- JSP 액션 태그

- 개발자가 직접 만들거나 프레임워크에서 제공하는 커스텀(custom) 태그

2. JSP의 3단계 작업 과정

* 서블릿에서는 자바 코드와 함께 원하는 HTML 태그를 사용해 브라우저로 전송해서 화면을 구현했다. 즉, println()과 같은 자바 코드를 사용해 HTML 화면을 구성했다. 따라서 서블릿으로 화면을 구현하려면 화면에 해당하는 HTML 태그를 브라우저로 전송해 주기만 하면 브라우저가 받아서 실시간으로 구현해 준다.

* 그런데 JSP는 HTML, CSS와 자바스크립트는 물론이고 JSP에서 제공하는 여러 가지 구성 요소가 화면을 구현하는 데 사용된다. 그러다 보니 JSP 파일 자체를 브라우저로 전송하면 브라우저는 JSP 요소들을 인식하지 못한다. 따라서 JSP는 톰캣 컨테이너에 의해 브라우저로 전송되기 전에 실행 단계를 거쳐야 한다.

(1) 톰캣 컨테이너에서 JSP 변환 과정

* JSP 파일은 다음과 같이 3단계를 거쳐 실행된다.

1. 변환 단계(Transform Step) : 컨테이너는 JSP 파일을 자바 파일로 변환한다.

2. 컴파일 단계(Compile Step) : 컨테이너는 변환된 자바(java) 파일을 클래스(class) 파일로 컴파일한다.

3. 실행 단계(Interpret Step) : 컨테이너는 class 파일을 실행하여 그 결과(HTML, CSS와 자바스크립트 코드)를 브라우저로 전송해 출력한다.

* 브라우저에서 JSP 파일을 요청하면 톰캣 컨테이너는 요청된 JSP 파일을 자바 파일(.java)로 변환한다. 그리고 변환된 자바 파일을 클래스 파일(.class)로 컴파일한다. 이 클래스 파일을 실행하여 브라우저로 결괏값을 전송하면 JSP가 브라우저 화면에 표시된다. 즉, 브라우저로 전송되는 결과는 HTML, CSS와 자바스크립트로 변환된 파일이다.

(2) 이클립스에서 JSP 변환 과정 실습

* 지금부터 이클립스에서 JSP 파일을 만든 후 브라우저에서 요청하는 과정을 살펴보자.

1. 이클립스에서 새 프로젝트 pro11을 만들고 WebContent 폴더에서 마우스 오른쪽 버튼을 클릭한 후 New > JSP File을 선택한다.

* 반드시 servlet_api.jar를 설정해 준다.

2. 파일 이름으로 hello.jsp를 입력한 후 Finish를 클릭한다.

3. 생성된 JSP 파일에 간단한 HTML 태그와 메시지를 작성한다.

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="ko">
	<head>
		<meta charset="UTF-8" />
		<title>첫 번째 JSP 페이지</title>
	</head>
	<body>
		<h1>Hello JSP!!</h1>
		<h1>JSP 실습입니다!!</h1>
	</body>
</html>

4. 톰캣 컨테이너에서 프로젝트를 추가한다. 톰캣을 실행한 후 브라우저에서 HTML 파일을 요청하듯이 JSP 파일을 요청한다.

- http://ip주소:포트번호/프로젝트이름/JSP파일이름

- http://localhost:8090/pro11/hello.jsp

* 다시 한 번 JSP 실행 과정을 정리하면 이클립스에서 hello.jsp를 생성한 후 톰캣을 실행한다. 그런 다음 브라우저에서 hello.jsp로 요청한다. 마지막으로 브라우저의 요청을 받은 톰캣 컨테이너는 해당 JSP 파일을 읽어 들여와 hello_jsp.java 파일로 변환한다. 그리고 브라우저로 HTML 형식의 결과를 전송하여 화면에 표시한다.

* 다음은 브라우저에서 요청한 hello.jsp 파일을 톰캣 컨테이너가 hello_jsp.java로 변환한 자바 파일과 클래스 파일을 나타낸다.

- D:\A_TeachingMaterial\01_BasicJava\workspace\.metadata\.plugins\org.eclipse.wst.server.core\tmp0\work\Catalina\localhost\pro11\org\apache\jsp

* 이클립스에서 개발할 경우 이클립스의 workspace 아래에 생성된다.

%이클립스_workspace% \.metadata\.plugins\

org.eclipse.wst.server.core\temp0\work\Catalina\localhost\pro11\org\apache\jsp

* hello.js를 VS code나 편집기로 열어보면 앞에서 배운 서블릿의 여러 가지 기능으로 변환되어 hello.jsp의 HTML 태그를 브라우저로 전송해 주는 것을 알 수 있다. 서블릿에서는 개발자가 일일이 HTML 태그를 만들어서 println()으로 전송해 주었으나 JSP는 요청 시 컨테이너에서 자동으로 JSP 파일에 있는 HTML 태그와 자바스크립트를 브라우저로 전송해 준다.

* 다음은 hello.jsp 요청 시 브라우저로 전송된 HTML 태그를 나타낸 것이다. 앞서 hello_jsp.java가 전송된 HTML 태그와 일치하는 것을 알 수 있다.