[DesignPattern] 싱글턴 패턴

싱글턴 패턴


프로그램을 실행할 때 보통은 많은 인스턴스가 생성된다. 예를 들어 문자열을 표시하는 java.lang.String 클래스의 인스턴스는 문자열 1개에 대해서 1개가 생성되기 때문에 문자열이 1000개 등장하는 프로그램이라면, 1000개의 인스턴스가 만들어진다.

그러나 클래스의 인스턴스가 단 하나만 필요한 경우도 있다. 그것은 시스템 안에서 1개밖에 존재하지 않는 것을 프로그램으로 표현하고 싶을 때이다.

즉, 지정한 클래스의 인스턴스 절대로 1개 밖에 존재하는 않는 것을 보증하고 싶을 때 사용한다. Singleton이란 요소를 1개 밖에 가지고 있지 않은 집합을 의미한다.



Sington 클래스에서는 인스턴스를 1개 밖에 만들 수 없으며, sington은 static 필드로서 Singleton 클래스의 인스턴스에서 초기화된다. 이 초기화는 Sington 클래스를 로드할 때 1회만 실행된다.

Sington 클래스의 생성자는 private로 되어 있다. 이것은 Sington 클래스 외부에서 생성자의 호출을 금지하기 위해서이다.

Singleton 클래스의 유일한 인스턴스를 얻는 메서드로서 getInstance가 준비되어 있다. 예제 프로그램에서는 메서드의 이름을 getInstance로 했지만, 반드시 이 이름일 필요는 없다. 그러나 유일한 인스턴스를 얻을 메서드는 필요하다.


public class Singleton {

private static Singleton singleton = null;

// 외부에서는 new Singleton()를 이용하여 생성자를 호출할 수 없다.

private Singleton(){

System.out.println("인스턴스를 생성하였습니다.");

}


// getInstance 메서드는 singleton 인스턴스가 이미 생성되어 있는지를 검사한다.

// 만약 처음 호출되어 아직 인스턴스가 생성되지 않은 상황이라면 생성자를 호출해 인스턴스를 생성한다.

// 이렇게 생성된 인스턴스는 정적 변수 singleton에 의해 참조가 된다.

// 만약 인스턴스가 생성되었다면 singleton 변수에서 참조하는 인스턴스를 반환한다.

public static Singleton getInstance(){

if(singleton == null){

singleton = new Singleton();

}

return singleton;

}

}

이 코드에서 주의 깊게 살펴봐야 할 점은 getInstance 메서드와 singleton 변수가 static 타입으로 선언되었다는 점이다.

이와 같이 static으로 선언된 메서드나 변수를 각각 정적 메서드, 정적 변수라고 한다.

정적 메서드나 정적 변수는 이들이 구체적인 인스턴스에 속하는 영역이 아니고 클래스 자체에 속한다는 의미이다. 또한 클래스의 인스턴스가 생성될 때마다 생성되는 것이 아니라 딱 한 번만 생성되며 클래스의 인스턴스가 생성되기 전에 초기화된다. 그래서 정적 메서드, 정적 변수는 클래스에서 생성된 모든 인스턴스들에게 공유된다. 따라서 클래스의 인스턴스를 통하지 않고서도 메서드를 실행할 수 있고 변수를 참조할 수 있다.

우리의 목적은 단 하나의 객체만 생성해 어디에서든지 참조할 수 있게 하는 것으로 처음에 객체를 만들려면 getInstance 메서드가 정적 메서드로 선언되어 있어야 한다.


public class Main {

public static void main(String[] args){

System.out.println("Start");

Singleton obj1 = Singleton.getInstance();

Singleton obj2 = Singleton.getInstance();

if(obj1 == obj2){

System.out.println("obj1과 obj2는 같은 인스턴스 입니다.");

} else {

System.out.println("obj1과 obj2는 다른 인스턴스 입니다.");

}

System.out.println("End");

}

}

실행결과)

Start

인스턴스를 생성하였습니다.

obj1과 obj2는 같은 인스턴스 입니다.

End


Singleton 패턴에는 Singleton의 역할만이 존재한다. Singleton 역할은 유일한 인스턴스을 얻기 위한 static 메서드를 가지고 있다. 이 메서드는 언제나 동일한 인스턴스를 반환한다.

Singleton 패턴에서는 인스턴스의 수를 제한하고 있다. 일부러 제한적인 프로그래밍을 하는 이유는 제한을 한다는 것은 전제가 되는 조건을 늘린다는 의미이다.

복수의 인스턴스가 존재하면 인스턴스들이 서로 영향을 미치고, 뜻하지 않은 버그가 발생할 가능성이 있다. 그러나 인스턴스가 1개 밖에 없다라는 보증이 있다면 그 전제조건 아래에서 프로그래밍을 할 수 있다.


cf.) 유일한 인스턴스는 언제 생성되는가?

예제 프로그램의 실행결과 'Start'를 표지하고 나서 '인스턴스를 생성했습니다.'라고 표시하고 있다. 프로그램의 실행 개시 후 최초로 getInstance 메서드를 호출했을 때 Sington 클래스는 초기화된다. 그리고 이 때 static 필드의 초기화가 이루어지고 유일한 인스턴스가 만들어진다.


[DesignPattern] 디자인 패턴의 분류

디자인 패턴의 분류


많은 디자인 패턴을 크게 범주별로 분리를 할 수 있다.

범주별로 분리를 해보면서 패턴의 특징을 쉽게 파악할 수 있다.



1. 생성, 행동, 구조 관련 패턴으로 분류


- 생성 관련 패턴 (Creational Pattern) : 객체 인스턴스 생성을 위한 패턴으로, 클라이언트와 그 클라이언트에서 생성해야 할 객체 인스턴스 사이의 연결을 끊어주는 패턴


싱글턴, 팩토리 메소드, 추상 팩토리, 프로토타입, 빌더 패턴


- 행동 관련 패턴 (Behavioral Pattern) : 클래스와 객체들이 상호작용하는 방법 및 역할을 분담하는 방법과 관련된 패턴


스트래티지, 옵저버, 스테이트, 커맨드, 이터레이터, 템플릿 메소드, 인터프리터, 미디에이터, 역할 변경, 메멘토, 비지터


- 구조 관련 패턴 (Structural Pattern) : 클래스 및 객체들을 구성을 통해서 더 큰 구조로 만들 수 있게 해 주는 것과 관련된 패턴


데코레이터, 어댑터, 컴포지트, 퍼사드, 프록시, 브리지, 플라이웨이트



2. 클래스, 객체 패턴으로 분류


- 클래스 패턴 (Class Pattern) : 클래스 사이의 관계가 상속을 통해서 어떤 식으로 정의되는지를 다룬다. 클래스 패턴은 컴파일시에 관계가 결정된다.


템플릿 메소드, 팩토리 메소드, 어댑터, 인터프리터


- 객체 패턴 (Object Patterns) : 객체 사이의 관계를 다루며, 객체 사이의 관계는 보통 구성을 통해서 정의된다. 객체 패턴에서는 일반적으로 실행 중에 관계가 생성되기 때문에 더 동적이고 유연하다.


스트래티지, 옵저버, 데코레이터, 프록시, 컴포지트, 이터레이터, 스테이트, 추상 팩토리, 싱글턴, 비지터, 메멘토, 역할 사슬, 브리지, 미디에이터, 플라이웨이트, 프로토타입, 빌더



[jQuery] 문서 준비 이벤트

문서 준비 이벤트


jQuery(document).ready(function(){ code });

=

jQuery(function(){ code });

=

$(function(){ code });


jQuery에서 문서 준비 이벤트는 웹 브라우저가 HTML의 DOM을 모두 로드할 때를 알려주는 이벤트로, <head> 태그에 jQuery 코드를 삽입할 경우에는 문서 준비 이벤트를 반드시 사용하여야 한다.

<head>에 jQuery 코드를 넣을 때에는 문서 준비 이벤트가 필요하다. 문서 준비 이벤트는 ready이다. HTML을 동적으로 조작하기 위해서는 HTML 문서를 모두 로딩해야만 그 다음에 동작을 가하는 jQuery나 JavaScript 코드가 정상적으로

작동된다. jQuery에는 ready 이벤트와 똑같은 효과를 나타내는 것이 있는데, jQuery() 함수에 매개변수로 직접 함수를 넘겨주면 이 함수는 DOM이 모두 로딩되고 난 후에 실행된다.


※ 문서 준비 이벤트를 사용하지 않은 경우

이 경우에는 <body> 문서의 맨 마지막 </body> 전에 jQuery 코드나 JavaScript 코드를 삽입하면 된다. 왜냐하면 필요한 모든 HTML이 모두 로딩되었고, 그 다음에 동작하는 jQuery 코드가 작동되면서 준비(ready) 이벤트가 필요 없어졌기

때문이다.

따라서 <body> 태그 내부에 <script> 내부에는 문서 준비 이벤트가 필요없다.



'WebFont-end > jQuery' 카테고리의 다른 글

[jQuery] Ajax 설정  (0) 2015.01.11
[jQuery] Ajax 기초  (0) 2014.12.07
[jQuery] Chain  (0) 2014.12.07
[jQuery] Animation  (0) 2014.12.07
[jQuery] Effects  (0) 2014.12.07

[jQuery] Ajax 설정

Ajax 설정


cp.) 요청 매개 변수와 함께 Ajax 요청을 수행한다. data 속성을 사용하면 요청 매개 변수를 쉽게 지정할 수 있다. $ajax() 메서드의 옵션 객체에 url 속성을 입력하고 data 속성에 객체를 입력한다.

ex.) url: 'Home/ActionWithData'.

      data: name:'rintiantta',age:21,  

      success: function(data)

       .......

이렇게 하면 http://localhost:8080/Home/ActionWithData?name=rintiantta&age=21로 

Ajax 요청을 수행한다.


1. $ajax 설정값


(1) url 

HTTP 요청을 할 대상이되는 url

단순히 html 페이지에 대한 주소가 될 수도 있고 WCF.ASMX 서비스에서 노출한 서비스 종단점에 대한 url일 수도 있다.


(2) async

true/false 기본값 true

기본적으로 모든 Ajax 요청은 비동기적으로 보내진다. 동기적으로 호출하면 요청이 진행되는 동안 페이지가 잠시 블록킹된다.


(3) cache

true/false

false로 설정되면 브라우저는 요청된 결과로 받은 페이지를 캐싱하지 않는다.


(4) contentType

기본값: application/x-www-form-urlencode

서버로 데이터를 전송할 때 콘텐츠 타입을 나타내는 값

기본값을 사용하면 대부분의 경우 잘 적용된다. JSON 형식의 데이터를 서버로 보낼 때는 "application/json"으로 설정한다.


(5) type

GET, POST (기본값은 GET이다.)


(6) dataType

서버에서 반환받을 데이터의 타입

사용 가능한 값: html, json, jsonp, script, text

이 값에 따라 반환받은 데이터를 적절하게 자동으로 파싱한다. 이 값을 설정하지 않으면 HTTP 응답의 MIME 타입을 근거로 자동 파싱한다. 만약

