JSP(Java Server Page) (23.06.29)

현·2023년 6월 29일

server

Server

목록 보기

2/35

📝 JSP(Java Server Page)

JAVA코드가 들어가 있는 HTML 코드
-> Java의 웹 서버 프로그램 스펙(서블릿)으로 변환되어 서비스됨

JSP 생성 폴더 위치
webapp/WEB-INF 폴더 내부에 생성

📌 Servlet과 JSP의 차이점

💡 Servlet

웹 서비스 기능을 해주는 자바 클래스
자바 소스코드 속에 HTML 코드가 들어가는 형태
-> HTML 문서를 작성하는데 복잡하고 번거롭다는 단점이 있음

💡 JSP

HTML 소스코드 속에 자바 소스코드(<% %> 또는 <%= %>)가 들어가는 형태
-> 복잡한 Servlet을 좀 더 간단히 사용할 수 있음
컴파일을 통해 클래스 파일로 변환되어 웹 서버(WAS)에서 실행됨

📌 JSP 동작 구조

jspFile.jsp → _jspFile.java → _jspFile.class

📌 Servlet/JSP 동작 순서

1) 웹 서버가 사용자로부터 서블릿에 대한 요청을 받으면 서블릿 컨테이너에 그 요청을 넘김

2) 요청을 받은 컨테이너는 HTTPRequest와 HTTPResponse 객체를 만들고, 서블릿 doPost()나 doGet() 메소드 중 하나를 호출

3) 클라이언트가 요청에 대한 응답 웹 페이지를 보여줄 때 기존 Servlet에서 출력 객체를 이용하여 HTML 문서 작성하던 부분(프레젠테이션 로직)을 JSP로 분리함
-> 데이터의 입력, 수정 등의 대한 제어를 JSP로 넘겨 가독성을 높임

4) JSP에게 넘겨진 프레젠테이션 로직을 수행한 후 컨테이너에게 Response 전달

5) 전달받은 JSP 프레젠테이션 로직 수행 결과와 Servlet이 결합되어 .class 파일이 만들어짐

📌 JSP 장점

서블릿보다 쉽고 작성하기 빠름
디자인 부분(html)과 로직 부분(java)으로 이루어져 있음
-> 정보, 디자인 부분(html)과 로직 부분(java)을 분리시킬 수도 있음
프로그래머가 직접 코딩한 서블릿보다 최적화된 서블릿으로 생성시켜 주므로 효율적인 코드가 만들어짐
웹 애플리케이션 상에서 변수의 사용 가능한 범위(scope) 설정이 쉬움

📌 JSP로 응답하기

Servlet -> RequestDispatcher (요청 발송자)-> forward(req, resp) (전송) -> JSP

위 순서로 응답 화면을 만드는 Servlet의 일을 좀 더 효율적으로 처리할 수 있는 JSP에게 넘겨줄 예정이다. JSP 관련 개념과 함께 알아보자.

💡 @WebServlet("요청 주소") 어노테이션

해당 클래스를 Servlet 클래스로 등록( servlet 태그 )하고 어떤 요청 주소를 처리할지 지정( servlet-mapping 태그 )

@WebServlet("/login")

💡 Dispatcher

필요한 정보를 제공하는 자 == 발송자
-> HttpServletRequest 객체가 생성될 때 내부에 자동으로 요청 발송자(RequestDispatcher)가 같이 생성됨

req.getRequestDispatcher("JSP경로");

"JSP경로"

전달할 JSP의 경로를 작성

JSP 경로 작성 규칙

webapp 폴더를 기준으로 해서 JSP 파일까지의 모든 경로를 작성!

RequestDispatcher dispatcher = req.getRequestDispatcher("/WEB-INF/views/loginResult.jsp");

💡 위임

(맡은 일을)넘겨주다

-> JSP에게 전송될 예정인 req 객체에 result 변수 값 담아서 같이 전달

req.setAttribute(String key, Object value);

Attribute : 속성 (데이터, 값)

key는 String(문자열)
value는 모든 객체(타입 상관 없음)

