[JSP] JSP문서 작성 및 코드 작성

이전 포스트를 보면 알 수 있듯이 서블릿으로 자바코드를 작성하면 서블릿 문서를 방문하고, 연산을 해야 하기 때문에 불편함이 있다.

2021/02/27 - [JSP/JSP정리] - [Servlet] 서블릿 Servlet (개념, 계산기 예제)

[Servlet] 서블릿 Servlet (개념, 계산기 예제)

[Servlet] 서블릿 Servlet (개념, 계산기 예제) 서블릿은 요청(request)과 응답(response)을 직접 조작해서 데이터를 전송, 수신한다. 단순하게 설명하면, 위와 같은 형태로 요청과 응답을 한다. 목차 목

heekng.tistory.com

JSP 이러한 불편함은 없애고, 개발자가 직접 복잡한 코드를 작성하지 않게 도와준다.

다만, 서블릿을 직접 다루지 않는 것 뿐이지 내부적으로 HttpServletRequest와 HttpServletResponse는 작동하므로 서블릿의 개념은 필수적으로 알아야 한다.

디렉티브 태그 <%@ page%>

디렉티브 태그는 현재 JSP페이지에 대한 정보를 설정하는 태그이다.

되도록 페이지의 최상단에 선언하며, <%@ page [속성]%>의 형태로 작성한다.

JSP페이지를 생성하면 최 상단에

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

가 작성되어 있는데 이 또한 디렉티브 태그이다.

속성(기본값)	설명
language(java)	현재 JSP페이지가 사용할 프로그래밍 언어
contentType(text/html)	현재 JSP페이지가 생성할 문서의 콘텐츠 유형
PageEncoding(ISO-8859-1)	현재 JSP페이지의 문자 인코딩 설정
import	현재 JSP페이지에서 사용할 자바 패키지 및 클래스 설정
session(true)	현재 JSP페이지에서 세션 사용 여부 설정
info	현재 JSP페이지에 대한 설명을 설정
errorPage	현재 JSP페이지에 오류가 발생했을 때 보여줄 오류 페이지 설정
isErrorPage(false)	현재 JSP페이지가 오류 대체 페이지인지 여부 설정

스크립트 태그

스크립트 태그는 HTMl코드에 자바 코드를 넣어 프로그램이 수행하는 기능을 구현할 수 있다.

선언문(declaration) <%! %>

자바 변수나 메소드를 선언하는데 사용한다.

스크립틀릿(scriptlet) <% %>

자바 변수 선언 및 자바 로직 코드를 작성하는 데 사용한다.

표현문(expression) <%= %>

변수, 계산식, 리턴이 있는 메소드 호출 등 "값"을 작성하여 문자열 형태로 출력한다.

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>스크립트 태그</title>
</head>
<body>
    <!-- 선언문으로 String name 선언 -->
    <%! String name = "heekng"; %>
    <!-- 스크립틀릿으로 name수정 -->
    <%name += "의 스크립트 태그 확인"; %>
    <!-- 표현문으로 name 출력 -->
    <p><%= name %></p>
</body>
</html>

include 디렉티브 태그

include 디렉티브 태그는 현재 JSP페이지의 특정 영역에 외부 파일의 내용을 포함하는 태그이다.

보통 header와 footer는 대부분의 페이지에 동일한 내용으로 작성되기 때문에 유지보수 및 편의를 위하여 외부 파일로 만든 후 include하여 사용한다.

이러한 것을 모듈화라고한다.

<%@ include file="파일경로"%>의 형태로 작성한다.

모듈은 부품이며, 보통 프로그래밍 언어에서는 함수로 만드는 작업을 모듈화라고 한다.

일회용이 아닌 재사용의 목적으로 만들어 놓을 때는 모듈화 작업이라고 부른다.

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
    <p>header 페이지 작성 내용</p>
</body>
</html>

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
    <p>footer 페이지 작성 내용</p>
