jQuery - HTML 요소들을 조작하는 편리한 JS 라이브러리 (레거시)

jQuery는 자바스크립트를 더 쉽고 간편하게 사용할 수 있도록 도와주는 라이브러리이다.

 

직접 JS 코드를 작성해서 모든 기능을 구현할 수도 있지만, 코드가 복잡하고 브라우저 간 호환성을 직접 고려해야한다는 점 때문에 전문 개발자가 작성한 라이브러리를 가져와서 사용하면 편하다.

 

부트스트랩 css 파일을 사용할 때처럼 온라인 상의 파일을 참조 해서 import 하면 된다.

 

JQuery와 순수 JavaScript의 코드를 비교해보자

 

JS에서 elememt란 id를 가진 요소를 감추려면 복잡하다.

document.getElementById("element").style.display = "none";

 

JQuery로는이렇게 간단하고 직관적으로 쓸 수 있다.

 

$('#element').hide();

 

 

주요 특징 (아래 특징들을 단 몇 줄의 코드로 구현할 수 있도록 설계)

• 간결한 문법
  • $ 기호를 사용해 DOM 요소를 선택하고, 여러 메서드를 체이닝(chaining) 방식으로 사용할 수 있음

  // 문서가 준비되면 실행되고, 모든 <p> 요소를 클릭하면 숨김 처리
  $(document).ready(function(){
      $("p").click(function(){
          $(this).hide();
      });
  });
  

• DOM 조작
  • HTML 요소를 쉽게 선택, 수정, 추가, 삭제할 수 있도록 도와줌
• 이벤트 처리
  • 브라우저 간의 이벤트 처리 차이를 추상화하여, 다양한 이벤트(클릭, 마우스오버 등)를 일관된 방식으로 처리
  • 예시: $("button").on("click", function() { ... });
• 애니메이션 효과
  • 요소를 서서히 나타나게 하거나 사라지게 하는 등의 애니메이션을 간단한 메서드 호출로 구현
  • 예시: $("#element").fadeIn();, $("#element").slideUp();
• Ajax 지원
  • 서버와 비동기 통신(Ajax)을 쉽게(jQuery) 처리할 수 있도록 도와줌
  • 코드:

    $.ajax({
      url: "data.json",
      method: "GET",
      success: function(response) {
          console.log(response);
      }
    });
    

• 크로스 브라우저 호환성
  • jQuery는 다양한 브라우저 간의 차이를 추상화하여, 동일한 코드가 여러 브라우저에서 동일하게 동작하도록 도와준다.

 

현재 jQuery 상황은?

최근에는 모던 자바스크립트(ES6+) 기능이 많이 도입되고, React, Vue, Angular 같은 프레임워크들이 인기를 얻으면서 jQuery의 사용 빈도는 줄어들었지만, 여전히 많은 웹사이트와 레거시 코드에서 jQuery를 사용하고 있고, 배우면 기존 프로젝트 유지보수에 도움이 될 수 있다. 

 

+ Ajax의 특징

1. 비동기(Asynchronous) 통신
   • 페이지를 새로고침하지 않고도 서버에서 데이터를 가져오거나 보낼 수 있음.
   • 사용자가 사이트를 더 빠르고 부드럽게 사용할 수 있음.
2. 서버와 데이터 주고받기
   • 데이터를 GET, POST 방식으로 서버에 요청하고, JSON, XML, HTML 같은 형식으로 응답을 받을 수 있음.
3. jQuery를 사용하면 코드가 간결
   • $.ajax(), $.get(), $.post() 같은 jQuery 메서드로 쉽게 Ajax 요청을 보낼 수 있다.

 

jQuery Ajax 요청 코드

$.ajax({
  url: "https://api.example.com/data",  // 서버의 API 주소
  method: "GET",                        // HTTP 요청 방식 (GET, POST 등)
  data: {}, // 요청하면서 함께 줄 데이터 (GET 요청시엔 비워두기)
  success: function(response){ // 서버에서 준 결과를 response라는 변수에 담음
    console.log(response) // 서버에서 준 결과를 이용해서 나머지 코드를 작성
  }
});

• success 콜백: 요청이 성공하면 서버에서 받은 데이터를 처리.
• error 콜백: 요청이 실패하면 오류 메시지를 출력.
• GET 요청은, url뒤에 아래와 같이 붙여서 데이터를 가져감. http://naver.com?param=value&param2=value2
• POST 요청은, data : {} 에 넣어서 데이터를 가져감. data: { param: 'value', param2: 'value2' },

 

jQuery Ajax의 단축 메서드

jQuery에서는 $.ajax() 외에도 $.get(), $.post() 같은 단축 메서드가 있다

 

✅ GET 요청 (데이터 가져오기)

$.get("https://api.example.com/data", function(response) {
    console.log(response);
});

 

✅ POST 요청 (데이터 보내기)

$.post("https://api.example.com/data", { name: "Alice", age: 25 }, function(response) {
    console.log(response);
});

 

 

Ajax도 레거시 코드에서만 사용될까?

Ajax 자체가 "오래된 기술"은 아니지만 jQuery 기반의 Ajax는 현재 레거시 코드에서 많이 사용되고 있다.
지금은 모던 JavaScript(fetch API, Axios)를 더 많이 사용하지만, 기존 프로젝트(레거시 코드)에서는 jQuery Ajax가 여전히 많이 쓰이고 있음

 

Ajax에 관한 더 자세한 내용은

2025.02.24 - [Frontend/JavaScript] - Ajax - JS에서 클라이언트와 서버의 '비동기적' API 통신 방식

Ajax - JS에서 클라이언트와 서버의 '비동기적' API 통신 방식