req.setAttribute("res", result);

💡 forward

전송하다, 보내다

-> 요청 발송자를 이용하여 req, resp 객체를 전송(forward)함

dispatcher.forward(req, resp);

💡 HTML 주석

💡 JSP 주석

<%-- JSP 주석 (개발자 도구에 노출 X) --%>

💡 <%@ %>

지시자

알려 주거나 지시하는 속성을 기입

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

- "charset=UTF-8"
현재 문서가 UTF-8 문자 인코딩 형식으로 작성되었음

- pageEncoding="UTF-8"
현재 문서를 해석할 때 UTF-8 문자 인코딩을 이용해서 해석

🔎 예시

<% // 자바 코드 작성 영역

// 여기는 JSP -> Servlet으로부터 전송받은 req, resp가 있음
// -> req, resp를 사용할 수 있다.
// -> 대신 이름이 request, response로 바뀜

String r = (String)request.getAttribute("res");

getAttribute("key")

반환형 Object -> 원래 타입으로 강제 형변환이 필요함

💡 <% %>

스크립틀릿(scriptlet)

JSP에서 자바 코드를 작성할 수 있는 영역
-> JSTL 라이브러리를 이용해서 태그 형식으로 변경

💡 <%= %>

표현식(Expression)

->자바 코드의 값을 HTML 형식으로 표현(출력)

📌 데이터 전달 방식

💡 GET

주소(URL)를 통해서 데이터 전달

-> 이때, 문자 인코딩은 제출된 HTML파일의 문자 인코딩(charset)을 따름

💡 POST

HTTP Body를 통해서 데이터 전달

이때, 문자 인코딩은 서버의 기본 문자 인코딩을 따름
Tomcat은 ISO-8859-1이 기본 문자 인코딩
-> POST 방식으로 전달받은 데이터의 문자 인코딩을 변경

req.setCharacterEncoding("UTF-8");
//		-> 문자 인코딩을 UTF-8로 변경

🔎 예제 1

VS Code

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JSP 프로젝트</title>
</head>
<body>
    
    <h3>GET 방식 요청</h3>

    <form action="/JSPProject/login" method="GET">
        <!-- 
            요청 주소 : /JSPProject/login
            데이터 전달 방식 : get (주소 뒤에 데이터가 붙어서 전달됨)
        -->

        ID : <input type="text" name="inputId"> <br>
        PW : <input type="password" name="inputPw"> <br>
        <button type="submit">로그인</button>

    </form>
</body>
</html>

Eclipse

LoginServlet.java

package edu.kh.jsp.controller;

import java.io.IOException;

import javax.servlet.RequestDispatcher;
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("요청 주소") 어노테이션
// - 해당 클래스를 Servlet 클래스로 등록( <servlet> 태그 )하고
//   어떤 요청 주소를 처리할지 지정( <servlet-mapping> 태그 )

@WebServlet("/login")
public class LoginServlet extends HttpServlet {

	
	protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
		
//		요청 시 전달된 input 태그의 값(==Parameter) 얻어오기
//		(파라미터는 모두 String 타입이다!!)
		
		String inputId = req.getParameter("inputId");
		String inputPw = req.getParameter("inputPw");
		
//		파라미터를 잘 얻어왔는지 확인
		System.out.println("ID : " + inputId);
		System.out.println("Pw : " + inputPw);
	
//		간이 로그인 확인 코드
		
		String result = null;
		