xml이 MIME 타입에 포함돼 있다면 xml로 파싱해서 다음 단계로 넘겨준다.


(7) data

서버로 전송될 데이터. GET, POST 같은 전송 타입에 따라 처리되는 방식이 다르다. 어떤 전송 타입이든 ‘키, 값’으로 돼 있어야 한다.

GET 방식이면 key1=value1, key2=value2처럼 구성될 것이고 POST 방식이면서 dataType이 "json" 이면 key1:value1, key2:value2을 전송할 것이다.


(8) processData

true/false

기본적으로 data로 건네받은 객체가 문자열이 아닌 경우는 content-type

이 “application/x-www-form-urlencorded"에 맞게 모두 변경된다.

만약 data에서 넘겨준 그대로를 서버로 보내고 싶다면 false로 지정한다.



2. $ajax() 콜백 설정
$Ajax()는 Ajax 호출을 하는 데 많은 단계를 정의하고 있다. $Ajax() 설정 중에는 이러한 단계별로 호출될 콜백 함수 객체를 전달할 수 있는 항목이 있다. 

(1) beforeSend
beforeSend에 설정된 콜백함수를 호출할 때는 다음의 두 인자를 차례로 전달한다.
jqXHR: jQuery XMLHttpRequest 객체
settings: 설정 항목

(2) dataFilter
서버로부터의 HTTP 요청이 성공하고 나서 서버로부터 데이터를 받으면 호출되는 함수다. success 콜백 함수가 호출되며, 인자로 data, dataType를 받는다.
data: 서버로부터 반환된 raw 데이터
dataType: 호출 시 설정한 dataType 항목의 값 
이 함수는 success로 전달될 데이터를 반환해야 한다.

(3) success
HTTP 요청이 성공하면 호출되는 함수로서, 차례로 data, textStatus, jqXHR를 인자로 전달 받는다.
data: 서버에서 반환된 데이터, dataType 설정에 따라 반환된 결과가 달라진다. json이면 서버에서 반환된 문자열이 JSON.parse()를 거치게 된다.
textStatus: 요청 상태를 나타내는 문자열
jqXHR: JQuery XMLHttpRequest 객체

(4) error
요청이 실패하면 호출될 함수로서, 차례로 jqXHR, textStatus,
errorThrown을 인자로 전달 받는다.
jqXHR: JQuery XMLHttpRequest 객체
textStatus:애러 타입을 나타내는 문자열(‘timeout', 'error', 'abort',
'parseerror' 등)
errorThrown: HTTP 에러가 발생하는 경우 “Not Found"나 
“Internal Server Error”와 같이 HTTP 상태를 나타내는 문자열

(5) complete
HTTP 요청이 끝난 후나 success, error 콜백 함수가 실행되고 나서
호출되는 함수로서, 차례로 jqXHR, textStatus를 인자로 전달 받는다.


'WebFont-end > jQuery' 카테고리의 다른 글

[jQuery] 문서 준비 이벤트  (0) 2015.01.11
[jQuery] Ajax 기초  (0) 2014.12.07
[jQuery] Chain  (0) 2014.12.07
[jQuery] Animation  (0) 2014.12.07
[jQuery] Effects  (0) 2014.12.07

[jQuery] jQuery Quick API

jQuery Quick API 




1. 제어


(1) 선택

.add() : 요소를 추가 선택한다. 

$("p").add("div")  // p 요소와 div 요소를 선택한다.


.not() : 선택된 확장집합에서 인자에 해당하는 요소를 제거한다.

$("p").not(".green")  // p 요소의 확장집합에서 class가 green인 요소를 제거한다.


.children() : 요소의 고유한 자식으로 구성된 확장 집합을 반환한다.


.contents() : 선택한 요소의 자식 요소를 가져온다.(text node 포함)

$('.container').contents().filter(function(){}); 

// class container 요소의 자식요소(text 포함)를 가져와 filter 한다. iframe text를 가져올때 사용


.first() : 요소의 첫번째 노드 반환


.last() : 요소의 마지막 노드 반환


.next() : 요소 집합내의 바로 다음에 나오는 형제로 구성된 요소 반환


.nextAll() : 요소 집합내의 다음에 나오는 모든 형제로 구성된 확장집합 반환


.nextUntil() : 선택 요소부터 인자가 나올때까지 집합을 선택한다.

$("#term").nextUntil("dt").css('background-color', 'red'); 

// id term 요소부터 dt가 나올때까지 형제요소를 검색하고 배경을 red로 변경

$("#term").nextUntil($("#term2"), "dd").css('background-color', 'red'); 

// id term 요소부터 id term2 요소까지 중 dd 요소만 배경을 red로 변경


.parent() : 요소 집합의 바로 위 부모로 구성된 확장 집합 반환


.parents() : 요소 집합의 모든 조상 확장 집합을 반환. 부모와 상위 모든 조상이 포함되지만 문서루트는 미포함


.parentsUnitl() : 선택 요소부터 인자가 나올때까지 부모 집합을 선택한다.

$("#term").parentsUntil("dt").css('background-color', 'red'); 

// id term 요소부터 dt가 나올때까지 부모요소를 검색하고 배경을 red로 변경

$("#term").parentsUntil($("#term2"), "dd").css('background-color', 'red'); 

// id term 요소부터 id term2 부모요소까지 중 dd 요소만 배경을 red로 변경


.prev() : 요소 집합의 바로 이전에 나오는 형제로 구성된 확장 집합을 반환


.prevAll() : 요소 집합의 이전에 나오는 모든 형제로 구성된 확장 집합을 반환


.siblings() : 요소의 모든 형제를 포함하는 확장 집합을 반환.


.eq() : 선택 요소의 index번째 요소를 선택한다.

$("div").eq(2).css('background-color', 'red'); // div의 3번째 요소의 배경을 변경


.index() : 선택 요소에서 인자의 index 번호를 반환

$("div").index($("div:contains('Third')")); 

// div 안에서 div에 'Third'라는 단어를 포함하고 있는 div index 값


$.inArray() <jQuery.inArray()> : 대상 배열 내의 값을찾아서 인덱스를 반환한다. ; 첫번째 배열은 0, 요소가 없으면 -1

$.inArray("John", arr);     // arr 배열에서 "John"의 인덱스를 찾아서 반환


.find() : 선택된 요소의 자식노드에서 인자의 요소를 찾는다.

$("#div").find(ul); // id div의 자식노드에서 ul 요소를 찾는다.


.filter() : 선택된 요소를 포함한 노드에서 인자의 요소를 찾는다.

$("#div").filter(ul); // id div 노드 자신을 포함한 요소에서 ul 요소를 찾는다.


.end() : jQuery 함수를 연쇄적으로(chain)으로 사용할 경우 앞쪽에 이미 선택되었던 요소로 돌아간다.

