[JSP] JSP

ㅁ 이제 JSP 한다. 그리고 나중에 JSP와 서블릿을 결합한다.

- JSP와 서블릿을 결합해서 JDBC 붙여서 본격적인 웹사이트 제작을 한다.

ㅁ 새 동적 웹 프로젝트 생성

- 모든 창을 닫고 '02_jsp'라는 동적 웹 프로젝트를 만든다.

- 이클립스 패키지 익스픞폴러 빈 공간 우클릭 nex - 다이나믹 웹 프로젝트 - 프로젝트명 '02_jsp' - Dynamic web module version 4.0 맞는지 확인하고 next

- src/main/webapp/WEB-INF/classes로 default output folder 바꾸고 next

- contextroot를 jsp로 바꾸고 아래 'Generate web xml deployment descriptor' 체크하고 피니시.

ㅁ webapp 폴더 안에 index.html 파일을 만든다.

<!DOCTYPE html>

<html>

<head>

<title>Insert title here</title>

</head>

<body>

</body>

</html>

- 그리고 Servers 탭에서 서버 우클릭 add and remove 클릭해서 이 서버에 추가한다.

- 더블클릭해서 모듈탭에서 확인한다.

- localhost:8888/servlet <- 여기까지가 contextPath

- localhost:8888/jsp <- 여기까지가 contextPath

- 한 서버에 두 개의 어플리케이션을 올려서 구동시킬 수 있다.

- 다 저장하고, 서버 시작하고 브라우저에 localhost:8888/jsp 하면 이렇게 뜬다.

ㅁ < Servlet >

- 사용자의 요청을 받아 처리한 후 "자바코드를 이용해서 HTML을 작성"해서 응답해주는 Java 클래스

- 즉 Java 베이스에 HTML을 구현함

- 단점

(1) 복잡한 웹 화면을 구현하기 어려움

(2) 비즈니스 로직과 프리젠테이션 로직이 같이 기술되어 있어 유지보수가 불편하다.

그래서 나온게 JSP다.

ㅁ < JSP >

- Java Server Page

- HTML 베이스에 Java 코드를 작성할 수 있다. (즉 서블릿과 반대. <- 근데 얘도 서블릿임)

- 장점

(1) HTML 기반이기 때문에 웹 화면을 보다 쉽게 구현 가능하다.

(2) 비즈니스 로직(Java)과 프리젠테이션 로직(HTML)을 분리해서 관리할 수 있다.

- 개발자는 오직 비즈니스 로직에 집중하고, 퍼블리셔들은 프리젠테이션 로직에만 집중하게 분리 가능하다.

- 실제 동작 원리

xxx.jsp ===[변환]===> xxx_jsp.java(서블릿) ===[컴파일]===> xxx_jsp.class ===[실행]===> 클라이언트에게 보여짐.

- 결국 jsp도 서블릿의 일종이다.

서블릿에서 복잡하게 작성할 구문을 보다 편리하게 jsp로 작성하는 것이다.

실제로 작업할때는 내부적으로 서블릿 코드로 실행된다.

ㅁ JSP 구성 요소

- 아래의 것들을 쓸 수 있다.

- 자바코드도 쓸 수 있다. 대신 자바 코드를 쓰려면 표현법이 있는데 그걸 jsp 스크립트 원소라고 한다.

- jsp에서 쓸 수 있는 표현법으로 JSP 지시어, JSP 액션태그라는 것도 있다.

(1) HTML/CSS/JavaScript

(2) JSP 스크립트 원소 (Scripting Elements)

- 스크립틀릿

- 표현식

- 선언식

(3) JSP 지시어 (Directives)

- page 지시어

- include 지시어

- taglib 지시어 (세미 이후)

(4) JSP 액션태그 (Action Tags) (세미 이후)

- 표준 액션 태그 (세미 이후)

- 커스텀 액션 태그 (세미 이후)

ㅁ 아래는 index.html이다.

<!DOCTYPE html>

<html>

<head>

<title>Insert title here</title>

</head>

<body>

<a href="/jsp/a_scripting_element/main.jsp">1. Scripting Elements</a> <br>

</body>

</html>

