JSP

JSP (Java Server Page)

: 웹에서 실행하는 프로그램
: java in HTML

1. 선언문 (전역 변수, 한번만 실행)
   <%! 전역변수 or 메소드 - 1번 처리 %> init()

2. 스크립트릿 (scriptlet)(요청시마다 실행)
   <% 지역변수 or service처리 - 요청 시 마다 처리 %> service() - doGet(), doPost()

3. 출력
   <%= 값 or 변수 %>

4. 디렉티브

• <%@ page %> -> 현재 페이지 (this. 랑 비슷한 개념)
• <%@ include %>
• <%@ taglib %>

5. 컴파일
   hello.jsp
   ↓
   hello_jsp.java (서블릿)
   ↓ 소스가 바뀔 때만 컴파일, 톰캣이 껐다가 켠다.
   hello_jsp.class

내장객체

1. request : javax.servlet.http.HttpServletReqeuest
2. response : javax.servlet.http.HttpServletResponse
3. out : javax.servlet.jsp.JspWriter
4. session : javax.servlet.http.HttpSession
5. application : javax.servlet.ServletContent
6. pageContent : javax.servlet.jsp.PageContext
7. page : javax.servlet.jsp.HttpJspPage
8. config : javax.servlet.ServletConfig
9. exception : java.lang.Throwable

주석

1. Java
   // 1줄
   /
   2줄 이상
   /

2. HTML
   <!- --->
   웹브라우저에는 안보이나(인식은 하나) 소스보기(F12)하면 보인다.
   내부적으로는 처리( <% %> <%= %> 수행한다)
   만일 jsp 선언문에서 주석되어있으면 에러뜸 (?)

3. JSP
   <%-- --%>
   웹브라우저에도 안보이고(인식도 못함) 소스보기(F12)해도 안 보인다.

Connectionless

HTTP 프로토콜은 클라이언트의 요청에 대한 응답을 하고 나면 해당 클라이언트와의 연결을 지속하지 않는다.

쿠키

: 생성된 쿠키는 클라이언트의 웹브라우저에 저장
: 웹사이트에 접속할 때 생성되는 정보를 담은 임시파일 (4KB)
: ID 기억 - 다음에 접속시 별도의 절차없이 빠르게 연결
: 쿠키 삭제는 시간을 0으로 셋팅
: 사생활 침해
: 팝업창의 오늘 하루 창 띄우지 않음
새로고침으로 조회수 늘리는 걸 방지할 때
최근 본 목록

쿠키생성
Cookie cookie = new Cookie("쿠키명", 값);
cookie.setMaxAge(3);//초 단위

Cookie[] ar = request.getCookies();//특정 쿠키만을 가져오지 못하고, 모든 쿠키를 카져올수 있다
	if(ar != null){
		for(int i = 0; i<ar.length; i++){
			String cookieName = ar[i].getName(); //쿠키명
			String cookieValue = ar[i].getValue(); //쿠키값
			System.out.println("쿠키명 = " + cookieName);
			System.out.println("쿠키값 = " + cookieValue);
			System.out.println();
			
			if(cookieName.equals("memName")){name = cookieValue;}
			if(cookieName.equals("memId")){id = cookieValue;}
		}
 }

세션

: 웹서버쪽의 웹컨테이너에 상태를 유지하기 위한 정보가 저장
: 세션은 기본 시간 1800초(30분)
: 각 클라이언트 고유 Session ID를 부여한다
Session ID로 클라이언트를 구분하여 각 클라이언트 요구에 맞는 서비스 제공

세션 생성
HttpSession session = request.getSession();
session.setMaxInactiveInterval(30*60); //초 단위