$('ul:first').find('.foo).css('background-color' , 'red')  // ul의 첫번째 요소에서 class=foo를 찾아 배경 변경

.end().find('bar').css('background-color', 'green'); // find를 호출하기 전의 요소($('ul:first))에서 class=bar를 찾아 배경 변경


.each() : 다중 요소를 순서대로 선택한다.

$("div").each(function(i,element){

// div 요소를 순서대로 선택한다.  i: 순서 시작은 0 ,  element : 선택된 요소 

});


.has() : 인자를 가지고 있는 확장집합을 선택 

$("li").has("ul");   // li 요소중 ul을 가지고 있는 요소만 선택


.slice() : 선택한 요소 집합을 인자의 범위로 잘라낸다.

$("img").slice(2).css(...);    

// img 요소의 세번째 요소부터 끝 요소까지 css 적용

$("img").slice(2, 4).css(...);    

// img 요소의 세번째 요소부터 5번째 요소를 만날때까지(4번째) css적용

$("img").slice(-2, -1).css(...);    

// img 요소의 끝에서 두번째 요소부터 끝에서 첫번째 요소를 만날때까지 css적용


.clone() : 선택된 요소를 복사한다. 

$("#img").clone();  // id img DOM을 복사한다.


.closest() : 현재 위치한 요소에서 DOM 트리를 탐색하여 일치된 요소를 선택한다.

$("#name").closest("ul");   // id name 요소에서 가장 가까운 ul을 선택한다.

$("#name").closest("ul", "#code");   // id code 요소 아래의 id name 요소에서 가장 가까운 ul을 선택한다.


.andSelf() : 선택된 구조 요소를 이어붙인다.

$('div').find('p').andSelf().css(..);  

// div와 내부의 p요소를 선택해서 결합 후 css 적용


.offsetParent() : 위치(css:position) 요소를 기반으로 한 부모 요소를 찾는다.

$('li.item-a').offsetParent().css(..);   // li의 item-a 클래스의 css position상 가장 가까운 부모요소에 css를 적용


$.grep() <jQuery.grep()> : 배열 요소를 조건에 따라 필터링하여 제거 한다. 특정 로직에 의해 true가 되는 결과만 반환

$.grep([0,1,2], function(n,i){ return n>0;});      

// 배열 [0,1,2] 에서 0보다 큰값을 반환 [1,2]

$.grep([0,1,2], function(n,i){ return n>0;}, true);      

// 배열 [0,1,2] 에서 0보다 크지 않은 값을 반환 [0]



$.proxy() <jQuery.proxy()> : jQuery의 네임스페이스를 관리할 수 있게 한다. "this" 키워드를 통하여 다른 개체를 유지할 수 있게 한다.

           var app={

                   config : { clickMessage : Hi!" }, // config 메서드에 clickMessage를 정의 

                   clickHandler : function(){  // clicHandler 메서드 함수 정의

                                  alert( this.config.clickMessage);   

                                  // this:app 의 config 메시지의 clickMessage를 알람

                       }   

                   }

           $('a).bind('click', app.clickHandler);   

           // 실행되지 않는다. jQuery 이벤트 모델에 의해 this가 app 이 아니다.

           $('a').bind('click', .proxy(app, 'clickHandler'));  

           // this 키워드를 유지한채 실행된다.


(2) 삽입

.after() : 지정한 요소 뒤에 새로운 요소를 삽입 

A.after( B) / A뒤에 B를 추가


.insertAfter() : 지정한 요소 뒤에 새로운 요소를 삽입 

A.insertAfter(B) / B뒤에 A를 추가


.append() : 지정한 요소 뒤에 내용 삽입

$("div").append("<p>내용</p>");    // div 뒤에 <p>내용</p> 를 삽입한다.


.appenTo() : 지정한 내용을 요소 뒤에 삽입

$("<p>내용</p>").appendTo($("div"));   // <p>내용</p>를 div 뒤에 삽입한다. 


.before() : 지정한 요소의 앞에 요소를 삽입 

A.before(B) / A 앞에 B를 추가


.insertBefore() : 지정한 요소의 앞에 요소를 삽입 

A.insertBefore(B) / B 앞에 A를 추가


.prepend() : 지정한 요소 앞에 내용 삽입

$("div").prepend("<p>내용</p>");    // div 앞에 <p>내용</p> 를 삽입한다.


.prependTo() : 지정한 내용을 요소 앞에 삽입

$("<p>내용</p>").prependTo($("div"));  

// <p>내용</p>를 div 앞에 삽입한다. 


.pushStack() : jQuery 스택에 DOM 요소를 추가한다.

$("#ids").pushStack($("div"));   

// id ids 요소에 jQuery 스택에 div 요소를 추가한다.


.wrap() : $() 형식으로 쓰는 함수의 선택한 요소 각각을 문자열 또는 객체로 감싼다.

$(".inner").wrap('<div class="new" />');   

// class=inner 집합 요소 각각을 <div class ="new"></div>

$(".inner").wrap(function(){

      return '<div class="new" />');  

// class=inner 집합 요소 각각을 <div class ="new"></div>

});


.unwrap() : 선택한 요소 집합의 부모를 제거한다.

$(".inner").wrap();   // class=inner 집합 요소의 부모를 제거한다. 


.wrapAll() : $() 형식으로 쓰는 함수의 선택한 요소 전체를 문자열 또는 객체로 감싼다.

$(".inner").wrapAll('<div class="new" />');  

// class=inner 집합 요소 전체를 <div class ="new"></div>


.wrapInner() : $() 형식으로 쓰는 함수의 선택한 요소 각각의 내부를 문자열 또는 객체로 감싼다.

$(".inner").wrapInner('<div class="new" />');  

// class=inner 집합 요소 각각의 내부를 <div class ="new"></div> 로 감싼다



(3) 삭제

.detach() : 지정한 요소를 포함 하위 요소 모두 제거

$("div").detach();    // div를 포함 하위 요소 모두 제거


.empty() : 지정한 요소의 하위 요소를 제거

$("div").empty();    // div 하위 요소 모두 제거


.remove() : 지정한 요소를 포함 하위 요소 모두 제거, 요소와 관련된 이벤트와 데이터 모두 제거

$("div").remove();    // div 포함 하위 요소, 이벤트, 데이터 모두 제거


(4) 변경, 변환

.text() : 해당 요소에 text 요소를 삽입 또는 변경한다.


.html() : 해당 요소에 html 요소를 삽입 또는 변경한다.


.val() : 해당 요소의 value 값을 삽입 또는 변경한다.


.replaceAll() : 해당 요소들로 인자 요소를 대체한다.

$('<h2>New heading</h2>').empty($("div"));    

// div 요소를 <h2>New heading</h2> 요소로 변경한다.


.replaceWith() : 해당 요소들을 인자의 요소로 바꾼다.  ; replaceAll() 과 선택,인자(target)이 반대

$("div").empty('<h2>New heading</h2>');    

//  <h2>New heading</h2> 요소로 div 요소를 변경 시킨다.


.toArray() : 선택한 요소 DOM 집합을 자바스크립트 배열로 만든다.

var arr = $("div").toArray();    //  arr[0] === <div>Hello</div>


$.makeArray <jQuery.makeArray()> : jQuery 집합의 요소 값을 JavaScript 배열로 변환한다.

var arr = $.makeArray($("input"));      //  arr[0] === "Hello"


$.map() <jQuery.map()>

.map() : 선택된 배열 요소를 순서대로 callback 함수를 통해 얻어진 리턴값을 포함하는 새로운 jQuery 오브젝트 생성

var arr = $("div").map(function(){

      return $(this).text().toUpperCase();      // 선택된 요소들의 text값을 대문자로 변경한다.

});

var arr = $("div").map({width : 10, height: 15} ,function(value, index){

      return index;      //  key를 반환한다.  ["width", "height"]

});


$.globalEval() <jQuery.globalEval()> : 문자열로 명령어를 실행시켜준다.

$.globalEval("var newVar = true;")      // newVar == true


$.merge() <jQuery.merge()> : 두개의 배열을 첫번째 배열에 합칩니다.

$.merge([0,1,2],[2,3,4]);  // 첫번째 배열 결과 : [0,1,2,2,3,4]

.merge($.merge([],[0,1,2]),[2,3,4]);  // 첫번째 배열의 값을 유지하기 위해 새로운 배열을 만든다. 


$.trim() <jQuery.trim()> : 문자열 앞뒤에 있는 공백 문자를 제거하고 결과 반환

var trimStr = $.trim(str);   // str === "   abc def ff  ";    trimStr === "abc def ff";


$.unique() <jQuery.unique()> : element 배열의 중복된 모든 element를 제거한다. ; string, number 배열에서는 동작 X

var divs = $.unique(divs);      // divs의 중복 선택되어 들어간 element를 제거한다.


$.parseJSON() <jQuery.parseJSON()> : JSON문자열을 JavaScript object로 반환한다.

var obj = $.parseJSON('{"name":"John"}'); // 문자열 {"name":"John"}을 JavaScript object로 변환한다.

alert(obj.name==="John");  // JavaScriptObject인 obj에서 name 요소인 John

cf.) 형식이 어긋난 JSON 문자열을 인자로 사용하면 exception이 발생한다. 문자열의 key 와 value 는 쌍따옴표("")를 사용해야 한다.


$.parseXML() <jQuery.parseXML()> : 유효한 XML문서를 파상한다.

$title = $.parseXML(xml).find("title");  // xml 파일에서 title의 값을 찾는다.


(5) 확장


$.noop() <jQuery.noop()> : 비어있는 함수 (function(){})


$.noConflict() <jQuery.Conflict()> : 다른 JavaScript 라이브러리와 함께 사용할때 $의 충돌을 막기위해 사용


$.sub() <jQuery.sub()> : 새로운 jQuery 함수를 정의할때, 네임스페이스의 충돌로 다른 개발자의 함수에 영향을 주지 않도록 캡슐화된 플러그인을 만들고자 할때 $.sub() 로 복사하여 사용

  (function(){

    var sub$ = jQuery.sub();

    sub$.fn.myCustomMethod = function(){

      return 'just for me';

    };


    sub$(document).ready(function() {

      sub$('body').myCustomMethod() // 'just for me'

    });

  })();


  typeof jQuery('body').myCustomMethod // undefined


$.extend() <jQuery.extend()> : 첫번째 인자에서 두번째 인자를 병합하며, 확장한다.

두번째 인자값이 첫번째 인자값의 같은 옵션을 대체하며 확장

         var object1 = { apple : 0,  banana : {weight : 52, price : 100}, cherry : 97 };

         var object2 = { banana : {price : 200},  durian : 100 };

         $.extend(object1, object2);

결과 : object1 = { apple: 0, banana: { price: 200 }, cherry: 97, durian: 100 };


첫번째 인자값의 원본 값을 유지하며 병합

         var object1 = {  apple: 0,  banana: {weight: 52, price: 100},  cherry: 97};

         var object2 = {  banana: {price: 200},  durian: 100};

         $.extend(true, object1, object2

결과 : object1 == { apple: 0, banana: { weight: 52, price: 200 }, cherry: 97, durian: 100 }


요소에 적용할 명령어 확장

            $.fn.extend({

                 myMethod : function(){...}

            });

            -> $("div").myMethod();


함수 실행 JQuery 명령어 확장

            $.extend({

                 myMethod2 : function(){...}

            });

            -> $.myMethod();


2. 속성(CSS), 추출


(1) 속성(CSS)


.addClass() : 지정한 요소에 class 값을 추가한다.

$("p").addClass("name");  // class = "name" 추가


.hasClass() : 지정한 요소에 class 유무를 확인한다.

if($("p").hasClass("name")==true)  // class 가 "name"인지 확인 true/false


.removeClass() : 지정한 요소에 class 값을 제거한다.

 $("p").removeClass("name");  // class = "name"을 제거


.toggleClass() : 지정한 요소에 class를 추가/제거

$("p").toggleClass("name");  // class = "name"이 있으면 제거 / 없으면 추가


.attr() 

1) 지정한 요소의 속성값을 입력 또는 변경한다.

$("a").attr("href", "http://www.googlec.co.kr");  // a 요소의 href 값을 변경한다.

$("#content").attr({id:'content01', class:'style1'});  // id content 요소의 id와 class 값을 변경한다.

2) 지정한 요소의 속성값을 가져온다.

$("a").attr("href");     // a 요소의 href의 값을 가져온다.

.removeAttr() : 지정한 요소의 속성값을 제거한다.

$("a").removeAttr("href");  // a 요소의 "href" 속성값을 제거한다.


.prop() : .attr()과 동일하나, boolean 값을 사용하는 속성에 사용한다. checked, selected, disabled


.removeProp() : removeProp()과 동일하나, boolean 값을 사용하는 속성에 사용한다. checked, selected, disabled

                 

.css() 

1) 지정한 요소의 css 값을 삽입 또는 변경한다..

$("div").css("color", 'red');  // div 요소의 글자색을 red로 설정한다.

$("div").css({color:'red', border:'1px solid blue'});  // 동시에 여러개의 값을 설정할 수 있다.

2) 지정한 요소의 속성값을 가져온다.

 $("div").css("backgroundColor");     // div 요소의 backgroud-Color 값을 가져온다.

cf.) 

css의 속성명과 jQuery에서 쓰는 속성명은 형식이 조금 다르다.

css : background-color , jQuery : backgroundColor

css : padding-left, jQuery : paddingLeft


.width() : 선택한 요소의 현재의 계산된 넓이를 얻거나 넓이 값을 설정한다.

$("div").width();  // div 의 현재 넓이 값 (숫자로 반환, .css('width')는 숫자뒤에 px가 붙어 반환 400px)

$("div").width(30);  // div의 넓이를 30으로 설정한다. { 30, 30px, 30%, auto }


.innerWidth() : 선택한 요소의 padding을 포함한 넓이를 반환한다. (border 제외)

$("div").innerWidth();  // div 의 padding을 포함한 현재 넓이


.outerWidth() : 선택한 요소의 padding 과 border를 포함한 넓이를 반환한다. (인자값 true 면 margin 포함)

$("div").outerWidth();  // div 의 padding과 border 포함한 현재 넓이

$("div").outerWidth(true);  // div 의 padding과 border, margin 포함한 현재 넓이


.height() : 선택한 요소의 현재의 계산된 높이를 얻거나 높이 값을 설정한다.

$("div").height();  // div 의 현재 높이 값 (숫자로 반환, .css('height')는 숫자뒤에 px가 붙어 반환 400px)

$("div").height(30);  // div의 높이를 30으로 설정한다. { 30, 30px, 30%, auto }


.innerHeight() : 선택한 요소의 padding을 포함한 높이를 반환한다. (border 제외)

$("div").innerHeight();  // div 의 padding을 포함한 현재 높이


.outerHeight() : 선택한 요소의 padding과 border를 포함한 높이를 반환한다. (인자값 true면 margin 포함)

$("div").outerHeight();  // div 의 padding과 border를 포함한 현재 높이

$("div").outerHeight(true);  // div 의 padding과 border, margin을 포함한 현재 높이


.data() 

1) 지정한 요소에 값을 삽입 또는 변경한다.

$("div").data("foo", '52');  // div 요소에 "foo" 라는 key로 52를 삽입한다.

$("div").data("bar", {color:'red', border:'1px solid blue'});  // "bar" 라는 key로 배열 삽입