- 메인페이지에 "/jsp/a_scripting_element/main.jsp"이라는 절대경로로 이동하는 경로를 준다.

ㅁ webapp 폴더에 a_scripting_elements라는 그냥 일반폴더를 만든다.

- 그리고 그 폴더 안에 main.jsp 파일을 만든다.

- 이제부터 페이지는 html이 아닌 JSP로 만든다.

- 아래는 main.jsp다.

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

pageEncoding="UTF-8"%>

<!DOCTYPE html>

<html>

<head>

<title>Insert title here</title>

</head>

<body>

<%-- JSP comment : 개발자 도구탭(f12)의 Elements에서 안 보임 --%>

<h2>JSP 스크립팅 원소 (Scripting Elements) : jsp에서 Java 코드를 기술할 수 있게 해주는 표현법</h2>

</body>

</html>

- jsp 파일인데 html과 비슷하다.

- HTML comment는 Java 코드 및 JSP 관련 구문을 주석처리 할 수 없지만

JSP comment는 Java 코드 및 JSP 관련 구문을 주석처리할 수 있다.

- jsp 주석은 jsp 파일에서만 쓸 수 있다. jsp 파일에선 웬만해선 jsp 주석을 쓰는게 좋다.

- UTF-8이 3개 있어야 한다. EUC-KR이면 안 됨. 인코딩이.

메인페이지에서 1을 누르면

- 위와 같이 확인된다.

ㅁ JSP 스크립팅 원소 (Scripting Elements)

- jsp에서 java 코드를 기술할 수 있게 해주는 표현법.

(1)스크립틀릿 (Scriptlet)

- Java 코드 작성시 사용하는 기본 표현법

- 변수 선언, 제어문(조건문, 반복문) 등 작성

- <% Java 코드작성 %>

(2) 표현식 (Expression)

- Java에서의 값(변수에 담긴 값, 메소드호출을 통해 반환되는 값)을 출력할 때 사용

- 표현식 안에 메소드 호출구문 작성시 ; 찍어서는 안됨 // 호출이 되어버림

- <%= Java값 %>

(3) 선언식

- 사실 쓸 일은 거의 없다.

- 이 페이지에서 자주 쓸만한 구문이 있다면 메소드로 한번 정의해둘 때 사용한다.

- 선언식으로 정의된 메소드는 해당 jsp에서 호출가능

- <%! 메소드 정의 %>

- 아래는 a_scripting_elements 폴더의 main.jsp다.

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

pageEncoding="UTF-8"%>

<!DOCTYPE html>

<html>

<head>

<title>Insert title here</title>

</head>

<body>

<%-- JSP comment : 개발자 도구탭(f12)의 Elements에서 안 보임 --%>

<h2>JSP 스크립팅 원소 (Scripting Elements) : jsp에서 Java 코드를 기술할 수 있게 해주는 표현법</h2>

<%-- 1. 스크립틀릿 (Scriptlet) --%>

int sum = 0;

for(int i=1; i<=100; i++){

sum += i;

}

System.out.println("덧셈결과: " + sum);

</body>

</html>

- <% %> 안에 몇 줄이든 써도 된다.

- println문의 결과는 이클립스의 콘솔창에 뜬다.

- <% %> 안의 자바 코드는 화면에 노출되지 않는다.

저 안에 작성한 자바 코드는 개발자 도구 탭에도 노출되지 않는다.

- println문의 결과는 이클립스의 콘솔창에 뜬다.

ㅁ 만약 사용자에게 화면으로 덧셈결과를 보여주고 싶다면

- 콘솔 출력이 아닌 화면 출력이다.

- 아래는 a_scripting_elements 폴더의 main.jsp다.

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

pageEncoding="UTF-8"%>

<!DOCTYPE html>

<html>

<head>

<title>Insert title here</title>

</head>

<body>

<%-- JSP comment : 개발자 도구탭(f12)의 Elements에서 안 보임 --%>

<h2>JSP 스크립팅 원소 (Scripting Elements) : jsp에서 Java 코드를 기술할 수 있게 해주는 표현법</h2>

<%-- 1. 스크립틀릿 (Scriptlet) --%>

int sum = 0;

for(int i=1; i<=100; i++){

sum += i;

}

