48일차 - 자바 웹 개발 (5)

커스텀 태그

커스텀 태그란 JSP 페이지에서 자주 사용하는 자바 코드를 대체하기 위해 만든 태그이다.

커스텀 태그는 두 가지가 있는데, JSTL과 개발자가 만든 커스텀 태그이다.

 

JSP에서는 개발자가 필요할 때 태그를 만들어 사용할 수 있지만 스트러츠나 스프링 프레임워크에서는 프레임워크 기능과 편리하게 연동할 수 있도록 미리 태그를 만들어서 제공하기도 한다.

 

 

JSP 표준 태그 라이브러리 JSTL

JSTL이란 커스텀 태그 중 가장 많이 사용되는 태그를 표준화하여 라이브러리로 제공하는 것을 말한다.

라이브러리	세부 기능	접두어
코어	변수 지원, 흐름 제어, 반복문 처리, URL 처리	c
국제화	지역, 메시지 형식, 숫자 및 날짜 형식	fmt
XML	XML 코어, 흐름 제어, XML 변환	x
데이터베이스	SQL	sql
함수	컬렉션 처리, 문자열 처리	fn

 

 

Core 태그 라이브러리

코어 태그 라이브러리를 사용한다면 자바 코드로 구현하던 변수 선언, 조건식, 반복문 기능을 태그로 대체할 수 있다.

 

톰캣에서는 JSTL 라이브러리를 기본으로 제공하지 않고 외부 라이브러리에서 가져와 기능을 수행한다.

따라서 자바의 import 문처럼 코어 태그 라이브러리를 사용하려면 반드시 JSP 페이지 상단에 다음과 같이 taglib 디렉티브 태그를 추가해서 톰캣에게 알려주어야 한다.

 

코어 태그 라이브러리의 기능을 수행하는 태그의 종류과 기능은 다음과 같다.

기능	태그	설명
변수 지원	<c:set>	JSP 페이지에서 변수를 지정한다.
	<c:remove>	지정된 변수를 제거한다.
흐름 제어	<c:if>	조건문을 사용한다.
	<c:choose>	switch문을 사용한다. <c:when>과 <c:otherwise> 서브 태그를 갖는다.
	<c:forEach>	반복문을 사용한다.
	<c:forTokens>	구분자로 분리된 각각의 토큰을 처리할 때 사용한다.
URL 처리	<c:import>	URL을 이용해 다른 자원을 JSP 페이지에 추가한다.
	<c:redirect>	response.sendRedirect() 기능을 수행한다.
	<c:url>	요청 매개변수로부터 URL을 생성한다.
기타 태그	<c:catch>	예외 처리에 사용한다.
	<c:out>	JspWriter에 내용을 처리한 후 출력한다.

 

 

 

포매팅 태그 라이브러리

대부분의 웹 사이트를 보면 숫자 날짜, 가격 등이 콤마(,)나 점(.)으로 구분되어 있다.

JSTL 포매팅 라이브러리를 사용하면 쉽게 원하는 형태로 숫자, 날짜, 문자열 등을 표시할 수 있다.

 

포매팅 태그 라이브러리의 종류는 다음과 같다.

분류	태그	설명
포매팅	<fmt:timeZone>	지정한 국가의 시간을 지정하는 태그이다. <fmt:timeZone>태그의 경우 태그를 열고 닫는 영역 안에서만 적용된다.
	<fmt:setTimeZone>
	<fmt:formatNumber>	표시할 숫자의 형식을 지정한다.
	<fmt:formatDate>	지정한 형식의 날짜를 표시한다.

 

자바에서 문자열을 처리할 때 사용하는 문자열 관련 기능( length(), replace(), contains() indexOf() 등...)을 JSTL에서 제공하는 함수를 이용해 JSP에서도 사용할 수 있다.

 

 

HTML5와 제이쿼리

웹 브라우저는 HTML과 자바스크립트, CSS로 이루어진 구문만 인식하여 화면에 나타낸다.

그리고 JSP는 웹 사이트 화면을 구성하는 HTML을 좀 더 동적으로 구현하게 해준다.

 

HTML도 꾸준히 업그레이드 되어 HTML5 버전이 사용되고 있다.

HTML5는 기존 HTML4에서는 지원하지 않는 동영상이나 오디오 기능 그리고 지리 위치 정보 등을 지원한다.

 

또한 플러그인을 따로 설치하지 않아도 화려한 그래픽 효과를 구현할 수 있으며, 운영체제에 상관없이 스마트폰, 태블릿 같은 모바일 환경에서도 기능을 구현할 수 있다.

 

HTML5에서 제공하는 기능들은 다음과 같다.