$("div").data({baz : [1,2,3]});  // baz 배열 삽입

2) 지정한 요소의 값을 가져온다.

$("div").data("foo");  // div 요소에 "foo"라는 key로 저장된 값을 가져온다.

$("div").data();  // div 요소에 전체 값을 가져온다. {foo:52, bar:{color....}, baz:[1,2,3,4]}


$.data() <jQuery.data()> : 첫번째 인자의 요소에 두번째 인자를 키로 세번째 값을 저장한다. .data()와 동일

$.data(document.body, "foo",'52');    // 페이지 body 요소에 foo를 키로 52 삽입


.removeData() : 지정한 요소에 데이터를 제거한다.

$("div").data("foo");  // div 요소에 "foo" 라는 key의 데이터를 제거한다.


$.removeData() <jQuery.removeData()> : 지정한 요소에 데이터를 제거한다.

$.data($("div"), "foo");  // div 요소에 "foo" 라는 key의 데이터를 제거한다.


$.hasData() <jQuery.hasData()> : $.data()에 의해 저장된 임의의 값들이 있는지 확인한다.  true / false

if(.$.hasData(document.body)==true)   // document.body에 data가 있으면 true  


(2) 추출


$.browser <jQuery.browser> : JQuery가 실행되는 browser의 version, browser 종류를 Map 형식으로 리턴한다.

$.each($.browser,function(i, val){

           result += i +":" + val;     //   결과 msie:true version:7.0    

}

cf.)

$.browser.version : 브라우저의 버전을 문자열로 리턴

$.browser.safari : 사파리 브라우저 여부 true & false 리턴

$.browser.opera : 오페라 브라우저 여부 true & false 리턴

$.browser.msie : Internet Explorer 브라우저 여부 true & false 리턴

$.browser.mozilla : Mozilla 브라우저 여부 true & false 리턴


$.support <jQuery.support> : 브라우저마다의 기능의 차이나 버그등의 정보를 구조체로 반환 ; 1.3 이후 버전에서는 $.browser 대신 $.support를 사용 권장

옵션값 : http://api.jquery.com/jQuery.support/

                       

.size() : 선택한 요소 배열의 길이를 반환한다.

var num = $("div").size();  // num은 div의 배열 크기를 숫자로 반환한다. 


.length : 선택한 요소의 배열의 길이를 반환한다.  (선택 요소에 "" 는 적용이안된다. '' 사용)

var num = $('div').length;  // num은 div의 배열 크기를 숫자로 반환한다 


.offSet() : 선택한 요소의 전체 문서 내(document)에서의 left, top 좌표를 구한다.

ar offset = $('div:last').offset();  // div 마지막 요소의 left, top 좌표 반환 offset.left / offset.top


.position() : 선택한 요소의 부모요소를 기준으로 left, top 좌표를 구한다.

var position = $('div:last').position();  // div 마지막 요소의 부모로부터의 left, top 좌표 반환 position.left / position.top


.scrollLeft() : 선택한 요소의 스크롤바의 수평 위치(x좌표)를 얻거나 변경한다.

var x= $('div:last').scrollLeft();  // div 마지막 요소의 현재 수평 스크롤 x좌표를 반환한다.

var x= $('div:last').scrollLeft(300); // div 마지막 요소의 수평 스크롤 x좌표를 300으로 이동한다.


.scrollTop() : 선택한 요소의 스크롤바의 수직 위치(y좌표)를 얻거나 변경한다.

var x= $('div:last').scrollTop();  // div 마지막 요소의 현재 수직 스크롤 y좌표를 반환한다.

var x= $('div:last').scrollTop(300); // div 마지막 요소의 수직 스크롤 y좌표를 300으로 이동한다.


$.type() <jQuery.type()> : 인자의 obj의 type을 반환한다.

$.type(undefined) === "undefined" //

$.type() === "undefined" //

$.type(null) === "null" //

$.type(true) === "boolean" //

$.type(3) === "number" //

$.type("test") === "string" //

$.type(function(){}) === "function" //

$.type([]) === "array" //

$.type(new Date()) === "date" //

$.type(/test/) === "regexp" //


$.now() <jQuery.now> : 현재 시간을 number로 반환

$.now() // result : 1340954729007     (new Data).getTime(); 


$.fx.interval<jQuery.fx.interval> : 브라우져 애니메이션 프레임 조절

$.fx.interval = 1000;    // 프레임을 1000으로 변경한다.


$.fx.off<jQuery.fx.off> : 모든 애니메이션 효과를 전역적으로 끈다.

$.fx.off = true;    // 애니메이션 효과를 끈다.


3. 검증


.is() : 현재 상태를 확인하여 반환한다. true / false

var chk = $("div").is(":animated");   // chk 는 true, false


$.contains() <jQuery.contains()> : 첫번째 인자 요소에 두번째 인자 요소를 가지고 있는지 확인한다.

$.contains($("#name"), $("#code"))   // #name 요소 아래에 #code 요소가 있다면 true


$.isArray() <jQuery.isArray()> : 인자가 배열인지 확인한다.

$.isArray(arr)   // arr이 Array 인지 체크  true / false


$.isEmptyObject() <jQuery.isEmptyObject()> : 인자가 empty 인지 체크한다.

$.isEmptyObject(arr)   // arr 이 empty 인지 체크  empty : true / false


$.isFunction() <jQuery.isFunction()> : 인자가 JavaScript 함수인지 체크한다.

$.isFunction(function(){});  // function(){}가 함수인지 체크한다. : true / false


$.isPlainObject() <jQuery.isPlainObject()> : 인자가 plain Object인지 확인한다. (Plain Object : "{}" 나 "new Object"로 만들어진)  ; IE8에서는 Error

$.isPlainObject({});   // {}가 Plain Object 인지 체크 한다. true /false


$.isWindow() <jQuery.isWindow()> : Window 인지 판별한다.

$.isWindow(window);   // window가 Window 인지 체크 true / false


$.isXMLDoc() <jQuery.isXMLDoc()> : XML 문서의 DOM 노드 또는 XML 문서인지 체크

$.isXMLDoc(document);   // document가 xml 문서인지 확인 : false


4. 효과


.animate() : 해당 객체의 CSS 변화 효과를 준다.  /$('p').animate({CSS Map}, {options});

$('p).animate({color:'white', font-size : 22px}, {duration : 400, easing : 'ease-in', 

complete : function(){....}});  {queue:false}


.delay() : 해당 시간만큼 실행을 delay 시킨다.

$("div").slideDown().delay(5000).slideUp();  // id div 요소를 슬라이드 다운 후 5초 후 슬라이드 업 한다.


.stop() : 실행중인 애니메이션을 중지한다.

$("div").stop();   // div의 큐의 애니메이션을 멈춘다.


.show() : 해당 요소를 보여준다.

$("div").show();  // div 가 나타난다.

$("div").show(1000);  // div 가 1초에 걸쳐서 나타난다.


.hide() : 해당 요소를 숨긴다.

$("div").hide();  // div가 사라진다.

$("div").show(1000);  // div 가 1초에 걸쳐서 사라진다.

.toggle() : 해당 요소가 show 상태면 hide() / hide 상태면 show() 실행

$("div").toggle();    // div가 hide 상태면 show() / show 상태면 hide()한다.

$("div").toggle(1000);   // div 가 1초에 걸쳐서 toggle() 한다.


.fadeIn() : 서서히 나타나게 한다.

$("div").fadeIn(); // div가 서서히 나타난다.

$("div").fadeIn("slow");  // div가 천천히 서서히 나타난다.