System.out.println("덧셈결과: " + sum);

</body>

</html>

- <% %> 안의 내용이지만 out.println 문으로 출력하면 화면에 출력된다.

- 이 화면에서 새로고침만하면 바로 이렇게 뜬다.

- 그런데 표현식을 사용하면 더 간단하게 자바에서의 값을 화면에 표현할 수 있다.

ㅁ 표현식 사용

- 아래는 main.jsp다.

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

pageEncoding="UTF-8"%>

<!DOCTYPE html>

<html>

<head>

<title>Insert title here</title>

</head>

<body>

<%-- JSP comment : 개발자 도구탭(f12)의 Elements에서 안 보임 --%>

<h2>JSP 스크립팅 원소 (Scripting Elements) : jsp에서 Java 코드를 기술할 수 있게 해주는 표현법</h2>

<%-- 1. 스크립틀릿 (Scriptlet) --%>

int sum = 0;

for(int i=1; i<=100; i++){

sum += i;

}

System.out.println("덧셈결과: " + sum);

</body>

</html>

- 세미콜론이 없다.

out.println()에는 세미콜론이 있지만, 표현식에는(변수, 메소드 호출) 세미콜론을 쓰지 않는다.

- <%= sum %>하면 내부적으로 <% out.println(sum); %>이다.

스크립틀릿으로 출력식을 작성해서 화면에 출력해도 되고, 표현식을 사용해도 된다.

- jsp 파일에서 자바코드 쓰는데 자바 코드에 오류가 있으면 500에러가 뜬다.

ㅁ 표현식 더 연습

- 아래는 main.jsp다.

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

pageEncoding="UTF-8"%>

<!DOCTYPE html>

<html>

<head>

<title>Insert title here</title>

</head>

<body>

<%-- JSP comment : 개발자 도구탭(f12)의 Elements에서 안 보임 --%>

<h2>JSP 스크립팅 원소 (Scripting Elements) : jsp에서 Java 코드를 기술할 수 있게 해주는 표현법</h2>

<%-- 1. 스크립틀릿 (Scriptlet) --%>

int sum = 0;

for(int i=1; i<=100; i++){

sum += i;

}

System.out.println("덧셈결과: " + sum);

<% String[] name = {"가가가", "나나나", "다다다", "라라라"}; %>

배열의 길이 : <%= name.length %> <br>

배열에 담긴 값 : <%= String.join("-", name) %> <%-- 메소드 호출시 세미콜론 붙여서는 안 됨. --%>

</body>

</html>

- 브라우저 화면을 새로고침만하면 이렇게 뜬다.

ㅁ 스크립틀릿, 표현식으로 for 문도 작성해본다.

- 아래는 main.jsp다.

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

pageEncoding="UTF-8"%>

<!DOCTYPE html>

<html>

<head>

<title>Insert title here</title>

</head>

<body>

<%-- JSP comment : 개발자 도구탭(f12)의 Elements에서 안 보임 --%>

<h2>JSP 스크립팅 원소 (Scripting Elements) : jsp에서 Java 코드를 기술할 수 있게 해주는 표현법</h2>

<%-- 1. 스크립틀릿 (Scriptlet) --%>

int sum = 0;

for(int i=1; i<=100; i++){

sum += i;

}

System.out.println("덧셈결과: " + sum);

<% String[] name = {"가가가", "나나나", "다다다", "라라라"}; %>

배열의 길이 : <%= name.length %> <br>

배열에 담긴 값 : <%= String.join("-", name) %> <%-- 메소드 호출시 세미콜론 붙여서는 안 됨. --%>

<%-- for문 활용 (반복적으로 요소 생성) --%>

<ul>

<% for(int i=0; i<name.length; i++) { %>

<% } %>

</ul>

</body>

</html>

- 중간에 반복문으로 내가 만들고자 하는 요소를 쓸 수 있다. 반복적으로 요소를 생성할 수 있다.

반복문 돌면서 li 요소가 만들어지고, li 요소에 배열의 요소가 담긴다.

- 새로고침하면 이렇게 뜬다.

ㅁ 선언식

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

pageEncoding="UTF-8"%>

<!DOCTYPE html>

<html>

<head>

