2022-06-20
jQuery
소개
-
모든 브라우저에서 동일하게 동작, 실행되는 클라이언트 프로그래밍 언어
-
Javascript 를 보다 편리, 간결, 강력하게 사용할 수 있다
-
가장 인기있는 JavaScript 라이브러리이다
-
2006년 존 레식이 뉴욕 시 바 캠프에서 공식적으로 소개하였다.
-
jQuery는 선택자를 얼마나 잘 쓰느냐가 중요하다. -
다양한 기능을 제공한다
주요 기능
CSS 셀렉터를 활용하여 태그로 접근, 이벤트 처리, 특수 효과 및 애니메이션, Ajax, JSON 파싱, 플러그인을 통한 확장성, 멀티 브라우저 지원 등
툴
이때동안 우리가 html, CSS, Js를 Visual Studio Code로 코드를 작성해왔다면, jQuery는 Eclipse 라는 툴에서 편리하게 쓸 수 있다.
개발 환경 구성하기
설치 전 준비
C드라이브 혹은 D드라이브 등에 각자 사용할 작업폴더를 만든다. 폴더 이름은 jQuery
지금부터 준비할 것들은 아래와 같다
- JDK 설치
- Eclipse (이클립스)
- Apache tomcat (아파치)
- Web Browser : Chrome을 추천
JDK 설치
1) https://java.sun.com 접속, Download Now 클릭
2) java SE 클릭
3) Window칸의 installer 다운
4) 윈도우 주의할 점, jdk 설치 파일을 우클릭 클릭하고 관리자 권한으로 실행해야한다.
나는 혹시 몰라 C드라이브에 이미 존재하는 java폴더에 다운 받고, 바로가기 폴더를 jQuery 폴더에 연결시켰다.
Apache tomcat 다운
1) https://tomcat.apache.org/ 접속 후 Tomcat10 클릭
2) 64-bit windows.zip 다운로드
3) 압축을 해제 후 처음에 만들었던 jQuery 폴더에 아파치 폴더를 넣는다
Eclipse 다운
1) https://www.eclipse.org/ 접속 후 다운로드 클릭
2) 바로 다운로드 버튼을 누르지 말고 그 아래의 Download Packages을 클릭한다
3) windows x86_64 다운로드. 맥은 MacOS로 다운
4) Select Another Mirror 클릭 후 한국 서버로 다운로드. 해외 서버는 다운이 조금 느리다
5) 압축폴더 해제 후, jQuery 폴더에 이클립스 폴더를 넣는다.
이때 주의할 점, 버전 폴더는 제외시키는 것이 좋다. 아래처럼 jQuery폴더->이클립스 폴더-> 이클립스 하위 폴더에 바로 내용물이 나오도록 구성해야한다.
6) workspace 혹은 eclipse-workspace 등의 이름으로 폴더를 하나 더 생성한다. 이 폴더는 이클립스을 실제로 이용했을 때 작업한 파일들이 저장되는 경로로 쓰인다.
7) 이클립스 응용프로그램(.exe)은 우클릭->바로가기를 만들어 바탕화면에 놓으면 자주 쓸 때 편하게 실행할 수 있다.
Eclipse 환경설정하기
1) 이클립스를 실행시킨다.
2) 우리가 만들어놓은 작업 폴더를 선택한다
이 작업파일만 쓰고 싶다면 디폴트 폴더 설정 및, 다시 알리지 않음을 체크한다
3) Launch !
폰트 설정
Window -> Preferences -> General -> Appearance -> Colors and Fonts -> Text Font 더블클릭
원하는 폰트와 크기로 설정
폰트가 너무 얇을 시 굵게 설정을 추가하는 것도 좋다
인코딩 설정
우리가 작성하는 코드 언어가 다양한 형태일 때 그것들을 지원해주는 코드 방식을 설정하는 과정이다
Window -> Preferences -> General -> Content Types -> Default encoding : UTF-8 써준 후 Apply and Close
웹 브라우저 설정
Window -> Preferences -> General -> Web Browse -> Chrome 체크 후 Apply and Close
서버 설정
Window -> Preferences -> Server -> Runtime Environmen -> Add -> Apache Tomcat v10.0 -> Create a new local server 체크 확인 -> !! Next 클릭 -> Browse.. 를 눌러 다운 받은 아파치 '폴더 선택' -> Finish
Project Explorer 창 보이기
Window -> Show View -> Project Explorer
휴 여기까지가 기본 환경 설정이다.
프로젝트 만들기
File -> New -> Dynamic Web Projec -> 프로젝트 명은 test
개발 환경 테스트해보기
좌측 Project Explorer창에서 프로젝트 명 test의 하위 폴더 클릭하여 열기-> src 폴더 열기 -> webapp 폴더 연 후, 우클릭 -> HTML File 클릭
-> 아래 html 코드 작성하기
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>test title</title>
</head>
<body>
<h1>개발환경 테스트</h1>
</body>
</html>-> Run 누르기
-> 로컬호스트 톰캣 버전10 서버 클릭 후 피니시
-> 사이트가 뜨는지 확인
(드디어) jQuery 다운로드
1) https://jquery.com/ 접속 후 다운로드 클릭
2) 스크롤 쭉쭉 내려 Using jQuery with CDN 에서 visit https://code.jquery.com 클릭
3) jQuery 3.x 의 minified 파일 클릭
4) 카피
5) 이클립스로 돌아와 붙여넣기! 링크 뒤에 내용들은 없어도 되므로 삭제시켰다.
JavaScript 와 jQuery
그럼 간단한 테스트를 해보자.
자바스크립트와 J쿼리에는 어떤 차이가 있을까?
먼저 Js의 코드다
같은 html내용과 동작을 가졌을 때,
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<h1>h1 태그입니다</h1>
<button onClick="set_h1()">h1태그 문자열 변경</button>
<br/>
<ul>
<li>문자열1</li>
<li>문자열2</li>
<li>문자열3</li>
</ul>
<button onClick="get_li()">li태그 문자열 가져오기</button>
<div id="result"></div>
</body>
</htmlJavaScript
<script>
function set_h1(){
var h1 = document.getElementsByTagName("h1");
var str = h1[0].firstChild;
str.nodeValue = "JavaScript로 문자열 변경";
}
function get_li(){
var li = document.getElementsByTagName("li");
var result = document.getElementById("result");
for(var idx in li){
`var str = li[idx].firstChild;
result.innerHTML += str.nodeValue + "<br/>";
}
}
</script>인데,
jQuery
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
function set_h1(){
$("h1").text("jQuery로 문자열 변경");
}
function get_li(){
$("li").each(function(idx, obj){
var str = $(obj).text();
$("#result").append(str + "<br/>");
});
}
</script>이다.
완전히 똑같은 기능을 가졌지만 더 간결한 표현식을 쓴다.
어려웠던 점
설치 과정 어려웠던 건 없었다.
강사님 화면에는 있었는데 내 화면에는 없었던 Project Explorer창
해결 방법
Window -> Show View -> Project Explorer
검색을 통하여 Project Explorer창 띄우기 해결.
자료 파일에 해당 과정이 없어서 자체적으로 추가
소감
라이브러리에서 가져와 쓰는 것이 알고리즘 라이브러리 쓰는 것과 비슷한 느낌이다. jQuery가 좀더 간단해서 많이 쓰는 건 알겠는데, 구체적으로 어떤 것들이 더 좋은지 알고 싶다.
