[JavaScript] JQuery

1. jQuery 소개

1.1 jQuery란?

jQuery는 2006년 존 레식(John Resig)이 개발한 자바스크립트 라이브러리로, "적게 쓰고 많은 일을 한다(Write less, do more)"라는 철학을 바탕으로 만들어졌습니다. 복잡한 자바스크립트 코드를 간결하게 작성할 수 있게 해주며, 다양한 브라우저 간의 호환성 문제를 해결해 줍니다.

1.2 jQuery의 주요 특징

1. 간결한 문법: 복잡한 자바스크립트 코드를 짧고 이해하기 쉽게 작성할 수 있습니다.
2. 크로스 브라우저 호환성: IE, Firefox, Chrome, Safari, Opera 등 다양한 브라우저에서 일관되게 동작합니다.
3. DOM 조작 간소화: HTML 문서의 요소를 쉽게 선택하고 수정할 수 있습니다.
4. 이벤트 처리 간소화: 사용자 상호작용에 대한 이벤트를 쉽게 처리할 수 있습니다.
5. 애니메이션 및 효과: 다양한 시각적 효과를 손쉽게 구현할 수 있습니다.
6. AJAX 지원: 서버와의 비동기 통신을 간편하게 구현할 수 있습니다.
7. 플러그인 생태계: 수많은 플러그인을 통해 기능을 확장할 수 있습니다.

---

2. jQuery 시작하기

2.1 jQuery 설치 방법

jQuery를 사용하는 방법에는 크게 두 가지가 있습니다.

1) CDN(Content Delivery Network) 사용

<!-- 최신 버전 사용 -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<!-- 특정 버전 사용 -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>

2) 직접 다운로드하여 사용

