Vanilla JavaScript, JQuery

공통점

• DOM 요소에 직접 접근하여 이벤트를 주입, 웹 페이지의 동적인 부분을 조작하는 역할

차이점

	바닐라 자바스크립트	JQuery
의존성	외부 라이브러리 없이 동작	별도의 라이브러리 포함해야 함
문법의 간결함		동일한 기능을 더 간결하게 구현할 수 있도록 도와줌
현대적인 기능	프로미스, async/await, 클래스 등 현대적 프로그래밍 기능 지원	직접적으로 지원 하지 않음
성능	추가적인 라이브러리가 필요 없기 때문에 때때로 더 빠른 성능 제공

바닐라 자바스크립트

• 표준 웹 기술 : 브라우저에서 기본적으로 제공되는 표준 웹 스크립팅 언어
• 라이브러리나 프레임워크 없음 : 외부 라이브러리나 프레임워크에 의존하지 않고 작동
• 최신 웹 표준 지원 : ES6 이후의 현대적인 자바스크립트 기능들을 포함

document.querySelectorAll('.button').forEach(button => {
    button.addEventListener('click', function() {
        console.log('버튼 클릭됨');
    });
});

JQuery

• 간결한 문법 : 짧은 코드로 복잡한 기능을 구현할 수 있는 간결한 문법 제공
• 크로스 브라우저 호환성 : 다양한 브라우저 간의 호환성 문제를 내부적으로 처리
• 풍부한 플러그인 : 다양한 기능을 쉽게 추가할 수 있는 방대한 플러그인 생태계를 가짐

$('.button').click(function() {
    console.log('버튼 클릭됨');
});