<title>Insert title here</title>

</head>

<body>

<%-- JSP comment : 개발자 도구탭(f12)의 Elements에서 안 보임 --%>

<h2>JSP 스크립팅 원소 (Scripting Elements) : jsp에서 Java 코드를 기술할 수 있게 해주는 표현법</h2>

int sum = 0;

int ranNum = getRandom();

for(int i=1; i<=ranNum; i++){

sum += i;

}

System.out.println("덧셈결과: " + sum);

<%!

public int getRandom() {

return (int)(Math.random()*10) + 1;

}

</body>

</html>

- 이 jsp에서는 어디에서든지 getRandom() 메소드를 호출시켜서 랜덤값을 얻을 수 있다.

얘가 작성되어있는 위치는 중요하지 않다.

ㅁ if문 사용

- 아래는 main.jsp다.

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

pageEncoding="UTF-8"%>

<!DOCTYPE html>

<html>

<head>

<title>Insert title here</title>

</head>

<body>

<%-- JSP comment : 개발자 도구탭(f12)의 Elements에서 안 보임 --%>

<h2>JSP 스크립팅 원소 (Scripting Elements) : jsp에서 Java 코드를 기술할 수 있게 해주는 표현법</h2>

int sum = 0;

int ranNum = getRandom();

for(int i=1; i<=ranNum; i++){

sum += i;

}

System.out.println("덧셈결과: " + sum); // System.out : PrintStream(콘솔창)에 출력

<b>1부터 랜덤값 까지의 덧셈결과: <% out.println(sum); %></b> <br> // out : JspWriter(화면)에 출력

<%-- if문 활용 (선택적으로 요소 생성) --%>

<% if(sum >= 10) { %>

<b>덧셈결과가 10이상입니다.</b>

<% }else { %>

<i>덧셈결과가 10미만입니다.</i>

<% } %>

<%!

public int getRandom() {

return (int)(Math.random()*10) + 1;

}

</body>

</html>

- 문구만 출력하는 거면 out.println()으로도 되겠지만, 태그다. b와 i 태그.

- if문으로 선택적으로 요소를 생성시킨 것이다.

- if문으로 두 요소 중 하나만 화면에 출력되었다.

=================================================================

ㅁ 스펠링 체크 해제

- <%-- JSP comment --> jsp 주석 쓸 때 빨간줄이 뜰 때가 있다.

- window - preferences - spelling 검색해서 제일 위에 'Enable spell checking' 체크 해제하면 주석에 빨간줄 안 뜬다.

ㅁ JSP 지시어 (Directives)

- JSP_Page Directive
- JSP_Include Directive

ㅁ JSP_Page Directive

- jsp 파일은 항상 상단에 <%@ %>가 있다. 이게 페이지 지시어다. 이미 만들어져 있다.

- 현 jsp 페이지에 대한 정보(각종 속성)를 표현하고 있는 부분이다.

- <%@ 다음에 page가 붙으면 page 지시어고, include가 붙으면 include 지시어고, taglib이 붙으면 taglib 지시어다.

- 아래는 webapp 폴더의 index.html이다.

<!DOCTYPE html>

<html>

<head>

<title>Insert title here</title>

</head>

<body>

<a href="/jsp/a_scripting_elements/main.jsp">1. Scripting Elements</a> <br>

<a href="/jsp/b_page_directive/main.jsp">2. Page Directive</a> <br>

</body>

</html>

- 아직 b_page_directive라는 폴더는 없다.

- 지금은 연습단계라 그냥 페이지 이동을 시키는데 나중에 본격적인 사이트 개발 할 때는

단순 페이지 이동도 항상 url에 경로를 숨겨야 한다.

클라이언트가 무작위 공격을 할 수 있다.

서블릿 거쳐서 포워딩 방식으로 이동할 경로가 URL에 노출되지 않게끔 해야 한다.

- 단순 페이지 이동을 서블릿을 호출하고 그 서블릿에서 포워딩 방식으로 이동해야 한다.

redirect는 새로운 데이터가 반영되어야 할 때. + url이 최종 경로가 떠야 할 때(?).

- 이클립스에서 webapp 폴더 안에 b_page_directive 폴더를 만들고, 그 폴더 안에 main.jsp 파일을 만든다.