$("div").fadeIn(3000");   // div가 3초에 걸쳐서 서서히 나타난다.


.fadeOut() : 서서히 사라지게 한다.


.fadeToggle() : show 상태면 fadeOut(), hide 상태면 fadeIn()이 실행된다.


.fadeTo() : 주어진 시간동안 주어진 투명도로 변화한다.

$("div").fadeTo("slow", 0.15);  // 천천히 투명도 0.15 로 변화

$("div").fadeTo("slow", 0.15);  // 천천히 투명도 0.15 로 변화


.slideDown() : 선택 요소가 슬라이드 되어 내려온다.

$("div").slideDown(); // div가 아래로 내려온다.

$("div").slideDown("slow");  // div가 천천히 아래로 내려온다..

$("div").slideDown(3000");   // div가 3초에 걸쳐서 아래로 내려온다.


.slideUp() : 선택 요소가 슬라이드 되어 올라간다.


.slideToggle() : 선택 요소가 slideDown 상태면 slideUp(), slideUp 상태면 slideDown()을 실행


.queue() : 애니메이션이 chain으로 연속적으로 연결될 때, 애니메이션이 아닌 실행 함수를 큐에 저장 한다.(ex: class 속성 변경)


.dequeue() : queue에 쌓여있는 나머지 함수를 실행한다.

$("div").show("slow").animate({left:'+=200'}. 2000)  // id div 요소가 천천히 나타난 후, 2초간 오른쪽으로 200이동한다

$("div").queue(function(){  // queue의 함수를 호출한다.

      $(this).addClass("newcolor");  // id div 요소의 class를 newcolor 등록

       $(this).dequeue(); // 다음 애니메이션 실행

});

 $("div").animate({left:'-=200'}, 500);  // 05초간 왼쪽으로 200 이동한다.


.clearQueue() : queue에 쌓인 것을 삭제한다. 현재 실행중인 queue는 계속 실행된다.   

$("#stop").click(function(){  // id stop 요소를 클릭하면

       $("div").clearQueue();  // div의 queue가 비워진다. 실행중인 큐는 진행한다.

});


5. Event


(1) event 제어


.bind() : event가 발생하면 실행될 함수를 지정한다. (이미 생성된 DOM에 대하여)

$("#image").bind("mousedown", function(){ // id image 요소에 마우스를 클릭했을 때, 해당 함수 실행 지정 

});


.unbind() : bind()를 해제한다.


.live() : 동적으로 생성된 DOM 객체들의 이벤트를 연결한다. (이벤트 버블 발생 가능)

$("#image").live("click", function(){  // id image 요소에 마우스를 클릭했을 때, 해당 함수 실행 지정 

});

.die() : live() 제거


.delegate() : 동적으로 생성된 DOM 객체들의 이벤트를 연결한다. (이벤트 버블 방지)

$("#image").delegate("td", "click", function(){ // id image 요소 밑의 'td'에 마우스를 클릭했을 때, 해당 함수 실행 지정 

});


.undelegate() : delegate() 제거


.on() : 동적으로 생성된 DOM 객체들의 이벤트를 연결한다. (1.7 이후 버전)

$("#image").on("click", "td", function(){ // id image 요소 밑의 'td'에 마우스를 클릭했을 때, 해당 함수 실행 지정 

});

$("#image").on("click", "td",{foo: "bar"}, function(event){

    alert(event.data.foo);

// id image 요소 밑의 'td'에 마우스를 클릭했을 때, {foo:"bar"}를 event에 넣어 함수 실행

}); 


.off() : on() 제거 (1.7 이후 버전)


.one() : bind() 함수처럼 선택된 이벤트를 지정한다. 하지만 딱 한번만 이벤트가 실행된다.


.trigger() : 선택된 요소의 이벤트를 발생시킨다.

$("#img").trigger("click")    // id img 요소에 click 이벤트를 발생시킨다.


.triggerHandler() : trigger() 함수와 비슷하게 동작한다.

- form submission에는 동작하지 않는다.

 - 선택된 요소들중 가장 첫번째 요소만 영향을 미친다.

- 브라우저 기본동작, 버블링, live Events는 일어나지 않는다.

$('element").명령어(function(event){  // element 요소에 명령어 실행시 함수 동작

});


(2) 웹 브라우져 Event


.load() : 문서가 불려졌을 때


.unload() : 문서가 닫혔을 때


.ready() : DOM이 모두 준비 되었을 때 함수 실행


$.holdReady() <jQuery.holdReady()> : DOM이 로드되는 것을 지연시켜준다. ; js 파일을 불러들이고 동작을 할때, js가 로드되지 않은 시점에 DOM이 로드 되는것을 방지해준다. / head 영역에 선언하는게 좋다.

$.holdReady(true); // DOM이 로드되는 것을 멈춘다.

$.getScript("myplugin.js", function(){ // myplugin.js 파일을 가져온다.

      .holdReady(false); // 파일 로드가 성공하면 DOM을 구성한다.

});


.resize() : 창 크기가 변경되었을 때 함수 실행


.scroll() : HTML 문서가 스크롤 되었을 때


.error() : 선택된 개체(images, window, document 등)가 정확하게 로드(load)되지 않을 경우 발생 오류 이벤트

<img src="missing.png" alt="Book" id="book" />

$('#book').error(function(){ // 이미지가 로드되지 않을 경우 함수 실행

});


(3) 마우스 Event

.click() : 마우스 클릭시


.dblclick() : 마우스 더블 클릭시


.mousedown() : 마우스 버튼을 누른 순간


.mouseup() : 마우스 버튼을 놓는 순간


.mouseover() : 대상에 마우스 커서가 위치했을 때


.mouseseenter() : 대상에 마우스가 위치했을 때


.mousemove() : 대상에서  마우스 커서가 움직였을 때


.mouseout() : 대상에서 마우스가 벗어 났을때


.mouseleave() : 대상에서 마우스가 벗어났을 때


.hover() : 마우스가 요소에 오버되었을때 첫번째 함수가 실행되고, 마우스가 요소를 떠날때 두번째 함수가 실행된다.

$("#p1").hover(function(event){ // 마우스가 오버되었을때 함수 실행 

},

 function(){ 

// 마우스가 떠날때 함수 실행

});


(4) 키보드 Event

.keypress() : 키 입력 시 발생(enter, tabemd의 특수키 제외)


.keydown() : 키 입력을 누르고 있을 때, 모든 키에 대해 적용


.keyup() : 키 입력 후 발생


(5) form Event


.select() : 선택한 개체를  선택 했을 때


.change() : <input />, <textarea />, <select /> 요소의 값 변경시 실행


.focus() : 해당 요소에 포커스를 받았을 때 실행되는 함수


.focusin() : focus() 의 업그레이드(1.4)


.blur() : 해당 요소에 포커스를 잃었을 때 실행되는 함수


.focusout() : blur()의 업그레이드(1.4)


.submit() : submit이 일어날 때



(6) event 함수 option 처리


event.target : event를 발생시킨 Target


event.currentTarget  : event 버블링으로 현재 이벤트 발생되는 Target


event.relatedTarget : 해당 이벤트와 관련된 다른 DOM 요소 선택


event.result :해당 이벤트가 실행한 이벤트 핸들러 함수에 의해 리턴되는 가장 마지막 값


event.data : event 대상이 가지고 있는 값


event.namespace : 이벤트가 tirgger 됐을때, 발생한 이벤트의 namespace


event.pageX : 이벤트가 발생한 요소의 문서의 왼쪽부터의 위치


event.pageY : 이벤트가 발생한 요소의문서의 상단으로부터의 위치


event.timeStamp : event가 실행된 시간


event.type : 실행된 event 타입


event.which : 이벤트가 발생된 요소의 key (키보드 값<숫자>, 마우스 <왼쪽 1, 중간 2, 오른쪽 3>)


event.preventDefault() : 해당 요소에 걸려있는 다른 이벤트를 무력화 한다. 


event.isDefaultPrevented() : event.preventDefault() 상태인지 체크 true / false


event.stopPropagation() : 다른 이벤트 핸들러가 호출되는 것을 막는다.(이벤트 버블링)


event.stopImmediatePropagation() : 다른 이벤트 핸들러가 호출되는 것을 막는다. (이벤트 버블링)


event.isPropagationStopped() : event.stopPropagation()이 호출 됐는지 여부 리턴 true / false


event.isImmediatePropagationStopped() : event.stopImmediatePropagation()이 호출됐는지 여부 리턴 true /false 


6. Ajax


$.param() <jQuery.param()> : 폼 요소들의 값을 변환하여 직렬화된 문자열로 표현한다.

var params = {width : 1680, height : 1050}; // 배열 선언

var str = $.param(params); // Ajax로 전송가능하도록 직렬화

// $.param({a:[2,3,4]});  // "a[]=2&a[]=3&a[]4"

// $.param({a:{b:1,c:2},d:[3,4,{e:5}] }); // "a[b]=1&a[c]=2&d[]=3&d[]=4&d[2][e]=5"


.serialize() : 선택한 form의 데이터를 ajax로 전송할 수 있도록 직렬화 한다.

$("#name").serialize();   //  id name form의 데이터를 직렬화한다. a=1&b=2


.serializeArray() : 선택한 form의 데이터를 ajax로 전송할 수 있도록  배열로 직렬화 한다.

$("#name").serializeArray();  //  id name form의 데이터를 배열로 직렬화한다. [ { name : "a", value : "1" }, { name : "c", value:"3"}]


$.ajax() <jQuery.ajax()> : ajax 비동기 호출 전송

         $.ajax({

                type : 'POST',                                    // post 타입 전송

                url : 'some.php',                                // 전송 url

                data : "name=John&location=Boston",   // 전송 파라미터

                cache : false,                                  // ajax로 페이지를 요청해서 보여줄 경우

                                                  // cache가 있으면 새로운 내용이 업데이트 되지 않는다.

               async : true,                                    // 비동기 통신,  false : 동기 통신

               beforSend : fucntion(){                     // ajax 요청이 전송되기 전 실행 함수

                },

               success : function(msg){                   // 콜백 성공 응답시 실행

                },

               error : function(){                              // Ajax 전송 에러 발생시 실행

                },

             complete : function(){                       //  success, error 실행 후 최종적으로 실행

                  }

            });


.ajaxSend()  : ajax 요청이 서버로 보내지기전에 호출됨


.ajaxStart()  : ajax 요청이 서버로보내진 직후에 호출됨.


.ajaxStop()  : 응답을 서버로부터 받은 직후에 호출됨.


.ajaxSuccess() : 요청이 성공적으로 완료된 후에 호출됨.


.ajaxError()  : ajax 실행 후 에러 발생시 함수 실행 / $.ajax() 옵션의 error와 동일.


.ajaxComplete() : ajax 실행 후 최종적으로 함수 실행 / $.ajax() 옵션의 complete 와 동일.


$.ajaxPrefilter() <jQuery.ajaxPrefilter()>  : ajax 요청을 보내기 전에 Ajax 옵션들을 수정하거나 조작한다.

$.ajaxPrefilter(function(options)){ // options : request 요청 옵션 값들

}); 


$.ajaxSetup() <jQuery.ajaxSetup()> : 앞으로 발생할 ajax 요청에 대한 디폴트 값을 설정한다.

$("button").click(function(){  // button을 클릭할시 ajax 호출에 대한  

          $.ajaxSetup({ // url과 success 함수를 셋팅한다.

                      url : "test_ajax.txt",

                      success:function(result){

          })

});


$.get() <jQuery.get()> : get 방식으로 ajax 통신을 한다. 서버에서 가져온다.

$.get("test.php", function(data.status){..});   // "test.php"로 get 방식 통신 후 function 실행  


$.getJSON() <jQuery.getJSON()> : $.get()과 동일하나, 데이터 타입은 json 타입이다.


$.getScript() <jQuery.getScript()> : $.get()과 동일하나, 데이터 타입은 script, 동적으로 자바스크립트를 불러온다.

                            

$.post() <jQuery.post()> : post 방식으로 ajax 통신을 한다. 서버와 파라미터로 데이터를 주고받는다.

$.post("test.php",  // "test.php"로 

           {  //   name과 message 파라미터 

                    name: "myeonghyeon",

                    message : "hi"

           },

           function(data.status){..}  // callback() 함수 실행

);   // "test.php"로 파라미터를 보내 post 방식 통신 후 function 실행  


.promise() : 비동기함수(Ajax)가 리턴한 객체를 가진다.


.promise().done(); : 선택된 비동기함수 리턴 객체의 콜백이 성공, done 함수 실행

$("div").promise().done(function(){

          $("p").append("Finished");  // 모든 div 요소의 요청이 모두 성공하면, done 실행, p 요소에 finished 삽입

});


.promise().fail();  : 선택된 비동기함수 리턴 객체의 콜백이 실패, fail 함수 실행


.promise().then();  : 콜백이 성공하면(success) 리턴데이터를 then의 인자가 받아서 실행


$("div").promise().then(A).then(B);   // div에 주어진 액션이 성공하면 리턴값을 가지고 A 함수 실행 A함수 리턴값을 가지고 B 함수 실행


$.when() <jQuery.when()> : 인자의 함수의 콜백 후 리턴값을 반환한다.

$.when( effect() ).done(function(){

        $("p").append("finished");  // effect() 함수를 실행해서 성공하면 p 에 finished를 삽입한다.

});

$.when( A, B ).done(function(){  // 동시에 A,B 함수를 실행하고 모두가 성공할 경우 .done(function() 실행

});


$.deferred() <jQuery.deferred()>  : $.ajax가 반환하는 객체, pomise 객체와 같은 일을 할 수 있으며 추가적인 콜백 함수를 가진다.


deferred.always()  : 요청이 성공, 실패에 무관하게 항상 실행된다.


deferred.done() : 요청이 성공시 실행된다.


deferred.fail() : 요청이 실패시 실행된다.


deferred.isRejected() : 요청이 실패됐는지 확인한다.


deferred.isResolved() : 요청이 성공했는지 확인한다.


deferred.pipe() : 요청의 return 값을 인자로 넘겨준다.


deferred.promise() : 요청의 콜백을 객체로 가지고 있는다.


deferred.reject() : 요청이 실패시 fail() 함수를 호출한다.


deferred.resolve() : 요청이 성공시 done() 함수를 호출한다.


deferred.then() : 두개의 인자를 가지고 두개 모두 성공할 때 resolve(), 하나라도 실패하면 reject() 실행


[DesignPattern] 객체지향 모델링

객체지향 모델링



1. 모델링의 역할

(1) 서로의 해석을 공유해 합의를 이루거나 해석의 타당성을 검토한다.

(2) 현재 시스템 또는 앞으로 개발할 시스템의 원하는 모습을 가시화한다.

(3) 시스템의 구조와 행위를 명세할 수 있으며 시스템을 구축하는 틀을 제공한다.


2. UML 일반

(1) UML 정의

- 소프트웨어 청사진을 작성하는 표준언어

- 소프트웨어 중심 시스템의 산출물을 가시화하고, 명세화하고,구축하고, 문서화하는데 사용

- 가시화 언어 : UML은 소프트웨어의 개념모델을 가시적인 그래픽 형태로 작성하여 참여자들의 오류없고 원활한 의사소통이 이루어지게 하는 언어

- 명세화 언어 : UML은 소프트웨어 개발과정인, 분석, 설계, 구현 단계의 각 과정에서 필요한 모델을 정확하고 완전하게 명세할 수 있게하는 언어

- 구축 언어 :  UML 언어는 다양한 객체지향 프로그래밍 언어로 변환 가능 UML로 명세된 설계 모델은 구축하려는 프로그램 코드로 순변환하여 (순공학) 구축에 사용기 구축된 코드를 UML모델로 역변환(역공학) 하여 분석하게 할 수도 있다.

- 문서화 언어 :  UML은 여러 개발자들 간의 통제, 평가 및 의사소통에 필요한 문서화를 할 수 있는 언어


(2) UML 필요성

소프트웨어 시스템을 만들기 위해서 어휘와 규칙을 두어 시스템을 개념적/물리적으로 표현하는 모델이 필요

시스템의 구조적 문제와 프로젝트 팀내의 의사 소통, 소프트웨어 구조의 재사용 문제를 해결


(3) UML 구성요소

사물 : 추상적 개념으로써 모델 구성의 기본 요소 시스템의 구조, 행위를 표현하고 개념들을 그룹화 하는 것 부가적인 설명을 위한 것들이 있다.

관계 : 사물들 간의 연결 관계를 추상화 한 것

다이어그램 : 관련성이 있는 사물들 간의 상호관계를 도형 형태로 표현


3. 클래스 다이어그램

클래스 다이어그램은 시간에 따라 변하지 않는 시스템의 정적인 면을 보여주는 대표적인 UML 구조 다이어그램이다. 클래스 다이어그램은 시스템을 구성하는 클래스와 그들 사이의 관계를 보여준다. 주요 구성요소는 클래스와 관계다.

(1) 클래스


1) 구체적인 가시화

