프론트엔드 사이드에서 웹 페이지의 동적인 요소들을 제어해 줄 수 있는 Javascript라는 프로그래밍 언어가 존재했습니다. 이번엔 해당 언어의 라이브러리 중 하나인 jQuery(제이쿼리)에 대해 알아보겠습니다.
1. Javascript와 jQuery(제이쿼리)의 연관성
위에서 말씀드린 것처럼, Javascript는 경우 주로 웹 페이지 또는 응용 프로그램의 다양한 제어를 위해 개발된 스크립트 언어이며 jQuery는 이러한 Javascript를 더욱 더 간결하게 사용할 수 있도록 설계된 크로스 플랫폼 기반의 Javascript 라이브러리입니다.
※ 여기서 크로스 플랫폼 (Cross Platform)이란?
쉽게 말하면 여러 종류의 컴퓨터가 존재해도 모두 동일하게 동작할 수 있다는 의미입니다.
2. jQuery의 특징
1. HTML의 내부 요소에 접근이 용이
jQuery를 쓰지 않고선 요소에 접근하려고 할 때, DOM 트리를 이용해서 접근해야 하나 jQuery를 사용할 경우
jQuery의 속성 제어 함수, 선택자 등을 통해서 요소에 쉽게 접근할 수 있습니다.
2. 코드가 간결하고 직관적이다.
Javascript에 비해 코드가 간결하고 직관적인 편입니다
3. 선택자로 선택한 태그(노드)를 제어하는 강력한 기능을 제공합니다.
3. jQuery 사용 방법
jQuery를 사용하는 방법은 크게 두 가지로 나눌 수 있습니다.
(1) 직접 API 파일을 다운로드 받아 사용하는 방법
(2) 링크를 걸어주는 방법
(1) 직접 API 파일을 다운로드 받아 사용하는 경우
<script src="js/jquery-3.6.0.min.js"></script>API 파일을 http://jquery.com/download/ 에서 다운로드 받을 수 있습니다.
파일은 compressed(jquery.js), uncompressed(jquery.min.js) 두 가지가 존재하는데 압축된 것과 안 된 것으로 배포할 때는 min 파일(compressed)를 사용하는 것이 좋습니다.
파일을 프로젝트 폴더에 본인이 확인하기 쉬운 경로에 저장한 뒤 <head> 태그에 <script> 태그를 열어 위와 같은 코드를 작성해 줍니다.
(2) 링크를 걸어주는 방법
<!-- 링크를 걸어주는 방법 -->
<script type="text/javascript" scr="//code.jquery.com/jquery-3.4.0.min.js"></script>
<!-- 또는 -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery/min.js"></script>"첫 번째 <script>는 jQuery에서 제공하는 최신 버전의 URL이며, 두 번째는 CDN을 이용하는 방법으로 구글의 예제를 참고하였습니다.
이번 포스팅은 Javascript에 대해 간단하게 알아보았고, jQuery의 뜻, 사용 방법에 정리해 보았습니다.
다음 포스팅부터는 본격적으로 jQuery 함수에 대해 알아보며 노드를 제어하는 방법을 확인해 보겠습니다.
===========================================================================
개인적으로 공부하고 내용을 다시 정리하며 작성한 글입니다.
오타나 내용 상 틀린 내용이 있을 수 있으니 지적해 주시면 감사하겠습니다.
해당 주제로 추가적인 포스팅이 필요하다고 생각되면 작성한 글이 수정될 수 있는 점 참고 부탁드립니다.
'프론트엔드(Front-End) > jQuery' 카테고리의 다른 글
| [jQuery] - 클래스(Class), 부모 - 형제 노드(태그) 제어 (0) | 2022.07.20 |
|---|---|
| [jQuery] - 선택자(Selector), val(), attr(), html(), CSS 속성 제어 (0) | 2022.07.20 |
댓글