		if(inputId.equals("user01") && inputPw.equals("pass01!")) {
			result = inputId + " 님이 로그인 하셨습니다.";
			
		} else {
			result = "아이디 또는 비밀번호가 일치하지 않습니다.";
		}
		
//		out.print("<html>"); -> JSP 교체
		
//		JSP란?
//		- Servlet에 HTML 코드를 쓰는 게 불편하기 때문에
//		  반대로 HTML 코드에 Java 코드를 쓸 수 있게 하는 문서
		
//		* JSP 생성 폴더 위치
//		-> webapp/WEB-INF 폴더 내부에 생성
	
//		******************************************************
		
//		** JSP로 응답하기 **
		
//		Dispatcher : 필요한 정보를 제공하는 자 == 발송자
		
//		위임 : (맡은 일을)넘겨주다
		
//		forward : 전송하다, 보내다
		
//		* 응답 화면을 만드는 Servlet의 일을
//		  좀 더 효율적으로 처리할 수 있는 JSP에게 넘겨줄 예정
		
//		req.getRequestDispatcher("JSP경로");
//		- HttpServletRequest 객체가 생성될 때
//		  내부에 자동으로 요청 발송자(RequestDispatcher)가 같이 생성됨
		
//		- "JSP경로" : 전달할 JSP의 경로를 작성
		
//		*** JSP 경로 작성 규칙 ***
//		- webapp 폴더를 기준으로 해서 JSP 파일까지의 모든 경로를 작성!!
		
		RequestDispatcher dispatcher = req.getRequestDispatcher("/WEB-INF/views/loginResult.jsp");
		
//		JSP에게 전송될 예정인 req 객체에
//		result 변수 값 담아서 같이 전달

//		req.setAttribute(String key, Object value);
//		- key = String(문자열)
//		- value는 모든 객체(타입 상관 없음)
		
//		- Attribute : 속성 (데이터, 값)
		req.setAttribute("res", result);
		
//		요청 발송자를 이용하여 req, resp 객체를 전송(forward)함
		dispatcher.forward(req, resp);
	}
	
}

loginResult.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    
<% // 자바 코드 작성 영역

	// 여기는 JSP -> Servlet으로부터 전송받은 req, resp가 있음
	// -> req, resp를 사용할 수 있다.
	// -> 대신 이름이 request, response로 바뀜
	
	String r = (String)request.getAttribute("res");
	
	// getAttribute("key")
	// - 반환형 Object -> 원래 타입으로 강제 형변환이 필요함!


%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>로그인 결과 페이지</title>
</head>
<body>

	<!-- 위에 선언된 변수 r에 저장된 값 출력 -->
	<h1><%= r %></h1>
		
</body>
</html>

출력 화면

로그인 전
로그인 후

🔎 예제 2

VS Code

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JSP 프로젝트</title>
</head>
<body>
    
    <h3>JSP 테스트</h3>
    <form action="/JSPProject/pizzaOrder" method="get">
        피자 선택(1만원) : 
        <select name="pizza">
            <option>치즈 피자</option>
            <option>고구마 피자</option>
            <option>쉬림프 피자</option>
            <option>콤비네이션 피자</option>
            <option>시카고 피자</option>
        </select>

        <br><br>

        사이즈(L 선택 시 2천원 추가) : 
        <label> R <input type="radio" name="size" value="R"></label>
        <label> L <input type="radio" name="size" value="L"></label>

        <br><br>

        수량 : <input type="number" name="amount" min="1" max="10" value="1">판

        <button>주문하기</button>

    </form>
</body>
</html>

Eclipse

pizzaOrderServlet.java

package edu.kh.jsp.controller;

import java.io.IOException;

import javax.servlet.RequestDispatcher;
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("/pizzaOrder")
public class pizzaOrderServlet extends HttpServlet {
	
	@Override
	protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
		
//		파라미터 얻어오기
		String pizza = req.getParameter("pizza");
		
//		* radio 타입의 값은 1개밖에 전달되지 않으므로 getParameter()를 사용한다.
		String size = req.getParameter("size");
		
//		* 파라미터는 모두 String이다.
//		-> String을 정수로 변경하고 싶은 경우
//		   Integer.parseInt("문자열")을 사용하여 변경(파싱)
		
		int amount = Integer.parseInt( req.getParameter("amount") );
		
//		피자 - 1판 1만원
//		사이즈 - L인 경우 2천원 추가
//		수량 - 1 ~ 10판
//		(피자 + 사이즈) * 수량
		
		int temp = 0; // 사이즈에 따른 추가 금액
		
