jQuery, Ajax, JSON

1. jQuery

jQuery는 웹 클라이언트 프로그래밍에서 JavaScript를 보다 쉽고 효율적으로 사용할 수 있도록 돕는 JavaScript 라이브러리입니다.

jQuery 개요

정의 및 특징: jQuery는 자바스크립트 프로그래밍을 단순하게 해 줌으로써 개발자가 적은 코드로도 복잡한 작업을 수행할 수 있도록 돕습니다. 배우기 쉽고, CSS와 유사한 문법을 사용함(특히 선택자 문법)이 특징입니다.

코드 간결성: JavaScript 코드와 jQuery 코드를 비교했을 때, jQuery가 훨씬 간결한 것을 확인할 수 있습니다.

// JavaScript
document.getElementById("target").innerHTML = "안녕하세요?";

// jQuery
$("#target").html("안녕하세요?");

주요 기능: jQuery를 사용하면 다음과 같은 작업을 수행할 수 있습니다.

• HTML 문서의 특정 요소에 접근하고 HTML 콘텐츠를 변경합니다
• 이벤트를 처리하고, 페이지 상의 콘텐츠에 애니메이션을 적용합니다
• 서버로부터 새로운 콘텐츠 가져오기(Ajax, JSON)가 가능합니다
• 브라우저의 종류나 버전에 무관하게 사용 가능하여 호환성이 뛰어납니다

동작 방식: jQuery는 브라우저 메모리에 저장된 웹 페이지의 DOM을 변경함으로써 작동하며, 이는 HTML 문서와 CSS 파일을 변경하는 것이 아님을 의미합니다.

역사 및 인기: 2006년 존 레식(John Resig)이 발표했으며, 현재 가장 인기 있는 자바스크립트 라이브러리로, 많이 방문되는 사이트의 65%가 jQuery를 사용함이라고 명시되어 있습니다. MIT 라이선스 하에 배포되는 자유 오픈 소프트웨어입니다.

사용 방법:

1. 다운로드: jQuery.com에서 파일을 다운로드하여 서버에 저장하는 방식 (jquery-3.9.1.min.js와 같은 파일). uncompressed 버전은 테스트 및 디버깅용이며, minified 버전은 압축되어 더 빠르게 실행됩니다.

2. 온라인 포함(CDN): 구글이나 마이크로소프트와 같은 공개 서버의 CDN(Content Delivery Network)을 통해 온라인으로 포함하는 방법입니다. 사용자와 가장 가까운 서버를 자동으로 찾아주어 효율적입니다.

<script src="http://code.jquery.com/jquery-3.4.1.js"></script>

jQuery 문장 구조

jQuery 문장은 기본적으로 $(선택자).메서드(); 형태로 구성됩니다.

$ 기호: jQuery라는 의미를 가지며, $(...) 안에 선택자를 넣어 원하는 요소를 선택하고 조작할 수 있습니다.

선택자: HTML 요소를 선택할 때 사용되며, CSS 표기법 사용이 특징입니다.

• 일반적인 선택자: $("p") (모든 <p> 요소), $(".class명") (해당 클래스의 요소), $("#id명") (해당 ID의 요소)
• 그 외 선택자: $("*") (모든 요소), $(this) (현재 요소), $("p.myClass"), $("p:first"), $("div span"), $(":button") 등 다양한 CSS 선택자를 활용할 수 있습니다

jQuery 동작 방식: HTML 문서가 완전히 로드된 후에 jQuery 동작하도록 함을 위해 $(document).ready(function() { ... }); 구문을 사용합니다. 이는 DOM이 로딩되어 준비가 되면 작업을 시작하도록 합니다.

jQuery 이벤트 처리

jQuery는 다양한 이벤트 처리 기능을 제공하여 사용자와의 상호작용을 구현합니다.

중요한 이벤트 종류:

• 키보드: keypress, keydown, keyup
• 마우스: click, dblclick, mouseenter, mouseleave, mousedown, mouseup
• 화면: resize, load, unload, scroll
• 변화: submit, change
• 포커스: focus, blur

이벤트 메서드 구문: $(selector).event(function() { ... }); 형태로 작성됩니다.

$("#button1").click(function () {
  $("#box").show();
});

이벤트 등록 방법:

1. 정식 방법: $(selector).bind('event', function() { ... }); (동적으로 추가된 요소에 유용)
2. 단축 메서드 방법: $(selector).event(function() { ... }); (DOM 트리에 요소가 생성되어 있을 때만 가능)

이벤트 처리 함수: 모든 이벤트 처리 함수는 event 객체를 전달받으며, 이 객체는 pageX, pageY (마우스 위치), type (이벤트 종류), which (눌러진 마우스 버튼이나 키) 등의 유용한 속성을 가집니다.

2. jQuery의 응용