세션 부여
session.setAttribute("세션명“, ”값“)

세션 얻어오기
session.getAttribute("세션명“)

세션 삭제
session.removeAttribute("세션명“)

모든 세션 삭제 - 무효화
session.invalidate()

name = (String)session.getAttribute("memName");
id = (String)session.getAttribute("memId");

JSP directive (지시자)

JSP 페이지를 해당 서블릿으로 어떻게 변환하는지 웹 컨테이너에게 알려주는 메시지이다
응답에 대한 설정을 부여하는 것이다

• JSP page directive <%@ page %>
• JSP include directive <%@ include %> 파일 통째로 가져오기 때문에 용량 차지함
• JSP taglib directive <%@ taglib %> 더 많이 쓴다함

EL (Expression Language)

EL은 JSTL에 소개된 내용으로 JSP 2.0에 추가된 기능이며 JSP의 기본문법을 보완하는 역할을 한다
(1) EL에서 제공하는 기능
- JSP의 네 가지 기본 객체가 제공하는 영역의 속성 사용
- 집합 객체에 대한 접근 방법 제공
- 수치 연산, 관계 연산, 논리 연산자 제공
- 자바 클래스 메소드 호출 기능 제공
- 표현 언어만의 기본 객체 제공
표기법 : ${ expr } != $(JQuery), $.ajax();

• 모델 기법1
  자바코드와 웹 같이 사용
  개발시간 단축
  유지보수 힘듬
• 모델 기법2
  자바코드와 웹 따로 사용
  MVC (Model View Control)

(2) 표현언어에서 자바메소드를 사용
- 자바클래스 작성하고 메소드는 static 설정
- 태그라이브러리에 대한 설정정보를 담고 있는 tld(Tag Library Descriptor)파일을 작성
- web.xml에 tld파일을 사용할 수 있는 설정정보를 추가
- 자바클래스에 접근하는 jsp파일을 작성

EL (Expression Language)

EL은 JSTL에 소개된 내용으로 JSP 2.0에 추가된 기능이며 JSP의 기본문법을 보완하는 역할을 한다
(1) EL에서 제공하는 기능
JSP의 네 가지 기본 객체가 제공하는 영역의 속성 사용
집합 객체에 대한 접근 방법 제공
수치 연산, 관계 연산, 논리 연산자 제공
자바 클래스 메소드 호출 기능 제공
표현 언어만의 기본 객체 제공
표기법 : ${ expr } != $(JQuery), $.ajax();

(2) 표현언어에서 자바메소드를 사용
- 자바클래스 작성하고 메소드는 static 설정
- 태그라이브러리에 대한 설정정보를 담고 있는 tld(Tag Library Descriptor)파일을 작성
- web.xml에 tld파일을 사용할 수 있는 설정정보를 추가
- 자바클래스에 접근하는 jsp파일을 작성

URI URL

AJax

jQuery의 Ajax 함수

(1) 기본 사용 방법

• jQuery는 $.ajax() 함수를 사용한다.
• $.ajax() 함수에서 파생된 load(), $.get(), $.post(), $.getJSON() 등을 통해 상황에 따라 사용한다.

(2) $.ajax() 함수의 사용

• jQuery에서 사용되는 모든 Ajax 관련기능들은 $.ajax() 함수에서 시작된다.
• 기본 사용 방법
  => $.ajax() 함수에 웹서버로 보내기 위한 요청 설정 정보, 통신에 성공했을 경우에 실행될 함수,
  통신에 실패했을 경우 실행될 함수를 설정한다.
  

$.ajax({
		url : "접속할 페이지 주소",
		type : "get / post",
		data : "파라미터 문자열 key=value&key=value" (서버로 보내는 데이터),
		dataType : "text / xml / json / jsonp" (서버로 받는 데이터 타입),
		timeout : 제한시간(밀리세컨단위),
		cache : 이전 요청에 대한 캐쉬 저장 여부 (true=사용함, false=사용안함),
		/** 통신이 성공한 경우 실행되는 함수 */
		success : function(data) {
			......
		},
		/** 통신이 실패한 경우 실행되는 함수 (주소 오타, 웹서버 중지 등) */
		error : function(xhr, textStatus, errorThrown) {
			.....
		}
	});

.done() / .fail()의 형태

$.ajax({
  url: 'URL',
  type: 'POST',
  data: yourData,
  datatype: 'json'
})
.done(function(data, textStatus, xhr) { });
.fail(function(xhr, textStatus, errorThrown) { });
.always(function(data|xhr, textStatus, xhr|errorThrown) { });
.then(function(data, textStatus, xhr|errorThrown) { });

2. $(this).serialize()

• 데이터를 보내기 위해 폼 요소 집합을 문자열로 인코딩한다.
• 표준 URL-encoded 표기법으로 텍스트 문자열을 만든다.
• 폼 요소 집합을 표현하는 jQuery 객체를 이용한다.

  $('form').submit(
   function() {
      alert($(this).serialize());
      return false;
    }
  );

• 표준형태의 쿼리스트링을 만든다.
  => a=1&b=2&c=3&d=4

CDATA Section

• CDATA Section 영역 안에서는 특수문자의 사용이 자유롭다.
• 한글을 포함한 문자열 데이터에 사용할 수 있다.

<content><![CDATA[Ajax로 구현하는 댓글 예제입니다.]]></content>
<datetime><![CDATA[2021-03-15 12:21:42]]></datetime>

data-*

• data- 로 시작하는 속성은 Custom Data Attributes 라고 html5에서 새롭게 추가된 속성이다.
  말 그대로 사용자 정의 데이터 속성이다.
• 특별한 기능보다는 html5 element의 데이터를 의미 있게 표현할 수 있는 속성이다.
• html5에서 추가된 태그로는 콘텐츠의 아주 디테일한 의미까지 정의하기 힘들므로
  data- 속성으로 의미를 구체화 하시오.. 이런 의미로 보면 된다.
• CSS 입장에서는 id와 class 외에 속성값으로 접근하는 수단이 늘어난 것이다.
• jQuery에서도 .data()를 이용해 접근 가능하다.

예]

<li class="user" data-name="홍길동" data-city="Seoul" data-car="sm6">
    <strong>홍길동:</strong> <span>안녕하세요</span>
</li>

 CSS에서 사용
<style type="text/css">
    [data-name] { color: red; }
</style>

jQuery에서 .data()를 이용해 접근

• 데이터를 가져올 때,
  $(".user").data("name") -- 홍길동

• 데이터를 설정할 때,
  $(".user").data("name", "고길동");
  

Template 플러그인과의 연계

Template 플러그인은 동적으로 생성하고자 하는 요소를 미리 HTML 틀을 정의해 둔 후,
그 안의 적용할 내용을 JSON 데이터로 처리하는 jQuery 플러그인이다.
Ajax를 사용하면 원격지의 JSON 데이터를 페이지 이동 없이 로드 해 올 수 있다.
이때 Ajax로 로드한 JSON 데이터의 구조와 템플릿에 정의되어있는 치환자들이 동일하다면,
바로 데이터를 전달받아 동적 요소를 생성하여 화면에 출력하도록 구성할 수 있다.
사이트 : https://github.com/BorisMoore/jquery-tmpl=> jquery-tmpl-master.zip 다운로드 받기=> jquery.tmpl.min.js를 사용하면 된다.=> 플러그인 참조 코드 추가

예)
{"message" : "Hello Ajax"}
↓
$.get("data.json", {파라미터}, function(data) {
var temp = $("#itemTemplate").tmpl(data);
$("출력할 요소 CSS셀렉터").append(temp);
}, ["json"]);
↓

주의사항=> JSP 파일에서 작업을 하면 EL표현식과 충돌이 난다.=> 그래서 JSP 파일에서는 반드시 ""를 붙여서 사용을 해야 한다.{message}