반응형

웹을 아예모르는 상태에서 JSP를 공부하는 것 보다는 먼저 웹에 대한 기본 개념에 대해 이해를 하고 있어야 한다.

웹 기초 공부 -> 요 사이트에 가서 먼저 개념을 잡고 JSP를 공부하기를 추천한다.

 

JSP 기초
    JSP는 Servlet을 사용하여 웹 페이지를 개발하기 위한 기술
    HTML코드에 JAVA코드를 삽입하는 방식
    웹 어플리케이션이 JSP페이지의 내용을 Servlet으로 변환 후 실행

    HTML파일만으로 만들어진 서비스는 정적인 페이지 서비스만 가능

    JSP파일로 만들어진 서비스는 동적인 페이지까지 서비스 가능

 

특징
    Beans Java Component 사용가능
    최초 컴파일 후 메모리에서 처리
    자바의 모든 기능 사용 가능(무한한 확장성)
    사용자 태그 및 JSTL사용 등 다양한 태그 사용가능
    여러 실행환경에서 동작가능(호환성)

 

첫 번째 예제를 작성하고 실행한 후 개념을 정리하도록 한다.

(사용된 예제들은 최범균님의 JSP도서의 내용을 참조하였음)

 

환경 설정을 안했다면 다음 글을 보고 JSP개발 환경 부터 설정하도록 한다.

JSP를 이용한 웹 개발환경 설정

 

예제 작성

/WebContent/basic/EX01.jsp
1
2
3
4
5
6
7
8
9
10
11
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<html>
<head>
<title>Hello JSP</title>
</head>
<body>
<h2>Hello JSP!!</h2>
현재 날짜와 시간은 : <%=new java.util.Date() %>
</body>
</html>
cs

 

요청 결과

 

위 동작을 전반적으로 알고 넘어가도록 하자.

 

 일단 JSP가 나오기 전에는 CGI라고 하는 형태로 자바코드로 직접 웹 서비스코드를 작성하는 방식이 있었다. 나중에 서블릿이라는 개념이 나오면 보게 되겠지만 자바코드로 HTML코드를 일일이 다 출력하는 방식으로 브라우저에 응답을 표현할 수 있었다.

 이것이 한 두 페이지면 모르겠는데 다양한 서비스를 위해서 많은 페이지들을 구현하려다보니 여간 불편한 것이 아니었다. 그래서 나오게 된 기술이 JSP(Java Server Page)인 것이다.

 

 이 JSP는 HTML처럼 태그형식으로 코드를 작성하는 문법을 정의하게 되었고 이를 처리하기 위해 기존의 웹 서버가 아닌 JSP태그를 읽고 자바코드로 해석하고 컴파일하고 실행해서 결과를 처리할 수 있는 기능의 서버가 필요하게 된 것이다. 이런 서버를 웹 애플리케이션 서버(WAS)라고 칭한다.

 WAS는 여러 가지 프로그램이 있는데 개중에 학습에 가장 많이 사용되는 것이 아파치에서 개발한 톰캣이다. 우리도 톰캣으로 공부를 진행하고 있고 이클립스에서 이 톰캣을 연동하여 JSP코드를 처리하도록 하고있는 것이다.

 

 그럼 위에서 만든 첫 번째 JSP코드는 결국 톰캣이 처리를 해서 브라우저에 응답이 출력된 것으로 이해할 수 있다. 이것을 직접 확인해 보자.

우리가 이클립스에서 만든 웹 프로젝트는 연동된 톰캣 서버를 통해 실행되는데 이 때 이클립스가 해당 프로젝트를 복사해서 따로 작업하는 공간으로 옮기고 진행이 되는데 이곳을 찾아가 보도록 한다.

 

 

 작업 폴더에서 위와 같은 경로를 찾아가면 우리가 만든 jsp파일에 대한 java파일과 컴파일된 class파일을 볼 수 있다.

톰캣은 JSP파일을 실행하기 위해 Java코드로 변환한다.

변환된 Java코드를 컴파일하고 메모리에 로드하여 서비스를 실행하게 된다.

위 java코드의 내용이 궁금하다면 텍스트 에디터 등으로 열어봐도 좋다.

(단, 분석은 하지말 것. 의미 없다.)

 

이제 JSP를 이용하여 웹 개발을 하기위해 알아야하는 기초 문법을 익혀보도록 한다.

 

주석
<!–-  HTML주석 -->
<%-- JSP주석 --%>
// JAVA 한 줄 주석
    /*  여러 줄 주석 */

 