</body>
</html>

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>main</title>
</head>
<body>
    <!-- include 디렉티브 태그로 헤더 jsp파일 삽입 -->
    <%@ include file="blog2Header.jsp" %>
    <p>main페이지 작성 내용</p>
    <!-- include 디렉티브 태그로 푸터 jsp파일 삽입 -->
    <%@ include file="blog2Footer.jsp" %>
</body>
</html>

위처럼 include태그를 이용하면 페이지의 부분부분을 나누고, 하나의 페이지가 망가진다면, 전체 페이지가 망가지는 상황에 대비할 수 있고, 여러 페이지에 공통적으로 들어가는 페이지를 따로 나누어 작성할고 한번에 적용할 수 있다.

액션 태그

액션태그는 서버나 클라이언트에게 어떤 행동을 하도록 명령하는 태그이다.

forward

<jsp:forward />의 형태로 작성한다.

다른 페이지로의 이동, 페이지 흐름을 제어한다.

<%@ 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>
    <h2>이동하고 싶은 페이지를 선택하세요.</h2>
    <form action="blog3Controller.jsp">
        <select name="site">
            <option value="naver" selected>네이버</option>
            <option value="google">구글</option>
        </select>
        <input type="submit" value="이동하기">
    </form>
</body>
</html>

blog3Controller.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
    <%
        String url = null;
        //선택한 사이트를 String으로 받아온다.
        String site = request.getParameter("site");
        //만약 선택한 사이트가 네이버라면
        if(site.equals("naver")){
            url="goNaver.jsp";
        //네이버가 아니면(구글이면)
        }else{
            url="goGoogle.jsp";
        }
    %>
    <!-- 위에서 지정된 페이지로 이동한다. -->
    <jsp:forward page="<%=url %>" />
    <!-- 사실상 이 페이지는 연산을 위한 페이지이므로 스쳐지나가는듯이 보인다. -->
</body>
</html>

goNaver.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>

</body>
<script>
    window.open("https://www.naver.com", "_self");
</script>
</html>

goGoogle.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>

</body>
<script>
    window.open("https://www.google.com", "_self");
</script>
</html>

위에서 작성한 대로 원하는 페이지 선택 후 이동하기 버튼을 누르면 해당 웹페이지로 이동한다.

include

<jsp:include />의 형태로 작성한다.

외부 페이지의 내용을 포함하거나 페이지를 모듈화한다.

위에서 설명한 include 디렉티브 태그와 역할은 동일하다.

main.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>main</title>
</head>
<body>
    <!-- jsp:include 액션 태그로 헤더 jsp파일 삽입 -->
    <jsp:include page="blog4Header.jsp"/>
    <p>main페이지 작성 내용</p>
    <!-- jsp:include 액션 태그로 푸터 jsp파일 삽입 -->
    <jsp:include page="blog4Footer.jsp"/>
</body>
</html>

blog4Footer.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
    <p>footer 페이지 작성 내용</p>
</body>
</html>

blog4Header.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
    <p>header 페이지 작성 내용</p>
</body>
</html>

param

<jsp:param />의 형태로 작성한다.

현재 페이지에서 다른 페이지에 정보를 전달한다.

form태그에서 action속성의 페이지로 submit하여 이동할 때 자동으로 input태그의 name:value가 이동하듯이 param태그를 통해 request객체에 해당 정보를 포함시킬 수 있다.

저작자표시 비영리 변경금지

'JS & TS > Frontend' 카테고리의 다른 글

[JSP] Ajax (0)	2021.03.11
[JSP] 내장 객체, 데이터 전송방식 (0)	2021.02.27
[JSP] 자바빈즈(자바 객체) (0)	2021.02.27
[Servlet] 서블릿 Servlet (개념, 계산기 예제) (0)	2021.02.27
[JSP] JSP시작 개념 (0)	2021.02.26
[CSS] 시맨틱태그 SemanticTag (0)	2021.02.07

수학하다 개발하기

[JSP] JSP문서 작성 및 코드 작성