- 아래는 b_page_directive 폴더의 main.jsp다.

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

pageEncoding="UTF-8"%>

<!DOCTYPE html>

<html>

<head>

<title>Insert title here</title>

</head>

<body>

</body>

</html>

- 서버를 스타트하고 브라우저 주소창에 localhost:8888/jsp를 입력한다.

- 2를 누른다.

- 잘 뜬다.

- 개발이 끝나고 서버에 배포가 되는 실 서버는 24시간 열려 있다. 사용자들이 24시간 이용할 수 있게.

지금 우리는 개발서버를 뒀다. 개발 서버는 스타트를 해줘야 접속할 수 있다.

ㅁ < page 지시어 >

- 현재 jsp 페이지 내에 처리하는데 필요한 각종 속성들을 기술하는 구문

- page 지시어는 항상 jsp 제일 상단에 기술한다.

- 여러개 작성할 수 있다.

- <%@ page 속성="값" 속성="값" ...%>

값은 문자열로 작성. 공백으로 여러개의 속성을 쓸 수 있다.

- 주요 속성(처음 3개는 이클립스가 자동으로 만들어줌. 건들 필요 없다.)

- language : 이 페이지에서 사용할 언어 유형 지정

- contentType : 해당 페이지의 형식, 문자셋 지정

- pageEncoding : 자바 코드의 인코딩 방식 지정

- import : 자바에서의 import와 같은 의미 (다른 패키지에 있는 클래스를 사용할 때)

- errorPage : 해당 jsp 로드시 오류가 발생할 경우 보여줄 에러페이지 경로

- 404, 500 에러를 사용자에게 그대로 노출시키면 안 된다.

특히 500 에러는 자바 코드의 문제라서 어디에 어떤 코드에 무슨 문제가 발생되는지 다 보여진다.

개발 코드가 노출되면 안 된다. 그래서 그 때 띄워줄 에러 페이지를 별도로 제작하고 그걸 띄운다.

- 아래는 b_page_directive 폴더의 main.jsp다.

<%@ page import="java.util.List, java.util.ArrayList" %>

<%@ page import="java.util.Date"%>

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

pageEncoding="UTF-8"%>

<!DOCTYPE html>

<html>

<head>

<title>Insert title here</title>

</head>

<body>

String name = "홍길동"; // String은 Java.lang 패키지에 있어서 import할 필요 없다.

List<String> list = new ArrayList<>(); // List와 ArrayList를 쓰기 위해서는 java.util 패키지 import 필요.

list.add("Servlet"); // 0번 인덱스

list.add("JSP"); // 1번 인덱스

Date today = new Date(); // 기본 생성자로 생성하면 현재 시스템 날짜 및 시간 정보

현재 날짜 및 시간 : <%= today %> <br>

이름 : <%= name %> <br>

리스트의 사이즈 : <%= list.size() %> <br> <%-- 표현식(Expression) 안에 컴마 x --%>

0번 인덱스 : <%= list.get(0) %> <br>

1번 인덱스 : <%= list.get(1) %> <br>

</body>

</html>

- 아쉽게도 이클립스 jsp에서는 ctrl shift o가 안먹힌다. 직접 import문을 써야 한다.

- import는 최상단에 쓴다. 사실 기존 페이지 지시어에 import 속성을 추가해도 된다.

- 컴마로 여러개 기술도 가능하다. // import="java.util.List, java.util.ArrayList"

그런데 한줄씩 따로 하는 게 좋다.

- import만 따로따로 한줄 씩, 나머지는 다 원래있던 거기에 다 때려박음.

- 화면단만 바꾼거라 서버 재시작 안하고 브라우저에서 새로고침만 하면 된다.

- 여기서 새로고침하면 아래와 같이 뜬다.

ㅁ 강제로 오류를 발생시켜 본다.

- 아래는 b_page_directive 폴더의 main.jsp다.

<%@ page import="java.util.List, java.util.ArrayList" %>

<%@ page import="java.util.Date"%>

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

pageEncoding="UTF-8"%>

<!DOCTYPE html>

<html>

<head>

<title>Insert title here</title>

</head>

<body>

