자바스크립트 1단계

빠른 이동을 원하시면, 아래 키워드를 클릭하세요!

🌿 jQuery

jQuery는 이 자바스크립트를 더 쉽게 쓸 수 있도록 도와주는 도구예요. 마치 공구 상자에 있는 여러 가지 도구들처럼, jQuery도 웹사이트를 만들 때 필요한 다양한 기능을 쉽게 사용할 수 있게 해줍니다.

왜 jQuery를 사용할까요?

간편함: 자바스크립트로 복잡한 기능을 구현하려면 여러 줄의 코드가 필요하지만, jQuery를 사용하면 몇 줄로 간단하게 작성할 수 있어요.
호환성: 모든 웹 브라우저가 자바스크립트를 똑같이 처리하지 않아요. jQuery는 이 문제를 알아서 해결해 주기 때문에, 우리는 걱정할 필요가 없어요.

jQuery 시작하기

jQuery를 사용하려면 먼저 웹 페이지에 jQuery를 추가해야 해요. 마치 앱을 설치하는 것처럼, jQuery도 웹 페이지에 설치해줘야 해요.

아래 사진은 jQuery 공식 사이트 입니다.
빨간색 동그라미로 표시한 Download 페이지로 이동합니다.
스크롤을 내리다 보면 jQuery CDN을 클릭하여 페이지를 이동합니다.

위 다양한 버전의 jQuery CDN 중에서 우리는 minified를 선택하여 설치해줄거에요.
- Uncompressed: 디버깅과 개발에 유용한 원본 코드 (큰 파일 크기).
- Minified: 실제 사이트에 배포할 때 사용 (압축된 작은 파일 크기).
- Slim: AJAX와 애니메이션 기능이 제거된 더 가벼운 버전.
- Slim Minified: Slim 버전의 압축된 형태로, 가장 작은 파일 크기.
일반적으로 개발 중에는 uncompressed 버전을 사용하고, 배포 시에는 minified 또는 slim minified 버전을 사용하는 것이 좋습니다. 프로젝트의 요구 사항에 따라 slim 버전을 고려할 수도 있습니다.
minified를 클릭하면 아래와 같은 Code Integration 모달이 뜨게 됩니다. 모달에 적혀있는 코드를 복사해서 <head> 태그 안에 넣어주세요.

javaScript vs jQuery

const JS_등록하기기능 = () => {
	// 1. 자바스크립트
	// document.getElementById("HTML_프로필보여주는곳").innerHTML = "<p>이름: 철수</p>"
	// document.getElementsByClassName("CSS_프로필보여주는곳").item(0).style = "color: red"
	
	            
	// 2. 제이쿼리(초간단 자바스크립트) => "긴 문법은 싫어!"
	$("#HTML_프로필보여주는곳").html("<p>이름: 철수</p>")
	$(".CSS_프로필보여주는곳")[0].style = "color: red"
}

이 코드에서는 자바스크립트와 jQuery가 같은 작업을 어떻게 다르게 처리하는지 보여줍니다. jQuery를 사용하면 더 짧고 간결한 코드로 같은 작업을 할 수 있습니다.