jQuery란 무엇일까?

[작성자의 다른 글 보러가기: ' Java가 그래서 뭐야?']

jQuery란 무엇일까?

jQuery에 대해 알아보자. jQuery란 무엇이며, jQuery의 철학,자바스크립트와의 차이, 사용법 등에 대해 알아보면서 jQuery에 대해 이해해보도록 하려고 합니다.

* 목차

- jQuery란?

- jQuery의 철학과 기능

- jQuery 와 JavaScript 코드비교

- jQuery 사용법

- 자주 사용하는 JQuery 코드

#jQuery란?

HTML의 요소들을 쉽게 조작하고 편리하게 사용할 수 있도록 만든 라이브러리로 Javascript를 미리 작성해둔 것이라고 쉽게 생각해볼 수 있습니다.

HTML의 DOM조작과 이벤트 제어, 애니메이션 그리고 Ajax까지 웹 화면을 다룰 수 있습니다.

Javascript로도 모든 기능을 구현할 수는 있지만, 코드가 복잡하고, 브라우저간 호환성 문제등도 고려해 JQuery라는 라이브러리가 등장하게 되었다고 합니다.

지금은 Angular, React, Vue같은 화면을 다루는 여러 가지 기술들이 있어 화면 개발을 보다 쉽게 할 수는 있지만, 화면과 관련된 기술이 발전하기 전에는 jQuery만큼 화면 개발을 쉽게 해주는 라이브러리는 존재하지 않았습니다. 또한 화면 개발에 있어 프로그래머들이 가장 다루기 힘들어하는 크로스 브라우징을 jQuery는 강력히 지원하였고 많은 프로그래머들은 열광했습니다.

#jQuery의 철학과 기능

jQuery가 기본적으로 가진 철학은 "white less, do more"로, "적은 코드로 많은 일을 하자" 라는 의미입니다. 이러한 jQuery는 다음과 같은 기능을 제공 합니다.

- DOM과 관련된 처리를 쉽게 구현할 수 있다.

- 규칙성을 가지고 이벤트를 처리할 수 있다.

- 애니메이션 효과를 쉽게만들 수 있다.

- Ajax처리 방식을 편리하게 사용할 수 있다.

그 밖에도 jQuery는 작은 양의 코드로도 많은 일을 할 수 있게 설계되어 있어 프로그래머가 아니어도 꽤 이해하기가 쉬운 구문을 가지고 있습니다. Javascript와 jQuery의 차이점을 보기 위해 예시, 그리고 java script와의 차이점을 비교해보도록 하겠습니다.

#jQuery의 예시 및 Javascript와의 차이점 비교

Javascript

var titleElements = document.getElementsByClassName("title");

for (var titleElement in titleElements) {

titleElement.className = titleElement.className + " selected"; }

jQuery

$(".title").addClass("selected");

이와 같이 jQuery는 적은 양의 코드로 Javascript로 작성된 많은 양의 코드와 동일한 동작을

수행할 수 있습니다.

#jQuery의 사용법

jQuery를 사용하는 방법은 크게 3가지 정도가 있습니다.

- NPM or Yarn

NPM 이나 Yarn의 패키지 추가 명령어를 사용해 프로젝트에 추가하는 방법입니다.

ex 1> npm install jquery

ex 2> yarn add jquery

- CDN (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 코드

- input 박스 값 가져오기

$('#해당 id값' ) . val();

- input 박스 값 바꾸기(또는 해당 값으로 입력하기)

$('#해당 id값' ) . val('바꿀값' );

- div 보이기 / 숨기기

$('#해당 id 값').show();

$('해당 id 값').hide();

- button 값 바꾸기

$('#해당 id 값').text('바꿀값');

$('#btn-posting-box').text('포스팅 박스 닫기');

#끝으로

jQuery는 화면과 관련된 프레임워크나 라이브러리가 발전함에 따라 이전보다 인기를 끌지 못하고 있는 것은 사실입니다. 그럼에도 현대화하지 않은 프로젝트나 간단하게 화면을 구성해서 사용하는 소규모 프로젝트에서는 여전히 좋은 자바스크립트 라이브러리입니다.

'#기본개념' 카테고리의 다른 글

REST란? REST API란? RESTful이란? (0)	2022.12.29
추상클래스와 인터페이스의 차이가 무엇일까?(추상메소드란 뭘까?) (1)	2022.12.28
Ajax란 무엇일까? (+ 비동기 프로그래밍에 대해) (1)	2022.12.22
Web Server와 Was의 차이는 (Feat. 정적 페이지와 동적 페이지) (0)	2022.12.21
#객체지향 프로그래밍이란? (0)	2022.12.20

David`s story

jQuery란 무엇일까?