아직도 살아 있는 불사의 jQuery - 기초 부터 실무까지

jQuery를 아직도 학습해야 하는 이유

jQuery는 2006년 처음 등장한 이후, 웹 개발자들에게 널리 사용되어 온 자바스크립트 라이브러리입니다. 그 주요한 이유 중 하나는 다양한 웹 브라우저 간의 호환성을 보장하면서도 HTML 요소의 선택과 조작을 단순화하여 개발 생산성을 높여주기 때문입니다.

jQuery의 이러한 장점은 전 세계 웹사이트에서의 높은 사용률로 나타납니다. 예를 들어, 2021년 기준으로 상위 1,000만 개 웹사이트 중 약 77.8%가 jQuery를 사용하고 있었습니다.

[ 출처: https://w3techs.com/technologies/overview/javascript_library ]

이처럼 jQuery는 오랜 기간 동안 웹 개발의 표준 도구로 자리매김해 왔습니다. 따라서, jQuery를 학습하면 기존의 방대한 코드베이스를 이해하고 유지보수하는 데 큰 도움이 됩니다. 또한, 여전히 많은 웹사이트가 jQuery를 사용하고 있으므로, 이를 숙지하면 다양한 프로젝트에서 유용하게 활용할 수 있습니다.

물론, 최근에는 React나 Vue.js와 같은 최신 프레임워크와 라이브러리가 주목받고 있지만, jQuery의 단순함과 광범위한 호환성은 여전히 매력적인 요소로 남아 있습니다. 따라서, 웹 개발자로서 jQuery를 학습하는 것은 과거와 현재의 기술을 모두 이해하는 데 있어 중요한 밑거름이 될 것입니다.

jQuery 활용 웹사이트 예시

삼성전자 https://www.samsung.com/sec/

삼성전자 홈에서 개발자 도구로 element 부분의 head 태그 부분을 보면 jQuery 라이브러리, slick(슬라이드쇼) 라이브러리, swiper 라이브러리, masonry 라이브러리를 활용하고 있습니다.

아시아나 항공 - https://flyasiana.com/C/KR/KO/index

아시아나 항공의 경우 jquery, swiper 라이브러리를 활용하고 있고, 날짜를 많이 활용하기 때문에 moment.js를 활용하고 있습니다.

빙그레 - https://www.bing.co.kr/

빙그레 사이트의 경우 masonry, slick등을 활용하고 있고, 공통적으로 적용될 스크립트는 common.js, 각 페이지 별로 작동할 스크립트는 main, sub 등으로 구분하여 사용하고 있습니다.

그 외에 다수의 사이트들이 jQeury를 활용하여 웹사이트를 제작, 유지 보수 하고 있습니다.

그래서 본 강의에서도 jQeury의 기본 문법과 대표적인 함수들, 탭스, 아코디언등 기본 예제를 학습하고, 대표적인 실무 라이브러리인 swiper js, masonry, fullpage JS 등을 추가로 학습할 예정입니다.

주요 학습 내용을 소개합니다.

파트 A

jQuery 기본 문법을 학습합니다.

jQuery 로드 부터, 로드 순서를 학습합니다. jQuery를 활용하여 요소를 선택하고, 선택한 요소에 스타일을 변경하고, 선택한 요소에 이벤트를 적용합니다.

jQuery를 통해 애니메이션을 쉽게 구현합니다. 이때 애니메이션의 시간, 속도 및 함수를 작성하여 세밀하게 설정합니다.

파트 B

파트 B에서는 웹페이지 제작시 가장 많이 활용되는 UI/UX인 탭, 아코디언, 라이트박스, 백 투 탑, 슬라이드를 구현합니다. 효과 구현을 위한 html 구조를 작성하고, css로 미리 효과를 설계하고, script를 구현하여 다양한 이벤트에 따라 효과가 구현되도록 작성합니다.

파트 C

파트 C에서는 실무에서 많이 활용되는 라이브러리중 Swiper, Masonry, ScrollTrigger등의 활용법을 학습니다.

파트 D

파트 B에서는 fullpageJS를 활용하여 휠을 움직이면 다음 슬라이드로 부드럽게 이동하는 웹페이지를 구현합니다.

SVG로 그래프를 작성하고, jQuery와 연동하여 테두리가 채워지는 애니메이션을 작성합니다.

예제 파일 및 완료본을 제공합니다.

예제 파일은 2차시(jQuery 문법 - 로드 순서)의 자료에서 다운로드 할 수 있습니다.

완성본 전체 파일은 17차시(Fullpage JS)의 자료에서 다운로드 할 수 있습니다.

소통 창구(설문, 1:1오픈 채팅방)✒

수강생 분들은 새소식란의 소개되어 있는 구글 설문과 1:1 오픈 채팅방을 통해 언제든 의견과 질문을 하실수 있습니다.