선언문(declaration)
    JSP 페이지에서 멤버 변수, 멤버 메서드를 선언할 때 사용
    jspinit(), jspDestroy() 등을 재정의(overriding) 할 때 사용
    형태:

<%! 선언문; %>

 

스크립틀릿(scriptlet)
    JSP 페이지에서 작성된 자바코드를 지원
    _jspService()에 원하는 자바코드를 JSP페이지에 정의하도록 지원
    스크립틀릿에 선언된 변수는 지역변수로 설정됨
    메서드 호출가능(선언불가)
    형태:

<% 자바코드 %>

 

표현식(expression)
    JSP 페이지에서 직접 클라이언트로 출력될 내용을 표시하는 부분
    _jspService()에 삽입된다. 표현식에서 ;(새미 콜론) 사용 안 함
    형태:

<%= 표현식 %>

 

위 JSP태그들을 테스트하기 위한 예제코드 작성

/WebContent/basic/EX02.jsp

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<html><head><title>JSP_File</title></head>
<body>
    <h2>JSP script 예제</h2>
    <% //Scriptlet : 자바 코드가 들어가는 곳. (연산, 처리)
        String scriptlet = "스크립틀릿입니다.";
        String comment = "주석문 입니다.";
        out.println("내장(기본)객체를 이용한 출력 : " + 
                        declation + "<br><br>");
    %>
    선언문 출력하기 : <%=declation %><br><br>
    선언문 출력하기 : <%=declationMethod()%><br><br>
    스크립틀릿 출력하기 : <%=scriptlet%><br><br>
    <!-- JSP에서 사용하는 HTML주석문 -->
    <!-- <%=comment%> -->
    <%-- JSP주석 --%>
    <%-- <%=comment%> --%>
    <%
        //자바주석
        /*
        자바 범위 주석
        */
    %>
    <%!
    // declation : 선언문
    String declation = "선언문 입니다."//필드(변수) 선언
    
    public String declationMethod(){ //메서드(함수) 선언
        return declation;
    }
    %>
</body>
</html>
 
cs

 

요청결과

 

JSP가 처리되는 Life-Cycle

 

1. 클라이언트 요청
    클라이언트가 웹 브라우저에서 웹 서버로 jsp페이지 요청

 

2. 요청 분석 및 페이지 소스 컴파일 후 초기화(jspInit())
    클라이언트가 요청한 페이지에 대한 서블릿 확인(있으면 _jspService()호출)
    없으면 컴파일하여 서블릿 생성 후 _jspService()호출하여 응답처리

 

3. 요청 처리(_jspService())
    클라이언트의 요청을 처리해주는 메소드

 

4. 객체 해제(jspDestroy())
    서버의 페이지 내용이 변경된 후 다시 요청 시 jspDestroy()호출하여 현재 객체를 정리(해제) 후     jspInit()다시 호출하여 _jspService()를 통해 요청 처리

 

아래 예제를 작성하여 요청결과를 확인 하고 다음에 나오는 그림과 함께 이해해 보자.

 

예제코드

/WebContent/basic/EX03.jsp
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%!
    private int numOne = 0;
    public void jspInit(){    //오버라이딩
        System.out.println("jspInit() 호출됨!");
    }
    public void jspDestroy(){    //오버라이딩
        System.out.println("jspDestroy() 호출됨!");
    }
%>
<html>
<head>
<title>Life Cycle</title>
</head>
<body>
<%
    int numTwo = 0;
    numOne++;    //새로고침 시 마다 증가
    numTwo++;     //새로고침 할 때마다 초기화
%>
<ul>
    <li>Number One : <%=numOne %></li>
    <li>Number Two : <%=numTwo %></li>
</ul>
 
</body>
</html>
cs

 

 - 선언문에 선언된 numOne필드는 객체멤버필드 이므로 톰캣이 한번 메모리에 올리면 계속 유지

 - numTwo필드는 service()메서드 내에 선언되므로 요청 시 마다 초기화

 - 톰캣은 서버이고 JSP로 만들어진 파일을 Java코드로 해석 및 컴파일 후 한 번 객체를 생성하여 서비스에 사용한다는 것.

 

다음 그림을 보고 브라우저의 요청(request)에 따라 서버에서 JSP파일을 어떻게 처리하고 응답(response)하는지 이해해 보도록 한다.

 

톰캣이 jsp파일을 처리하는 개념인 위의 그림을 지금은 감만 잡더라도 나중에는 이해해야 한다.

 