public class Cource{

private String id;

private String name;

private int numOfStudents = 0;

public void addStudents(Student student{}

public void deleteStudents(integer id){}

}


2) 접근제어자

- private : 이 클래스에서 생성된 객체들만 접근 가능

+ public : 어떤 클래스의 객체이든 접근 가능

# protected : 이 클래스와 동일 패키지에 있거나 상속 관계에 있는 하위 클래스의 객체들만 접근 가능

~ package : 동일 패키지에 있는 클래의 객체들만 접근 가능


3) 다중성 표시


4. 관계

클래스 하나로만 이루어지는 시스템은 존재하지 않는다. 한 사함이 모든 일을 처리할 때 보다 여러 사람이 모였을 때 일을 좀더 효과적으로 처리할 수 있듯이 다수의 클래스가 모인 시스템이 훨씬 효율적이다. 객체지향 시스템도 여러 개의 클래스가 서로 긴밀한 관계를 맺어 기능을 수행한다.


(1) 연관관계 

 

실선: 양방향 연관관계- 두 클래스 객체들이 서로의 존재를 인식한다는 의미이다.

화살표: 단방향 연관관계 - 한쪽은 다른 객체의 존재를 알지만, 다른쪽은 그 존재를 모른다.

클래스들이 개념상 서로 연결되었음을 나타낸다. 실선이나 화살표로 표시하며 보통은 한 클래스가 다른 클래스에서 제공하는 기능을 사용하는 상황일 때 표시한다.

연관관계의 역할 이름은 연관된 클래스 객체들이 서로를 참조할 수 있는 속성의 이름으로 활용할 수 있다. 일회성이 아닌 지속적으로 유지되는 구조적 관계이다.


예제1) 단방향 연관관계

public class Person {

private Phone homePhone;

Private Phone OfficePhone;

public Phone getHomePhone() {

return homePhone;

}


public void setHomePhone(Phone homePhone) {

this.homePhone = homePhone;

}


public Phone getPhone() {

return Phone;

}


public void setPhone(Private phone) {

Phone = phone;

}

}

person은 phone의 존재를 알지만, phone은 person의 존재를 모른다.

따라서 person 객체는 phone 객체들을 참조할 수 있도록 구성해야 하지만, phone 클래스는 person 객체를 참조할 속성이 존재하지 않아도 된다.


예제2) 양방향 연관관계

class Student{

private Professor advisor;


public void setAdvisor(Professor advisor) {

this.advisor = advisor;

}

public void advise(String msg){

System.out.println(msg);

}

}


public class Professor {

private Student student;

public void setStudent(Student student) {

this.student = student;

student.setAdvisor(this);

}

public void advise(){

student.advise("상담내용은 여기에");

}

public static void main(String[] args){

Professor gildong = new Professor();

Student bap = new Student();

gildong.setStudent(bap);

gildong.advise();

}

}

이 코드의 연관관계는 양방향 연관관계이므로 Professor  클래스 객체에서 Student 클래스 객체를 참조할 수 있는 속성(student)이 있고, Student 클래스 객체에서 Professor 클래스 객체를 참조할 수 있는 속성이 있다. 또한 이 속성의 이름이 역할 이름을 활용한 것임을 알 수 있다.


예제3) 다대다 연관관계

import java.util.ArrayList;


public class Student {

private String name;

private ArrayList<Course> courses;

public Student(String name){

this.name = name;

courses = new ArrayList<Course>();

}

public void registerCourse(Course course){

courses.add(course);

course.addStudent(this);

}

public void dropCourse(Course course){

if (courses.contains(course)){

courses.remove(course);

course.removeStudent(this);

}

}

public ArrayList<Course> getCourses(){

return courses;

}

}


class Course{

private String name;

private ArrayList<Student> students;

public Course(String name){

this.name = name;

students = new ArrayList<Student>();

}

public void addStudent(Student student){

students.add(student);

}

public void removeStudent(Student student){

students.remove(student);

}

public ArrayList<Student> getStudent(){

return students;

}

public String getName(){

return name;

}

}

이 코드는 Student 클래스와 Course 클래스의 연관관계가 양방향 연관 관계이기 때문에 양쪽 클래스에서 서로를 참조할 수 있는 속성을 정의했다.  Studnet 객체 하나에 하나 이상의 Course 객체가 연관 되어 있기 때문에 다중성을 구현했으며(반대도 같음), Student, Course 클래스에 대표적인 컬렉션 자료구조인 ArrayList를 이용해 여러 개의 Student, Course 클래스 객체를 참조할 수 있게 했다. 


(2) 일반화관계

한 클래스가 다른 클래스를 포함하는 상위 개념일 때 두 클래스 사이에는 일반화 관계가 존재한다. 일반화 관계가 존재할 때 자식이라 불리는 클래스는 부모라 불리는 클래스로부터 속성과 연산을 물려받을 수 있다.특수화, 일반화된 사물간의 관계를 표현한다. 이를 'is a kind of' 관계라고도 한다. 상위 클래스를 상속받는 하위 클래스에서는 각자의 특수한 스킬이나 액션에 따라서 다른 멤버변수나 메서드를 추가하여 구현을 하거나, 상속받은 추상 메서드를 오버라이드해서 구현하면 된다.

ex.) 세탁기 is kind of 가전제품

       프로그래머 is kind of 사람


예제)

public abstract class HomeAppliances {

private int serialNo;

private String manufacturer;

private int year;

public abstract void turnOn();

public abstract void turnOff();

}


public class Washer extends HomeAppliances{

public void turnOn(){

// 내용 구현

}

public void turnOff(){

// 내용 구현

}

}


(3) 집합관계

집합관계는 UML 연관 관계의 특별 경우로 전체와 부분의 관계를 명확하게 명시하고자 할 때 사용한다.

집약관계와 합성관계 두 종류의 집합관계가 존재한다.


1) 집약관계

한 객체가 다은 객체를 포함하는 것을 나타낸다. '전체', '부분'과의 관계이며 '전체'를 가리키는 클래스 방향에 빈 마름모 표시를 한다.

부분 객체를 여러 전체 객체가 공유할 수 있다. 이때 전체 객체의 라이프타임과 부분 객체의 라이프타임은 독립적이다.

즉, 전체 객체가 메모리에서 사라진다 해도 부분 객체는 사라지지 않는다.


public class Computer {

private Mainboard mb;

private CPU c;

private Memory m;

private PowerSupply ps;

public Computer(Mainboard mb, CPU c, Memory m, PowerSupply ps){

this.mb = mb;

this.c = c;

this.m = m;

this.ps = ps;

}

}

Computer 객체가 사라져도 부품을 구성하는 Mainboard 객체, CPU 객체, Memory 객체, PowerSupply 객체는 사라지지 않는다.

외부에서 이들 객체에 대한 참조만 받아 사용했기 때문이다. 즉, 전체를 표현하는 Computer 객체의 라이프타임과 부분 객체의 라이프타임은 무관하다.


2) 합성관계

합성관계는 전체를 가리키는 클래스 방향에 체워진 마름모로 표시되면 부분 객체가 전제 객체에 속하는 관계이다.

따라서 전체 객체가 사라지면 부분 객체도 사라지는 경우를 의미한다.  부분 객체를 여러 전체 객체가 공유할 수 없다.

이때 부분 객체의 라이프타임은 전체 객체의 라이프타임에 의존한다. 즉, 전체 객체가 없어지면 부분 객체도 없어진다.


public class Computer {

private Mainboard mb;

private CPU c;

private Memory m;

private PowerSupply ps;

public Computer(){

this.mb = new MainBoard();

this.c = new CPU();

this.m = new Memory();

this.ps = new PowerSupply();

}

}

이 코드에서 생성자가 컴퓨터의 부품이 되는 Coumputer 객체들을 생성해 적절한 속성에 바인딩한다는 점이다.

가령 c1 = new Computer()으로 Computer 객체가 생성되면 c1의 부품을 이루는 MainBoard 객체, CPU 객체, Memory 객체, PowerSupply객체가 생성된다.

이러한 부품 객체들은 Cumputer 클래스의 객체 c1이 사라지면 같이 사라진다. 즉, 부품 객체들의 라이프타임이 Computer 객체의 라이프타임에 의존하는 관계가 형성된다.


(4) 의존관계

클래스가 연관, 상속, 집합 관계로 엮여 있는 것은 아니지만, 한 객체가 다른객체를 소유하지는 않지만, 다른객체가 변경되면 그것을 사용하는 다른 곳도 같이 변경해줘야 하는 관계를 표현할 때 주로 사용한다. 단, 주의해야 할 점은 연관관계와 달리 의존관계의 경우에는 클래스 인스턴스의 레퍼런스를 유지하고 있지 않다는 점이다. 

