JSP에 대해 알아보자
JSP (Java Server Page)
✔️ JSP란, HTML 형식 내에서 JAVA 코드를 쓸 수 있는 "자바 언어"
👉🏻 서블릿 (자바 코드 내)에서 응답화면을 구현했던 복잡함을 보다 간단하게 해결 가능
👉🏻 JSP의 가장 큰 장점
Servlet에서는 비즈니스 로직 처리 (컨트롤러 역할)에만 집중할 수 있고,
JSP에서는 프레젠테이션 로직 처리 (응답화면을 만들어 내는 뷰 역할)에만 집중하게끔 분리할 수 있는 것
마치 MVC 패턴과 같음!
MVC(Model, View, Contrller)
각 기능별로 Model, View, Controller 코드가 나뉘어져 있어서 유지보수 하기 굉장히 편함
Model : 데이터 처리와 관련된 부분들
View : 화면과 관련된 부분들
Controller : 요청 처리와 관련된 부분들
MVC모델의 2가지 종류
1. MVC 1 : 기존 View와 Controller의 역할을 합쳐 둔 것
JSP 또는 Servlet에서 View와 Controller의 역할을 함께 해 주는 것
설계는 간단하나 소스가 복잡해져 유지보수가 어려움
2. MVC 2 : 기존 View와 Controller의 역할을 쪼개어 둔 것 (학원에서 늘 했던 것)
기능 확장에 용이하고 유지보수가 수월함
동적 웹 프로젝트 만들기
프로젝트 이름: 2_JSP
- Next -
WebContent\WEB-INF\classes로 경로 지정해 줘야 하는 이유?
👉🏻 Next로 넘겼을 때 밑처럼 Content directory (최상위 경로)가 나오는데 이것과 일치시켜 주는 것
Context root는 바꿔 줘야 하긴 하지만 세미 때까지는 바꾸지 않을 것
web.xml 생성 박스 체크 후 Finish
모두 잘 만들어졌는지 확인 후 진행할 것
(Project Explorer로 보면 classes 파일 안 보이므로 Navigator 사용 권장)
WebContent에 HTML File 만들어 주기
이클립스에서 프로젝트 - New - 원하는 형식이 없어서 Other 누르고 이러는 거 좀 귀찮...
나만의 즐겨찾기 기능 만들고 싶어요
<이클립스 서브 메뉴 구성>
Window - Perspective - Customize Perspective - Shortcuts - Shortcut Categories
원하는 애들만 선택 후 Apply and Close 해 주면 끝
우왕
tomcat 서버에 프로젝트 올리기
WebContent - views 폴더 생성
views - 01_ScriptingElement.jsp JSP 파일 생성
JSP Element 표현법
1. JSP 스크립팅 원소 (JSP Scripting Element)
JSP 페이지에서 자바 코드를 기술할 수 있게 해 주는 기능
선언문: <%! %>
멤버변수와 메소드를 선언하기 위해 사용
👉🏻 <%! ~~~ %>와 같음
👉🏻 < 를 기재할 경우 태그로 바로 인식해 버리기 때문에 왼쪽은 < 오른쪽은 > 로 표현해 줘야 함
스크립틀릿: <% %>
JSP에서 자바 코드를 기술하기 위한 제일 기본적인 표현법
표현식 (출력식): <%= %>
자바에서 작성한 값(또는 메소드 호출 결과)를 출력하기 위해 사용
<index.xml>
// 생성해 두었던 views/01_ScriptingElement.jsp로 경로 설정
<a href="views/01_ScriptingElement.jsp">View Detail>></a>
<01_ScriptingElement.jsp>
스크립팅 원소
1. <%! 내용 %>: 선언문으로써 이 안에 멤버 변수나 메소드를 선언 가능
2. <% 내용 %>: 이 안에 일반적인 자바 코드를 작성할 수 있음(변수 선언 및 초기화, 메소드 호출 등)
<%@ 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>
<h1>스크립팅 원소</h1>
<%!
// 선언문: 이 안에 멤버변수나 메소드를 선언할 수 있음
public String test() {
return "메소드 호출됨";
}
%>
<%
// 스크립틀릿: 이 안에 일반적인 자바 코드를 작성할 수 있음 (변수 선언 및 초기화, 메소드 호출 등)
// => 자바 코드 문법에 맞게 작성해야 함
// 누적 합 구하는 코드
int sum = 0;
for(int i = 1; i <= 100; i++) {
sum += i;
}
System.out.println("덧셈 끝! 결과는 " + sum + "입니다.");
System.out.println("테스트 메소드 호출 결과: " + test());
%>
<p>
화면으로 출력하고자 한다면 <br>
표현식 (출력식)으로 출력 가능: <%= sum %> <br>
메소드의 반환값도 출력 가능: <%= test() %> <br>
<!-- 뒤에 세미콜론 찍으면 안 됨! 표현식은 내부적으로 아래의 스크립틀릿과 같기 때문에 매개변수를 제시하는 느낌으로 변수명/메소드만 적어 줘야 함 -->
스크립틀릿을 이용해서 출력 가능: <% out.println(sum); %>
</p>
<%
// 배열 사용
String[] name = {"김말똥", "홍길동", "이순신", "김갑생"};
%>
<h5>배열명 출력: <%= name %> </h5> <!-- name이라는 변수에 담긴 주소값이 그대로 출력됨 -->
<h5>배열의 길이: <%= name.length %></h5>
<h5>하나의 문자열로 연이어서 출력: <%= String.join(", ", name) %></h5>
<h4>반복문을 통해 html 요소를 반복적으로 화면에 출력 가능</h4>
<%-- 이 구문을 반복문으로 표현해 보자
<ul>
<li><%= name[0] %></li>
<li><%= name[1] %></li>
<li><%= name[2] %></li>
<li><%= name[3] %></li>
</ul>
--%>
<ul>
<% for (int i = 0; i <name.length; i++) { %>
<li><%= name[i] %></li>
<% } %>
</ul>
</body>
</html>
*참고
<!-- HTML 주석: 개발자 도구에 노출됨 -->
<%-- JSP 주석: 개발자 도구에 노출되지 않음 --%>
2. 지시어 (Directive)
[표현법]
<%@ page/include/taglib 속성="속성값" 속성="속성값" .. >
JSP page 전체에 영향을 미치는 정보를 기술할 때 쓰임
(환경 설정, 페이지 내에 필요한 요소들 작성, 다른 페이지/외부 라이브러리 코드를 끌어 쓰고 싶을 때, ...
<%@ page ~~~ %>
<%@ include ~~~ %>
<%@ taglib ~~~ %>
=> 지시어의 종류에 따라 기술할 수 있는 속성이 다 다름
✔️ page 지시어: 현재의 jsp 페이지를 처리하는 데 필요한 각종 속성을 기술하는 부분
01_ScriptingElement.jsp 상단에도 하기와 같이 기재되어 있음
page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"
✔️브라우저에게 알려 주는 속성
👉🏻 language
사용할 스크립트 언어 유형을 지정
👉🏻 contentType
웹 브라우저가 받아 볼 해당 페이지의 형식, 인코딩 방식을 지정
👉🏻 pageEncoding
jsp 파일에 기록된 자바 코드의 인코딩 방식을 지정
✔️여기서부터는 상황/필요에 따라 추가해 줘야 함
👉🏻 import
자바의 import와 같은 의미
만약 import 할 클래스들이 여러 개인 경우 ,(콤마)로 나열
보통은 page 지시어는 하나만 쓰는 걸 권장하지만 import 속성 같은 경우는 따로 빼서 작성하는 것을 더 권장
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8" %>
<%@ page import="java.util.ArrayList, java.util.Date" %>
<!-- 이런 식으로! -->
새로운 jsp 파일 하나 만들어 놓기
파일 이름: 02_DirectivePage.jsp
<index.xml>
<a href="views/02_DirectivePage.jsp">View Detail »</a>
<!-- >> = » -->
오른쪽 길러멧 기호(≫) : »
<02_DirectivePage.jsp>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8" errorPage="error500.jsp" %> <%-- import="java.util.ArrayList, java.util.Date" --%>
<%@ page import="java.util.ArrayList, java.util.Date" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<h1>page 지시어</h1>
<%
// import java.util.ArrayList; // jsp에서 import 구문 작성 불가
// import java.util.Date;
// => page 지시어 부분에 import 속성 추가
// ArrayList 사용
ArrayList<String> list = new ArrayList<>();
list.add("Servlet"); // 0번 인덱스
list.add("JSP"); // 1번 인덱스
// Date 사용
Date today = new Date(); // 현재 날짜
%>
<p>
어레이리스트의 길이: <%= list.size() %> <br>
0번 인덱스 값: <%= list.get(0) %> <br>
1번 인덱스 값: <%= list.get(1) %> <br>
현재 날짜 및 시간: <%= today %> <br>
</p>
</body>
</html>
👉🏻 errorPage
해당 jsp상에서 오류가 발생했을 경우 보여 줄 에러 페이지의 경로를 지정
에러 페이지 .jsp 파일을 만든 후 에러 페이지로 설정하면 됨
<error500.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>
<h1 align="center" style="color:red;">오류 발생! 관리자에게 문의하세요!</h1>
</body>
</html>
<02_DirectivePage.jsp>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8" errorPage="error500.jsp" %>
<%@ page import="java.util.ArrayList, java.util.Date" %>
일괄적으로 에러 페이지 지정하는 법 => web.xml 이용하기!
<error404.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>
<h1 align="center" style="color:red;">
잘못된 페이지 요청입니다. 페이지가 삭제되었거나 존재하지 않습니다.
</h1>
</body>
</html>
<web.xml>
<?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>2_JSP</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>500</error-code> <!-- 에러 번호 -->
<location>/views/error500.jsp</location> <!-- 에러 시 어떤 페이지를 보여 줄 것인지 -->
</error-page>
<error-page>
<error-code>404</error-code>
<location>/views/error404.jsp</location>
</error-page>
</web-app>
✔️ include 지시어: jsp 페이지에 또 다른 jsp 페이지를 포함시키고자 할 때 사용
새로운 jsp 파일 하나 만들어 놓기
파일 이름: 03_DirectiveInclude.jsp
<index.xml>
<a href="views/03_DirectiveInclude.jsp">View Detail »</a>
실습을 위해 datePrint.jsp 생성
<datePrint.jsp>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ page import="java.util.Date, java.text.SimpleDateFormat" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
h2 { color : red;}
</style>
</head>
<body>
<%
Date date = new Date();
SimpleDateFormat sdf = new SimpleDateFormat("yyyy년 MM월 dd일");
String today = sdf.format(date);
%>
<h2><%= today %></h2>
</body>
</html>
<03_DirectiveInclude.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>
<h1>include 지시어</h1>
<h2>01_ScriptingElement.jsp 파일 include 하기</h2>
<%@ include file="01_ScriptingElement.jsp" %>
포함한 jsp 파일상에 존재하는 자바 변수를 가져다 쓸 수 있음 <br>
1부터 100까지의 총 합계: <%= sum %> <br>
test 메소드 호출 결과: <%= test() %>
<h2>오늘 날짜</h2>
<%@ include file="datePrint.jsp" %>
포함한 jsp 파일상에 존재하는 style도 가져다 쓸 수 있음 <br>
</body>
</html>
✔️ tablib 지시어: jsp 기능을 좀 더 확장할 수 있는 지시어
추가적인 라이브러리를 등록하는 구문으로써 사용됨
세미 끝나고 배울 예정