Directive(지시어)

JSP 페이지를 처리하는 방법에 대한 정보를 알려주는 역할

 

page 디렉티브
JSP 페이지에 대한 관련 환경을 지시
주로 문자 인코딩, 응답 페이지의 컨텐트 타입 등을 정의

 

page 디렉티브에서 사용되는 속성

 

language
JSP 페이지에서 사용되는 스크립트 언어 지정(항상 java)
<%@ page language=“java”%>

 

import
import 할 패키지 명시.

자바에서 import구문과 동일한 역할을 한다.
<%@ page import=“java.util.ArrayList”%>

 

예제코드(import를 사용하지 않은 JSP코드)

/WebContent/basic/Quiz.jsp

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
 
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<html>
<head>
<title>Calendar 클래스 사용</title>
</head>
<body>
    <%
        java.util.Calendar cal = java.util.Calendar.getInstance();
    %>
    오늘은
    <%=cal.get(java.util.Calendar.YEAR)%> 년
    <%=cal.get(java.util.Calendar.MONTH)%> 월
    <%=cal.get(java.util.Calendar.DATE)%> 일 입니다.
</body>
</html>
 
 
cs

 

예제코드(import 사용하도록 수정)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
 
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ page import="java.util.Calendar" />
<html>
<head>
<title>Calendar 클래스 사용</title>
</head>
<body>
    <%
        Calendar cal = Calendar.getInstance();
    %>
    오늘은
    <%=cal.get(Calendar.YEAR)%> 년
    <%=cal.get(Calendar.MONTH)%> 월
    <%=cal.get(Calendar.DATE)%> 일 입니다.
</body>
</html>
 
 
cs

 

요청결과(두 코드 결과는 동일)

 

session
HttpSession 객체 사용 유무
<%@ page session=“true”%>

중요한 개념이므로 나중에 뒤에서 별도로 확인

 

buffer
JSP 페이지  출력버퍼의 크기 설정(default : 8KB)
<%@ page buffer=“8kb”%>
사용하지 않으려면 none
 

autoFlush
버퍼가 다 찼을 경우 비울지 여부
<%@ page autoFlush=“false”%> (buffe가 none이 아닌 경우만 가능)

 

JSP 페이지 버퍼 예제 실습
    false로 작성 후 확인하고 true로 변경한 후 확인

 

예제코드

/WebContent/basic/EX04.jsp

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ page buffer="1kb" autoFlush="true" %> 
<html>
<head>
<title>autoFlush 예제</title>
</head>
<body>
<!-- 이 부분에서 4KB이상의 데이터 발생 -->
<% for(int i = 0; i < 1000; i++){ %>
1234
<%     } %>
</body>
</html>
 
cs

 

요청결과(autoFlush=”false”)

 

요청결과(autoFlush=”true”)

 

info
JSP 페이지의 정보를 관리
지정해둔 정보는 getServletInfo() 를 사용하여 확인가능

 

예제코드

/WebContent/basic/EX05.jsp

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ page info="Copyright 2015 by me" %>
<html>
<head>
<title>page info 예제</title>
</head>
<body>
    <h2>page info 얻어오기</h2>
    <%=this.getServletInfo() %>
</body>
 
</html>
 
cs

 

요청결과

 

errorPage
JSP 페이지에서 에러가 발생할 경우 이동할 에러페이지 경로 지정

 

에러를 발생하는 JSP테스트 페이지 작성

 

예제코드

/WebContent/basic/EX06.jsp

1
2
3
4
5
6
7
8
9
10
11
12
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8" errorPage="/basic/error/error.jsp" %>
<html>
<head>
<title>파라미터 출력</title>
</head>
<body>
name 파라미터 값 : 
<%= request.getParameter("name").toUpperCase() %>
</body>
</html>
 
cs

위 예제는 값을 전달하지 않으면 NullPointerException 예외가 발생된다.

그래서 EX06.jsp를 실행하면 에러코드 500에 대한 브라우저의 기본 에러페이지가 보여진다.

위의 속성을 보면 errorPage속성으로 지정된 jsp파일이 있는데 해당 속성이 있으면 EX06.jsp페이지에서 예외가 발생된 경우 error.jsp로 응답을 처리하겠다는 설정이 된다.

따라서 지정된 경로에 다음 isErrorPage속성이 지정된 페이지가 필요하다.

 

 

isErrorPage
해당 페이지가 에러를 처리하기 위한 페이지인지를 표시

