daniel7481의 개발일지

[웹 프로그래밍(풀스택)] JSP 본문

Naver Boostcourse

[웹 프로그래밍(풀스택)] JSP

daniel7481 2022. 2. 9. 14:53
반응형

1. JSP란?

먼저 eclipse에서 JSP 파일을 하나 만들어보자. 모든 html, css, jsp, 이미지 등의 리소스는 프로젝트 아래에 있는 WebContent 폴더에 넣어놔야 한다. 생성하고 난 뒤에 굉장히 익숙한 포멧이 뜬다. html 파일과 비슷한 구조인데 다른 점은 맨 위에 language = java...이란 문구가 있는 것이다. 위의 문구는 이 파일이 JSP 파일이라는 것을 알려주는 것이다. 이제 1부터 10까지 모두 더해주는 코드를 작성할 것인데, 자바로 코드를 작성하되 작성된 자바 코드를 <% %>로 감싸줘야 한다. JSP는 이런 몇가지 기호들을 가지고 있고, JSP가 서블릿으로 바뀔 때 어떻게 바꿀 것인지 이러한 기호가 정해준다. JSP는 JSP 자체가 동작하는 것이 아니라 서블릿으로 바뀌어서 동작한다. 맨 위에 <%@ page가 있는데 앞에 있는 기호는 지시자라고 한다. 앞의 예시는 page 지시자라고 생각하면 된다. 

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>

먼저 언어는 자바로 되어있다. 이론적으로는 JSP에서 다른 언어를 사용할 수 있지만, JSP에서는 자바만 사용된다. 다음 contenttype은 서블릿 할때 setContentType을 기억하면 된다. 보낼 것이 text이고 이 text는 html 코드다 라고 하는 것이다. 그 다음 pageEncoding은 이 JSP파일이 UTF-8으로 인코딩되어있다는 것이다. JSP를 쓰는 이유는 만약 html 안에서 html만 쓰려면  html 파일을 쓰면 된다. 그러나 html 안에서 자바 프로그램을 돌리고 싶을 때 JSP를 사용하면 된다. <%s는 자바로 작성되어 있는 부분이다. 이러한 부분을 Scriptlet이라고 한다. 자바 코드를 입력할 수 있는 부분이라고 생각하면 된다. 만약 브라우저에서 출력을 하고 싶으면 <%= %>(표현식)로 감싸줘야 한다.

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<% 
	int total = 0;
	for(int i = 0; i <= 10; i++){
		total = total + i;
	}
%>

1부터 10까지의 합 : <%=total%>
</body>
</html>

<% %>로 감싼 부분은 모두 서블릿으로 바뀔 때 <%만 없애고 그대로 자바 코드로 바뀌게 된다. 이러한 표현식에서 <%=은 out.println()으로 바뀌게 된다. 위 코드를 서버에서 실행하면 1부터 10까지의 합 : 55가 나오게 된다.

JSP 등장 배경

마이크로소프트에서 ASP(Active Seerver Page)라는 쉽게 앱을 배경하는 스크립트 엔진을 발표하였다. 1997년에 발표된 서블릿은 ASP에 비하여 상대적으로 개발방식이 불편하다. ASP에 대항하기 위하여 1999년에 썬마이크로시스템즈에서 JSP를 발표하였고, JSP는 실제로 서블릿 기술을 사용한다. 가장 중요한 점은 JSP는 서블릿으로 바뀌게 된다. 

2. JSP 라이프사이클

