jQuery 정리

jQuery는 크로스 플랫폼을 지원하는 경량의 자바스크립트 라이브러리임. 

 

jQuery 특징

- 크로스 플랫폼을 지원하는 jQuery는 어떠한 브라우저에서도 동일하게 동작함. 

  이것은 폴리필*을 작성할 필요가 없다는 것을 의미함. 

  *Polyfill: 브라우저 호환성을 고려한 대체 코드 

 

jQuery 삽입 위치

1. body요소의 마지막 부분

2. head 요소 내

 

DOM이 완전히 로드된 후, 자바스크립트가 실행되는 것이 바람직한데, 

이를 위해 이벤트 처리가 필요하다. 

- 아래의 코드는, DOM이 완전히 로드하기 전까지 대기하다가,

  로드가 완료되면 매개변수로 전달된 콜백함수가 실행된다. 

 

$(document).ready(function(){

 // Do something... 

});

* $ => jQuery를 줄인것

더 줄여서 $(function(){}); 으로 써도 됨

 

jQuery선택자는 CSS선택자랑 거의 비슷하다. 물론 그외에도 다양한 요소 선택방법이 있다. 

 

Traversing: DOM 탐색(접근) / 대표: $("셀렉터").find("요소") 이외에도 많음 

 

Manipulation: DOM 조작(요소 추가,삭제,복사,속성변경 등)

- 추가: append(), prepend(), after(), before() 

- 삭제: remove() 

- 기타: 복사 clone() 등 많음 

 

CSS/Attribute: CSS와 요소의 속성에 관련된 메소드 

- attribute: .attr(), prop(), val() 등

- css: addClass(), css() 등

- demensions: height(), width() 등 

- Offset: offset(), position() 등

- Data: data() 등 

 

 

Event 

- 메치드셋에이벤트를 바인딩하고 해당 이벤트가 발생했을 때 실행될 콜백함수를 지정한다. 

- closeset(): 메소드 셋과 가장 근접한 상위 요소를 반환 

- event 관련 메소드: error(), resize(), scroll(), load(), ready(), bind(), on(), blur(), change(), focus() 등

사용예) 

$('선택자').on('click', function(e){

   //

});

 

 

 

 

비동기 처리 모델

- 서버는 요청받은 페이지(html)을 반환하는데 이때 html에서 로드하는 css나 js파일들도 같이 반환된다. 

  클라이언트의 요청에 따라 서버는 정적인 파일을 반환할 수도 있고, 

  서버 사이드 프로그램이 만들어낸 파일이나 데이터를 반환할 수도 있다. 

  서버로부터 웹페이지가 반환되면 클라이언트(브라우저)는 이를 렌더링하여 화면에 표시한다. 

- Ajax는 자바스크립트를 이용하여 비동기적으로 서버와 브라우저가 데이터를 교환할 수 있는 통신 방식을 의미한다. 

- request/response는 파일 단위로 실시된다.

  즉, html, css, js파일은 한번에 요청/응답 되는 것이 아니라 각각의 파일 단위로 요청/응답 된다. 

- 동기식 처리 모델은 직렬적으로 작업을 수행한다. 

  작업은 순차적으로 실행되며, 어떤 작업이 수행중이면 다음 작업은 대기하게 된다. 

- 비동기식 처리모델은 병렬적으로 작업을 수행한다. 

  작업이 종료되지 않은 상태라도 대기하지 않고 다음 작업을 실행한다. (즉시 다음 작업 수행)

  자바스크립트의 대부분 DOM이벤트와 Timer함수(setTimeout, setInterval), Ajax 요청은 비동기적으로 동작한다. 

 

 

 

JSON

- Ajax 요청에 대한 서버의 응답은 주로 html, xml, json이 사용된다.

  이 중 가장 일반적인 데이터 형식은 JSON이다.

  서버로부터 브라우저로 전송된 JSON 데이터는 문자열이다. 

  이 문자열을 객체화하여야 하는데, 이를 역직렬화(Deserializing) 라고 한다. 

  * Deserializing: JSON.parse(문자열데이터) 

 

 

 

 