String name = "홍길동"; // String은 Java.lang 패키지에 있어서 import할 필요 없다.

List<String> list = new ArrayList<>(); // List와 ArrayList는 java.util 패키지에 있다.

list.add("Servlet"); // 0번 인덱스

list.add("JSP"); // 1번 인덱스

Date today = new Date(); // 기본 생성자로 생성하면 현재 시스템 날짜 및 시간 정보

현재 날짜 및 시간 : <%= today %> <br>

이름 : <%= name %> <br>

리스트의 사이즈 : <%= list.size() %> <br> <%-- 표현식(Expression) 안에 컴마 x --%>

0번 인덱스 : <%= list.get(0) %> <br>

1번 인덱스 : <%= list.get(1) %> <br>

10번 인덱스 : <%= list.get(10) %> <br>

</body>

</html>

- 이렇게 main.jsp 마지막에 10번 인덱스 구문을 넣고 브라우저에서 새로고침하면 아래와 같이 뜬다.

- 500 에러. 내부 서버 오류라고 알려주고 있다. 내부 자바 코드에 오류가 있을 때 항상 뜨는 오류다.

jsp 로드시 jsp에 쓰여있는 자바코드에 문제가 있는 경우나 서블릿에 문제가 있을 때도 500 오류가 뜬다.

- 내가 작성한 자바 코드를 다 보여주고 어디에서 왜 오류가 났는지를 다 보여주고 있다.

- 사용자에게 이 오류 페이지가 노출되지 않도록 에러 페이지를 제작하고 연결해둘 예정이다.

ㅁ 에러 페이지 제작

- 같은 폴더인 b_page_directive 폴더에 error500.jsp라는 파일을 만든다. 500에러가 났을 때 띄워줄 페이지다.

- 아래는 b_page_directive 폴더의 error500.jsp다. (이클립스로 해도 되는데 vscode로 해봤음)

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

pageEncoding="UTF-8"%>

<!DOCTYPE html>

<html>

<head>

<title>Insert title here</title>

</head>

<body>

</body>

</html>

- href="/jsp"하면 /는 절대경로로 contextPath 이전까지를 뜻한다.

contextPath까지 썼으니 메인페이지가 보여진다.

- b_page_directive 폴더의 main.jsp의 페이지 지시어에 아래처럼 errorPage="/b_page_directive/error500.jsp"를 추가한다.

- jsp에서 경로를 지정할 때 contextPath를 기준으로하는(포함하는) 절대경로를 사용한다.

forwarding할 때 처럼 contextPath는 제외하고 작성하면 된다.

Context Path가 포함되는 경우: JSP의 errorPage 속성, <jsp:include>, <c:import> 등 서버가 JSP를 처리하는 과정에서 절대 경로로 해석될 때, 현재 애플리케이션의 Context Path를 자동으로 포함합니다.
Context Path가 포함되지 않는 경우: <a href="/...">, <img src="/...">와 같은 HTML 태그에서 /로 시작하는 경로는 서버의 루트 경로를 기준으로 해석됩니다. 이때는 현재 애플리케이션의 Context Path를 포함하지 않습니다.

<%@ page import="java.util.List, java.util.ArrayList" %>

<%@ page import="java.util.Date"%>

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

pageEncoding="UTF-8" errorPage="/b_page_directive/error500.jsp"%>

<!DOCTYPE html>

<html>

<head>

<title>Insert title here</title>

</head>

<body>

String name = "홍길동"; // String은 Java.lang 패키지에 있어서 import할 필요 없다.

List<String> list = new ArrayList<>(); // List와 ArrayList는 java.util 패키지에 있다.

list.add("Servlet"); // 0번 인덱스

list.add("JSP"); // 1번 인덱스

Date today = new Date(); // 기본 생성자로 생성하면 현재 시스템 날짜 및 시간 정보

현재 날짜 및 시간 : <%= today %> <br>

이름 : <%= name %> <br>

리스트의 사이즈 : <%= list.size() %> <br> <%-- 표현식(Expression) 안에 컴마 x --%>

0번 인덱스 : <%= list.get(0) %> <br>

1번 인덱스 : <%= list.get(1) %> <br>