먼저 앞에서 설명했듯이 JSP는 서블릿 파일로 바뀌게 된다. 이말인 즉 안에 있던 html 코드, 내가 작성한 코드가 모두 자바 프로그램으로 바뀌게 된다는 것이다. 이 작업은 우리가 설치한 WAS가 해주게 되는데, 나 같은 경우에는 Apache Tomcat이 해준다. 먼저 어떻게 바뀌게 되는지 확인하려면, C:\Coding\workspace\.metadata\.plugins\org.eclipse.wst.server.core\tmp0\wtpwebapps\firstweb와 같이 자기가 eclipse workspace를 만든 주소로 들어가서 위 주소처럼 들어가면 내가 만든 sum10.jsp 파일이 보일 것이다. 이것이 우리가 작성한 jsp 파일이다. 다음 C:\Coding\workspace\.metadata\.plugins\org.eclipse.wst.server.core\tmp0\work\Catalina\localhost\firstweb\org\apache\jsp처럼 tmp0으로 돌아와서 work로 들어가서 따라 들어가면 sum10_jsp.java라는 파일이 보일 것이다. 이를 메모장으로 열면 안에 코드가 보이는데, 우리가 작성한 코드가 모두 자바로 바뀌게 된 것을 알 수 있다. 안을 살펴보면 _JspService() 메소드 위에 _jspInit()메서드와 _jspDestroy 메서드가 만들어지는데, 앞에서 서블릿의 라이프싸이클을 공부할 때 init, destroy service 메서드의 그 메서드이다. 그 밑으로 _jspService() 메소드 안에 우리가 작성했던 모든 코드들이 있을 것이다. 잘 살펴보면 우리가 지시한 바대로 Scriptlet은 그대로 자바 코드가 되었고, 나머지는 out.write, out.print 등으로 바뀌어서 작성이 되었다.

sum10.jsp가 실행될 때 벌어지는 일

- 이클립스 워크스페이스 아래의 .metadata 폴더에 sum10_jsp.java 파일이 생성된다.

- 해당 파일의 _jspService() 메서드 안을 살펴보면 jsp파일의 내용이 변환되어 들어가 있음

- sum10_jsp.java는 서블릿 소스로 자동으로 컴파일이 되면서 실행되서 그 결과가 브라우저에 보여진다.

JSP 실행 순서

1. 브라우저가 웹서버에 JSP에 대한요청 정보를 전달한다.

2. 브라우저가 요청한 JSP가 최초로 요청했을 경우만

 - JSP로 작성된 코드가 서블릿으로 코드로 변환하다(자바 파일 생성)

 - 서블릿 코드를 컴파일해서 실행가능한 bytecode로 변환한다(class 파일 생성)

 - 서블릿 클래스를 로딩하고 인스턴스를 생성한다.

3. 서블릿이 실행되어 요청을 처리하고 응답 정보를 생성한다.

서블릿 생성주기처럼 먼저 JSP에 대하여 서블릿 파일이 존재하는지 확인하고, 만약 없으면(처음 호출할 떄/수정이 되었을 때) 그에 맞는 서블릿으로 만들고 컴파일하고 서블릿 객체를 생성한다. 우리가 작성한 코드들은 전부 _jspService() 메서드 안에 들어가는 걸 확인 할 수 있는데, 응답에 대한 메서드는 Service 밖에 없기 때문에 그러한 것이다. 그러면 init혹은 destroy 메서드에 관여하고 싶으면 <%! 표현식을 사용하면 된다.

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
hello
<%
	System.out.println("_jspService()");
%>

<%!
public void jspInit() {
	System.out.println("jspInit()!");
}

public void jspDestroy() {
	System.out.println("jspDestroy()");
}
%>

</body>
</html>

<%! 안에서 선언된 메서드들은 Service 메서드 밖에서 선언되게 되어있다. 위를 실행시키면 _jspService 전에 jspInit()!이 실행되고, 만약 위 코드를 수정하고 다시 서버에서 런하면 jspDestroy가 먼저 출력되고 jspInit, jspService가 출력이 되는 것을 볼 수 있다. 기본적으로 라이프싸이클은 서블릿과 크게 다르지 않다. 

3. JSP 문법

스크립트 요소의 이해

JSP에서 선언문, 스크립트릿, 표현식이라는 3가지 스크립트 요소를 제공한다.

선언문 - <%! %>: 전역변수 선언 및 메소드 선언에 사용

스크립트릿 - <% %>: 프로그래밍 코드 기술에 사용

표현식 - <%= %>: 화면에 출력할 내용을 기술하는데 사용, 응답 결과에 포함할 부분을 넣을 때 사용할 부분

선언문(Declaration)

- 선언문: <%!문장 %>

- 선언문은 JSP 페이지 내에서 필요한 멤버 변수나 메소드가 필요할 때 선언해 사용하는 요소

스크립트릿(Scriptlet)

- 스크립트릿: <% %>

- 가장 일반적으로 많이 쓰이는 스크립트 요소

- 주로 프로그래밍이 로직을 기술할 때 사용

- 스크립트에서 선언된 변수는 지역 변수

