72. 자바스크립트 jQuery 기초 (jQuery Basics)

jQuery 기초 (jQuery Basics)

자바스크립트로 DOM을 다룰 때 jQuery를 활용하면 코드가 훨씬 간결하고 직관적이 된다. DOM 조작, 이벤트 처리, 애니메이션, AJAX 호출 등을 쉽게 구현할 수 있게 해주는 라이브러리다. 이번에는 jQuery의 기본부터 심화까지 코드와 함께 자세히 풀어보려고 한다.

jQuery를 잘 이해하면 웹 페이지의 동적 요소를 빠르게 다룰 수 있다. 하나씩 단계별로 알아보자.

jQuery 시작하기

jQuery를 사용하려면 먼저 라이브러리를 페이지에 추가해야 한다. CDN을 활용하는 방법이 간단하다:

<!-- jQuery CDN 추가 -->
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>

<!-- 기본 사용 -->
<script>
    $(document).ready(function() {
        console.log("jQuery 준비 완료!");
    });
</script>

$(document).ready는 DOM이 완전히 로드된 후 코드를 실행하게 해준다. 이제 jQuery를 본격적으로 다뤄보자.

1. 선택자와 DOM 조작

jQuery의 핵심은 강력한 선택자다. CSS 스타일 선택자를 사용해 요소를 쉽게 찾을 수 있다:

<div class="box">첫 번째 박스</div>
<div class="box">두 번째 박스</div>

<script>
    $(document).ready(function() {
        const $boxes = $(".box");
        $boxes.css("color", "blue");
        $boxes.text("jQuery로 변경됨");
    });
</script>
// 두 박스의 텍스트가 "jQuery로 변경됨"으로 바뀌고 파란색이 됨

$()로 요소를 선택하고, css()와 text()로 스타일과 내용을 바꿨다.

2. 이벤트 처리

jQuery로 이벤트 핸들링도 간단하다. 클릭 이벤트를 추가해보자:

<button id="myButton">클릭</button>
<p id="result"></p>

<script>
    $(document).ready(function() {
        $("#myButton").click(function() {
            $("#result").text("버튼이 클릭됐습니다!");
        });
    });
</script>

click() 메서드로 버튼 클릭 시 동작을 정의했다. 이벤트 연결이 매우 직관적이다.

3. 요소 추가와 제거

DOM에 요소를 동적으로 추가하거나 제거할 수도 있다:

<div id="container"></div>
<button id="add">추가</button>
<button id="remove">제거</button>

<script>
    $(document).ready(function() {
        $("#add").click(function() {
            $("#container").append('<p>새 요소</p>');
        });
        $("#remove").click(function() {
            $("#container p").remove();
        });
    });
</script>

append()로 요소를 추가하고, remove()로 삭제했다. DOM 조작이 훨씬 간소화된다.

4. 애니메이션 효과

jQuery는 애니메이션도 쉽게 구현할 수 있다:

<div id="box" style="width: 100px; height: 100px; background: orange;"></div>
<button id="animate">애니메이션</button>

<script>
    $(document).ready(function() {
        $("#animate").click(function() {
            $("#box").animate({
                width: "200px",
                height: "200px",
                opacity: 0.5
            }, 1000);
        });
    });
</script>

animate()로 크기와 투명도를 1초 동안 부드럽게 변화시켰다.

5. AJAX로 데이터 가져오기

jQuery를 사용하면 AJAX 요청도 간단하다:

<button id="fetch">데이터 가져오기</button>
<div id="result"></div>

<script>
    $(document).ready(function() {
        $("#fetch").click(function() {
            $.ajax({
                url: "https://jsonplaceholder.typicode.com/posts/1",
                method: "GET",
                success: function(data) {
                    $("#result").text(data.title);
                },
                error: function() {
                    $("#result").text("데이터를 가져오지 못했습니다.");
                }
            });
        });
    });
</script>

$.ajax로 외부 API에서 데이터를 가져와 화면에 표시했다.

6. 체이닝 활용

jQuery는 메서드 체이닝을 지원해 코드를 간결하게 만든다:

<div class="box">박스</div>

<script>
    $(document).ready(function() {
        $(".box")
            .css("color", "red")
            .text("체이닝 테스트")
            .animate({ fontSize: "24px" }, 1000);
    });
</script>

한 줄에 여러 메서드를 연결해서 순차적으로 적용했다.

7. 이벤트 위임

동적으로 추가된 요소에도 이벤트를 적용하려면 이벤트 위임을 사용한다:

<div id="list">
    <button class="item">항목 1</button>
</div>
<button id="add">항목 추가</button>

<script>
    $(document).ready(function() {
        $("#list").on("click", ".item", function() {
            console.log("항목 클릭됨");
        });
        $("#add").click(function() {
            $("#list").append('<button class="item">새 항목</button>');
        });
    });
</script>

on()으로 상위 요소에 이벤트를 위임해 새로 추가된 요소에도 동작이 적용된다.

8. 플러그인처럼 확장

jQuery는 사용자 정의 메서드를 추가할 수 있다:

<div class="box">테스트 박스</div>

<script>
    $.fn.highlight = function(color) {
        this.css("backgroundColor", color);
        return this;
    };

    $(document).ready(function() {
        $(".box").highlight("yellow");
    });
</script>

$.fn으로 새로운 메서드를 정의하고 호출했다.

9. 성능과 활용성

jQuery가 코드에 어떤 영향을 주는지 살펴보자:

- 성능: 선택자와 체이닝은 빠르지만, 복잡한 DOM 조작이 많아지면 약간의 부하가 생길 수 있다.

- 활용성: 직관적인 API로 빠르게 동적 웹을 만들 수 있다.

$() 선택자와 메서드 체이닝이 jQuery의 강력함을 보여준다.

마무리

jQuery는 DOM 조작, 이벤트, 애니메이션, AJAX를 단순화하며 웹 개발을 더 쉽게 만들어준다. 기본 선택자부터 이벤트 위임, 확장까지 다채롭게 활용할 수 있다.