'Web'에 해당되는 글 10건

  1. 2018.10.23 [jQuery] jQuery 란
  2. 2018.10.21 [JSP] EL & JSTL
  3. 2018.10.20 [JSP] MVC
  4. 2018.10.16 [JSP] 웹 프로그래밍 JSP와 Servlet
2018. 10. 23. 02:58

[jQuery] jQuery 란

Web/jQuery



Jquery



Jquery를 시작하기전에 선행 학습을 해야하는 것들

1.     HTML

2.     CSS

3.     JavaScript


이 3가지를 먼저 학습 후 jquery를 학습하자.

 


Jquery는 javascript와 같은 효과를 더욱 가볍게 구현하는 경량 라이브러리이다. Javascript가 기존에 했던 것을 단순화 시켜서 구현한다.

라이브러리는 다음과 같은 것은 제공한다.

1.     HTML/DOM manipulation

2.     CSS manipulation

3.     HTML event methods

4.     Effects and animations

5.     AJAX

6.     Utilities


심플하면서 가벼워서 많은 인기



Jquery 설치

1.     홈페이지에서 구현시 라이브러리를 헤드 태그에 추가하면 된다.

A.     Jquery는 하나의 javascript 파일이다. Html head태그에<script>태그 사이에 추가.

<head>

<script src=”jquery-1.11.1.min.js”></script>

</head>

2.     Jquery.com 홈페이지에서 Jquery 라이브러리를 다운로드

A.     컨텐트 딜리버리 네트워크를 이용.

B.      Google CDN:

<head>

<script src=”http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js”></script>

</head>

C.      Microsofy CDN:

<head>

<script src=”http://ajax.aspnetcdn.com/ajax/jquery-1/11/1/min/js”></script>

</head>

 

문법

%(selector).action()

Ex)

$(“p”).hide() è 모든 p태그 숨김

$(“.test”).hide() è class가 “test”인 모든 요소를 숨김

