#14. JSP와 웹 프로그래밍

2021.07.14 - [Backend/Java] - # 13 JSP (Java Server Pages)

# 13 JSP (Java Server Pages)

# Web Server 웹 표준 프로토콜(HTTP)를 사용하여 Clinet-Server 구조로 클라이언트 요청에 따라 정적인 데이터 (HTML, CSS, JS, 이미지 리소스 등)를 응답한다. 사용자와 입력값에 따라 달라지는 동적인 데이

jiwondev.tistory.com

최근(2021)의 Java를 통한 웹 개발은 스프링 프레임워크가 표준에 가깝게 사용된다. 즉 JSP는 사장(deprecated) 되어가는 기술이 되었고 서블릿을 직접 프로그래밍 할 일은 많이 없다. 하지만 스프링 MVC도 프레임워크를 사용해서 보이지 않을 뿐이지 내부적으로는 서블릿을 이용하여 만들어져있기에 개발을 하기 위해서는 서블릿 스펙에 대한 이해가 필수적이다.

그러므로 기존에 JSP를 이용한 웹 프로그래밍은 어떻게 개발되었는지 대략적으로 알아보며 자바와 서블릿에 대한 기초지식을 쌓아보자.

#0 JSP의 이해 (21.7.18추가)

JSP에 적혀있는 자바코드는 WAS가 따로 분리하여 서블릿으로 만든다는 걸 앞에서 배웠다.

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

2. 웹 서버가 WAS(컨테이너)에 요청 정보를 전달하고 JSP가 실행된다.

3. JSP 에 있는 자바 코드는 컨테이너에 의해 서블릿 코드로 변환된다. (이미 변환했다면 있는걸 사용한다.)

4. 변환된 서블릿 코드는 컴파일되어 실행가능한 bytecode(.class)로 변환되어 WAS에 로딩된다.

5. 서블릿 클래스의 인스턴스를 생성하고, 필요한 요청을 처리 후 웹서버에 보낼 응답을 생성한다.

Java에서 JSP는 Sevlet 클래스 (HTTPServlet)를 상속받아 만들어진 클래스이다. WAS에서는 HTML과 Java코드가 합쳐진 JSP를 읽어들여 HTML 부분과 Java 부분을 분리하고, 자바코드를 JSP 클래스로 만들어 처리한다고 생각하면 된다.

#1. 개발환경

IntelliJ(편집기)와 Tomcat(WAS + Web Server)을 사용한다. 링크에 들어가 다운로드 받도록 하자.

톰캣은 잘 읽어보고 설치하면 되고, Intellij에서는 자바 프로젝트를 만든 뒤에 프로젝트명 우클릭 -> Add Framework Support를 눌러 웹 개발환경을 세팅하자.

자세한 설명

Tomcat은 아파치(Apache)재단에서 만든 무료 WAS로 아파치 서버를 내장하고 있다. 설치할 때 여러 옵션을 물어볼건데, 그냥 읽어보고 Next만 눌러주면 되기에 어렵지 않게 설치 할 수 있다.

intellJ를 설치해서 빈 자바 프로젝트를 만든 후 JavaEE 웹 서비스 프레임워크를 추가하면 된다.

프로젝트명을 우클릭하여 프레임워크를 추가한다. 영어로 [ Add Framework Support ] 이다.

Java EE에 있는 Web Service를 눌러 다음과 같이 세팅해주면 된다.

그리고 IntelliJ에 설치한 톰캣을 연결하자.

왼쪽 위 [ + ] 를 눌러 Tomcat Server - Local을 추가해주면 된다.

이후 설정(configure)를 눌러 Tomcat 설치경로를 등록해주자.

설정을 완료하면 web 디렉토리가 생성되는데, server-config.wsdd는 사용하지 않으므로 삭제해도 괜찮다.

web 디렉토리가 만들어졌다면, 다음과 같은 코드를 작성해서 웹 앱을 톰캣에 실행시켜보자. 만약 개발환경 구성에 실패했다면 해당 블로그를 참고하도록 하자.

// web.xml 파일

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee"
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_4_0.xsd"
         version="4.0">
</web-app>

// index.jsp의 파일. Tomcat WAS를 통해 실행시켜야 한다.