레퍼런스를 계속적으로 유지하게 되면 이는 연관관계로 표현해야 한다.


주로 다음과 같은 세 가지 경우에 의존 관계로 표현한다.

1 한 클래스의 메소드가 다른 클래스의 객체를 인자로 받아 그 메소드를 사용한다.( 가장 일반적 ) 

2 한 클래스의 메소드가 또 다른 클래스의 객체를 반환한다.

3 다른 클래스의 메소드가 또 다른 클래스의 객체를 반환한다. 이때 이 메소드를 호출하여 반환되는 객체의 메소드를 사용한다.


public class Car{

...

public void fillGas(GasPump p){

p.getGas(amount);

...

}

}

자동차에 주유할 때 특정 주유소에 있는 특정 주유기만 고집해 매번 주유할 수는 없을 것이다. 이런 경우라면 주유 서비스를 받을 때 마다 이용하는 주유기가 매번 달라지는 것을 의미하며

객체지향 프로그램에서는 사용되는 주유기를 인자난 지역 객체로 생성해 구현할 것이다.


cf.) 의존관계와 연관관계

- 의존관계: 클래스의 인스턴스의 레퍼런스를 유지하지 않음

- 집합관계: 클래스의 인스턴스의 레퍼런스를 유지함


한 클래스의 객체를 다른 클래스 객체의 속성에서 참조하는 경우에는 참조하는 객체가 변경되지 않는 한 두 클래스의 객체들이 오랜 기간 동안 협력 관계를 통해 기능을 수행한다고 볼 수 있다.

예를 들면, 자동차(Car 클래스)를 소유한 사람(Person 클래스)이 자동차를 이용해 출근한다고 할 경우 다음 날 출근할 때도 어제 사용한 자동차를 타고 출근할 것이다.

매번 출근할 때마다 다른 자동차를 사용하는 경우는 거의 없을 것이다. 이런 경우 사람과 자동차의 관계가 연관 관계이며 Person 클래스의 속성으로 Car 객체를 참조한다.


public class Person{

private Car owns; // 이 속성으로 연관 관계가 설정된다.

public void setCar(Car car){

this.owns = car;

}


public Car getCar(){

return this.owns;

}

}

--> 연관 관계는 오랜 시간 동안 같이할 객체와의 관계며 의존 관계는 짧은 기간 동안 이용하는 관계다.


(5) 실체화 관계

- 인터페이스를 구현하는 관계를 표현한다.

- 상속의 개념과 비슷하지만 상속과 다른점은, 

-> 상속 : 직접 상위 클래스를 상속받아서 Unit 클래스의 기능을 포함한다.(멤버변수 및 메소드 모두 상속됨)

-> 인터페이스 : 서로 다른 클래스라도 인터페이스만 준수하면(인터페이스의 함수들을 모두 구현하면) 동일한 기능들이 구현될수가 있다. (메소드 같은 기능들만 구현이 됨)

즉, 완전히 다른 클래스에 공통적인 기능(메서드)을 부여하는 것이다.

Building이라는 것에서 Barraks,Factory,Bunker가 상속되어서  멤버 변수인 Health와 Ammor의 데이터와 Contruct(건물짓기), UnderAttack(공격받기) 기능이 부여가 됩니다. 여기에서 테란건물의특수기능인 건물을 상공으로 띄워서 이동하고 다시 땅으로 착지하는 기능을 추가하려고 했을때, Building의 상위 클래스에 메서드를 추가하게 되면 Bunker라는 건물은 이동이 원래 불가능한데 그 기능을 갖게 되서 문제가 발생한다. ( 단순히 Overide해서 아무 기능이 없게 해도 되지만 상속받는 모든것에 그렇게 처리를 하는것도 효율적이지 못한거 같다. ) 이때 인터페이스를 구현해서 이동이 가능한 건물에만 인터페이스를 구현하게 되면 된다. 인터페이스를 구현하는 곳에서는 Move,Land,Fly 메서드를 반드시 구현해야 한다.


[Comparison] CHAR와 VARCHAR (VARCHAR2)

CHAR와 VARCHAR (VARCHAR2)


문자의 경우 CHAR와 VARCHAR의 차이는 저장 영역과 문자열의 비교 방법이다.

VARCHAR 유형은 가변 길이이므로 필요한 영역은 실제 데이터 크기뿐이다. 그렇기 때문에 길이가 다양한 컬럼과, 정의된 길이와 실제 데이터 길이에 차이가 있는 컬럼에 적합하다. 저장 측면에서도 CHAR 유형보다 작은 영역에 저장할 수 있으므로 장점이 있다.


비교 방법에서도 차이가 있다.

CHAR 에서는 문자열을 비교할 때 공백을 채워서 비교하는 방법을 사용한다. CHAR(8) 이고 'AA'가 저장되어 있다면, 'AA' 뒤에 공백 6자리를 붙여 8자리로 비교하는 것이다. 따라서  'AA' = 'AA  ' 은 실제로 'AA      ' = 'AA      ' 가 되어 같다는 결과가 나온다.


반면에 VARCHAR 에서는 공백도 하나의 문자로 취급하므로 끝에 공백이 들어가면 다른 문자로 판단한다.

같은 예로 들면 'AA' != 'AA '  로 공백이 있어 서로 다른 문자로 판단한다.


따라서 이름, 주소 등의 길이가 변할 수 있는 값은 VARCHAR를 사용하고, 사번, 주민등록번호와 같이 길이가 일정한 데이터는 CHAR를 사용하는게 좋다. 

[SQL] 기본 SQL문

기본 SQL문


1. 기본 쿼리의 종류

 DDL / DML / DCL

D 는 Definition 정의

M 은 Manipulation 조작

C 은 Control 제어



(1) DDL

DDL 은 테이블이나 유저 같은 것들을 생성하거나 지우거나 하는 구문을 얘기합니다. 객체를 만들거나 수정하거나 없애거나 하는 것인데, 개발 단계에서 사용이 되고, 운영단계 에서는 덜 쓰이게 되는 구문 이라는 얘기입니다. CREATE 와 DROP/ ALTER 와 같은 것들이 있습니다.

데이터를 입력하거나 수정 하는 개념이 아니며, 작업하기 위한 환경을 생성하거나 변경하는 언어라고 생각을 하시면 되겠습니다. 예를 들어, 데이터와 무관하게. 체크를 하기 위한 함수를 생성할 수 있겠습니다.

[CREATE FUNCTION 어쩌고저쩌고~~]

라는 DDL 구문을 날리면, 함수가 생성이 됩니다. 이것은 게시판 따위에서 글을 입력하거나 삭제 하는 그런 것과는 성향이 다르죠. 이해가 되시겠는지요.


(2) DML

DML 은 계속 쓰이게 되는 구문을 얘기합니다. SELECT / INSERT / UPDATE / DELETE 와 같은 것들이 있으며, 각각의 목적은 조회/입력/수정/삭제 와 목적을 띕니다. 게시판에서 글을 적고 저장 을 누르거나, 댓글을 달고 저장을 누르는 순간, 데이터베이스로는 INSERT 의 구문이 날아가는 것입니다.

이러한 종류를 DML 이라고 합니다.


(3) DCL

DCL 은 제어 하는 구문 입니다. 좀더 쉽게 생각알 하시면, 권한을 넣거나 빼거나 와 같은 구문을 얘기합니다.

GRANT / REVOKE


2. create문

(1) Oracle

CREATE TABLE ARTIST (

   ArtistID int  NOT NULL,

   Name  char(25) NOT NULL,

   Nationality varchar(30) NULL,

   Birthdate number(4,0) NULL,

   DeceasedDate number(4,0) NULL,

   CONSTRAINT ArtistPK PRIMARY KEY (ArtistID),

   CONSTRAINT ArtistAK1 UNIQUE (Name),

   CONSTRAINT NationalityValues CHECK (Nationality IN ('Canadian', 'English', 'French', 'German', 'Mexican', 'Russian', 'Spanish', 'US')),

   CONSTRAINT BirthValuesCheck CHECK (Birthdate < DeceasedDate),

   CONSTRAINT ValidBirthYear CHECK ((Birthdate > 1000) and (Birthdate < 2100)),

   CONSTRAINT ValidDeathYear CHECK ((DeceasedDate > 1000) and (DeceasedDate < 2100))

);

Create Sequence ArtistID Increment by 1 start with 1;

※ 시퀀스를 따로 만들어준다.


(2) MySQL

CREATE TABLE ARTIST (

   ArtistID int  AUTO_INCREMENT PRIMARY KEY,

   Name  varchar(25) NOT NULL,

   Nationality varchar(30) NULL,

   Birthdate year(4)  NULL,

   DeceasedDate year(4)  NULL

);

CREATE UNIQUE INDEX ARTIST_Name_IDX ON ARTIST(Name);

※ 제약조건이 안먹힌다.


cf.)

 CREATE TABLE `emp` (

  `emp_no` int(11) unsigned NOT NULL,

  `dept_no` int(11) unsigned NOT NULL,

  `emp_name` varchar(32) NOT NULL,

  PRIMARY KEY  (`emp_no`),

  KEY `dept_no` (`dept_no`),

  CONSTRAINT `emp_ibfk_1` FOREIGN KEY (`dept_no`) REFERENCES `dept` (`dept_no`)

) ENGINE=InnoDB DEFAULT CHARSET=utf8 

→ emp 테이블에 걸려 있는 제약조건은 1개이며, 이름은 emp_ibfk_1이다.

→ emp의 dept_no는 외래키이며, dept의 dept_no를 참조하고 있다. 별도의 옵션이 없으므로 DELETE시, UPDATE시에 제약(RESTRICT)이 있다.


cp.) 제약조건의 종류


3. 테이블 수정

한번 생성된 테이블은 특별히 사용자가 구조를 변경하기 전까지 생성 당시의 구조를 유지하게 된다.

처음의 테이블 구조를 그대로 유지하는 것이 최선이지만, 업무적인 요구 사항이나 시스템 운영상 테이블을 사용하는 도중에 변경해야할 일들이 발생하기도 한다.

이 경우 주로 컬럼을 추가/삭제 또는 제약조건을 추가/삭제 작업을 하게 된다.


(1)  DROP TABLE (테이블 삭제)

테이블을 잘못 만들었거나 테이블이 더 이상 필요 없을 경우 해당 테이블을 삭제해야 한다.

DROP TABLE 테이블명 [CASCADE CONSTRAINT];


DROP TABLE PLAYER;

- DROP TABLE 명령어를 사용하면 테이블의 모든 데이터 및 구조를 삭제한다.

- CASCADE CONSTRAINT 옵션은 해당 테이블과 관계가 있었던 참조되는 제약조건에 대해서도 삭제한다는 것을 의미한다.

(SQL Server에서는 CASCADE 옵션이 존재하지 않는다. 테이블 삭제 전에 참조하는 FOREIGN KEY 제약 등을 먼저 삭제해야 한다.)



(2) RENAME (테이블명 변경)