기능	설명
Web Form	입력 형태를 보다 다양하게 제공한다.
Video	동영상 재생을 위한 API를 제공한다.
Audio	음성 재생을 위한 API를 제공한다.
Offline Web	인터넷 연결이 되지 않은 상태에서도 정상적인 기능을 지원하는 API를 제공한다.
Web DataBase	표준 SQL을 사용해 데이터를 저장할 수 있는 기능을 제공한다.
Web Stoage	웹 애플리캐이션에서 데이터를 저장할 수 있는 기능을 제공한다.
Canvas	2차원 그래픽 그리기 및 객체에 대한 각종 효과를 주는 기능을 제공한다.
SVG	XML 기반 2차원 벡터 그래픽을 표현하기 위한 SVG 언어를 지원한다.
Geolocation	디바이스의 지리적 위치 정보를 가져오는 기능을 제공한다.
Web Worker	웹 애플리케이션을 위한 스레드 기능을 제공한다.
Web Socket	웹 애플리케이션과 서버 간의 양방향 통신 기능을 제공한다.
CSS 3	웹 애플리케이션의 다양한 스타일 및 효과를 나타내기 위한 CSS 3를 제공한다.

 

 

제이쿼리

제이쿼리란 화면의 동적 기능을 자바스크립트보다 좀 더 쉽고 편리하게 개발할 수 있게 해주는 자바스크립트 기반 라이브러리이다.

제이쿼리는 여러가지 효과나 이벤트를 간단한 함수 호출만으로 빠르게 개발할 수 있어 유용하다.

 

제이쿼리의 주요 특징

1. CSS 선택자를 사용해 각 HTML 태그에 접근해서 작업하므로 명료하면서도 읽기 쉬운 형태로 표현할 수 있다.
2. 메서드 체인 방식으로 수행하므로 여러 개의 동작이 한 줄로 나열되어 코드가 불필요하게 반복되는 것을 막는다.
3. 풍부한 플러그인을 제공하므로 이미 개발된 많은 플러그인을 쉽고 빠르게 이용할 수 있다.
4. 크로스 브라우징을 제공하므로 브라우저 종류에 상관 없이 동일하게 기능을 수행한다.

 

제이쿼리를 사용하는 방법으로는 두 가지가 있다.

* 첫 번째는 제이쿼리 웹 사이트에서 라이브러리를 다운로드해서 사용하는 방법이고,

* 두 번째는 네트워크로 CDN 호스트를 설정해서 사용하는 방법이다.

 

제이쿼리는 HTML 객체를 탐색하는 방법으로 CSS 선택자를 이용한다.

선택자 종류	선택자 표현 방법	설명
All selector	$("*")	모든 DOM을 선택한다.
ID selector	$("#id")	해당되는 id를 가지는 DOM을 선택한다.
Element selector	$("elementName")	해당되는 이름을 가지는 DOM을 선택한다.
class selector	$(".className")	CSS 중 해당되는 클래스 이름을 가지는 DOM을 선택한다.
Multiple selector	$("selector1, selector2, selector3...)	해당되는 선택자를 가지는 모든 DOM을 선택한다.

 

 

제이쿼리 Ajax 기능

Ajax란 Asynchronous Javascript(비동기 자바스크립트) + XML의 의미로 자바스크립트를 사용한 비동기 통신, 즉 클라이언트와 서버 간의 XML이나 JSON 데이터를 주고 받는 기술을 의미한다.

 

Ajax는 페이지 이동 없이 데이터 처리가 가능하며, 서버의 처리를 기다리지 않고 비동기 요청이 가능하다는 특징이 있다.

 

기존 웹 페이지의 처리 방식은 서버에 요청하면, 서버에서 결과를 처리한 후 HTML 태그를 클라이언트의 브라우저에 전송하여 다른 페이지를 보여준다. 즉 페이지 이동이 발생한다.

 

반면에 Ajax로 페이지를 처리하는 경우에는 요청 페이지의 결과를 서버에서 처리한 후 다시 XML이나 JSON으로 원래 페이지로 전송한다. 즉 페이지 이동이 발생하지 않는다.

 

제이쿼리에서 Ajax를 사용하려면 $ 기호 다음에 ajax라고 명명한 후 다음과 같이 속성에 대한 값을 설정한다.

$.ajax({
type: "post 또는 get",
async: "true 또는 false",
url: "요청할 URL",
data: { 서버로 전송할 데이터},
dataType: "서버에서 전송받을 데이터형식",
success: {
        // 정상 요청, 응답 시 처리
},
error: function(xhr, status, error){
        // 오류 발생 시 처리
},
complete: function(data, textStatus){
        // 작업 완료 후 처리
}
});

 

제이쿼리 Ajax 기능 관련 속성은 다음 표와 같다.

속성	설명
type	통신 타입을 설정한다(post 또는 get 방식으로 선택한다).
url	요청할 url을 설정한다.
async	비동기식으로 처리할지의 여부를 설정한다(false인 경우 동기식으로 처리한다).
data	서버에 요청할 때 보낼 매개변수를 설정한다.
dataType	응답 받을 데이터 타입을 설정한다(XML, TEXT, HTML, JSON 등).
success	요청 및 응답에 성공했을 때 처리 구문을 설정한다.
error	요청 및 응답에 실패했을 때 처리 구문을 설정한다.
complete	모든 작업을 마친 후 처리 구문을 설정한다.