$(“#test”).hide() è id가 “test”인 모든 요소를 숨김

 

Event

1.     시스템에서 일어나는 사건을 의미

2.     javascript나 jQuery에게 이벤트란 브라우져에서 일어나는 사건을 의미한다. (클릭, 마우스 이동, 타이핑, 페이지 로딩등)

3.     이벤트가 발생했을 때 작동할 로직을 시스템에게 알려두면 이벤트가 발생했을 때 시스템이 그 로직을 호출한다.

jQuery의 이벤트

  1. 크로스브라우징의 문제를 해결해줌
  2. bind로 이벤트 핸들러를 설치하고, unbind로 제거 (예제1)
  3. trigger로 이벤트 핸들러를 강제로 실행 (예제2)
  4. click, ready와 같이 다양한 이벤트 헬퍼(helper)를 제공함
  5. live를 이용하면 현재 존재 하지 않는 엘리먼트에 이벤트 핸들러를 설치할 수 있음

 


Posted by PAYJAY
2018. 10. 21. 16:35

[JSP] EL & JSTL

Web/JSP


EL(Expressing Language)


EL이란 표현식 또는 액션 태그를 대신해서 값을 표현하는 언어


표현식

<%= value%>


EL

${value}


사용법

${10}

${99.99}

${“ABCD“}

${true}


EL연산자

${1+2}

${1-2}

${1*2}

${1/2}

${1>2}

${1<2}

${(1>2)?1:2}

${(1>2)||(1<2)}


<jsp:getProperty name=”member” property=”name”/>

è${member.name}





JSTL(JSP Standard Tag Library)


JSP의 경우 HTML 태그와 같이 사용되어 전체적인 코드의 가독성이 떨어진다. 이런 단점을 보완하고자 만들어진 태그 라이브러리가 JSTL이다..


JSTL은 Tomcat컨테이너에 포함되어 있지 않아 별도로 설치해야한다.



http://jakarta.apache.org/ 접속



Taglibs 카테고리 클릭




Our taglib -> standard 클릭



standard 1.1 다운로드 클릭



binaries 클릭




jakarta-taglibs-standard-1.1.2.zip을 클릭해 다운로드




압축파일을 푼 뒤에

lib 파일에 들어가면 위와 같이 두개의 파일이 있다. 


복사 후 apache Tomcat 설치 경로의 lib 붙여넣어준다.


붙여넣기 경로:

apache-tomcat-8.5.34\apache-tomcat-8.5.34\lib





JSTL은 5가지 라이브러리 제공(Core, XML Processing, I18N formatting, SQL, Function)


 

Core


Core 라이브러리는 기본적인 라이브러리로 출력, 제어문, 반복문 같은 기능이 포함되어 있다.

사용하기 위해서 Page 지시자에서 아래와 같이 적는다.

<%@ taglib uri=http://java.sun.com/jsp/jstl/core prefix=”c” %>


 

출력 태그: <c:out>

<c:out value=”출력값” default=”기본값” escapeXml=”true or false”>

 

변수 설정 태그: <c:set>

<c:set var=”변수명” value=”설정값” target=”객체” property=”값” scope=”범위”>

 

변수 제거 태그: <c:remove>

<c:remove var=”변수명” scope=”범위”>

 

예외처리 태그: <c:catch>

<c:catch var=”변수명”>

 

제어문 If 태그: <c:if>

<c:if test=”조건” var=”조건처리변수명” scope=”범위”>

 

제어문 switch 태그: <c:choose>

<c:choose>

<c:when test=”조건”>처리 내용</c:when>

<c:otherwise>처리 내용</c:otherwise>

</c:choose>

 

반복문 for 태그: <c:forEach>

<c:forEach items=”객체명” begin=”시작 인덱스” end=”끝 인덱스” step=”증감식” var=”변수명” varStatus=”상태변수”>

 

페이지 이동 태그: <c:redirect>

<c:redirect url=”url”>

 

파라미터 전달 태그: <c:param>

<c:param name=”파라미터명” value=”값”>








'Web > JSP' 카테고리의 다른 글

[JSP] 예외 페이지  (1) 2018.10.23
[JSP] forward action  (0) 2018.10.23
[JSP] MVC  (0) 2018.10.20
[JSP] 웹 프로그래밍 JSP와 Servlet  (0) 2018.10.16
Posted by PAYJAY
2018. 10. 20. 18:55

[JSP] MVC

Web/JSP


MVC

MVC란, Model, View, Controller를 뜻함

Model은 데이터베이스와의 관계 담당. 주로 java파일 클라이언트의 요청에서 필요한 자료를 데이터베이스부터 추출하거나 수정하여 controller로 전달.

View는 사용자한테 보여지는 UI화면. 주로 jsp파일로 작성. Controller에서 어떤 view 컴포넌트를 보여줄지 결정.

Controller는 요청을 받고 적절한 model에 지시를 내리며 model에서 전달된 데이터를 적절한 view에 전달한다.




Model 1


MVC에서 View와 Controller가 같이 있는 형태. 단기 프로젝트에 적합. 유지보수 불편






Model2


전통적인 MVC. Mode, View, Controller가 모두 모듈화 되어 있는 형태. 장기간 프로젝트. 유지보수 효휼적.


Frontcontroller : 많은 요청을 한곳으로 집중시켜 코드 중복막고 유지보수 효율적으로 하기위해 사용

Command : 어떤한 작업을 위한 명령을 내림

DTO : database의 data를 객체로 만들기 위한 클래스 파일

DAO : 실제로 database에 접근해서 어떠한 로직을 수행하기 위한 클래스 파일

View : Frontcontroller가 클라이언트의 요청을 완료한 화면을 보여줌


'Web > JSP' 카테고리의 다른 글

[JSP] 예외 페이지  (1) 2018.10.23
[JSP] forward action  (0) 2018.10.23
[JSP] EL & JSTL  (0) 2018.10.21
[JSP] 웹 프로그래밍 JSP와 Servlet  (0) 2018.10.16
Posted by PAYJAY
2018. 10. 16. 21:21

[JSP] 웹 프로그래밍 JSP와 Servlet

Web/JSP



웹 프로그래밍이란 웹 어플리케이션을 구현하는 행위이다

웹 어플리케이션이란 웹을 기반으로 작동되는 프로그램이다.

웹이란 1개 이상의 사이트가 연결 되어있는 인터넷 서비스의 한가지 형태이다


프로토콜(protocol) : 네트워크 상에서 약속된 통신 규약

IP : 네트워크 상에서 컴퓨터를 식별할 수 있는 주소

DNS : IP주소를 인간이 쉽게 외우도록 맵핑한 문자열

Port : IP주소가 컴퓨터를 식별할 수 있게








웹 컨테이너에서 jsp와 servlet을 서비스 한다.

JSP : HTML파일 내에 JAVA언어를 삽입한 문서

Servlet : JAVA 언어로 이루어진 웹프로그래밍 문서

 

컴포넌트

JSP, servlet, HTML 등의 웹 어플리케이션을 구현하기 위한 구성요소

웹 프로그래밍은 컴포넌트를 하나씩 만들어 나가는 것이 웹 프로그래밍.

 

동작

웹 서버: 클라이언트의 요청에 의해 정보를 제공해 주는 서버

           별도의 구현이 필요한 로직이 있을 경우 웹 어플리케이션 서버에 요청

웹 브라우저 : 웹 서버에 정보를 요청하고 웹 서버로부터 정보를 받는 매개체(HTTP)





어떠한 페이지를 가고싶다. 주소창에 주소 타이핑. 웹 서버로 request됨. 웹 서버는 바로 응답이 가능하지만 어떠한 로직(글을 찾던가, 이미지를 불러오던가..)을 수행 후 응답해야할 때 웹 어플리케이션 서버에 요청 보냄. 바로 응답이 가능하지만 어떠한 데이터 값을 보내야 할 때 데이터베이스에 접근 후 데이터를 가져온 후 웹 어플리케이션에서 적절히 가공후 웹 서버에 응답해줌. 웹 서버는 최종적으로 웹 브라우저에 응답해줌.



JSP

1.     동적 웹 어플리케이션 컴포넌트

2.     .jsp확장자

3.     클라이언트의 요청에 동적으로 작동하고 응답은 html을 이용

4.     JSP는 Servlet으로 변환되어 실행된다.

5.   MVC 패턴에서 View로 이용된다.



웹 브라우저에서 controller(servlet)에 request보냄(). 그럼 controller는 요청을 받아 요청이 무엇인지 판단 후 Model에 요청을 보내 가공함(DB접근). 다시 Controller에 응답 후 Controller는 View로 응답을 보냄. View에서 클라이언트 브라우저에 응답을 해줌.





JSP 코드 작성의 주 목적은 웹 브라우저에 보여줄 HTML 문서를 생성하는 것 이다. JSP를 사용해서 여러가지를 할 수 있지만 대부분 HTML을 작성하는데 쓰인다. JSP코드는 크게 설정 부분과 응답 생성 부분으로 구성된다.


설정 부분 : JSP 페이지의 설정 정보

생성 부분 : HTML 코드 및 JSP 스크립트

 

설정부분에 주로 위치하는 것

1.     JSP 페이지가 생성하는 문서의 타입

A.     Ex)<%@ page contentType=”text/html; charset=utf-8”%>

                         i.         생성할 문서는 html이고 charset은 uft-8임을 나타냄

