Servlet/JSP - JSP(Java Server Page)

서블릿 귀찮.PNG

서블릿에서 결과화면을 보여주는 html을 작성하려면 위에 처럼 html태그를 하나 씩 다 적어야 한다.

 

되게 번거러운 작업이다. 이를 해소하기 위해서 jsp를 쓴다.

 

jsp는 html파일안에 자바코드를 사용할 수 있게 함으로써 html작성을 편하게 해준다.

 

 

 

 

 

1. 코드블럭 종류

 

1) <%   %>:  html파일 안에 자바코드를 넣는 기능

 

2) <%=  %>: 자바코드 안에서 만든 변수, 메소드를 호출하는 기능

 

3) <!%%> : 클래스의 멤버함수, 멤버변수를 지정하는 기능(메소드 정의)

 

4) <%@ %>: 지시 블럭이라고 하며,   파일의 기타 설정

 

 

jspservlet.drawio (1).png

 

 

 

- jsp의 단점

 

jsp가 서블릿을 보완하기 위해 나왔다고 하지만 jsp가 완벽한 것은 아니다.

 

코드 사이 사이에 <% %>를 남발하면 다른 사람이 보기에도 불편하고 나도 유지/관리가 힘들다.

 

따라서 정해진 규칙을 따라 질서정연하게 개발하는 것이 좋다.

 

이때 따라야 하는 규칙은 MVC패턴을 주로 많이 쓴다.(여러 패턴에 대한 내용은 나중에 따로 글로 적을 듯) 

 

간단하게 설명하면 MVC패턴이란

 

Model: 데이터와 관련된 영역

View: html처럼 사용자한테 보여지는 화면

Controller: 요청이 오면 그에 맞는 응답을 처리하는 로직관련 영역

 

으로 구분하여 개발하는 것을 말한다.

 

mvcjsp.drawio.png

위 파일은 jsp파일이며, 숫자를 입력하면 그 숫자가 짝수인지 홀수인지 판별하는 기능을 나타낸다.

 

입력한 숫자를 짝수, 홀수를 구분하는 로직과 그 결과를 저장하는 코드를 한쪽에다 몰아 넣었고

 

그 결과를 화면에 보여주는 기능을 구분하여 작성한 것이다.

이 같은 mvc패턴 모델을 모델1이라고 한다.

 

 

모델2는 모델1과 다음과 같은 차이가 있다.

모델2는

1. model/controller 와 view  파일을 분리한다.

=> 위 파일은 jsp하나 파일에 model/controller, view 기능을 다 작성했지만 모델2는 view 따로, model/controller따로 파일을 만든다.

 

2.dispatcher라는 새로운 기능을 쓴다.

=> 데이터를 forwarding하는 것으로, 새로운 요청을 보내는 것이 아니다. 코드의 흐름을 넘긴다는 의미이다.

 

 

model/controller 부분(서블릿)

@WebServlet("/model2")
public class Model2 extends HttpServlet{
	
	
	@Override
	protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
		
		
		int num = 0;
		String num_ = req.getParameter("n");
		if(num_ != null && !num_.equals(""))
			num = Integer.parseInt(num_);
		
		String model;
		
		if(num%2 == 0){
			model = "짝수";
		}else{
			model = "홀수";
		}	
		
	
		
		// request를 통해 보내기때문에 request에 데이터 담기
		req.setAttribute("model", model);
		req.setAttribute("num", num);
		
		
		
		//forwarding(view(jsp파일)로 request,response 보내기)
		RequestDispatcher dispatcher =  req.getRequestDispatcher("model2.jsp");
		
		dispatcher.forward(req, resp);
	}
	
	
}

 

view부분(jsp)

<%@ 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>
	
	<form action = "/JSP05/model2">
		<input type = "text" name = "n"><br>
		<input type = "submit" value = "제출"><br>
	</form>	
 
 	<p><%= request.getAttribute("num") %>은(는) <%= request.getAttribute("model") %>입니다.</p>


</body>
</html>

 

 

 

 

 

2. el(Expression Language) 사용법

 

el은 jsp파일에서 view영역(html)에 데이터를 간단하게 표현하는 기능이다.

앞서 말한 모델2를 구현할 때 유용하다.

 

 

-${데이터}: jsp에서 <%= => 기능을 담당한다. 변수, 자료구조를 표현할 때 사용

jspel.PNG

 

jspelll.PNG

 

el결과.PNG

 

-그 외 기타

${param.변수명}
request로 넘겨진 파라미터값
${empty 변수명}
변수가 null이거나 비었으면 true 반환
${header}
request header의 정보를 반환

 

 

 

 

- el의 데이터 저장소

 

${model}를 써서 데이터값을 가져왔었다. 이때 el에는 다음 4가지의 저장소를 순서대로 돌아가면서 데이터를 찾는다.

 

page 저장소 => request 저장소 => session 저장소 => application 저장소

만약 page에 model이라는 변수가 있다면 이를 반환하고 찾는 것을 중단한다. 그러면 request 안에 있던 model이라는 변수에 접근하지 못한다.

 

이때 request안에 model 변수를 쓰기 위해 scope를 쓴다.

 

 

page.PNG

해당 jsp파일에 page저장소 안에 model이라는 변수를 "안녕"이라고 설정한다.

 

page결과.PNG

그러면 ${num}은(는) ${model}입니다. 에서 

${model}은 page저장소에서 찾았으므로 request에 저장된 model을 불러올 수 없다.

 

 

하지만 

${num}은(는) ${requestScope.model}입니다. 라고 한다면

scope결과.PNG

 

request 저장소 안에서만 찾기 때문에 원하는 결과를 얻을 수 있다.

(참고로 el의 ${}는 저장소에 담긴 변수이름을 불러오므로 저장소에 담지않고 <%%>의 코드블럭에서 정의한 변수는 el을 통해서 불러오지 못한다.)

 

 

 

 

(참고영상:https://www.youtube.com/@newlec1)

 

뉴렉처

"유료" 온라인 강의 사이트 뉴렉처에서 제공하는 프로그래밍 강의 채널입니다. 교육서비스 : (10월 새롭게 오픈될 예정입니다.) https://www.newlecture.com 교재: https://javaweb.tistory.com https://answeris.tistory.

www.youtube.com