<%--
  Created by IntelliJ IDEA.
  User: -
  Date: 2021-07-15
  Time: 오후 11:13
  To change this template use File | Settings | File Templates.
--%>

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>$Title$</title>
</head>
<body>
<%
    String bookTitle = "JSP 책";
    String author = "지원킴";
%>

<b><%= bookTitle %></b>의 저자 <%=author%> 입니다.
</body>
</html>

#2. JSP의 구조

기본적으로 HTML 코드 내에 <% %> 모양의 태그를 추가하여 사용한다. 참고로 주석은 <%-- 내용 --%> 으로 작성 가능하다.

#2-1 디렉티브 (Directive)

JSP 페이지에 대한 설정 정보를 지정한다.

디렉티브	설명
page	JSP 페이지에 대한 정보. JSP가 생성하는 문서의 타입, 출력버퍼 크기, 에러페이지등을 지정한다.
include	JSP 페이지의 특정 영역에 다른 문서를 포함시킨다.
taglib	JSP 페이지에서 사용할 태그 라이브러리를 지정한다. prefix로 별명을 달아 사용 할 수 있다.

<%@ 디렉티브이름 속성1="값1" 속성2="값2" ... %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ include file = "test_url">
<%@ taglib   uri=http://java.sun.com/jsp/jstl/core    prefix=“c"  %>

...
<c:out value="Hello World"> </c:out>

#2-2 스크립트 (Sciprt)

<% %> 안에 Java 코드를 작성하여 스크립트를 만들 수 있다. 해당 태그는 3가지 종류가 있다.

Scriptlet <% 코드 %>
자바 코드를 작성하여 스크립트를 구성 할 수 있다.
Expression <%= 내용 or 표현식 %>
out 객체를 통해 값을 출력한다. 1+2+3 같은 표현식을 주면 계산한 결과를 출력한다.
Declarations <%! 메서드 %>
JSP에서 사용할 메서드를 정의한다. Expression을 이용해 반환값을 HTML로 출력할 수 있다.

#2-3 JSP Action

XML 문법을 이용하여 서블릿 엔진을 컨트롤하는 코드이다. 이는 간단하게 예제코드만 보고 넘어가도록 하자.

현재 JSP 페이지에 다른 리소스를 포함시키는데 사용.
<jsp:include page="/jsp/common/uppermenu.jsp" flush="true"/>

다른 리소스(JSP, html 또는 Servlet)로 요청을 전달하는데 사용.
<jsp:forward page=“/display.jsp" />

자바의 Bean(객체)를 생성.
<jsp:useBean id="customer" class=“package.class”  scope="request"/>

#3. JSP 작성하기

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%--page 디렉티브를 이용하여 자바 라이브러리 import 를 할 수 있다.--%>
<%@ page import="java.util.Date" %>

<%-- 자바 코드는 <% %> 안에 작성한다. --%>
<%
    Date now = new Date(); // Date 클래스
%>

<%-- 메서드를 작성할때에는 <%! %> 안에 작성한다. --%>
<%-- 선언부가 아닌 일반 자바코드를 여기 작성해도 동작하지만, 되도록이면 구분해서 쓰자. --%>
<%!
    public int multiply(int a, int b) {
        return a * b;
    }
%>

<html>
<head>
    <title>현재 시간</title>
</head>

<body>
    <%--변수, 메서드, 계산식을 HTML로 출력하려면 <%= %> 를 이용한다.--%>
    1+1 = <%= 1 + 1 %><br/>
    3*4 = <%= multiply(3,4) %><br/>
    <strong> 현재시각 : <%= now %> </strong>
</body>
</html>

#3-1 Requset 객체

웹 서버에서 클라이언트의 연결 정보를 받으려면 JSP 기본으로 제공하는 requset 객체를 이용하면 된다.

<%@ page contentType="text/html; charset=utf-8" %>

<!DOCTYPE html>
<html>
<head>
    <title>클라이언트 및 서버 정보</title>
</head>
<body>
클라이언트 IP <%=request.getRemoteAddr() %><br/>
요청정보 컨텐츠길이 <%=request.getContentLength() %><br/>
요청정보 인코딩 <%=request.getCharacterEncoding() %><br/>
요청정보 컨텐츠타입 <%=request.getContentType() %><br/>
요청정보 프로토콜 <%=request.getProtocol() %><br/>
요청정보 전송방식 <%=request.getMethod() %><br/>
요청 URI <%=request.getRequestURI() %><br/>
컨텍스트 경로 <%=request.getContextPath() %><br/>
서버 이름<%=request.getServerName() %><br/>
서버 포트<%=request.getServerPort() %><br/>
</body>
</html>

