[JavaScript] JavaScript와 jQuery

 

코드를 보다가 JavaScript와 jQuery가 같이 사용되는 것을 보고 이에 대해 정리하려 한다.

 

JavaScript는 프로그래밍 언어이고,

jQuery는 JavaScript의 라이브러리이다.

 

기본적인 개념부터 정리해보자.

HTML은 웹 페이지의 구조를 정의하는 언어이며,

CSS는 웹 페이지의 스타일과 레이아웃을 지정하는 언어이다.

JavaScript는 이들과 함께 사용하여 웹 페이지를 동적으로 만들고 사용자와 상호작용할 수 있게 해준다.

 

따라서 HTML, CSS, JS를 함께 사용해 웹 페이지를 만들고 동적으로 제어할 수 있다.

 

 

jQuery는 JavaScript로 작성된 코드를 간결하고 쉽게 작성할 수 있게 도와주는 라이브러리이다.

 

자세히 설명하면 JS DOM 작업을 쉽게 처리할 수 있도록 도와주는 라이브러리이다.

---

 JavaScript 구성 요소

 

💡 JavaScript core 문법

자바스크립트의 핵심적인 문법과 기능들을 의미

변수, 조건문, 함수 등과 같은 기본적인 문법과 기능들이 여기에 해당

 

💡 JavaScript core 라이브러리

자바스크립트 언어의 기본 기능을 보완하고 확장하는 기능들이 포함된 라이브러리

대표적으로 Array, String, Math와 같은 객체들과 메소드들이 포함

 

💡 JavaScript BOM (Browser Object Model)

브라우저와 관련된 객체들의 집합을 의미

브라우저 창의 크기, URL, 화면 스크롤 위치와 같은 브라우저 창과 관련된 정보와 기능을 다루는 객체들이 여기에 해당

 

💡 JavaScript DOM (Document Object Model)

문서의 구조를 표현하고 조작하는 객체들의 집합을 의미

HTML 문서의 요소들을 자바스크립트로 접근하고 조작하는데 사용됨

웹 페이지의 요소들을 선택하고 변경하거나 이벤트를 처리하는 등의 작업에 사용됨

 

---

 

예를 들어 JavaScript로 DOM 요소를 선택하고 스타일을 변경하는 코드는 아래와 같다.

var element = document.getElementById("myElement");
element.style.color = "red";

이를 jQuery를 사용해 더 간단하게 작성할 수 있다.

$("#myElement").css("color", "red");

 

앞서 볼 수 있듯, jQuery를 사용해 개발 속도를 높일 수 있다.

 

하지만 

jQuery 라이브러리의 크기가 크고, 로드하는데 소요되는 시간으로 인해 일정한 오버헤드가 발생 수 있다.

(처리 속도가 느림)

 

반대로 JavaScript는 매우 빠른 처리 속도를 가진다.

반복되는 작업이나 빠른 속도가 필요로 하는 작업에는 JS를 사용하고

경우에 따라 적절히 섞어서 사용함이 좋다.

 

 

 

---

참고로 AJAX(Asynchronous JavaScript and XML)는

웹 애플리케이션에서 비동기적으로 데이터를 처리하는 일반적인 방법론을 지칭하는 용어이다. 

 

이러한 방법론은 기본적으로 자바스크립트를 사용하여 서버와 통신하는 것을 의미하며,

특정 라이브러리나 기술을 사용하여 구현할 수 있다.

 

 

AJAX는 특정 기술이나 라이브러리가 아님!

AJAX를 구현하기 위해 주로 jQuery와 같은 자바스크립트 라이브러리를 사용하는 경우가 많아

AJAX는 라이브러리라는 혼동이 발생..

 

 

AJAX는 웹 페이지의 새로고침 없이

필요한 데이터를 서버로부터 받아오거나 서버에 데이터를 보내는 등의 작업을 수행할 수 있다.