jQuery는 애니메이션, DOM 수정, CSS 조작 등 다양한 웹 페이지 요소 조작에 활용됩니다.

jQuery 애니메이션

웹 페이지 요소에 시각적 효과를 부여하여 사용자 경험을 향상시킵니다.

요소 보이기/감추기:

• show(): 선택된 요소를 화면에 표시합니다
• hide(): 선택된 요소를 화면에서 감춥니다
• toggle(): 요소가 감추어져 있으면 표시하고, 표시되어 있으면 감춥니다

이 메서드들은 duration (지속시간) 및 complete (완료 후 호출 메서드) 인수를 가질 수 있습니다.

애니메이션 메서드:

• animate(): 가장 일반적인 애니메이션을 작성할 때 사용됨. properties (CSS 속성 및 목표값), duration, easing (효과 지정), complete 인수를 가집니다
• stop(): 애니메이션을 중단합니다
• fadeIn()/fadeOut(): 요소를 천천히 등장/퇴장시킵니다
• slideUp()/slideDown(): 요소를 밀어 올리거나 내립니다

메서드 체이닝: 동일한 요소에 대한 여러 개의 메서드를 하나로 연결해서 실행하는 것입니다. 이는 코드의 가독성과 효율성을 높입니다.

$("#img").show().fadeOut("slow").slideDown("slow");

jQuery DOM 수정

HTML 문서의 DOM(Document Object Model)을 동적으로 조작합니다.

주요 작업: 요소의 내용, 속성, 스타일을 추출 및 변경하고, 요소를 추가 및 삭제하는 작업을 수행합니다.

내용 추출 및 변경:

• text(): 선택된 요소의 텍스트를 반환하거나 변경합니다
• html(): 선택된 요소의 HTML 태그가 포함된 콘텐츠를 반환하거나 변경합니다

입력 필드 값 추출:

• val(): 입력 요소(예: <input>) 안에 포함된 값을 읽어옵니다

요소 속성 추출 및 변경:

• attr(): 선택된 요소의 속성값을 추출하거나 설정합니다

$(selector).attr(attributeName);
$(selector).attr(attributeName, value);

DOM 요소 추가:

• append(): 선택된 요소의 끝에 새로운 콘텐츠를 자식 노드로 추가합니다
• prepend(): 선택된 요소의 처음에 새로운 콘텐츠를 자식 노드로 추가합니다
• after(): 선택된 요소의 뒤에 콘텐츠를 삽입합니다
• before(): 선택된 요소의 앞에 콘텐츠를 삽입합니다

DOM 요소 삭제:

• remove(): 선택된 요소와 그 자식 요소를 삭제함
• empty(): 선택된 요소의 자식 요소를 삭제함, 선택된 요소는 그대로 둡니다

jQuery CSS 조작

HTML 요소의 스타일을 동적으로 제어합니다.

스타일 관련 메서드:

• css(): 선택된 요소의 스타일 속성을 설정하거나 반환합니다

$("#target").css("color");
$("#target").css("color", "blue");

• addClass(): 선택된 요소에 하나 이상의 클래스를 추가합니다
• removeClass(): 선택된 요소로부터 하나 이상의 클래스를 삭제합니다

요소 크기 검색:

• width(), height(): 각각 요소의 가로, 세로 크기를 반환합니다 (패딩, 경계, 마진은 포함되지 않음)
• $(window).width(): 브라우저 뷰포트의 가로 크기
• $(document).width(): HTML 문서의 가로 크기

3. Ajax와 JSON

Ajax와 JSON은 웹 애플리케이션에서 서버와 비동기적으로 데이터를 교환하는 데 사용되는 핵심 기술입니다.

Ajax 개요

Ajax(Asynchronous JavaScript and XML)는 서버와 데이터를 비동기적으로 교환하는 기술 중 하나입니다.

정의 및 특징: Ajax는 전체 페이지를 다시 적재하지 않고, 웹 페이지의 일부를 업데이트할 수 있음으로써 빠르고 대화형 웹 페이지를 만드는 데 유용합니다.

비동기적 처리: 데이터를 주고받을 때 웹 페이지의 다른 동작을 방해하지 않습니다. 마우스로 드래그하면 지도가 연속적으로 표시됨이나 키보드로 입력하면 이어질 단어 추천과 같은 기능이 Ajax를 활용한 예시입니다.

새로운 언어가 아님: Ajax는 기존의 HTML, CSS, JavaScript, DOM, XML 및 XMLHttpRequest 객체와 같은 기존의 표준 기술을 사용함.

Ajax와 기존 방법 비교:

• 기존 웹 브라우저: 서버로부터 페이지 단위로만 데이터를 받을 수 있었습니다
• Ajax: XML 파일 조각 단위로 받을 수 있음을 통해, JavaScript가 이 조각들을 처리하여 페이지 일부를 동적으로 업데이트할 수 있습니다

