JQuery 편집하기 (부분)

== 현재 상황과 대안 ==

=== jQuery의 현재 상황 ===

jQuery는 여전히 많은 웹사이트에서 사용되고 있지만, '''신규 프로젝트'''에서는 사용률이 급격히 감소하고 있다. 2015년에는 전체 웹사이트의 78%가 사용했지만, 2024년 현재는 약 77%가 사용하고 있다. 수치상으로는 비슷해 보이지만 대부분이 레거시 사이트이다.

주요 변화로는 '''[[GitHub]]'''이 2018년부터 jQuery 제거를 시작했고, '''[[Bootstrap]] 5'''에서 jQuery 의존성을 완전히 제거했다. 대부분의 신규 프로젝트에서는 [[React]], [[Vue.js]], [[Angular]] 등을 사용한다.

=== jQuery가 불필요해진 이유 ===

'''모던 브라우저의 표준화'''가 가장 큰 이유이다. 예전에는 브라우저마다 다른 API를 사용했지만, 현재는 <code>document.querySelector()</code>, <code>element.classList</code>, <code>fetch()</code> 등이 모든 모던 브라우저에서 지원된다.

'''[[ES6]]+ 기능들'''도 jQuery의 필요성을 줄였다. <code>document.querySelectorAll().forEach()</code>나 <code>fetch().then().catch()</code>, <code>async/await</code> 등으로 jQuery 없이도 간편하게 작업할 수 있다.

<syntaxhighlight lang="javascript">
// jQuery 스타일
$('.items').each(function(index, element) {
    $(element).addClass('processed');
});

// 모던 자바스크립트
document.querySelectorAll('.items')
    .forEach(element => element.classList.add('processed'));

// jQuery AJAX
$.get('/api/users')
    .done(data => console.log(data))
    .fail(error => console.log(error));

// 모던 자바스크립트
fetch('/api/users')
    .then(response => response.json())
    .then(data => console.log(data))
    .catch(error => console.log(error));

// 또는 async/await
async function getUsers() {
    try {
        const response = await fetch('/api/users');
        const data = await response.json();
        console.log(data);
    } catch (error) {
        console.log(error);
    }
}
</syntaxhighlight>

=== jQuery 대안들 ===

'''Vanilla JavaScript'''(순수 자바스크립트)가 가장 일반적인 대안이다. 모던 브라우저에서는 jQuery 없이도 충분히 간편하게 DOM을 조작할 수 있다.

'''경량 라이브러리'''들도 있다. [[Zepto.js]]는 jQuery API와 호환되면서 더 가볍고, Cash는 32KB를 6KB로 줄인 라이브러리이며, Umbrella JS는 4KB 크기의 초경량 라이브러리이다.

'''현대적 프레임워크'''들이 가장 인기 있는 대안이다. [[React]]는 컴포넌트 기반의 선언적 UI를 제공하고, [[Vue.js]]는 템플릿 기반의 직관적인 문법을 사용하며, [[Angular]]는 완전한 프레임워크 솔루션을 제공한다.

<syntaxhighlight lang="javascript">
// React
function Button({ label, onClick }) {
    const [active, setActive] = useState(false);
    
    const handleClick = () => {
        setActive(!active);
        onClick();
    };
    
    return (
        <button 
            className={active ? 'active' : ''} 
            onClick={handleClick}
        >
            {label}
        </button>
    );
}
</syntaxhighlight>

=== jQuery를 사용해야 하는 경우 ===

jQuery가 여전히 유용한 경우들도 있다. '''레거시 프로젝트 유지보수'''에서는 필수적이고, '''빠른 프로토타이핑'''에는 여전히 유용하다. '''간단한 웹사이트'''(블로그, 랜딩 페이지)에서는 jQuery가 오버헤드 없이 사용될 수 있고, '''jQuery 플러그인이 필수인 경우'''나 '''팀이 jQuery에 익숙한 경우'''에도 사용할 수 있다.