10번 인덱스 : <%= list.get(10) %> <br>

</body>

</html>

- 이렇게 저장들을 하고 페이지를 새로고침하면 500 error가 뜨던 페이지에서 아래와 같이 바뀐다.

ㅁ 에러 페이지 한번에 등록하기

- 에러 페이지 속성은 에러가 날법한 jsp 파일에 작성한다.

그런데 jsp 파일이 많기 때문에 번거롭다. 그래서 아예 등록을 해둘 수 있다.

이 웹 애플리케이션을 실행할 때 특정 에러가 뜰 경우 특정 페이지가 뜨도록 아예 등록을 할 수 있다.

- main.jsp에서 errorPage 속성은 다시 지우고, web.xml간다.

- 아래는 web.xml이다.

web.xml은 참고로 서버 start시 제일 먼저 읽혀진다. 환경설정 관련.

<?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_4_0.xsd" id="WebApp_ID" version="4.0">

<display-name>02_jsp</display-name>

<welcome-file-list>

<welcome-file>index.html</welcome-file>

<welcome-file>index.jsp</welcome-file>

<welcome-file>index.htm</welcome-file>

<welcome-file>default.html</welcome-file>

<welcome-file>default.jsp</welcome-file>

<welcome-file>default.htm</welcome-file>

</welcome-file-list>

<error-page>

<error-code>500</error-code>

<location>/b_page_directive/error500.jsp</location>

</error-page>

</web-app>

- web.xml을 수정했으니 서버를 재시작한다.

- main.jsp에서 errorPage 속성을 지웠음에도 불구하고, 아까와 같이 500 error 페이지가 뜨는게 아니라 만들어 놓은 페이지가 대신 뜬다.

ㅁ 이번엔 404 오류를 발생시켜 본다.

- 브라우저 주소창에 localhost:8888/jsp/aewr 이렇게 아무렇게나 검색해본다.

- webapp > b_page_directive 폴더에 error404.jsp를 만든다.

- 아래는 error404.jsp다.

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

pageEncoding="UTF-8"%>

<!DOCTYPE html>

<html>

<head>

<title>Insert title here</title>

</head>

<body>

<h2>잘못된 페이지 요청입니다. 페이지가 삭제되었거나 존재하지 않습니다.</h2>

</body>

</html>

- 그리고 web.xml에 아래처럼 404에러에 대해 추가한다.

<?xml version="1.0" encoding="UTF-8"?>

<display-name>02_jsp</display-name>

<welcome-file-list>

<welcome-file>index.html</welcome-file>

<welcome-file>index.jsp</welcome-file>

<welcome-file>index.htm</welcome-file>

<welcome-file>default.html</welcome-file>

<welcome-file>default.jsp</welcome-file>

<welcome-file>default.htm</welcome-file>

</welcome-file-list>

<error-page>

<error-code>500</error-code>

<location>/b_page_directive/error500.jsp</location>

</error-page>

<error-page>

<error-code>404</error-code>

<location>/b_page_directive/error404.jsp</location>

</error-page>

</web-app>

- 저장하고, 서버 재시작하고, 브라우저에 가서 아까 404에러가 떴던 페이지를 새로고침하면 아래와 같이 뜬다.

=================================================================================

ㅁ include 지시어

- include 지시어는 다른 페이지를 포함시킬 때 사용한다.

- 기존 페이지들은 다 닫고 index.html만 킨다.

- 아래는 index.html이다.

<!DOCTYPE html>

<html>

<head>

<title>Insert title here</title>

</head>

<body>

<a href="/jsp/a_scripting_elements/main.jsp">1. Scripting Elements</a> <br>

<a href="/jsp/b_page_directive/main.jsp">2. Page Directive</a> <br>

<a href="/jsp/c_include_directive/main.jsp">3. Include Directive</a> <br>

</body>

</html>

- webapp 폴더에 c_include_directive 폴더를 만들고, 그 안에 main.jsp를 만든다.

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

pageEncoding="UTF-8"%>

<!DOCTYPE html>

<html>

<head>

<title>Insert title here</title>

</head>

<body>

<h2>include 지시어 : 다른 페이지를 포함시킬 때 사용</h2>

</body>

</html>

