JSP

JSP | JSP 태그

개발 공부 2022. 12. 2. 21:33

JSP 특징

1. 동적 웹어플리케이션 컴포넌트 - 자바 코드 사용가능
2. jsp 확장자
3. 클라이언트의 요청에 동적으로 작동하고 , 응답은 HTML 을 이용
4. JSP 는 웹서버와 통신시에 자동으로 Servlet 으로 변환됨
5. MVC 패턴에서 View 로 이용됨

 

JSP 태그의 개념 이해

Servlet은 java 언어를 이용하여 문서를 작성하고, 출력객체 PrintWriter 를 이용하여 html 코드를 삽입합니다
jsp 는 서블릿과 반대로 html 코드에 java 언어를 삽입하여 동적문서를 만들 수 있습니다
html 코드 안에 java 코드를 삽입하기 위해서는 jsp 태그를 이용해야 하며, 이러한 태그를 학습해야 합니다

JSP 태그 종류 생김새 특징
스크립트릿 (scriptlet) <% %> 모든 자바 코드 기술 가능
지시자 (directive) <%@ %> 페이지 속성을 지정
 표현식 (expression) <%=  %> 결과 값을 출력할 때 사용 (주로 변수 값)
주석 (comments) <%-- --%> 코드 주석처리시에 사용

 

스크립트릿 Scriptlet

- JSP 페이지에서 JAVA 언어를 사용하기 위한 요소 중 가장 많이 사용하는 태그입니다.
- 스크립트릿 안에는 우리가 알고 있는 거의 모든 JAVA 코드를 사용할 수 있습니다.

 

<!-- 표현식 : 출력구문-->
<!-- html,jsp코드 주석 단축키 ctrl + shift + / -->
<!-- JSP코드 주석 <%-- 주석 내용 --%> 단축키 ctrl + shift + / -->
<!-- 자바코드에 자바 주석도 혼용가능-->
<%--  <%
	out.println(a + "<br>");
	out.println(str + "<br>");
%> --%>
<!-- out.println(변수명) 대신 아래와 같이 사용함 -->
	
<!-- html주석은 개발자 도구(크롬 + F12)에서 보임,
    jsp주석은 개발자 도구(크롬 + F12)에서 안 보임 -->
<%= a %> <br>
<%= str%> <br>
	
<h2>구구단 3단을 표현식을 통해서 출력</h2>
	
<% for (int i = 1; i <= 9; i++){	%>
	3 x <%=i %> = <%=3*i %><br>
	<%= num + "x" + i + "=" + num * i %><br>
<%}%>

<h2>반복문으로 체크박스에 1~20까지 이름을 붙여서 가로 출력</h2>
<% for(int i = 1; i<= 20; i++){%>
	<input type = "radio" name = "number"><%=i %>
<% }%>

 

지시자 Directive

: 페이지 최상단부에 JSP 속성지정할 때 사용, 자동선언됨

 

1. page : JSP 페이지에 대한 정보를 지정한다. JSP 가 생성하는 문서의 타입, 임포트 에러 페이지 등 페이지에
서 필요로 하는 정보를 설정합니다

 

- 페이지 디렉티브에 선언 될 수 있는 속성들

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
  • a. language - 언어를 지정합니다 . java 만 지정할 수 있습니다
  • b. import - 패키지를 import 할 때 사용합니다
  • c. errorPage - 설정 된 페이지에서 에러가 발생했을 시에 미리 만들어 둔 에러 페이지를 호출합니다
  • d. contentType - text html 이라고 쓰면 결과가 HTML 문서로 만들어집니다
  • e. pageEncoding - 출력 문자 인코딩 입니다 . 한글을 사용하려면 utf 8 로 지정합니다

2. include : JSP 페이지의 특정 영역에 다른 문서를 포함시킵니다

❗ header안에 있는 메뉴(gnb)같은 공통 부분과, footer에 있는 공통 부분을 합칠 수 있는 기능

 

-- import 지시자 예시

더보기
<!-- 지시자는 자동 생성됨 -->
<%@page import="java.util.HashMap"%><!-- 임포트 지시자 -->
<%@page import="java.util.HashSet"%>
<%@page import="java.util.ArrayList"%>
<%@page import="java.text.SimpleDateFormat"%> 
<%@page import="java.util.Date"%> 
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%
	Date date = new Date();
	SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd"); //mm(소문자)은 분,MM(대문자)는 달
	String now = sdf.format(date);
	
    ArrayList<String> list = new ArrayList<>();
    HashSet<Integer> set = new HashSet<>(); //해쉬셋은 데이터가 중복이 안됨
    HashMap<Integer,String> map = new HashMap<>();
	list.add("hong");
	list.add("park");
	
	set.add(1);
	set.add(1); //x 중복데이터 불가
	
	map.put(1, "kim");
	map.put(2, "hong");
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	지금 : <%= now %><br>
	리스트 : <%= list.toString() %><br>
	맵 : <%= map.toString() %><br>
	셋 : <%= set.toString() %>
</body>
</html>

-- include 지시자 예시

📍 header 파일

<%@ 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>
<!-- 시맨틱 태그 : 의미만 부여된 태그 (div로 대체 가능) -->
	<!-- 다 블록태그 -->
	<header>
		<h3>header파일</h3>
		<nav>
			<ul>
				<li>목록</li>
				<li>목록</li>
			</ul>
		</nav>
	</header>

📍 section 파일

    include 지시자 확인!

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


<%@ include file = "include_header.jsp"%> <!-- ctrl+space 하면 나옴 -->
	<section> <!--  본문을 의미 -->
		<h3>본문</h3>
	</section>
	
<%@ include file = "include_footer.jsp" %>

📍 footer 파일

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
	<footer>
		<h3>Copyright 2022.11.29</h3>
	</footer>
</body>
</html>

 


📍 Quiz

 

<%
 	/*
 	1.정수를 저장하는 SET를 선언합니다.
 	2.1~45까지의 로또번호를 생성하고 셋에 추가. (랜덤객체사용)
 	3.중복되지 않은 숫자 6개의 로또번호를 저장하면 됩니다.
 	4.화면에 출력
 	*/
 	HashSet<Integer> set = new HashSet<>();
	while(set.size() <= 5){
 		set.add((int)(Math.random()*45)+1); //0이상 46미만
	}
 %>
<%= set %>