[jQuery 1강] 제이쿼리 개요 및 개발환경구축

 [jQuery 1강] 제이쿼리 개요 및 개발환경구축

이번글에서부터 제이쿼리에 대해서 알아보고 배워보도록 하겠습니다.

자바스크립트를 공부하시고 다음 공부를 제이쿼리를 하는경우가 많습니다.

또한 웹개발을 하다보면 많이 들어보는것이 "제이쿼리" 입니다.

그럼 제이쿼리란 무엇일까요?

제이쿼리는 자바스크립트의 단점을 보안하기위한 라이브러리 입니다.

자바스크립트가 어떠한단점이 있을까요?

자바스크립트와 제이쿼리를 비교해서 알아보도록 하겠습니다.

 자바스크립트 vs 제이쿼리

자바스크립트는 유연한 언어이지만 단점이 존재합니다.

자바스크립트의 단점은 다음과 같습니다.

 자바스크립트 단점 

1. 기능이 조금만 많아져도 코드가 길어지며 복잡해집니다.

2. DOM과 관련된 기능은 브라우저 이슈가 있습니다.

(브라우저마다 다르게 입력해주어야합니다..)

자바스크립트의 단점을 보안한 제이쿼리는 그러면 어떠한 장점이 있을까요?

장점은 다음과 같습니다.

 제이쿼리 장점 

 

1. 자주 사용하는 기능을 함수로 쉽게 구현되어 있다.

2. DOM과 관련된 기능을 브라우저 이슈없이 사용할수 있다.

(크로스 브라우저로 이미 자체적으로 구현되어 있습니다)

3. 풍부한 함수(라이브러리)제공

4. css선택자를 그대로 사용함

5. 대형프로젝트나 규모가큰개발사는 자체 제이쿼리 프레임워크를 만들어 사용할수 있음

 jQuery 개발환경 설정

제이쿼리 개발환경은

자바스크립트와 같이 메모장에서 부터 시작하여..

에딧플러스, 노트++, 비주얼 스튜디오, 이클립스, 등등.. 

에서 개발이 가능합니다.

개발환경은 자바스크립트 글에서 확인하실수 있습니다.

이전글을 링크해 두겠습니다.

 이전글 

2019/02/07 - [Programming/JavaScript, jQuery] - [javascript 1강] 자바스크립트 개요 및 개발환경설정

제이쿼리 라이브러리 사용방법은 쉽습니다.

특별한 설치없이 설정을 통하여사용할수 있습니다.

제이쿼리를 사용할수 있는 방법은 2가지가 있습니다.

CDN을 이용하는 방법, 파일을 업로드 하는 방법 입니다.

첫번째 방법인 CDN 을 이용하는 방법부터 알아보도록 하겠습니다.

CDN을 이용하는 방법은 다운로드없이 URL 주소를 사용하는것입니다.

사용방법은 다음과 같습니다.

1. 제이쿼리 사이트에 접속을합니다.(https://jquery.com/)

사이트에 접속하신후 아래의 빨간색테두리의 버튼 "Download jQuery" 를 눌러줍니다.

현재 버전은 3.3.1 즉 3버전입니다. 

(제이쿼리 강좌는 현재 최신버전인 3.3.1 버전으로 작성하도록하겠습니다.)

-비고-

제이쿼리의 버전은 은근히 중요합니다.

1.x 대의 버전은 익스플로러8 이하버전을 지원하고..

2.x 대의 버전부터는 익스플로러9 이상버전부터 지원합니다.

즉 2.x 대부터는 HTML5 만 지원을 하는것입니다.

2. 제이쿼리 다운로드 클릭 (https://jquery.com/download/)

다음과같이 빨간색 부분에 다운로드 2개가 있습니다.

"Download the compressed, production jQuery 3.3.1"

"Download the uncompressed, development jQuery 3.3.1"

"Download the compressed, production jQuery 3.3.1" 링크를 눌러보면 다음과 같이 외게어처럼 나옵니다.

URL 주소를 보시면 https://code.jquery.com/jquery-3.3.1.min.js 이라고 나와있는것을 확인할수 있습니다.

즉 min 파일입니다. min 파일은 js 파일을 압축해놓은것입니다.

압축을 해놓아서 알아보기는 힘들지만 용량이 적은 장점이 있습니다.

그럼 "Download the uncompressed, development jQuery 3.3.1" 버튼을 눌러보겠습니다.

그럼 다음과같이 나옵니다. 

URL 주소를 보시면  https://code.jquery.com/jquery-3.3.1.js 이라고 나와있는것을 보실수있으며

알아볼수 있게 적혀있습니다. 하지만 용량이 min 파일에 더나가며..

제이쿼리의 안쪽내용을 살펴보거냐 튜닝을 할목적이아니라면 min 파일을 사용하는것이 좋습니다.

그럼이렇게 나오는 URL 로 어떻게 사용하는대? 라고 생각하실수 있습니다.

이렇게 나온 URL 주소를 사용하면됩니다.

 사용방법 및 문법 

HTML 구문에 다음과 같이 스크립트를 추가하면 됩니다.

<script src="https://code.jquery.com/jquery-3.3.1.js"></script>

또는 

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

(HTML의 어떠한 위치에 넣어도 작동을 하지만.. 보통 상단에 제이쿼리를 입력합니다.)

(인터프린트언어이기 때문에 상단에 입력해야 모두 적용이됩니다.)

두번째 방법으로 파일을 다운로드후 연결하여 사용하는 방법입니다.

1. 위에서 말씀드린대로 다운로드 페이지에서  "Download the compressed, production jQuery 3.3.1" 버튼을 누르면 다음과같이 나옵니다.

이렇게 외게어처럼 나온페이지에서..

다음과같이 눌러줍니다.

설정에가서 > 도구 더보기 > 페이지를 다른 이름으로 저장 을 눌러줍니다.

(브라우저는 크롬을 사용하였습니다)

그다음 위치를 선택하신후 저장을 눌러주시면..

선택한 위치에 이렇게 파일이 생성됩니다.

 사용방법 및 문법 

HTML 구문에 다음과 같이 스크립트를 추가하면 됩니다.

 

<script src="파일경로/jquery-3.2.1.min.js"></script>

(HTML의 어떠한 위치에 넣어도 작동을 하지만.. 보통 상단에 제이쿼리를 입력합니다.)

(인터프린트언어이기 때문에 상단에 입력해야 모두 적용이됩니다.)

 글을 마치며..

이번글에서는 제이쿼리의개요 및 개발환경/제이쿼리연결 방법에 대해서 알아보았습니다.

다음글부터는 jQuery 기본문법 및 많이 사용하는 기능(함수) 에 대해서 하나씩 알아보도록 하겠습니다.

모두 수고하세요!

도움이 되셨다면 로그인 없이 가능한

아래 하트♥공감 버튼을 꾹 눌러주세요!