물론 request 객체를 이용해서 정보 뿐만 아니라 브라우저(클라이언트)가 전송한 파라미터를 읽을 수 있다.

Requset 객체 메서드	설명
String getParameter(String name)	파라미터 명을 통해 파라미터 값 읽기 -> 없을경우 null
String[] getParameterValues(String name)	이름이 name인 값들을 배열로 받기 -> 없을경우 null
Enumeration getParameterNames()	파라미터 목록 읽기
Map getParameterMap()	파라미터들의 <이름, 값> 을 Map 형태로 가져오기

form.jsp

<%@ page contentType="text/html; charset=utf-8" %>

<!DOCTYPE html>
<html>
<head>
    <title>보내기</title>
</head>
<body>

    <form action="/viewParameter.jsp" method="post">
        <label for="name">이름 </label>
        <input id="name" type="text" name="name" size="10"><br>

        <label for="addr">주소</label>
        <input id="addr" type="text" name="addr" size="30"><br>

        <input type="checkbox" name="pet" value="dog">강아지
        <input type="checkbox" name="pet" value="cat">고양이
        <input type="checkbox" name="pet" value="pig">돼지

        <input type="submit" value="전송">

        <br>
        <br>
    </form>

</body>

viewParameter.jsp

<%@ page contentType="text/html; charset=utf-8" %>
<%@ page import="java.util.Enumeration" %>
<%@ page import="java.util.Map" %>

<%
    request.setCharacterEncoding("utf-8");
%>

<!DOCTYPE html>
<html>
<head>
    <title>요청 파라미터 출력</title>
</head>
<body>

<b>getParameter() 메소드</b><br>

name= <%= request.getParameter("name") %><br>
address= <%= request.getParameter("addr") %><br>

<br>
<b>getParameterValues() 메소드</b><br>
<%
    String[] values = request.getParameterValues("pet");
    if (values != null) {
        for (int i = 0; i < values.length; i++) {
%>
<%= values[i] %><br>
<%
        }//자바코드 중간에 값을 출력해야한다면, 이런식으로 나누어 사용해도된다.
    }
%>

<br>
<b>getParameterNames() 메소드</b><br>

<%
    Enumeration enums = request.getParameterNames();
    while (enums.hasMoreElements()) {
%>
<%= enums.nextElement() %><br>
<%
    }
%>

<br>
<b>getParameterMap() 메소드</b><br>

<%
    Map paramMap = request.getParameterMap();
%>

<%= ((String[]) paramMap.get("name"))[0] %><br>
<%= ((String[]) paramMap.get("addr"))[0] %><br>
<%= ((String[]) paramMap.get("pet"))[0] %><br>
<%= ((String[]) paramMap.get("pet"))[1] %><br>

</body>
</html>

# 3-2 Respone 객체

JSP에서도 Respone가 제공되나, 거의 사용할 일이 없다.

거의 사용되지 않는 객체
- HTTP 헤더에 내용 추가
- 다른 페이지로 리다이렉트(redirect)
리다이렉트 시키기
- response.sendRedirect() 메소드 사용

<%@ page contentType="text/html; charset=utf-8" %>

<!DOCTYPE html>
<html>
<head>
    <title>리다이렉트페이지</title>
</head>
<body>

<%
    String redirect = request.getParameter("redirect");
    if(redirect != null && redirect.equals("yes")) {
        response.sendRedirect("/chap03/form.jsp");
    }
%>
hello

</body>
</html>

#4. GET과 POST

위의 form.jsp에서는 POST 방식을 사용하였다. (옵션을 안주면 기본값 GET으로 처리된다.)

<form action="jsp페이지 경로" method="post">
    ...
</form>

get은 Body가 없다. 최신 스펙에서는 바디 사용이 가능하나 보통 사용하지 않는다.

# 4-1 GET