jQuery 공식 웹사이트(https://jquery.com/download/)에서 다운로드 후 HTML 파일에 포함

<script src="경로/jquery-3.6.0.min.js"></script>

2.2 기본 문법

jQuery의 기본 문법은 다음과 같습니다

$(선택자).액션()

• $: jQuery를 의미하는 기호입니다.
• 선택자: CSS 선택자와 유사한 방식으로 HTML 요소를 선택합니다.
• 액션(): 선택된 요소에 수행할 작업을 정의합니다.

2.3 문서 준비 이벤트

jQuery 코드는 일반적으로 문서가 완전히 로드된 후에 실행되어야 합니다. 이를 위해 다음과 같은 코드를 사용합니다

$(document).ready(function() {
    // jQuery 코드 작성
});

// 또는 더 짧게
$(function() {
    // jQuery 코드 작성
});

---

3. 요소 선택하기

3.1 기본 선택자

// ID로 선택
$("#아이디명");

// 클래스로 선택
$(".클래스명");

// 태그로 선택
$("태그명");

// 복합 선택
$("div.클래스명");
$("ul li");

3.2 필터 선택자

// 첫 번째 요소
$("li:first");

// 마지막 요소
$("li:last");

// 홀수 번째 요소
$("tr:odd");

// 짝수 번째 요소
$("tr:even");​

3.3 속성 선택자

// 특정 속성을 가진 요소
$("a[target]");

// 특정 속성값을 가진 요소
$("a[target='_blank']");

// 특정 단어를 포함하는 속성값
$("a[href*='example']");

---

4. DOM 조작

4.1 내용 변경

// 텍스트 내용 가져오기
let text = $("p").text();

// 텍스트 내용 설정하기
$("p").text("새로운 텍스트");

// HTML 내용 가져오기
let html = $("div").html();

// HTML 내용 설정하기
$("div").html("<span>새로운 HTML</span>");

// 폼 요소의 값 가져오기/설정하기
let value = $("input").val();
$("input").val("새로운 값");

4.2 요소 추가 및 삭제

// 요소 끝에 내용 추가
$("p").append("추가 텍스트");

// 요소 시작에 내용 추가
$("p").prepend("시작 텍스트");

// 요소 앞에 새 요소 추가
$("p").before("<div>새 요소</div>");

// 요소 뒤에 새 요소 추가
$("p").after("<div>새 요소</div>");

// 요소 삭제
$("p").remove();

// 내용만 삭제
$("div").empty();

4.3 CSS 속성 조작

// CSS 속성 가져오기
let color = $("p").css("color");

// CSS 속성 설정하기
$("p").css("color", "red");

// 여러 CSS 속성 설정하기
$("p").css({
    "color": "blue",
    "font-size": "16px",
    "background-color": "#f0f0f0"
});

4.4 클래스 조작

// 클래스 추가
$("div").addClass("highlight");

// 클래스 제거
$("div").removeClass("highlight");

// 클래스 토글(있으면 제거, 없으면 추가)
$("div").toggleClass("active");

// 클래스 존재 여부 확인
if ($("div").hasClass("highlight")) {
    // 클래스가 있을 때 실행할 코드
}

---

5. 이벤트 처리

5.1 기본 이벤트

// 클릭 이벤트
$("button").click(function() {
    alert("버튼이 클릭되었습니다!");
});

// 마우스 오버 이벤트
$("div").mouseover(function() {
    $(this).css("background-color", "yellow");
});

// 마우스 아웃 이벤트
$("div").mouseout(function() {
    $(this).css("background-color", "white");
});

// 키보드 이벤트
$("input").keyup(function() {
    console.log("입력값: " + $(this).val());
});

5.2 이벤트 바인딩

// on 메서드를 사용한 이벤트 바인딩
$("p").on("click", function() {
    alert("단락이 클릭되었습니다!");
});

// 여러 이벤트 한 번에 바인딩
$("div").on({
    mouseenter: function() {
        $(this).css("background-color", "lightgray");
    },
    mouseleave: function() {
        $(this).css("background-color", "white");
    },
    click: function() {
        alert("클릭!");
    }
});

5.3 이벤트 위임

// 동적으로 추가되는 요소에 대한 이벤트 처리
$("ul").on("click", "li", function() {
    alert("리스트 아이템 " + $(this).text() + "가 클릭되었습니다!");
});

---

6. 애니메이션 효과

6.1 기본 효과

// 숨기기/보이기
$("div").hide();
$("div").show();
$("div").toggle(); // 토글

// 페이드 효과
$("div").fadeIn(1000); // 1초 동안 페이드 인
$("div").fadeOut(500); // 0.5초 동안 페이드 아웃
$("div").fadeToggle(300); // 0.3초 동안 페이드 토글

// 슬라이드 효과
$("div").slideDown(1000); // 1초 동안 슬라이드 다운
$("div").slideUp(500); // 0.5초 동안 슬라이드 업
$("div").slideToggle(300); // 0.3초 동안 슬라이드 토글

6.2 사용자 정의 애니메이션

// animate 메서드를 사용한 사용자 정의 애니메이션
$("div").animate({
    left: '250px',
    opacity: '0.5',
    height: '150px',
    width: '150px'
}, 1000, function() {
    // 애니메이션 완료 후 실행할 콜백 함수
    alert("애니메이션 완료!");
});

6.3 애니메이션 제어

// 애니메이션 정지
$("div").stop();

// 현재 애니메이션만 정지하고 대기 중인 애니메이션 실행
$("div").stop(false, false);

// 모든 애니메이션 정지하고 즉시 완료 상태로
$("div").stop(true, true);

---

7. AJAX 기능

7.1 기본 AJAX 요청

$.ajax({
    url: "서버_URL",
    method: "GET", // 또는 "POST", "PUT", "DELETE" 등
    dataType: "json", // 응답 데이터 형식 (json, xml, text 등)
    data: { // 서버로 전송할 데이터
        key1: "value1",
        key2: "value2"
    },
    success: function(response) {
        // 요청 성공 시 실행할 코드
        console.log("성공:", response);
    },
    error: function(xhr, status, error) {
        // 요청 실패 시 실행할 코드
        console.error("오류:", error);
    },
    complete: function() {
        // 요청 완료 시 실행할 코드 (성공/실패 상관없이)
        console.log("요청 완료");
    }
});

7.2 간편 AJAX 메서드

// GET 요청
$.get("서버_URL", function(data) {
    console.log("데이터:", data);
});

// POST 요청
$.post("서버_URL", { name: "John", age: 30 }, function(data) {
    console.log("응답:", data);
});

// JSON 데이터 로드
$.getJSON("데이터.json", function(data) {
    console.log("JSON 데이터:", data);
});

7.3 AJAX 이벤트

// AJAX 요청 시작 전 이벤트
$(document).ajaxStart(function() {
    $("#로딩_표시").show();
});

// AJAX 요청 완료 후 이벤트
$(document).ajaxComplete(function() {
    $("#로딩_표시").hide();
});

// AJAX 요청 성공 시 이벤트
$(document).ajaxSuccess(function(event, xhr, settings) {
    console.log("요청 성공:", settings.url);
});

// AJAX 요청 실패 시 이벤트
$(document).ajaxError(function(event, xhr, settings, error) {
    console.error("요청 실패:", error);
});

---

8. jQuery 유틸리티 함수

8.1 배열 및 객체 조작

// 배열 순회
$.each(["a", "b", "c"], function(index, value) {
    console.log(index + ": " + value);
});

// 객체 순회
$.each({name: "John", age: 30}, function(key, value) {
    console.log(key + ": " + value);
});

// 배열 필터링
let filtered = $.grep([1, 2, 3, 4, 5], function(value) {
    return value > 2;
}); // [3, 4, 5]

// 배열 매핑
let mapped = $.map([1, 2, 3], function(value) {
    return value * 2;
}); // [2, 4, 6]

 

8.2 타입 검사

$.isArray([1, 2, 3]); // true
$.isFunction(function() {}); // true
$.isNumeric("123"); // true
$.isEmptyObject({}); // true
$.isPlainObject({name: "John"}); // true

8.3 기타 유틸리티

// 객체 확장 (합치기)
let obj = $.extend({name: "John"}, {age: 30}, {city: "New York"});
// {name: "John", age: 30, city: "New York"}

// URL 파라미터 직렬화
let params = $("form").serialize(); // "name=John&age=30"

// 배열 중복 제거
$.unique(["a", "b", "a", "c", "b"]); // ["a", "b", "c"]

---

9. jQuery 플러그인

9.1 플러그인 사용하기

jQuery의 강력한 기능 중 하나는 수많은 플러그인을 통해 기능을 확장할 수 있다는 점입니다. 대표적인 플러그인으로는 jQuery UI, jQuery Mobile, DataTables, Chosen 등이 있습니다.

<!-- jQuery 먼저 로드 -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<!-- 그 다음 플러그인 로드 -->
<script src="https://code.jquery.com/ui/1.13.1/jquery-ui.min.js"></script>

<script>
$(function() {
    // jQuery UI 데이트피커 사용 예
    $("#datepicker").datepicker();
    
    // jQuery UI 드래그 앤 드롭 사용 예
    $("#draggable").draggable();
});
</script>

9.2 자신만의 플러그인 만들기

(function($) {
    $.fn.highlight = function(options) {
        // 기본 설정과 사용자 설정 병합
        let settings = $.extend({
            color: "yellow",
            backgroundColor: "red",
            duration: 1000
        }, options);
        
        // 선택된 각 요소에 대해 처리
        return this.each(function() {
            let $this = $(this);
            
            // 원래 스타일 저장
            let originalColor = $this.css("color");
            let originalBg = $this.css("backgroundColor");
            
            // 하이라이트 적용
            $this.css({
                color: settings.color,
                backgroundColor: settings.backgroundColor
            });
            
            // 일정 시간 후 원래 스타일로 복원
            setTimeout(function() {
                $this.css({
                    color: originalColor,
                    backgroundColor: originalBg
                });
            }, settings.duration);
        });
    };
}(jQuery));

// 플러그인 사용 예
$("p").highlight({
    color: "white",
    backgroundColor: "blue",
    duration: 2000
});

---

10. jQuery와 모던 자바스크립트

10.1 jQuery의 현재 위치

jQuery는 한때 웹 개발의 필수 도구였으나, 최근에는 모던 자바스크립트(ES6+)와 React, Vue, Angular 같은 프레임워크의 등장으로 사용 빈도가 줄어들고 있습니다. 그러나 여전히 많은 웹사이트에서 사용되고 있으며, 특히 레거시 프로젝트나 간단한 웹사이트 개발에서는 여전히 유용한 도구입니다.

10.2 jQuery vs 바닐라 자바스크립트

모던 자바스크립트는 jQuery의 많은 기능을 내장하고 있어 jQuery 없이도 비슷한 작업을 수행할 수 있습니다

// jQuery
$("#id").text("Hello");

// 바닐라 자바스크립트
document.getElementById("id").textContent = "Hello";

// jQuery
$(".class").addClass("active");

// 바닐라 자바스크립트
document.querySelectorAll(".class").forEach(el => el.classList.add("active"));

// jQuery
$.ajax({url: "api/data", success: function(result) {
    console.log(result);
}});

// 바닐라 자바스크립트 (Fetch API)
fetch("api/data")
    .then(response => response.json())
    .then(data => console.log(data));

10.3 언제 jQuery를 사용해야 할까?

1. 레거시 프로젝트 유지보수: 이미 jQuery로 구축된 프로젝트를 유지보수할 때
2. 크로스 브라우저 호환성: 특히 구형 브라우저 지원이 필요한 경우
3. 빠른 프로토타이핑: 간단한 웹사이트나 프로토타입을 빠르게 개발할 때
4. jQuery 플러그인 활용: 필요한 기능이 jQuery 플러그인으로 이미 잘 구현되어 있을 때

---

11. 성능 최적화 팁

11.1 선택자 최적화

// 비효율적인 방법
$("div.class p.active");

// 더 효율적인 방법
$(".active", $("div.class"));

11.2 DOM 조작 최적화

// 비효율적인 방법 (각 추가마다 DOM 업데이트)
for (let i = 0; i < 100; i++) {
    $("#list").append("<li>항목 " + i + "</li>");
}

// 더 효율적인 방법 (한 번에 DOM 업데이트)
let items = "";
for (let i = 0; i < 100; i++) {
    items += "<li>항목 " + i + "</li>";
}
$("#list").append(items);

11.3 이벤트 위임 활용

// 비효율적인 방법 (각 요소마다 이벤트 핸들러 등록)
$("table td").click(function() {
    // 처리 코드
});

// 더 효율적인 방법 (상위 요소에 한 번만 등록)
$("table").on("click", "td", function() {
    // 처리 코드
});

11.4 캐싱 활용

// 비효율적인 방법 (매번 DOM 탐색)
$("#button").click(function() {
    $("#element").hide();
    $("#element").text("내용 변경");
    $("#element").fadeIn();
});

// 더 효율적인 방법 (한 번만 DOM 탐색)
$("#button").click(function() {
    let $element = $("#element");
    $element.hide();
    $element.text("내용 변경");
    $element.fadeIn();
});