		if(size.equals("L")) { // L 사이즈면 2천원으로 변경
			temp = 2000;
		}
		
		int result = (10000 + temp) * amount;
		
//		응답 화면 작성하는 것을 JSP 위임
		
//		JSP 경로는 webapp 폴더를 기준으로 작성
		RequestDispatcher dispatcher = req.getRequestDispatcher("/WEB-INF/views/orderResult.jsp");
		
		req.setAttribute("res", result);
		
		dispatcher.forward(req, resp);
	}

}

orderResult.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    
<!-- HTML 주석 (개발자 도구에 노출 O) -->

<%-- JSP 주석 (개발자 도구에 노출 X) --%>

<%--

	<%@ %> : 지시자 -> 알려 주거나 지시하는 속성을 기입
	
	"charset=UTF-8"		 : 현재 문서가 UTF-8 문자 인코딩 형식으로 작성되었음
	pageEncoding="UTF-8" : 현재 문서를 해석할 때 UTF-8 문자 인코딩을 이용해서 해석

	<% %> : 스크립틀릿(scriptlet) -> JSP에서 자바 코드를 작성할 수 있는 영역
	-> JSTL 라이브러리를 이용해서 태그 형식으로 변경
	
	<%= %> : 표현식(Expression)  -> 자바 코드의 값을 HTML 형식으로 표현(출력)

--%>
    
<% // 자바 코드 작성 영역 (scriptlet, 스크립틀릿)

	int result = (int)request.getAttribute("res");

	// JSP에서도 요청 시 전달받은 값(parameter)을 얻어올 수 있다.
	String pizza = request.getParameter("pizza");
	
	String size = request.getParameter("size");
	
	String amount = request.getParameter("amount");
	
%>
    
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
	<title>주문 결과</title>
	<style>
		#area{
			font-size : 18px;
			font-weight: bold;
		}
		
		h1{ color : red; }
	</style>
</head>
<body>

	<!-- webapp 폴더 내부 html/css/jsp 등은 서버 끄지 않고도 수정 가능 -->
	<div id="area">
		피자 : <%= pizza %>
		<br>
		사이즈 :
		
			<% if(size.equals("R")){ %>
				Regular
			<% } else{ %>
				Large
			<% } %>
		
		<br>
		수량 : <%= amount %>판
	</div>
	<h1>계산 결과 : <%= result %></h1>
	
	
	<% for(int i=1; i<6; i++){%>
		<h<%= i %>><%=i %>번째 출력 중</h<%= i %>>
	<%} %>	
	
</body>
</html>

출력 화면

주문 전
주문 후

🔎 예제 3 (POST 방식)

VS Code

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JSP 프로젝트</title>
</head>
<body>
 <h3>회원가입</h3>

    <form action="/JSPProject/signUp" method="post">
        <table>
            <tr>
                <th>아이디 : </th>
                <td>
                    <input type="text" name="memberId">
                </td>
            </tr>            

            <tr>
                <th>비밀번호 : </th>
                <td>
                    <input type="text" name="memberPw">
                </td>
            </tr>  

            <tr>
                <th>이름 : </th>
                <td>
                    <input type="text" name="memberName">
                </td>
            </tr>  

            <tr>
                <th>자기소개 : </th>
                <td>
                    <textarea name="intro" rows="3" cols="30"></textarea>
                </td>
            </tr>  
        </table>

        <button>회원가입</button>
        <button type="reset">초기화</button>
    </form>
</body>
</html>

Eclipse

SignUpServlet.java

package edu.kh.jsp.controller;

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

import javax.servlet.RequestDispatcher;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
// Tomcat(WAS == Servlet Container)에서 제공
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

// Servlet : 웹 서비스(요청, 응답)를 위한 자바 클래스

// @WebServlet("요청 주소") : Servlet 클래스 등록 + 요청 주소 매핑
@WebServlet("/signUp")
public class SignUpServlet extends HttpServlet{
	