web.xml 파일에 에러에 대한 페이지의 우선순위를 지정할 수 있음.

 

다음 경로에 error.jsp 파일을 작성하여 에러코드 500의 에러 페이지를 변경해본다.

예제코드

/WebContent/basic/error/error.jsp

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ page isErrorPage="true"%>
<html>
<head>
<title>예외 발생</title>
</head>
<body>
    요청 처리 과정에서 예외가 발생하였습니다.<br><br> 
    빠른 시간 내에 문제를 해결하도록 하겠습니다.<br><br>
    에러 타입 : <%=exception.getClass().getName()%><br></br> 
    에러 메세지 :<b><%=exception.getMessage()%></b>
</body>
</html>
 
cs


IE는 범용 에러에 대해 브라우저에서 처리화면이 지정되어 있음(HTTP 오류메시지 사용 속성)

(IE설정을 변경하거나 Chrome으로 테스트)

 

위에서 작성한 error.jsp파일이 제대로 사용되는지 확인을 위해 앞서 작성한 EX06.jsp파일을 요청하여 결과를 확인해본다.

 

EX06.jsp요청 시 에러 발생

 

EX06.jsp에 get방식으로 name에 대한 값을 전달한 실행 결과(페이지이름 뒤에 ?name=값)

 

contentType
JSP 페이지의 내용에 사용된 데이터의 MIME, 문자 인코딩 타입을 지정

요즘은 대부분 인코딩에 UTF-8을 사용하므로 인코딩을 설정할 수 있다는 개념만 이해하도록 한다.

 

예제코드

/WebContent/basic/EX07.jsp

1
2
3
4
5
6
7
8
9
10
11
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<html>
<head>
<title>캐릭터 셋 지정</title>
</head>
<body>
캐릭터셋을 ISO-8859-1로 변경해보세요.
</body>
</html>
 
cs

 

요청 결과

 

캐릭터셋을 ISO-8859-1로 변경한 후 실행결과


캐릭터셋을 UTF-8로 변경한 후 실행결과

 

pageEncoding
웹 컨테이너가 JSP페이지를 분석 할 때 JSP페이지의 문자 자체가 어떤 인코딩으로 작성되었는지 검사하여 JSP페이지의 문자를 읽는다.
contentType의 charset과 pageEncoding의 charset이 서로 다를 수 있다.

contentType은 문서의 표현될 데이터의 속성

pageEncoding은 작성된 문서 자체의 문자 인코딩 속성


include 디렉티브

file속성으로 현재 JSP페이지에 사용할 파일을 포함
text, html, jsp, url 등을 지정할 수 있다. (url을 지정할 경우 상대경로 사용)

 

예제 코드

/WebContent/basic/EX08_top.jsp

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ page import="java.util.*"%>
<%
    Date date = new Date();
%>
<html>
<head>
<title>top</title>
</head>
<body>
    top페이지의 내용입니다.
    <br></br>
    <%=date.toString()%><br></br>
    <hr color="red">
 
cs


/WebContent/basic/EX08_bottom.jsp

1
2
3
4
5
6
7
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<hr color="blue">
bottom의 내용입니다.<p>
<p align="center">작성자 <b><%=name %></b> 입니다. </p>
</body>
</html>
cs

 

/WebContent/basic/EX08_include.jsp

1
2
3
4
5
6
7
8
9
10
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<h2>include 사용 예제</h2>
<%
    String name = "Ben";
%>
<%@ include file="EX08_top.jsp" %>
포함하는 페이지 지시어(include) 예제의 내용
<%@ include file="EX08_bottom.jsp" %>
 
cs

 

EX08_include.jsp파일을 요청한 결과

 

Ex08_top.jsp파일과 EX08_bottom.jsp파일이 포함되어 하나의 페이지로 응답

 

추가내용> 에러페이지 처리

 웹 애플리케이션 개발 시 에러에 대한 응답 페이지를 적절하게 지정해야 한다.

 위에서 실습하면서 한 번씩 봤던 에러 페이지들은 서버에서 어떤 문제가 발생되었는지 브라우저(클라이언트)에 그대로 표시가 되었었는데 이는 보안상 아주 위험한 동작이다.

 예를 들어 웹해킹에서 가장 많이 공격하고 공격에 성공하면 굉장히 치명적인 해킹기법인 SQL인젝션 같은 경우 서버에서 DB쿼리에 대한 에러를 브라우저에 그대로 표시하면 위험이 배가된다.