Ajax의 동작 원리:

1. 클라이언트에서 사용자 이벤트 발생 시 JavaScript 함수 호출 및 XMLHttpRequest 객체 인스턴스 생성
2. XMLHttpRequest 객체가 XML 메시지를 구성하여 웹 서버로 비동기적으로 전송
3. XMLHttpRequest 객체가 웹 서버로부터 응답 XML 메시지를 수신
4. 반환된 메시지를 파싱하여 DOM 객체 업데이트

Ajax 예제: 사용자가 버튼을 클릭하면 XMLHttpRequest 객체를 통해 서버(cd3_1_testfile.txt)로부터 데이터를 비동기적으로 받아와 웹 페이지의 특정 div 요소에 표시하는 예시가 제공됩니다.

jQuery의 Ajax

jQuery는 Ajax 기능을 보다 간편하게 사용할 수 있도록 다양한 메서드를 제공합니다.

ajax() 메서드: 가장 일반적인 Ajax 요청 메서드로, GET 또는 POST 방식을 사용하여 텍스트, HTML, XML, JSON 등의 데이터를 요청하고 응답 데이터를 처리합니다. 상세 설정(URL, 데이터, 타임아웃, 데이터 타입, 콜백 함수 등)이 가능합니다.

GET 요청:

• $.get(URL, callback);: 서버로부터 로드를 원하는 URL과 완료 후 호출될 콜백 함수를 지정합니다
• $.get(URL, data);: 서버에 데이터를 전송하고 결과를 무시할 때 사용됩니다
• .done() 메서드와 함께 사용하여 데이터 수신 후 처리가 가능합니다

POST 요청:

• $.post(URL, data, callback);: 서버에 데이터를 요청하며, data는 "key:value" 형태의 쿼리 문자열로 전송됩니다

load() 메서드: 서버에 데이터를 요청해서 응답된 데이터를 선택된 요소에 넣음으로써 서버로부터 데이터를 가져오는 가장 간단한 방법입니다. $.get()과 유사하게 작동합니다.

$(selector).load(URL, data, callback);

JSON (JavaScript Object Notation)

JSON은 텍스트 기반의 데이터 교환 형식으로, 웹에서 데이터를 주고받는 데 널리 사용됩니다.

정의 및 특징: 사람과 컴퓨터가 쉽게 읽을 수 있음이 특징입니다. JavaScript 언어의 배열과 객체 표현 방식에 기반을 둡니다.

언어 및 플랫폼 독립적: JSON은 자바스크립트에서 유래되었지만 언어와 플랫폼에 독립적이어서 C++, C#, Java, Python 등 다양한 언어에서 사용 가능합니다.

인기: 서로 다른 언어와 시스템 간의 데이터 교환에 이상적이며, 웹 서버와 웹 애플리케이션 사이에서 많이 사용됨으로써 XML을 대체합니다.

JSON과 XML 비교:

공통점: 일반 텍스트 형식, 계층적 데이터 구성 가능, 프로그램으로 쉽게 구문 분석 가능

차이점:

• JSON은 종료 태그를 써줄 필요가 없음 (더 간결함)
• JSON이 좀 더 간결하므로, 빠르게 읽고 쓰는 것이 가능함
• JSON은 자바스크립트에서 eval()을 사용해 쉽게 파싱할 수 있음
• JSON은 배열도 사용할 수 있음

JSON의 구문: "이름:값" 쌍으로 기록되며, 이 쌍들을 묶는 방법으로 JavaScript의 객체와 배열을 사용합니다.

객체 (object): 이름:값 형태를 갖는 쌍의 집합으로, 중괄호 {}를 사용합니다. 이름은 문자열이며, 값은 자료형, 배열 또는 객체가 될 수 있습니다. 각 쌍은 쉼표(,)로 구별됩니다. 순서는 의미가 없습니다.

{
  "name": "Hong",
  "age": "21"
}

배열 (array): 값의 순서화된 리스트로, 대괄호 []를 사용합니다. 배열의 각 요소는 기본 자료형, 배열, 객체가 될 수 있으며, 쉼표(,)로 구별됩니다. 순서에는 의미가 있습니다.

[
  {
    "name": "Hong",
    "age": "21"
  },
  {
    "name": "Kim",
    "age": "22"
  }
]

JSON의 처리: 주로 웹 서버에서 JSON 데이터를 가져와 애플리케이션에서 JavaScript 객체로 변환하여 웹 페이지에 표시합니다.

처리 방법:

• JavaScript의 eval() 메서드로 처리: 편리하지만 악성 코드 유입 가능성이 있음
• JSON 전용 파서로 처리 (JSON.parse()): 텍스트만 인식하므로 안전하고 빠릅니다 (권장)