	@Override
	protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
		
//		*** POST 방식의 한글 깨짐 문제 ***
		
//		- 데이터 전달 방식 차이점
//		GET : 주소(URL)를 통해서 데이터 전달
//			  이때, 문자 인코딩은 제출된 HTML파일의 문자 인코딩(charset)을 따름
		
//		POST : HTTP Body를 통해서 데이터 전달
//			   이때, 문자 인코딩은 서버의 기본 문자 인코딩을 따름
//			   우리 서버(Tomcat) -> ISO-8859-1이 기본 문자 인코
		
//		* 해결 방법 *
//		- POST 방식으로 전달받은 데이터의 문자 인코딩을 변경
		
		req.setCharacterEncoding("UTF-8");
//		-> 문자 인코딩을 UTF-8로 변경
		
		
		
		
		String memberId = req.getParameter("memberId");
		
		String message = memberId + " 님의 가입을 환영합니다!";
				
		// 클라이언트와 연결된 출력 스트림을 이용해서 응답 화면을 출력
//		PrintWriter out = resp.getWriter();
//		out.println("<!DOCTYPE html>");
//		out.println("<html>");
//		// ...
//		out.println("</html>");

//		Servlet으로 응답 화면 만들기 너무 어렵다... ㅠ
//		-> 응답 화면 만드는 부분의 표기법만 HTML로 변경하자!
//		--> 이것이 바로 JSP!!
//			(눈에 보이는 코드는 HTML, 해석은 Java)
	
//		Servlet -> RequestDispatcher -> forward(req, resp) -> JSP
//					 (요청 발송자)				(전송)
		
		RequestDispatcher dispatcher 
			= req.getRequestDispatcher("/WEB-INF/views/signUpResult.jsp");
						// JSP 경로 작성 시 webapp 폴더를 기준으로 작성
		
//		HttpServletRequest 객체에 message 변수 값 추가
		req.setAttribute("msg", message);
		
		dispatcher.forward(req, resp);
		
	}

}

signUpResult.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%
	// 추가된 값
	String msg = (String)request.getAttribute("msg");

	// 전달받은 값(파라미터)
	String memberId = request.getParameter("memberId");
	String memberPw = request.getParameter("memberPw");
	String memberName = request.getParameter("memberName");
	String intro = request.getParameter("intro");
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title><%=memberName %>님 가입 결과</title>
</head>
<body>

	<ul>
		<li>아이디 : <%=memberId %> </li>
		<li>비밀번호 : <%=memberPw %></li>
		<li>이름 : <%=memberName %></li>
		<li>자기소개 : <%=intro %></li>
	</ul>
	
	<h1><%=msg %></h1>
</body>
</html>

🔎 출력 화면

doPost() 시 문자 인코딩을 변경하지 않았을 때
doPost() 시 문자 인코딩을 UTF-8로 변경했을 때

현

풀스택 개발자 기록집 📁

이전 포스트

Servlet과 Apache Tomcat (23.06.28)

다음 포스트

JSP(Java Server Page) (23.06.29)

Server

📝 JSP(Java Server Page)

📌 Servlet과 JSP의 차이점

💡 Servlet

💡 JSP

📌 JSP 동작 구조

📌 Servlet/JSP 동작 순서

📌 JSP 장점

📌 JSP로 응답하기

💡 @WebServlet("요청 주소") 어노테이션

💡 Dispatcher

"JSP경로"

JSP 경로 작성 규칙

💡 위임

req.setAttribute(String key, Object value);

💡 forward

💡 HTML 주석

💡 JSP 주석

💡 <%@ %>

🔎 예시

getAttribute("key")

💡 <% %>

💡 <%= %>

📌 데이터 전달 방식

💡 GET

💡 POST

🔎 예제 1

VS Code

Eclipse

출력 화면

🔎 예제 2

VS Code

Eclipse

출력 화면

🔎 예제 3 (POST 방식)

VS Code

Eclipse

🔎 출력 화면

Servlet과 Apache Tomcat (23.06.28)

EL (Expression Language) (23.06.30)

0개의 댓글