여기서 지역 변수와 멤버 변수의 차이점을 집고 넘어가자. 프로그래밍에서 전역 변수와 지역변수의 차이점을 생각해보면, 프로그램이 실행될 때마다 함수(Service 메소드)가 호출되고, 함수 안에 있는 지역변수는 호출될 때마다 초기화가 되지만 멤버 변수는 처음 컴파일할 때 메모리에 올라가면 함수 밖에 있어 프로그램이 종료될 때까지 메모리에서 지워지지 않는다.

간단한 실습으로 스크립트릿을 작성해보자. 만약 h1~h5태그로 아름다운 한글을 웹에 띄우고 싶다고 하자. 일일이 작성하는 것은 힘든 일일것이다. 그래서 자바 언어를 사용하여 스크립트를 통해 작성해보자.

<%
	for(int i = 1; i<5; i++){
		
%>
<H<%=i %>>아름다운 한글</H<%=i %>>
<%} %>

여기서 이상한 점이 있다. 스크립트릿을 두 개로 나눠서 for문을 다른 스크립트릿에서 닫았는데, 이렇게 해도 작동한다. 스크립트릿은 나눠서 작성해도 이어서 작성할 수 있다. 지역변수 i에 따라 h1~h5의 아름다운 한글이 출력되는 것을 볼 수 있을것이다. 

표현식(Expression)

- JSP 페이지에서 웹 브라우저에 출력할 부분을 표현, 화면에 출력하기 위한 것

- 스크립트릿 내에서 출력할 부분은 out.print() 또는 out.println()메소드를 사용해서 출력을 한다.(자바스크립트로는 console.log와 같은 개념)

주석(Comment)

- JSP 페이지에서 사용할 수 있는 주석은 HTML주석, 자바주석, JSP 주석이 있다(그러나 각 주석이 어떤 단계에서 주석 처리가 되는지 생각해볼 필요는 있다. JSP 주석은 서블릿으로 바뀔 때 아예 변환되지 않고, 자바 주석은 자바 프로그램으로 넘어간 후 자바 언어를 읽을 때 주석 처리가 되고, HTML 주석은 자바로 변환이 된 후에 화면에만 나오지 않을 것이다)

- HTMl 주석

   - <!-- -->으로 끝난다

   - HTML 주석을 사용한 페이지를 웹에서 서비스할 때 화면에 주석이 표시되지 않으나, 소스보기를 통하여 내용이 화면에 나온다

- JSP 주석

   - <%-- --%>

   - JSP 안에서만 이렇게 표현된다. 자바로 변환될 때 변환되지 않는다. 웹 브라우저 상에서 소스 보기를 해도 표시되지 않는다.

4. JSP 내장 객체

JSP를 실행하면 서블릿 소스가 생성되고 실행된다. JSP에 입력한 대부분의 코드는 서블릿 소스의 _JspService() 메소드 안에 삽입되는 코드로 생성된다. _jspService()에 삽입된 코드의 윗 부분에 미리 선언된 객체들이 있는데 해당 객체들은 jsp에서도 사용가능하다.(response, request, application, config, session, out 등) 이렇게 자동으로 생성되고 사용할 수 있는 객체들은 jsp 내장 객체라고 한다.

[출처]Naver Boostcourse

위는 여러가지 내장 객체들이다

실습으로 Jsp를 생성하고 response.getRequestURL 혹은 out.print등을 사용해보자. 자바에서는 무조건 class를 선언해야 사용이 가능한데, 오류 없이 사용가능한 것을 알 수 있다. 이는 Service 메소드 안에서 미리 이러한 내장 객체들이 선언되어 있어 따로 선언하지 않아도 사용 가능한 것이다. 

반응형

'Naver Boostcourse' 카테고리의 다른 글

[웹 프로그래밍(풀스택)] Scope - BE  (0) 2022.02.13
[웹 프로그래밍(풀스택)] redirect&forward-BE  (0) 2022.02.09
[웹 프로그래밍(풀스택)] Web UI 개발 -FE  (0) 2022.02.02
[웹 프로그래밍(풀스택)]DB 연결 웹 앱(자바스크립트 이해)  (0) 2022.01.26
[웹 프로그래밍(풀스택)] Project A (나를 소개하는 홈페이지 만들기  (0) 2022.01.25
'Naver Boostcourse' Related Articles more