- 브라우저에서 확인한다.

- 3을 누르면 위처럼 뜬다.

- 다시 webapp > c_include_directive 폴더의 main.jsp로 돌아와서 아래와 같이 수정한다.

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

pageEncoding="UTF-8"%>

<!DOCTYPE html>

<html>

<head>

<title>Insert title here</title>

</head>

<body>

<h2>include 지시어 : 다른 페이지를 포함시킬 때 사용</h2>

<header>여기는 header부</header>

<section>여기는 content부</section>

<footer>여기는 footer부</footer>

</div>

</body>

</html>

- 애플리케이션의 어떤 페이지든 항상 header랑 footer는 존재해야 한다.

section에는 그 페이지에서 보여줘야할 내용이 출력된다.

- header랑 footer는 매 페이지마다 동일하게 보여진다.

그렇다고 매 페이지마다 header와 footer 페이지를 만들 필요가 없다. 별도로 jsp로 정의해두고 include로 표현할 수 있다.

- 새로고침만 하면 이렇게 바뀐다. jsp는 화면단이라 재시작 안해도 된다.

- webapp > c_include_directive에 header.jsp 파일과 footer.jsp 파일을 만든다.

- 아래는 header.jsp다.

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

pageEncoding="UTF-8"%>

<!DOCTYPE html>

<html>

<head>

<title>Insert title here</title>

</head>

<body>

<header style="border: 1px solild red">여기는 header부</header>

</body>

</html>

- header 태그도 결국 div다. 의미를 부여한 시멘틱 태그다.

- 아래는 footer.jsp다.

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

pageEncoding="UTF-8"%>

<!DOCTYPE html>

<html>

<head>

<title>Insert title here</title>

</head>

<body>

<footer style="border: 1px solid blue">여기는 footer부</footer>

</body>

</html>

- 아래는 main.jsp다

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

pageEncoding="UTF-8"%>

<!DOCTYPE html>

<html>

<head>

<title>Insert title here</title>

</head>

<body>

<h2>include 지시어 : 다른 페이지를 포함시킬 때 사용</h2>

<%@ include file="header.jsp" %> <%-- header.jsp의 header 태그(1줄)가 "이 자리"로 들어와 진다. --%>

<section>여기는 content부</section>

<%@ include file="footer.jsp" %>

</div>

</body>

</html>

- 현재 이 메인 페이지와 같은 폴더에 header.jsp가 있다. 그래서 경로를 파일명만 쓴다.

- header.jsp와 footer.jsp의 body 영역에 보여지는 요소가 들어온다.

- 사이드 영역도 매 페이지마다 같다면 include로 포함시킨다.

- header.jsp에서 선언한 변수를 main.jsp에서도 쓸 수 있다.

말 그대로 저 페이지상에 존재하는 모든 구문들이 이 자리에 들어갔다.

- 브라우저에서 새로고침하면 아래와 같다.

- f12로 Elements를 가면 저렇게 보인다.

각 박스 안에서 위에 2줄은 head 태그, 아래 1줄은 body태그다.

사실 각각 위에 2줄의 head태그는 필요 없다.

- 그래서 회사에선 head, body 태그 다 떼고 보여질 요소만 작성한다.

딱 body에 표현할 요소만을 작성한다.

- 이게 전부다.

- 스타일을 쓰고 싶다면 여기에 <style></style> 태그를 쓸 수도 있다.

- 다시 Elements 탭을 보면 불필요한 head 태그들이 다 사라졌다.

- 다른 곳에 포함될 페이지는 전체 구조를 다 둘 필요 없이 포함될 요소만 작성해도 된다.

대신 페이지 지시어는 있어야 한다.

'05_Server (04. JSP 프로그래밍 구현)' 카테고리의 다른 글

화면구현 - 웹사이트 개발 화면 구현 (BootStrap) (3)	2024.08.28
[Servlet + JSP] 서블릿과 JSP 결합 (5)	2024.08.28
[Servlet] 서블릿(2) (0)	2024.08.27
[Servlet] 서블릿(1) - 프로젝트 세팅(만들기) (2)	2024.08.26
[Servlet] 초기세팅 (워크스페이스, 서버) (1)	2024.08.26