2.     커스텀 태그

3.     자바 클래스 지정

<%@ page … %>를 page 디렉티브라고 함. JSP 페이지에 대한 정보를 설정할 때 page 디렉티브를 사용.

 

JSP 페이지 구성요소

1.     디렉티브

A.     디렉티브는 JSP페이지에 대한 설정 정보를 지정할 때 사용됨.

B.      <%@ 디렉티브명 속1성=”값1” 속성2=”값2”….%>

2.     스크립트 요소

A.     JSP 문서의 내용을 동적으로 생성하기 위해 사용되는 것.

B.      스크립트 요소를 사용하면 사용자가 폼에 입력한 정보를 DB에 저장할 수 있으면 DB로부터 게시글 목록을 읽어와 출력도 가능.

C.      JAVA에서 제공하는 다양한 기능도 사용가능

3.     기본 객체

A.     웹 어플리케이션 프로그래밍을 하는데 필요한 기능을 제공해주는 기본객체를 제공.

B.      Ex) request, response, session, application, page…등

C.      각각 요청 파라미터 읽어오기, 응답 결과 전송하기, 세션처리, 웹 어플리케이션 정보 읽어오기 등

4.     표현 언어

A.     스크립트 요소는 자바 문법을 그대로 사용 가능하다. 즉 자바 언어의 특징을 그대로 사용 가능하다. 하지만 JSP코드가 다소 복잡헤진다.

B.      이를 보완하기 위해 표현 언어(Expression Language)를 사용하면 좀 더 간결하게 작성 가능하다.

 

5.     정적 데이터

6.     액션 태그

A.     Forward, include, useBean… 등 jsp페이지에서 특별한 기능 제공.

7.     커스텀 태그, 태그 라이브러리

A.     커스텀 태그는 Jsp를 확장시켜주는 기능.

B.      커스텀 태그는 액션 태그와 다르게 개발자가 직접 개발하여 사용해야한다.

C.      커스텀 태그 중 자주 사용하는 것들을 별도로 표준화한 것이 JSTL(Jsp Standard Tag Library)이다.

D.     if문이나 for문 등과 같은 것들은 커스텀 태그를 이용해서 구현 가능하게 해준다

 

 

 

 

 

Servlet


1.    동적 웹 어플리케이션 컴포넌트

2.    .java 확장자

3.    클라이언트의 요청에 동적으로 작동하고 응답은 html을 이용

4.    Java thread 이용하여 동작

5.    MVC 패턴에 Controller로 이용

'Web > JSP' 카테고리의 다른 글

[JSP] 예외 페이지  (1) 2018.10.23
[JSP] forward action  (0) 2018.10.23
[JSP] EL & JSTL  (0) 2018.10.21
[JSP] MVC  (0) 2018.10.20
Posted by PAYJAY

티스토리툴바