jQuery - 제이쿼리란?
- 프로그래밍/제이쿼리
- 2021. 3. 30.
시작하기
jQuery는 HTML의 DOM 조작과 이벤트 제어, 애니메이션 그리고 Ajax까지 웹 화면을 다루는 자바스크립트 라이브러리입니다.
지금은 Angular, React, Vue 같은 화면을 다루는 여러 가지 기술들이 있어 화면 개발을 보다 쉽게 할 수 있지만, 화면과 관련된 기술이 발전하기 전에는 jQuery 만큼 화면 개발을 쉽게 해 주는 라이브러리는 존재하지 않았습니다. 또한 화면 개발에 있어 프로그래머들이 가장 다루기 힘들어하는 크로스 브라우징을 jQuery는 강력히 지원하였고 많은 프로그래머들은 열광했습니다. 현재는 v3.6.0 버전까지 릴리즈 되었습니다.
Write less, do more - jQuery가 가진 철학
jQuery가 기본적으로 가진 철학은 "write less, do more"로 적게 쓰고 많이 쓰자입니다. 개발자의 언어로 번역하면 "적은 코드로 많은 일을 하자"가 가장 어울리는 해석이라고 생각됩니다. jQuery는 다음과 같은 기능을 제공합니다.
- DOM과 관련된 처리를 쉽게 구현 할 수 있다.
- 규칙성을 가지고 이벤트를 처리 할 수 있다.
- 애니메이션 효과를 쉽게 만들 수 있다.
- AJAX 처리 방식을 편리하게 사용 할 수 있다.
그 밖에도 jQuery는 작은 양의 코드로도 많은 일을 할 수 있게 설계되어 있어 프로그래머가 아니어도 꽤 이해하기가 쉬운 구문을 가지고 있습니다. Javascript와 jQuery의 차이점을 보기 위해 예시를 작성해보았습니다.
Javascript
var titleElements = document.getElementsByClassName("title");
for (var titleElement in titleElements) {
titleElement.className = titleElement.className + " selected";
}jQuery
$(".title").addClass("selected");이와 같이 jQuery는 작은 양의 코드로 Javascript로 작성된 많은 양의 코드와 동일한 동작을 할 수 있습니다.
사용법
jQuery를 사용하는 방법은 크게 3가지 정도가 있습니다.
NPM or Yarn
NPM 이나 Yarn의 패키지 추가 명령어를 사용해 프로젝트에 추가하는 방법입니다.
npm install jqueryyarn add jqueryCDN (Contents Delivery Network)
인터넷이 사용 가능하다는 가정하에 HTML의 <head></head> 사이에 아래의 코드를 삽입하면 별도의 설치 없이 사용할 수 있는 방법입니다. 이전에 패키지 관리 툴 없이 개발을 할 때 사용하는 전형적인 방법입니다.
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>다운로드해서 프로젝트에 포함
패키지 관리 툴을 사용하지 않고 인터넷도 사용할 수 없는 환경에서 쓰이는 방법입니다. jQuery 공식 다운로드 사이트에 접속하여 jQuery를 다운로드하여 프로젝트에 넣어서 사용하시면 됩니다.
끝으로
jQuery는 화면과 관련된 프레임워크나 라이브러리가 발전함에 따라 이전보다 인기를 끌지 못하고 있는 것은 사실입니다. 그럼에도 현대화하지 않은 프로젝트나 간단하게 화면을 구성해서 사용하는 소규모 프로젝트에서는 여전히 좋은 자바스크립트 라이브러리입니다.
'프로그래밍 > 제이쿼리' 카테고리의 다른 글
| jQuery - 속성을 판별하는 hasAttr() 함수는 없다 (0) | 2023.06.19 |
|---|---|
| jQuery - click()이 동작하지 않으면 on()을 사용해보자 (1) | 2022.02.25 |
| jQuery - CDN을 이용해서 제이쿼리를 사용해볼까? (0) | 2022.02.13 |
| jQuery - 데이터를 설정하는 data() 원리와 사용 방법을 알아보자 (1) | 2021.12.20 |
| jQuery - $(document).ready() 대신 $()를 사용하자 (6) | 2021.05.13 |