RENAME 명령어를 사용하여 테이블의 이름을 변경할 수 있다.

RENAME 변경전 테이블명 TO 변경후 테이블명;


RENAME TEAM_BACKUP TO TEAM;

- TEAM_BACKUP 테이블명을 TEAM 으로 변경한다.


(3) ADD COLUMN (컬럼 추가)

기존 테이블에 필요한 컬럼을 추가하는 명령어

ALTER TABLE 테이블명

ADD 추가할 컬럼명  데이터 유형;


ALTER TABLE PLAYER

ADD (ADDRESS VARCHAR2(80));

- PLAYER 테이블 마지막에 ADDRESS(길이 80) 컬럼을 추가한다.

- 새롭게 추가된 컬럼은 테이블의 마지막 컬럼이 되며 컬럼의 위치를 지정할 수는 없다.



(4) DROP COLUMN (컬럼 삭제)

DROP COLUMN은 테이블에서 필요 없는 컬럼을 삭제할 수 있으며, 데이터가 있거나 없거나 모두 삭제 가능하다.

한 번에 하나의 컬럼만 삭제 가능하며, 컬럼 삭제 후 최소 하나 이상의 컬럼이 테이블에 존재해야 한다.

ALTER TABLE 테이블명

DROP COLUMN 삭제할 컬럼명;


ALTER TABLE PLAYER

DROP COLUMN ADDRESS;

- PLAYER 테이블에 ADDRESS 컬럼을 삭제한다.

- 한번 삭제된 컬럼은 복구가 불가능하다.


(5) MODIFY COLUMN (컬럼 수정)

테이블에 존재하는 컬럼의 데이터 유형, 디폴트(DEFAULT) 값, NOT NULL 제약조건에 대한 변경을 한다.

ALTER TABLE 테이블명

MODIFY (컬럼명1 데이터 유형 [DEFAULT 식] [NOT NULL],

             컬럼명2 데이터 유형 [DEFAULT 식] [NOT NULL]);

                   

ALTER TABLE TEAM_TEMP

MODIFY (ORIG_YYYY VARCHAR2(8) DEFAULT '20020129' NOT NULL);

- TEAM 테이블의 ORIG_YYYY 컬럼의 데이터 유형을 CHAR(4)->VARCHAR2(8)로 변경하고, 향후 입력되는 데이터의 DEFAULT 값으로 '20020129'를 적용하고, 모든 행의 ORIG_YYYY 컬럼에 NULL이 없으므로 제약조건 NULL -> NOT NULL로 변경한다.

 

cf.) MODIFY COLUMN 시 고려사항

- 해당 컬럼의 크기를 늘릴 수는 있지만 줄이지는 못한다. 이는 기존의 데이터가 훼손될 수 있기 때문이다.

- 해당 컬럼이 NULL 값만 가지고 있거나 테이블에 아무 행도 없으면 컬럼의 폭을 줄일 수 있다.

- 해당 컬럼이 NULL 값만을 가지고 있으면 데이터 유형을 변경할 수 있다.

- 해당 컬럼의 DEFAULT 값을 바꾸면 변경 작업 이후 발생하는 행 삽입에만 영향을 미치게 된다.

- 해당 컬럼에 NULL 값이 없을 경우에만 NOT NULL 제약조건을 추가할 수 있다.


(6) RENAME COLUMN (컬럼명 수정)

테이블을 생성하면서 만들어졌던 컬럼명을 변경해야 할 경우에 사용한다.

ALTER TABLE 테이블명

RENAME COLUMN 변경해야할 컬럼명 TO 새로운 컬럼명;


ALTER TABLE PLAYER

RENAME COLUMN PLAYER_ID TO TEAM_ID;

- PLAYER 테이블의 PLAYER_ID 컬럼명을 TEAM_ID 로 변경한다.

- RENAME COLUMN으로 컬럼명을 변경하면, 해당 컬럼과 관계된 제약조건에 대해서도 자동으로 변경된다.

(Oracle 등 일부 DBMS에서만 지원한다.)


(7) ADD CONSTRAINT

테이블 생성 시 제약조건을 적용하지 않았다면, 생성 이후에 필요에 의해서 제약조건을 추가할 수 있다.

ALTER TABLE 테이블명

ADD CONSTRAINT 제약조건명 제약조건 (컬럼명);


ALTER TABLE PLAYER

ADD CONSTRAINT PLAYER_FK

   FOREIGN KEY (TEAM_ID) REFERENCES TEAM(TEAM_ID);

- PLAYER 테이블에 TEAM 테이블과의 외래키 제약조건을 추가한다.

- 제약조건명은 PLAYER_FK로 하고, PLAYER 테이블의 TEAM_ID 컬럼이 TEAM 테이블의 TEAM_ID를 참조하는 조건이다.

- FOREIGN KEY 제약조건을 위와 같이 추가하면 PLAYER 테이블의 TEAM_ID 컬럼이 TEAM 테이블의 TEAM_ID 컬럼을 참조하게 된다.

참조 무결성 옵션에 따라서 만약 TEAM 테이블이나 TEAM 테이블의 데이터를 삭제하려 할 경우 외부(PLAYER 테이블)에서 참조되고 있기 때문에 삭제가 불가능하게 제약을 할 수 있다.

즉 외부키(FK)를 설정함으로써 실수에 의한 테이블 삭제나 필요한 데이터의 의도치 않은 삭제와 같은 불상사를 방지하는 효과를 볼 수 있다.


(8) DROP CONSTRAINT

테이블 생성 시 부여했던 제약조건을 삭제하는 명령어

ALTER TABLE 테이블명

DROP CONSTRAINT 제약조건명;


ALTER TABLE PLAYER

DROP CONSTRAINT PLAYER_FK;

- PLAYER 테이블의 제약조건 PLAYER_FK 를 제거한다.


4. 데이터 조작

(1) insert문
1) 모든 데이터를 입력할 경우
INSERT INTO emp VALUES(7369, 'SMITH', 'CLERK', 7902, TO_DATE('80/12/17'),  800, NULL,  20);

2) 원하는 데이터만 입력할 경우
INSERT INTO dept (deptno, dname) VALUES(10, 'ACCOUNTING' );
cf.) 원하지 않는 데이터는 null값이나 디폴트로 지정한 값이 들어간다.

3) SELECT 문장을 이용한 INSERT
INSERT INTO dept2 SELECT * FROM dept;


(2) update문

UPDATE emp SET deptno = 30 WHERE empno = 7902;


(3) delete 문

1) 사원번호가 7902번인 사원의 데이터를 삭제.      

DELETE FROM emp WHERE empno = 7902 ;


2) 평균급여보다 적게 받는 사원 삭제

DELETE FROM emp WHERE sal < (SELECT AVG(sal) FROM emp);

        

3) 모든 행이 삭제

DELETE FROM emp; 


RSS란 무엇인가


http://ingorae.tistory.com/27

http://webmaster.wspaper.org/archives/21

http://webmaster.wspaper.org/archives/21

'Recent Link' 카테고리의 다른 글

CentOS USB 설치하기  (0) 2014.12.13
[DB] DB2 마이그레이션  (0) 2014.11.29
[OS] Windows 7 업데이트 구성 실패  (0) 2014.11.29

[jQuery] jQuery Plugin을 이용한 form validation

jQuery Plugin을 이용한 form validation


1. 다운로드

http://jqueryvalidation.org 에서 Download를 클릭해서 파일을 다운받습니다.


2. 인크루드 파일 및 설명

<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>

<script type="text/javascript" src="jquery.validate.min.js"></script>


jquery.validate : 검증플러그인 (필수)

cf.) jQuery 버전은 jquery-1.7.2이상에서 동작되는 거 확인되었습니다. 그 이하는 저도 잘 모릅니다. 한번 확인해보세요!


3. HTML 코드

<form id="frm" action="board_action.jsp" method="post">

<table class="table" style="border-collapse:seperate;">

<colgroup>

<col style="align:center;"/>

</colgroup>

<tbody>

<tr>

<th><label>작성자</label></th>

<td><input type="text" name="name" id="name"  value="" /></td>

</tr>

<tr>

<th><label>E-mail</label></th>

<td><input type="text" name="email" id="email" value="" /></td>

</tr>

<tr>

<th><label>cellphone</label></th>

<td><input type="text" name="phone" id="phone" value="" /></td>

</tr>

<tr>

<th><label>제목</label></th>

<td><input type="text" name="subject" id="subject" value="" /></td>

</tr>

<tr>

<th><label>문의내용</label></th>

<td><textarea class="form-control" id="content" name="content" rows="10" maxlength="5000" ></textarea></td>

</tr>

<tr>

<th><label>비밀번호</label></th>

<td><input type="password" name="pwd" id="pwd" value="" /></td>

</tr>

</tbody>

</table>

<div align="center" style="margin-bottom:50px;margin-top:30px;">

<button type="submit" id="register" class="btn btn-success">등록</button>

<button type="button" id="cancel" class="btn btn-warning">취소</button>

</div>

</form>


4. 스크립트 코드

<script>

$(document).ready(function() {

    $("#frm").validate({

        //validation이 끝난 이후의 submit 직전 추가 작업할 부분

        submitHandler: function() {

            var f = confirm("글을 등록하시겠습니까?");

            if(f){

                return true;

            } else {

                return false;

            }

        },

        //규칙

        rules: {

            name: {

                required : true,

                minlength : 2,

            },

            email: {

                required : true,

                minlength : 2,

                email : true

            },

            phone: {

                required : true,

                minlength : 12

            },

            subject: {

                required : true,

            },

            content: {

            required : true

            },

            pwd: {

                required : true,

                minlength : 6

            }

        },

        //규칙체크 실패시 출력될 메시지

        messages : {

            name: {

                required : "필수 입력사항 입니다.",

                minlength : "최소 {0}글자이상이어야 합니다"

            },

            email: {

                required : "필수 입력사항 입니다.",

                minlength : "최소 {0}글자이상이어야 합니다",

                email : "메일 기재 규칙에 어긋납니다."

            },

            phone: {

                required : "필수 입력사항 입니다.",

                minlength : "숫자 또는 '-'을 누락하셨습니다."

            },

            subject: {

                required : "필수 입력사항 입니다.",

                minlength : "최소 {0}글자이상이어야 합니다"             

            },

            content: {

                required : "필수 입력사항 입니다.",

                minlength : "최소 {0}글자이상이어야 합니다"

            },

            pwd: {

            required : "필수 입력사항 입니다.",

            minlength : "최소 {0}글자이상이어야 합니다"

            }

        }

    });

});


(1) validate() 메서드의 속성

submitHandler : validation이 끝난 이후의 submit 직전 추가 작업할 부분

rules : 유효성 통과를 위한 규칙정의

messages:  검증실패일 경우 화면에 띄워줄 문구


5. Tip

에러메시지를 input 오른쪽 공간에 띄워 주는 스타일

<style type="text/css">

input.error, textarea.error{

  border:1px dashed red;

}

label.error{

  margin-left:10px;

  color:red;

}

</style>


cf.) 참조 URL

http://hellogk.tistory.com/48

http://mytory.net/archives/195/