URL 경로 뒤에 파라미터를 붙여서 전송
- http://localhost:8080/abc/asdf.jsp?age=23&gender=woman&address=seoul
- 물음표(?) 뒤에 파라미터를 붙여서 전송
- 파라미터 사이를 & 기호로 구분
- 파라미터이름=파라미터값
파라미터 길이에 제한이 있다.
- 파라미터가 길어지면 URL도 길어진다.
- 길이 제한은 웹 브라우저나 서버에 따라 다르다.
Idempotent(멱등)의 성질을 가진다.
- 요청을 여러번 수행하더라도 항상 같은 결과 보장
- 따라서 주로 '조회' 기능에 사용된다.
인코딩 규칙
- <a>태그 : 웹 페이지와 같은 인코딩 사용
- <form>태그 : 웹 페이지와 같은 인코딩 사용
- URL에 쿼리 문자열 붙여서 전송 : 웹 브라우저마다 다름
디코딩 처리
- WAS마다 사용하는 기본 캐릭터셋이 다르다.
- ex) 톰캣8 이후는 utf-8, 톰캣7은 ISO-8859-1 사용
HTTP 헤더 예시

GET /home.html HTTP/1.1
Host: localhost:8080/example_page.jsp?name=steve&message=hello
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.9; rv:50.0) Gecko/20100101 Firefox/50.0
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/ *;q=0.8
Accept-Language: en-US,en;q=0.5
Accept-Encoding: gzip, deflate, br
...

#4-2 POST

요청 헤더의 데이터 영역에 파라미터를 넣어서 전송
- URL 뒤에 파라미터 정보가 붙지 않는다.
GET방식과 달리 파라미터 길이에 제한이 없다.
Non-Idempotent의 성질을 가진다.
- 서버에 여러번 요청함에따라 다른 응답을 가질 수 있다.
- 따라서 서버의 상태나 데이터를 변경시킬 때 사용한다.
- ex) 블로그등에 글을 게시할 때 글의 내용을 파라미터로 보내기
인코딩 규칙
- POST 방식으로 요청할 때 웹 브라우저는 응답화면에 지정된 캐릭터셋을 사용해서 파라미터를 인코딩한다.
디코딩 처리
- request.setCharacterEncoding()는 POST의 데이터 영역에 대한 디코딩 방식을 설정하는 메소드이다.
- 따라서 GET 방식으로 가져온 파라미터에는 적용되지 않는다.(파라미터가 URL에 붙어서 오기때문)
- 응답 페이지에서 request 객체로 파라미터 값을 읽어 디코딩 하기전에 캐릭터셋(해당 페이지의 contentType에서 지정한 charset)을 지정해주어야 한다.
HTTP 헤더 예시 (요청 헤더의 데이터영역에 파라메타가 숨겨져있다.)

POST /myform.html HTTP/1.1
Host: localhost:8080/example_page.jsp
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.9; rv:50.0) Gecko/20100101 Firefox/50.0
Content-Length: 128
...
name=steve&message=hello

'🌱Backend > Java' 카테고리의 다른 글

#16 Servlet 이해 (1)	2021.07.18
#15 JSP 쿠키와 세션 (0)	2021.07.16
#13 JSP (Java Server Pages) (0)	2021.07.14
#12. Optional API (Null값 처리) (0)	2021.07.12
#11 Stream API (0)	2021.07.12

블로그의 정보

JiwonDev

#14. JSP와 웹 프로그래밍

#0 JSP의 이해 (21.7.18추가)

#1. 개발환경

#2. JSP의 구조

#2-1 디렉티브 (Directive)

#2-2 스크립트 (Sciprt)

#2-3 JSP Action

#3. JSP 작성하기

#3-1 Requset 객체

# 3-2 Respone 객체

#4. GET과 POST

# 4-1 GET

#4-2 POST

'🌱Backend > Java' 카테고리의 다른 글

블로그의 정보

활동하기

티스토리툴바

#0 JSP의 이해 (21.7.18추가)

#1. 개발환경

#2. JSP의 구조

#2-1 디렉티브 (Directive)

#2-2 스크립트 (Sciprt)

#2-3 JSP Action

#3. JSP 작성하기

#3-1 Requset 객체

# 3-2 Respone 객체

#4. GET과 POST

# 4-1 GET

#4-2 POST

'🌱Backend > Java' 카테고리의 다른 글

블로그의 정보

활동하기

공유하기

다른 글

티스토리툴바