JSP(Java Server Page)
웹서버
homepage
사용자들에게 일방적인 서비스(정보) 제공
사용자들과 웹서버 간에 정보교환(게시판)
웹서버랑 게시판을 연동하는 것을 CGI
Process단위
스레드 단위로 처리해야한다.
ASP:마이크로소프트, 비주얼베이직 스크립트 언어
PHP:오픈소스
Servlet: 자바를 그대로 쓰인다.
JSP: 서블릿을 편하게 쓰게 하기 위해서 만들어짐
----------------------------------------------
Servlet
--------------
1. 웹 프로그램?
인터넷 상에서 돌아가는 프로그램
(1) Server side
-클라이언트를 지원하기 위한 목적으로 만들어짐
-비지니스 로직처리
(2) Client side
- 사용자와 소통
(3) 웹서버
apache, tomcat, jetty, iis
weblogic, jeus, websphere, ....
(4) 구조
프로젝트 폴더
html파일들...
WEB-INF //사용자가 봐야되는 것들과 보지 않아도 되는 것들은 나눈다.
classes
자바클래스...
lib
web.xml //기본 환경설정
2. 특징
(1) 자바로 만든 프로그램
(2) 클라이언트와 소통(request, response) 가능
request: 클라이언트에서 서버로
response: 서버에서 클라이언트로
(3) java.servlet.http.HttpServlet를 상속
3. 핵심클래스
(1) HttpServlet
javax.servlet.GenericServlet
메서드
1) destroy() 종료될 때 단 한번만 호출된다.
2) init(ServletConfig config):초기화 가장먼저 호출되면서 단 한번만 호출된다.
3)service(ServletRequest req, ServletResponse res)
(2) HttpServletRequest
ServletRequest
메서드
1)getParameter()
2)getParameterNames()
3)getParameterValues()
4)getAttribute()
5)setAttribute()
6)setCharacterEncoding()
7)removeAttribute()
8)getContextPath()
9)getCookies()
10)getHeader(java.lang.String name)
11)getMethod()
12)getRequestURI()
13)getRequestURL()
14)getSession()
15)getProtocol()
(3) HttpServletResponse
ServletResponse
메서드
1)java.io.PrintWriter getWriter()
2)setCharacterEncoding(java.lang.String charset)
3)setContentType(java.lang.String type)
4)addCookie(Cookie cookie)
5)sendRedirect(java.lang.String location)
6)setHeader(java.lang.String name, java.lang.String value)
4. 요청(request) 방식
(1) GET
1) 기본 전송 방식
2) 하이퍼링크 전송방식, URL전송방식
3) 전송방식이 다양
4) 소량의 데이터만 전송가능
5) 전송되는 데이터가 노출(남들이 봐도 되는 데이터만 보내는 것이 좋다)
6) 서버측의 데이터를 조회
(2) POST
1) 폼 전송방식(method="post")
2) 전송방식이 한가지만 존재
3) 대량의 데이터 전송가능
4) 전송되는 데이터가 노출되지 않는다.
※GET POST의 차이는 보여지는것과 보여지지않는 것이다.
5. 데이터를 가져오는 메서드
(1) String getParameter(String name)
(2) String getParameterValues(String name)
(3) java.util.Enumeration<String> getParameterNames()
(4) java.util.Map<String, String[]> getParameterMap()
*>
(1)프로젝트 생성 : webproject4
접근경로 : http;//localhost:8080/web4
(2) index.html 생성후 접근 테스트
(3)
6. 서블릿의 LifeCycle
(1) init()
(2) service()
(3) destroy()
<! 과제>
(1) 프로젝트 생성 : Homework
접근 경로: http://localhost:8080/homework
(2) index.html 생성후 접근 테스트
http://localhost:8080/homework/index.html
(3) 서블릿 생성 : myservelt.HomeworkServlet
http://localhost:8080/homework/home
(4) index.html에 입력받은 데이터를 다시 화면에 출력
7. Header 정보 가져오기
8. 웹프로그래밍에서 중요한 기술 2가지
(1) 페이지 이동 기술
1) HTML
<a></a>
<meta></meta>
2) javascript
location
history
3) java
?
(2) Data Persistance(지속성)
http가 비연결지향성이기 때문에 데이터의 지속성을 유지하기 위해 쿠기와 세션을 이용
1) Cookie: 클라이언트 쪽 보관기술
HttpServletRequest, HttpServletResponse
메모리관한 부담이 줄어듬
-Text
-4kb
-유효기간
메모리 쿠키
만료기간을 지정해두지 않으면 접속한 만큼만 저장
cook변수이름.setMaxAge(60*60*24*365*7); // 수식으로 저장하는게 더 편하다. 초단위로 인식
2) Session: 서버 쪽 보관기술
HttpSession
서버안에서 데이터를 다루기때문에 쿠키보다 많은 일 할 수가 있다.
long getCreationTime()
java.lang.String getId()
getMaxInactiveInterval(); 세션의 기본 종료시간 설정
★★ invalidate(): 세션이 종료되는 메서드
isNew() 처음 접속하는 지 알아보는 메서드
setMaxInactiveInterval(int interval)
9. 기본 문서 지정
10. 배포하기
war라는 파일로 웹어플리케이션을 압축한다.
===========================================
JSP
===
1. HTML안에 java코드를 포함 시키는 형태(방법 제공)
2.확장자는 반드시 .jsp로 저장
3. Spec
(1) Template Data(정적 데이터)
1) html, xml, ...
(2) Element(동적 데이터)
- ScriptElement(html안에 자바코드를 넣을 수 있게 도와주는 도구)
-Directive
-Implicit Object
-Action Tag
-EL
4. ScriptElement
(1) <% ... %> : Scriptlet(처리)
(2) <%= ... %>: Expression(표현부)
(3) <%! ... %>: Declaration(선언부)
class test{
int a;
public void service(){
int b;
b= a + 10;
PrintWriter out = response.getWriter()
out.println(b)
}
}
<html>
<body>
<% int b; %>
<%
b = a + 10;
out.println(b);
%>
<%= b %>
<%! int a; %>
</body>
</html>
5. Directive
<%@ page 속성들 %>
<%@ include file=""%>
<%@ taglib 속성들 %>
isELIgnored="trueIfalse"
JSP파일 따로 가져와서 JSP 컨테이너로 자동으로 서블릿 생성후 컴파일 실행 결과를
JSP와 취합해서 클라이언트로 결과를 보내준다.
자바 스크립트언어는 컴파일은 클라이언트에서 하기 때문에 소스 다 보이고 보안성이 떨어진다.
자바는 컴파일이 서버에서 하기때문에 소스가 보이지않기 때문에 보안성이 뛰어나다.
나눠서 보내줄수 없기때문에 한꺼번에 보내줘야한다. 클라이언트에게 보내기 전에 버퍼에 담아두고
autoFlush= 버퍼에 방출 여부
buffer= 기본값 버퍼 8kb
errorPage = 에러가 나면 이페이지 넘어가라_url
isErrorPage = 에러페이지라고 명시해주는 기능
6. Implicit Object ★:주로 쓰는 내장 객체
request ★ 입출력 HttpServletRequest
response ★ 입출력 HttpServletResponse
out 입출력 javax.servlet.jsp.jspWriter
config 서블릿 javax.servlet.ServletConfig
page 서블릿 javax.servlet.HttpJspPage
session ★컨텍스트 HttpSession
application ★ ServletContext :한개만 만들어진다. 웹서버가 중지됐을 때 사라진다.
pageContext ★장소 javax.servlet.jsp.PageContext //실제 사용할 수 있는 범위는 한장 application과 session과 request를 다 접근하고 제어할 수 있음
exception 예외 java.lang.Throwable
(1) Context관련 객체의 공통 메서드
setAttribute(변수명, 값)
getAttribute(변수명)
removeAttribute(변수명)
7. 데이터 유효성 체크
(1) 클라이언트 체크 : 자바스크립트 서버의 부담을 줄일 수 있다. , 잘못된 데이터가 서버로 넘어갈 수도 있다.
(2) 서버 체크 : 자바
==========================================================
8.ActionTag
(1) 표준 액션태그
<jsp:태그명></jsp:태그명>
--------------------------
<jsp:useBean ★ Bean태그
<jsp:setProperty ★ Bean태그
<jsp:getProperty ★ Bean태그
<jsp:forward
<jsp:include
<jsp:params
<jsp:param
(2) 사용자 정의 액션태그(커스텀 태그)
(3)<jsp:include /> 갔다가 다시 돌아오는 태그
(4)<jsp:forward /> 갔다가 돌아오지 않는 태그
*. 페이지 이동 기술
1) HTML
<a></a>
<meta></meta>
2) javascript
localhost
history
3) java
response.sendRedirect
<jsp:include/>
<jsp:forward/>
<%@ page errorPage=""%>
4) 방식
-클라이언트측 이동기술
다른 웹사이트 페이지의 이동이 가능
html
javascript
response.sendRedirect
-서버측 이동기술
같은서버 안에서만 이동가능
<%@ page errorPage=""%>
<jsp:include/>
<jsp:forward/>
<jsp:useBean ★ Bean태그
<jsp:setProperty ★ Bean태그
<jsp:getProperty ★ Bean태그
★Bean 태그 :따로 정리된 자바코드를 불러다가 쓸 수 있다.
9. BEAN
(1)자바로 만든 프로그램
(2)JSP에서 분리된 자바 컴포넌트(모듈): JSP하고만 정보를 주고 받을 수 있다.
(3)bean tag
1) <jsp:useBean />
- 인스턴스 생성
- 이미 인스턴스가 생성되어 있는 경우 그 인스턴스를 참조하는 역할도 한다.
-
2) <jsp:setProperty />
-setter 메서드 호출
3) <jsp:getProperty />
-getter메서드 호출
-get과 프로퍼티에 첫글자 대문자를 이어준다.
(4) Bean 규약
1) Property에 대한 규약
-getter 메서드 규약
1) 반드시 메서드명은 get(소문자)으로 시작
2) get다음에 시작되는 단어의 첫글자는 대문자
3) 반드시 return type이 와야한다.(void는 안된다.)
4) 반드시 매개변수는 없어야 한다.
-setter 메서드 규약
1) 반드시 메서드명은 set(소문자)으로 시작
2) get다음에 시작되는 단어의 첫글자는 대문자
3) 반드시 void여야 한다.
4) 반드시 매개변수는 있어야 한다.
(5) Bean의 Property 종류
1) 참-거짓 프로퍼티
public boolean isValid(){
...
return true; // return false;
}
2) 인덱스 프로퍼티
값을 하나만 리턴하는게 아니라 배열의 주소값을 리턴하는 값을 인덱스 프로퍼티라고 한다.
배열 값을 받아줄 리턴값이 없다.
액션태그를 받아줄 수없어서 자바 코드를 써야한다.
서브밋 버튼이 boolean으로 전달
※빈에서 자바를 만들때 패키지을 만들어야한다.
인클루드 액션태그와 @지시자의 차이
@지시자는 포함의 개념으로 메인과 서브가 하나의 서블릿으로 합쳐지고 컴파일/실행되는데 비해 인클루드 액션태그는
이동/호출의 개념(메인에서 서브액션태그페이지가 필요할 경우 건너가서 출력하고 되돌아온다.)
결과값은 같지만 처리방식의 차이가 난다.
jsp:param은 액션태그안에서 작동된다.
범위
application > session > request > pageContext
request: HttpServletRequest를 인스턴스화 시킨다.
앱플리케이션과 세션의 차이: 앱플리케이션은 하나만 만들어지고 웹서버가 중지됐을 때만 사라진다.
앱플리케이션 모든 사용자 사용할 수 있고 세션은 접속한 사용자만 사용할 수 있다.
equalsIgnoreCase: 소문자건 대문자건 상관없는 메소드
sendRedirect(java.lang.String location) : 페이지 이동 메소드
setAttribute(java.lang.String name, java.lang.Object value, int scope): 변수명, 값, 영역
getAttribute(java.lang.String name, int scope) 변수명, 영역
※부모의 기능을 상속 받기 때문에
과제
메인페이지 index.html = 작성 알아서
welcome
당신의 선택에 따라 맞춤서비스가 제공됩니다.
남자를 선택할 경우 man.html
여자를 선택할 경우 woman.html
=====================================================================================================================================================
10. DataBase 연동
(1) DBCP(DataBase Connection Pool)
1) 목적
- 중복된 코드
- 성능 저하
2) 방법
- 직접 제작
- 외부 라이브러리: JNDI 외부 떨어져있는 자원을 제공하고 데이터 및 객체를 발견(discover)하고 참고(lookup)하기 위한 자바 API다.
- WAS에서 제공 = 고급기능 갖추고 있는 웹기능
(2) Bean으로 구현
11. 게시판
(1) 빈
(2) 페이징
(3) 답변
1) 2개의 필드
테이블 pos가 포지션이라는 속성명을 새로 입력되는 글은 0이므로 pos 답변을 달기 위한 포지션이다.
인서트는 나중에 입력되는 글 뒤로 밀려나야한다.
2) 3개의 필드
12. 파일 업로드
------------------------------------------------------------------------------------
13. 부트스트랩(UI 프레임워크) UI:사용자를 위한 디자인 측면
많은 프레임워크 중에 하나이다.
트위터부트스트랩=원래이름
CSS 클래스 만들어놓고 정하는 것
짧은 시간내 만들어내는 것
빨리 만들어내기 위해서는 틀이 있어야한다. 내용물만 바꿔서 스프링 spring=프레임워크
라이브러리 일부분
프레임워크 전체적인 틀
(1) 버전
1)1.x -데탑전용
2)2.x -모바일지원
3)3.x -모바일우선지원.데탑보조.
(2) 레이아웃에 강점
(3) 반응형 웹
(4) http://getbootstrap.com/2.3.2/
<meta name="viewport" content="width=device-width, initial-scale=1.0"> ---- 최적화 메타태그.
공식적으로 지원하는 최신버전은 3.3.5
주제별로 실습.
*Scaffolding -일종의 레이아웃을 잡아주기 위함.
------------------------------------------------------------------------------------
14. JQuery
하나의 라이브러리로 만들어짐 표준으로 쓰여짐
자바스크립트 모아놓은 일종 라이브러리
클로싱 브라우저
안드로이드나 모바일 화면에도 충분히 활용할 수 있는 라이브러리 등장함
따로 공부
책 하나 사보는게 좋다.
1. 특징
(1) 자바스크립트로 만들어진 라이브러리(.js)
(2) 가볍고 빠르다.
(3) 웹 표준화
(4) 막강한 CSS Selector : 선택자=
(5) 메서드 체인 지원: 메서드를 중복사용할 필요없이 메서드 사용
(6) AJAX 지원
(7) 풍부한 플러그인 지원
(8) 모바일을 전문적으로 지원
2. 참고 사이트
www.jquery.com
www.w3schools.com
www.jqueryui.comm
3. 이외의 라이브러리
(1) prototype.js
(2) dojo.js
(3) mootools.js
(4) yui.js
(5) node.js ★★
(6) angular.js
4. 문법
(1) jquery selector
1) HTML DOM을 마음대로 탐색(traverse) 가능
2) CSS Selector를 사용하여 원하는 객체 탐색
※ div p= div의 자식인 p를 설정할때
※ #logID =
※ .logID =
jQuery(div p).메서드()
$(#logID).메서드()
$(.logID).메서드()
jQery(p>a) : P요소 바로 아래 자식인 a요소를 가져오겠다.
$(div+p) : div요소의 바로 다음에 나오는 형제 p요소를 선택
$(div~p) : div요소의 다음에 나오는 모든 형제 p요소를 선택
<p>
<span>
<a href="1.jpg">1.jpg</a>
</span>
<br/>
<a href="2.jpg">2.jpg</a>
</p>
-----------------------------------------
*: 모든 요소와 일치
E1
E1.class
E1.#id
E1 E2 E1의 자식인 E2를 설정할 ?
E1>E2
E1+E2
E1~E2
E1[attr] : attr속성을 갖는 E1요소와 일치하는 것을 탐색
E1[attr=val] : attr 속성값이 일치하는 것을 탐색
E1[attr^=val] :
E1[attr$=val] :
E1[attr*=val] :
(2) jQery Selector : Filter
1) 기본 필터
:first
:last
:not(selector)
:even
:odd
:eq(index)
:gt(index)
:lt(index)
:header
:animated
-------------
tr:odd
tr:gt(4)
tr:last 맨 마지막행만
2) 컨텐트 필터
:contains(text)
:empty
:has(selector)
:parent 부모객체 설정
3) 자식 필터
:nth-child(index | even홀수개 | odd짝수개) 수식을 작성할 수 있다. 2n+1 1부터 시작한다.
:first-child 테이블 첫번째 행전체를 선택한다.
:last-child 테이블 마지막번째 해당하는 행 전체를 선택한다.
:only-child
4) 폼 필터
:input
:text
:password
:radio
:checkbox
:submit
:image
:file
:hidden
-------
:enabled
:disabled
:checked
:selected
(3) 조작 메서드(Manipulation Method)
1) 내용 변경 메서드
-html() //getter
-html(val) // setter
-text()
-text(val)
2) 추가 관련 메서드(요소내부에 추가되는 메서드)
-append(content)
-appendTo(selector)
-prepend(content)
-prependTo(selector)
--------------------------------
<b class=".link">굵은 글자임</b>
$(".link").append("(클릭)");
<b class=".link">굵은 글자임(클릭)</b>
$("#linkText").appendTo("a.link") //to가 붙는 것은 대상이 바뀐다.
<a class="link"><div id="linkText"></div></a>
3) 추가 관련 메서드(요소 외부에 추가되는 메서드)
- after(content)
- before(content)
- insertAfter(selector)
- insertBefore(selector)
-----------------------------
$("a").after("<font>클릭</font>");
<a href="...">내용...</a><font>클릭</font>
4) 삭제 메서드
- empty() : 자식 노드 제거
- remove() : 모두 제거
5) 복사 메서드 // 매개변수 차이
- clone()
- clone(bool)
(4) 탐색 메서드
1)eq(index)
2)filter(expr)
3)filter(function)
4)is(expr)
5)map(callback)
6)not(expr)
---------------------------------
$("div:eq(1)") -->> $("div").eq(1) // 필터를 사용하거나 메서드를 사용.
중간에 다른 작업들이 가능하다. 메서드를 사용하면 작업이 별도로 이뤄지기 때문에
end()?
$("div:odd").eq(0).css("background", "orange");
$("div:odd").eq(1).css("background", "blue");
$("div:odd").eq(0).css("background", "orange").eq(1).css("background", "blue");
의 메서드 체인기법으로 사용이 불가능..왜??
$("div:odd").eq(0).css("background", "orange").end().eq(1).css("background", "blue");
의 방법으로 메서드 체인기법을 사용가능.
$("div:odd") = $("div").filter(":odd")
$("div").filter(":odd") == $("div").not(":even")
var $myDiv = $(".mystyle").eq(5);
if($myDiv.is("div")){
do something...
}
$myDiv.is(".orange, .blue, .lightblue") -셋중에 하나의 객체를 가지고있으면 true : 일종의 or연산자.
var arr = $("div").map(
function(){
return $(this).text().toUpperCase();
}
);
7) find(expr)
8) add(expr)
9) next(expr)
10) nextAll(expr)
11) parent(expr)
12) parents(expr)
13) prev(expr)
14) prevAll(expr)
15) siblings(expr)
-----------------------------------------------------
$("div:odd").filter("p") [x]
%("div:odd").find("p") [o]
$(".div").add("p")
$(".div p")
$(".div, p") [o]
$(".div").add("p").css("background", "yello")
$(".div").css("border", "1px solid red")
.add("p")
.css("background", "yello")
(5) CSS 관련 메서드
1) css(name)
2) css(name, value)
3) css(properties)
$(this).css({"color":"yellow", "background":"red"});
한번에 여러디자인이 가능.
4) addClass(class)
5) hasClass(class)
6) removeClass(class)
7) toggleClass(class)
(6) Attribute 관련 메서드
<태그명, 어트리뷰트, 어트리뷰트, 어트리...>
간혹, 어트리뷰트를 변수의 목적으로도 사용이 가능하다.
1) attr(name)
2) attr(properties)
3) attr(key, value)
4) attr(key, function)
5) removeAttr(name)
(7) Event 관련 메서드
1) bind(type, data, fn)
2) unbind(type, data, fn)
3) one(type, data, fn)
4) trigger(event, data)
업로드를 하기 위해서 enctype속성을 추가해야한다.
FileRenamePolicy policy:자동적으로 같은 이름이 있는 경우 파일이름 변경해준다.
새이름으로 다
DAO 실제DB에 작업할때는
DTO JSP에서는 보여주는 기능 넣어주고 DTO는 DB에 테이블 잘 담기 위해서 설정을
필수 작업
단순히 데이터를 가져오거나 주는 경우에는 숫자를 int형으로 안해도 된다 만약
연산을 할경우에는 int형으로 하는게 좋다.
이름은 대소문자를 따지기 때문에 이름 무조건 같아야한다.
<Resource name="jdbc/EmployeeDB" --JNDI가 이름으로 찾아온다.
auth="Container" // 인증방식 ==톰캣에게 맡기겠다.
type="javax.sql.DataSource"
username="dbusername"
password="dbpassword"
driverClassName="org.hsql.jdbcDriver"
url="jdbc:HypersonicSQL:database"
maxActive="8" // 연결 객체 동시에 최대 연결할 수 있는 것
maxIdle="4"/> // 최대 준비연결객체를 나타냄
...
---------------------------------------------- 11월 12일 -----------------------------------------------------
EL : 값을 저장하는 기능은 없다. 출력을 위한 기능.
15. EL(Expression Language) : 출력만 가능.
(1) 형식
${식}
(2) 식
1)attribute명
2)bean 또는 map
3)EL 내장 객체를
4)객체.프로퍼티 또는 객체[프로퍼티]
(3) 내장 객체
1) pageScope //여기서는 자동적으로 찾는다.
2) requestScope
3) sessionScope
4) applicationScope
5) param
6) paramValues
7) header
8) headerValues
9) cookie
10) initParam
----------------까지는 단순히 값을 출력할 뿐, 실제로 session과 연관은 없다. (즉 MAP)
하지만 pageContext는 객체로 사용할 수 있다.(실제 pageContext의 모든 기능을 사용가능)
11) pageContext
(4) 연산자기능
***커스텀태그?
액션태그 <jsp:.....>의 모양, 실제 내용은 자바코드로 이루어져 있다.
자바코드를 가져와서 태그에서 사용할 수 있게 해주는 중간 매개체를 Tld( tag library description )라고 한다. 설명충
El - 사용자 정의 함수?
(5) 사용자 정의 함수(반드시 static속성)
xml과 같은 위치에 xml파일 생성(확장자는 tld)
<tablib version="2.0">
<tlib-version>1.0</tlib-version>
<short-name>test1</short-name>
<uri>test1</uri>
<function>
<name>msg : 실제 만들어질 펑션의 이름</name>
<function-class>myservlet.ElTestServlet : 메서드가 만들어질 클래스</function-class>
<function-signature>String notifyMsg():메서드가 만들어질 형식, 매개변수가 있으면 매개변수도 넣는다.</function-signature>
</function>
</tablib>
jsp에서 사용하기 위해 지시자를 추가해야 한다.
<%@ taglib prefix="my" uri="tld파일이 있는 위치, tld파일의 uri태그 값을 넣어준다."%>
<function>
<name>root</name>
<function-class>java.lang.Math</function-class>
<function-signature>double sqrt(double)</function-signature>
</function>
이미 만들어져 있는 자바코드도 활용이 가능하다.
16. JSTL
커스텀태그를 만들지 않은 이유? JSTL이 표준화 되었기 때문에.
El과 함께 사용했을 경우 시너지 효과가 좋다.
(1) jstl.jar.standard.jar
(2) 역할 및 특징
1) EL이나 표준 액션태그로 처리하기 힘든 부분 담당
2) 연산, 조건, 반복
3) 개발자가 따로 구현 가능
--------------------------- 11월 13일 ------------------------------------
ct측 이동기술은 겟방식 (한글 코딩 필수)
sv측 이동기술은 post
에러가 났을 때 특정페이지로 이동하는 설정을 web.xml에서.
이전처럼 errorpage X
서블릿 이전에 설정해줘야 한다.
<error-page>
<exception-type>java.lang.ArithmeticException</exception-type>
<location>/core/err/error1.jsp</location>
</error-page>
(3) 구분
1)Core
- 일반 프로그래밍에서 제공하는 것과 유사한 변수
선언, 실행, 흐름의 제어기능을 제공.
- 페이지 이동기술 제공(redirect, import, url)
url은 반드시 import , redirect와 같이 써야 한다.
실제로 이동하는 기술이 아니라 어디로 이동할지 지정만 하기때문에.
- uri:http://java.sun.com/jsp/jstl/core
2)Formatting
-숫자, 날짜, 시간을 포맷팅하는 기능과 국제화, 다국어 기능 제공
- uri:http://java.sun.com/jsp/jstl/fmt
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
-1- 불러올 문서의 확장자를 properties로 하면 시스템이 읽을 준비를 기본적으로 갖춰준다.
( 클래스, 인스턴스 생성이 불필요 )
-2- 단, 클래스패스 안에 파일을 저장할 것. -> web-inf/classes
-3- properties 파일은 이클립스에서 만들지 말고 메모장, 에디트플러스 등으로 만들자.
예전 배치파일 문법으로 작성되며 주석은 #.
작성된 파일은 ASKII코드로 변경해야 시스템에서 불러올 수 있다.
메모장으로 작성한 문서를 수동으로 인코딩해주는 프로그램.-->> jdk내장 프로그램 native2ascii
cmd 명령어 : native2ascii intro_kr_original.properties intro_kr.properties
3)DataBase
- db의 데이터를 수정, 삭제, 삽입, 조회, 입력하는 기능을 제공.
- uri:http://java.sun.com/jsp/jstl/sql
4)XML
- xml 문서를 처리할 때 필요한 기능을 제공.
- uri:http://java.sun.com/jsp/jstl/xml
5)Function
- 문자열을 처리하는 함수기능을 제공
- uri:http://java.sun.com/jsp/jstl/fn
반복문에서 쓰는 속성 = begin end var items step
17. MVC패턴
18. AJAX(XML)
-------------------------------- 11월14일 -------------------------------------
11월 20일 중간점검 브리핑
17. MVC패턴
디자인 패턴의 일종.
Swing 컴퍼넌트.
Model(data),
View(presentation),
Controller
-> jsp에서 데이터 처리, 출력을 맡아 하던것을 분업화 하는것이 목적.
모듈화를 보다 체계적으로.
하나의 처리된 데이터를 다양하게 출력할 수 있게.
view - jsp
model - bean
controller - servlet
역할에 정해진 틀은 없다.
(1) 모델1 구조
(2) 모델2 구조
컨트롤러의 역할 : 사용자의 모든 요청을 컨트롤러가 받는다.
이전처럼 html이나 jsp가 받아서 bean으로 넘겨서 처리하던것과
다르게(html, jsp, bean이 고정적인것은 아니다.).
사용자로부터 들어온 요청을 컨트롤러가 선별해서 적합한
모델에게 넘긴다. 모델에서 처리한 결과를 컨트롤러에 보고,
컨트롤러는 적합한 뷰에게 명령요청.
뷰에서 처리한 출력값을 사용자가 확인.
MVC패턴의 이점에 대해 생각해보자.(ex, 보안처리)
servlet이 컨트롤러 역할을 하는데 가장 유리하다.
모델2구조는 복잡하고 커다란 규모의 사이트를 체계화시키기 위해.
사용자가 특정 페이지 주소를 알고 컨트롤러를 거치지 않는 방법을 사용한다면?
18. AJAX(XML)
-------------------------------- 11월17일 -------------------------------------
* 파싱은 독립적인 메서드에서 수행하는 방향으로.
- 메서드로 분리해두면 모델화하기 편하다.
사용자가 요청해달라고 요청한 부분을 모델로 분류 : 커맨트패턴
모델을 여러개 만들경우 표준을 정하고 하는 것이 좋다. -> 인터페이스가 필요
인스턴스 생성을 대행해 주는 역할(팩토리) 생성 : 팩토리 패턴
팩토리 패턴을 사용하면 코드가 상당량 줄어든다.
txt -> csv 로 변경해서 사용. (csv 쉼표로 분리)
csv는 외부데이터, 이 외부데이터를 DB table로 연동해야 한다. sqlLoader를 이용(오라클)
오라클 DB의 3요소 ( 데이터, 로그, 컨트롤 )
컨트롤파일이 있는 위치에서 쉘을 열어서 sqlldr scott/1111 control=파일명.ctl
----------------------------------- 11월 18일 ---------------------------------
18. AJAX(XML)
(1) XML
1) Extensible Markup Language
Markup Language의 특징(html 등) : Tag로 내부의 데이터를 둘러싼다.
초창기의 Markup Language - G(eneral) ML : 문서를 작성하는 방식을 만들어주는 언어(DB)
SGML - 태그 구분 기능 - 검색과 삭제가 쉬워졌다. - HTML이 여기서 파생(메타언어:언어를 만드는 언어)
- 데이터 호환성의 기반.
2) Meta Language
3) 용도
- Data base : xml로 데이터베이스를 만들면 DB프로그램에 종속되지 않는 장점이 있다.
- 데이터의 표준화(이기종 시스템간의 정보교환, 웹서비스, 유비쿼터스 등)
4) HTML과 XML
HTML은 이미 정해진 태그를 사용, XML은 태그를 만들고 형식을 만들어서 사용할 수 있다.
(메타언어와 일반 마크업언어의 차이)
HTML의 태그는 주로 디자인에 관련된 기능. 태그만으로는 내부 데이터의 의미, 기능을 파악하기 힘들다.
XML은 태그를 직접 생성할 수 있으므로 데이터에 대한 기능, 의미, 용도 설명을 태그로 할 수 있다.
5) 문법
- DTD : 설계도(easy)
- xml schema : 설계도(hard)
- XSL
설계도를 인터페이스처럼 이해해보자.
6) xml문서 종류
- well-formed xml document
- valid xml document
기본적인 xml문법에 맞으면 well-formed xml document
내가 만든 설계도에도 맞으면 valid xml document
7) XML문서의 구조
Prologue - 1개 (<?xml version="1.0" encoding="UTF-8"?>가 프롤로그 무조건 1개만.)
Element(시작태그와 끝태그) - 1개
Misc - 0개 이상
8) Element
- 작성 문법
모든 xml문서는 반드시 단 하나의 루트 엘리먼트를 갖는다.
루트는 여러개의 자식 엘리먼트를 가질 수 있고, 또 그 자식도 자신의 자식을 가질 수 있다.
- 종류
내용을 가지는 엘리먼트
내용이 없는 엘리먼트
- 작성 규칙
시작태그와 끝태그는 반드시 짝을 이루어야 한다.
꺽쇠는 값으로 사용이 불가
엘리먼트는 중첩되어 사용될 수 없다.
- 태그명 작성 규칙
이름은 문자로 시작하고 첫번째 문자로 특수문자중에 "_"로 시작가능.
태그명에 공백 불가
특문중에 "."은 사용가능하지만 가급적 자제.
태그명은 대소문자 구별.
태그명은 xml로 시작 불가.
- 엘리먼트의 내용
문자 데이터
자식 엘리먼트
--------------위주
엔티티 또는 문자 참조
CDATA section - 모든 문자를 허용하는 구역. 사용금지 문자도 사용이 가능.
프로세싱 지시자
주석
공백
** 프롤로그는 반드시 ?로 시작하고 끝나야 한다.
& 엔티티
<![CDATA[ tom & jane]]> CDATA섹션 문법. tom & jane 대괄호의 내부가 섹션이다.
9) DTD
- 종류
- 내부 DTD
- 외부 DTD : 일반적
- 구성요소
- 엘리먼트 선언
- 속성 선언
- Entity 선언
- Notation 선언
- 프로세싱 지시자
- 파라미터 엔티티 참조
- 주석
- 공백
- Conditional Section
- 문서 유형 선언
<!DOCTYPE 루트 엘리먼트 SYSTEM 또는 PUBLIC "식별자">
퍼블릭의 경우 +- 로 시작
+-//dtd를 개발 및 유지보수하는 업체명//DTD명 및 버전번호//사용된번호
- 엘리먼트 선언
<!ELEMENT 이름 컨텐트유형>
컨텐트 유형
#PCDATA : 내용으로 문자데이터만 갖는다. 또는 자식 엘리먼트.
, : 순서
| : or
? : 생략하거나 1개만 사용가능
+ : 한개 이상
* : 0개 이상
기호없음 : 한번만 작성 가능
EMPTY, MIXED,
- Attribute 선언
<!ATTLIST 엘리먼트이름 속성명 속성유형 디폴트>
속성 유형
CDATA : 문자 데이터
ENUMERATION : 열거형, dtd에 나열된 값 중 하나가 와야 함
ID : 유일한 값을 지정
IDREF/IDREFS : ID값을 참조
NMTOKEN/NMTOKENS : 이름 작성 규칙을 준수하는 데이터만 사용
NOTATION : dtd에 명시적으로 선언된 natation만 사용가능
ENTITY : dtd에 명시적으로 선언된 entity만 사용가능
IMPLIED : 생략이 가능
CDATA는 아무거나 가능하지만 ENTITY는 정해진 객체만 사용이 가능.
10) JAVA
- DOM : 데이터의 전체적 흐름을 파악하기 쉽다. 메모리안에 문서 전체의 내용이
다 들어가 있기 때문에.
프로그래밍이 상대적으로 편하고 DOM.api를 가져다 사용한다.
읽어들여야 할 xml파일의 크기가 커지면 메모리에 부담이 되고
속도가 느리다.
- SAX : 문서 전체의 데이터를 파악하기 힘들다. 돔과는 상반된다.
필요할때 필요한 부분만 읽어오기 때문에.
데이터 접근이 어렵다. ( 역시 필요한 데이터만 메모리에 올려두기 때문에.)
대신에 빠르다. 메모리 부담이 적다.
결과는 같지만 xml을 어떤 방식으로 처리했는지에 차이가 있다.
sax의 경우 오버라이딩을 이용.
------------------------------------------ 11월 19일 SAX 부터 ---------------------------------------------
SAX xml 에서 qName 사용법.
정보를 추려내서 dto로 묶고 Arraylist로 담아서 출력하는 과정 살펴보기.
(2) AJAX ( Asynchronous Javascript And XML)
1) RIA, UX
2) 비동기성. : 이전의 동기식에서는 서버에서 요청을 받아야만 했지만 비동기성에서는 응답을 받지 않아도
지속적으로 서버에 요청할 수 있다. 그 부분을 자바스크립트가 한다.
(하나의 작업이 종료되지 않아도 계속 서버에 다른 요청이 가능)
사용자가 전송버튼을 누르지 않아도 서버에서 지속적인 푸시서비스를 제공받을 수 있게.
(사용자 측면이 강화되었다)
3) 선수기술
- 자바스크립트
- XML
- CSS
- XMLHttpRequest ( 자바스크립트 객체 )
* AJAX로 처리하면 화면깜빡임이 없어서 사용자에게 빠르게 처리된다는 느낌을 들게 한다.
* 서버로부터 다운받을때 몇%, 진행중인것도 AJAX로 가능
* 구글맵
자바스크립트에서 자동으로 서버에게 데이터를 전송한다.
XMLHttpRequest();
이전 브라우저에서는 객체 사용 방법이 달랐지만 지금은 표준.
에이젝스는 간단하게 값만 전달받는다. 더이상 디자인을 jsp(서버)에서 처리하지 않는다.
httpRequest.onreadystatechange = callback; //함수호출 , 서버와의 관계가 변할때마다 호출되는.
4) onreadystatechange
- readystate
0(uninitialize) : 객체만 생성되고 아직 초기화가 안된 상태
1(loading) : open()이 호출되고 아직 send()까지는 호출되지 않은 상태
2(loaded) : send()가 호출되고 서버로부터 status와 헤더정보는 아직 도착하지 않은 상태
3(interactive) : 서버로부터 데이터의 일부만 받은 상태
4(complete) : 서버로부터 데이터를 전부 받은 상태
- status
200 : OK
403 : Forbidden 접근 거부
404 : File not found
500 : Internal Server error
AJAX 에서는 한글 사용 UTF-8 로. (euc-kr, ksc 코드는 국내용)
------------------------------------------ 11월 20일 AJAX 부터 ---------------------------------------------
이전처럼 완성된 페이지를 받기보다 클라이언트의 요청에 서버는 데이터만 전송해준다.
전해받은 데이터는 클라이언트의 자바스크립트에서 처리.
이전까지는 클라이언트의 요청에 서버에서 일반텍스트 형식으로 데이터를 전송.
( 데이터의 가공처리가 힘들다, ex 파싱 )
jsp을 xml로 변환하는 방법.
httpRequest.responseText - 그냥 하나의 텍스트덩어리로 수신
httpRequest.responseXML - xml이 받을수 있게 태그를 객체로 수신 - 돔으로 접근이 가능하다.
{ DTD, XML 스키마 , XSL }
<xsl:output></xsl:output> 출력결과를 어떤 모양으로 할 것인가.
<xsl:template match="books"> books 태그를 만나면 시작한다.
이하로 xsl을 이용해 디자인을 한다.
xsl 을 만들고 xml과 연결
xml파일에 <?xml-stylesheet type="text/xml" href="book.xsl" ?> 경로를 연결
서버에서 jsp와 xsl이 합쳐지는건 의미가 없다. 이 둘은 클라이언트에서 합쳐져야 한다.
sendRequest("GET", "book.jsp" , null , fnCallback);
sendRequest("GET", "book.xsl" , null , fnCallback);
- 연속적인 요청 ( 비동기성의 특징 )
단, 데이터와 디자인을 전송받을 경우? 데이터가 도착하기 전에 디자인이 도착한다면 로직이 맞지 않으니
데이터가 먼저 도착하도록, 로직 순서 처리를 해주자. (= 데이터가 도착하고 디자인이 도착하도록)
book.jsp가 먼저 오게!
일반 텍스트로 보내던 데이터를 xml형식으로 전송하게 변경.
<%=name %>, etc..
의 방식을 아래와 같이.
<employees>
<employee name="" gender="" addr="" tel=""></employee>
</employees>
----------------------------------------------------------------
월요일 JSP 시험 총20문항
페이징 알고리즘, 답변 알고리즘 ( 쿼리문을 어떻게 작성해야 할지 ).
----------------------------------------------------------------
XML 의 폐단 - 실제로 전송하는 데이터에 비해 태그의 양이 많다.
이 부분을 극복하기 위해 만들어진 Json ( javascript object notation )
제이슨을 선호!.
5) JSON
- Javascript Object Notation
서로 다른 프로그래밍 언어간에 데이터를 교환하게 하기 위한 표기법.
읽고 쓰기가 쉬운 표기법.
문법
MAP 형식
{이름:값, 이름:값, 이름:값, ...}
배열 형식
[값, 값, 값, 값, ... ]
제이슨을 사용하면서 기존의 XML을 대체하는 방식을 연습해보자.
제이슨은 자바스크립트에서 객체를 표기하기 위해 사용하는것이기에 자바스크립트에서 바로 사용이 가능.
제이슨으로 대체되고 있기때문에 map, 배열, mix 형식에 대해 잘 알아두자.
<script>
window.onload = function(){
//var map1 = {ko:"한국", fr:"프랑스", uk:"영국"};
//alert(map1.ko + ", " + map1.fr + ", " + map1.uk);
//제이슨 표기법의 맵형식
//var array1 = ["한국", "프랑스", "영국"];
//alert(array1[0] + ", " + array1[1] + ", " + array1[2]);
//제이슨 표기법의 배열형식
var mix = {name:"홍길동", food:["짜장면", "짬뽕", "볶음밥"], fColor:["빨강", "노랑", "파랑"]};
// 맵형식과 배열형식의 혼합표기법
alert(mix.name + ", " + mix.food.length + ", " + mix.fColor[1]);
}
</script>
-----------------------------------------------------------------------------------------------------------
/*
Member.prototype.setValue = function(id, name, age){
//setter method 생성
this.id = id;
this.name = name;
this.age = age;
}
Member.prototype.getAge = function(){
//getter method 생성, getter 기에 매개변수 불필요
return this.age;
}
Member.prototype.toString = function(){
return this.id + "[" + this.name + "]의 나이는 : " + this.age;
}
이 부분을 제이슨 표기법으로 전환해보자.
*/
Member.prototype = {
setValue:function(id, name, age){
this.id = id;
this.name = name;
this.age = age;
},
getAge:function(){
return this.age;
},
toString:function(){
return this.id + "[" + this.name + "]의 나이는 : " + this.age;
}
};
