[jQuery] jQuery 기초

인터넷에 기능 구현 방법 검색할 때마다 jQuery로 작성된 코드가 많아서 jQuery를 배워야 겠다고 생각만 하던 중, 인프런에서 신년맞이 이벤트로 무료 강의를 제공해서 호다닥 강의를 들었다.

 

jQuery란

• 클라이언트 측 페이지 제작을 손쉽게 만들어주는 자바스크립트 라이브러리
• 크로스 브라우징 가능
• 자바스크립트보다 짧은 코드로 작성 가능

 

jQuery 사용 방법

• 다운 받기
  1. CDN 방식
     • <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  2. 파일 직접 다운 받아 연결
     • <script src="libs/jquery-3.5.1.min.js"></script>
• 노드 찾기
  • var $변수 이름 = $('CSS 선택자')
    • $( ) : 함수를 호출함. 선택자에 해당하는 노드를 찾아주는 역할을 함
    • 선택자 : CSS의 선택자. 찾고 싶은 선택자를 만들어 $( ) 함수에 매개변수 값으로 넣어주면 됨
    • var $변수명 : $( ) 함수에서 리턴해주는 값을 저장하기 위해 만든 변수. $는 jQuery 기능이 들어있는 변수를 표현하기 위함
• 이벤트 등록
  • $대상.on(이벤트 이름, 이벤트리스너);
  • $대상.단축이벤트함수(이벤트리스너);
• 스타일 설정
  • $대상.css(스타일 이름, 값);

 

예시 코드

글자 색상을 바꿀 때 자바스크립트로는 다음과 같이 작성할 수 있다.

<script>
        window.onload = function() {
            var menu2 = document.getElementById("menu2");
            var liArrays = menu2.getElementsByTagName("li");

            for(var i=0; i<liArrays.length; i++){
                var li = liArrays[i];
                li.style.color = "blue";
            }
        }
</script>

똑같은 내용을 jQuery로 작성하면 아래처럼 짧은 코드로도 가능하다.

<script>
        $(document).ready(function(){
            $("#menu2 li").css("color", "#f00");    
        })
</script>

---

https://www.inflearn.com/pages/infmation-56-20221115

Vanilla JS, 선택일까 필수일까 - 인프런 | 스토리

그런데 이 글을 읽어보면, virtual DOM을 사용하는 리액트를 이용할 때 jQuery를 사용하면 충돌이 발생한다고 한다. 왜냐하면 jQuery와 virtual DOM을 사용하는 프레임워크 및 라이브러리의 역할이 충돌하기 때문이라고 한다. 둘 다 DOM을 갱신한다는 목적을 가지는 도구이기 때문에, 같이 사용할 수는 있지만 굳이 같이 사용할 필요가 없다고 한다. 그리고 jQuery보다 virtual DOM을 이용한 경우가 생산성이 훨씬 높다고 한다. jQuery를 활용해 직접 DOM을 제어하는 것보다, state를 통해 DOM을 선언적으로 제어하는 것이 코드에 대한 이해를 높여준다고 한다. (virtual DOM : 메모리에 가상 돔을 만들고 실제 돔과 비교하며 작업한 후 수정된 부분은 실제 돔에 적용하는 방식)

 

바닐라JS

• 외부의 라이브러리나 프레임워크를 이용하지 않는 순수 자바스크립트
• 장점
  • 가볍고 빠르다
  • 호환성이 좋다
  • 디버깅 시간이 줄어든다
• 단점
  • 코드가 길어진다

 

프레임워크나 라이브러리에 지나치게 의존하지 말자. 다양한 프레임워크 및 라이브러리 속에는 자바스크립트의 본질이 있으니 그 본질을 알고 쓰자. 프레임워크나 라이브러리는 언제든 바뀔 수 있으니까 바닐라 JS에 대한 이해를 하자.

 

근데 또 현업에 계시는 분들이 쓴 댓글을 보면 바닐라JS를 공부해야한다는 점에 대해 그렇게 공감하시지는 않는 것 같다. 

 

---

참고 강의

자바스크립트+jQuery 기초부터 실무까지 : 기초 Part.1 - 인프런 | 강의

자바스크립트+jQuery 기초부터 실무까지 : 기초 Part.1 - 인프런 | 강의