자세한 것은 웹해킹 기법을 공부해야 하므로 여기서는 서버의 에러가 브라우저에 그대로 응답이 되면 안된다는 것이 요점이다.

 

 이런 에러페이지를 지정하기 위해 위에서 errorPage와 isErrorPage속성을 사용했었는데 모든 JSP파일에 이러한 설정들을 일일이 해주는 것은 부담일 수 있다. 그래서 요청을 처리하는 WAS에 에러에 대한 페이지를 직접 지정해두는 편리한 방법을 사용할 수 있는데 여기서는 그 방법을 확인해 보도록한다.

 

 일단 개발 시 자주 보여지는 에러는 다음과 같다.(HTTP프로토콜에 response 응답 코드)

response 응답 코드는 100번대, 200번대(성공), 300번대(개체,권한관련), 400번대(요청에러), 500번대(서버에러)가 있는데

Not Found - error code: 404

Internal Server Error - error code: 500

 위 두가지 코드가 가장 많이 보여진다.

 따라서 위 두 가지 코드일 경우 처리할 페이지를 미리 만들어 두고 설정파일에서 지정해주도록 해보자.

 

예제코드

/WebContent/basic/error/EX09_error404.jsp

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%
    response.setStatus(HttpServletResponse.SC_OK);
%>
<html>
<head>
<title>404 에러 발생</title>
</head>
<body>
<b>요청한 페이지는 존재하지 않습니다.</b><br></br>
</body>
</html>
 
cs


/WebContent/basic/error/EX09_error500.jsp

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%
    response.setStatus(HttpServletResponse.SC_OK);
%>
<html>
<head>
<title>500 에러 발생</title>
</head>
<body>
<b>서비스 처리 과정에서 에러 발생</b><br>
빠른 시간 안에 문제를 해결하도록 하겠습니다.
</body>
</html>
 
cs

 

다음 위에서 작성한 페이지를 에러응답에 사용하도록 설정

/WebContent/WEB-INF/web.xml

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 
    xmlns="http://xmlns.jcp.org/xml/ns/javaee" 
    xsi:schemaLocation=
        "http://xmlns.jcp.org/xml/ns/javaee 
          http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd"           
    id="WebApp_ID" version="3.1">
 
  <display-name>test03</display-name>
  <welcome-file-list>
    <welcome-file>index.html</welcome-file>
    <welcome-file>index.htm</welcome-file>
    <welcome-file>index.jsp</welcome-file>
    <welcome-file>default.html</welcome-file>
    <welcome-file>default.htm</welcome-file>
    <welcome-file>default.jsp</welcome-file>
  </welcome-file-list>
 
  <!-- 에러페이지 설정 시작 --> 
  <error-page>
    <error-code>404</error-code>
      <location>/basic/error/EX09_error404.jsp</location>
  </error-page>
  <error-page>
      <error-code>500</error-code>
      <location>/basic/error/EX09_error500.jsp</location>
  </error-page>
  <!-- 에러페이지 설정 종료-->
 
</web-app>
 
 
cs

 

설정파일이 변경되면 서버를 재시작 해야함.

 

이제 테스트를 위해 에러가 발생할 수 있는 jsp페이지 작성

예제코드

/WebContent/basic/EX10.jsp
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<%-- 
에러페이지 실습을 위한 페이지.
    
    실습방법은 다음과 같다.
    1. 그냥 실행 하여 web.xml파일에 지정된 500에러 페이지 응답 확인
 
    2. 아래 주석 처리되어 있는 에러페이지를 지정하는 
       페이지 디렉티브의 주석을 제거 후 실행하여 
       web.xml파일에 지정된 404에러 페이지 응답 확인 
--%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%-- <%@ page errorPage="error.jsp" %>  --%>
    
<html>
<head>
<title>파라미터 출력</title>
</head>
<body>
name 파라미터 값 : 
<%= request.getParameter("name").toUpperCase() %>
</body>
</html>
 
cs

 

EX10.jsp 실행결과(500에러 확인)


EX10.jsp 실행결과(404에러 확인

 

여기까지 기본적인 JSP문법과 동작에 대한 테스트를 마무리 한다.

 

추가 내용> HTTP GET Method , HTTP POST Method

반드시 이해해야 되는 내용이 있다.

클라이언트에서 서버로 요청 시 페이지만 요청하는 것이 아니라 데이터도 같이 전송할 수 있는데 이 때 get방식과 post방식이 있다.

이에 대한 다음 슬라이드를 보고 개념을 이해하도록 하자.

01234567891011121314

 

반응형

+ Recent posts