동일출처원칙

- 요청에 의해 웹페이지가 전달된 서버와 동일한 도메인의 서버로부터 전달된 데이터는 문제없이 처리할 수 있다. 

  하지만 보안상의 이유로 다른 도메인으로의 요청(크로스 도메인 요청)은 제한된다. 

  이것을 동일출처원칙(Same-origin policy)라고 한다. 

- 동일출처원칙을 우회하는 방법

1. 웹서버의 프록시 파일서버에 원격서버로부터 데이터를 수집하는 별도의 기능(프록시)을 추가하는 것.

2. JSON script 태그의 원본 주소에 대한 제약이 존재하지 않는데 이것을 이용하여 다른 도메인의 서버에서 데이터를 수집하는 방법

3. Cross-Origin Resource Sharing HTTP 헤더에 추가적으로 정보를 추가하여 브라우저와 서버가 서로 통신해야 한다는 사실을 알게하는 방법. 

 

 

 

 

jQuery.ajax(url, setting)

줄여서 => $.ajax(url, setting)

사용예)

$.ajax({

   url: "data/data.html", 

   cache: false

})

.done(function(data, textStatus, errorThrown))

.fail(")

.always(")

 

jQuery ajax method

- get(), post(): 서버로부터 데이터를 로드함

- getJSON(): 서버로부터 JSON-encoded 데이터를 로드함

- getScript(): 서버로부터 javascript 파일을 로드한후 실행함 

- load(): 서버로부터 HTML 데이터를 로드하고 메치드셋에 적용함 

 

 

 

Promise

- 등장배경

  콜백함수를 사용한 비동기식 처리모델은 Javascript에서 빈번히 사용된다. 

  비동기식 처리 모델이란 처리가 종료하면 호출될 함수(콜백함수)를 미리 parameter로 전달하고 

  처리가 종료하면 콜백함수를 호출하는 것이다. 

  비동기식 모델의 콜백 헬은 코드의 가독성을 나쁘게 하여, 실수를 유발시킬 확률이 높아지며 에러 처리가 곤란하다. 

  이러한 문제를 극복하기 위해 프로미스가 제안되었다. 

- Promise는 비동기 처리가 성공하였는지, 실패하였는 지 등의 상태 정보와

  처리 종료 후 실행될 콜백함수(then, catch)를 담고 있는 객체이다. 

- jQuery Deferred는 각각의 비동기식 처리에 Promise 객체를 연계하여

  그 상태를 전파하는 것으로 promise를 구현한 jQuery 객체이다.

  브라우저 호환성과 편의성을 고려하여 만든 일종의 Promise 모듈이다. 

  jQuery Deferred에서 각각의 비동기식 처리를 Deferred객체로 wrapping 한다. 

 

 1. 프로미스 선언

  var dtd = $.Deferred();

  //비동기 처리: dfd.resolve() or dfd.reject()

  return dfd.promise();

 2. 프로미스 실행(호출)

 => 1을 담고 있는 함수를 호출해서 .done(), .fail() 작성

 

- $.when()을 사용하면 연속된 복수의 비동기 처리를 병렬로 처리할 수 있다.

 

 

 

 

 

jQuery의 확장 

- 제이쿼리 플러그인 이란, 커스텀 제이쿼리 메소드로서 제이쿼리를 확장한 것을 말한다. 

- $ 함수는 제이쿼리를 객체를 반환하며, 제이쿼리 객체의 메소드들은 제이쿼리 객체의 prototype인 $.fn에 담겨있다. 

- $ 변수는 제이쿼리 뿐만 아니라 자바스크립트 라이브러리에서 자주 사용된다. 

  제이쿼리와 다른 라이브러리를 함께 사용하는 경우, 중복이 발생하여 문제가 될 수 있으므로 IIFF를 사용하여 plugin 전체를 wrap하고 제이쿼리 객체를 인자로 전달하는 것이 필요하다.