처음 javascript 만해도 스크립트도 너무 길고 노가다 작업이 너무 많아 개발에 어려움이 많았다. 그래도 jQuery가 있어서 긴 명령어를 쉽고 간단하게 구현할 수 있어서 잘 활용 했었다. 구형 브라우저 환경으로 인해 jQuery 사용할 수 밖에 없어 이용했었는데 이제 그 필요성이 적어져서 다시 Javascript DOM 개발로 전환하고 있는데 명령어가 잘 기억이 나질 않아서 여기에 기록하고 다시 습득하려고 글을 작성하고 있다.
결론은 브라우저가 표준화 되고 구형 pc 환경이 사라져가기에 jQuery 사용을 안 해도 되는 경우가 많다.
기존에 jQuery 로 만든 스크립트나 웹 에디터를 사용하는 경우는 제외이다.
현대 웹 개발에서 jQuery가 사라진 이유와 순수 JavaScript 시대
웹 개발의 초기에는 DOM 조작이 불편했고 브라우저마다 표준 지원이 제각각이었다. 이러한 불편함을 해결하기 위해 등장한 것이 jQuery였으며, 쉽고 간결한 문법으로 개발자들에게 혁신적인 경험을 제공했다. 그러나 최근 브라우저 표준화와 ECMAScript의 급격한 발전으로 상황은 완전히 달라졌다.
jQuery 시대가 지나간 근본적인 이유
이제는 대부분의 기능을 JavaScript가 기본적으로 지원한다. DOM 선택, 클래스 조작, Ajax 요청, 애니메이션, 이벤트 위임 등 모든 기능이 표준 문법으로 정리되었으며 과거처럼 브라우저 호환성을 걱정할 필요도 거의 없다.
- querySelector를 통한 직관적인 DOM 선택
- classList API의 등장으로 간결해진 UI 제어
- fetch로 대체된 Ajax 요청 처리
- CSS 애니메이션과 Web Animations API 지원
- ES6 모듈로 구조적 개발 가능
브라우저 표준화와 ECMAScript 발전
크롬, 파이어폭스, 사파리 등 주요 브라우저가 표준을 기반으로 빠르게 통합되면서 JavaScript 개발자들은 더 이상 별도 라이브러리에 의존할 필요가 없어졌다. 특히 ES6 이후의 문법은 개발 패턴 자체를 근본적으로 바꾸어 놓았다.
const btn = document.querySelector('.btn');
btn.addEventListener('click', () => {
console.log('clicked');
});
현대 웹 개발에서 DOM만 알아도 충분한 이유
대부분의 일반적인 웹사이트는 별도의 프레임워크 없이도 JavaScript만으로 완성도 높은 인터랙션을 구현할 수 있다. 브라우저 자체 기능이 강화되며 DOM API가 개발 중심의 표준이 되었고, 이는 개발 속도와 유지보수 효율성을 동시에 높인다.
- DOM 조작 기능의 완성도 향상
- 일관된 이벤트 모델 지원
- 소스 코드 최소화로 로딩 속도 개선
- 추가 라이브러리 없는 심플한 구조 유지
이 시리즈에서 다룰 내용
본 시리즈는 순수 JavaScript로 웹 기능을 구축하기 위한 실전 중심의 내용으로 구성된다. jQuery 대체 문법이 아니라, 최신 DOM API를 활용해 어떻게 UI를 만들고 서버와 통신하며 구조화된 코드를 구축하는지 단계별로 정리한다.
- 2편: ES6 핵심 문법 정리
- 3편: DOM 조작 핵심 패턴 10선
- 4편: 이벤트 처리와 UI 인터랙션 구현
- 5편: fetch로 서버와 통신하는 실전 방식
이 글은 앞으로 진행될 시리즈의 기반이 되며, 현대 웹 개발의 흐름을 정확히 이해하는 데 중요한 출발점이 된다.
