Hey_jinss

1. jquery 는 왜 사용할까?

웹사이트를 만들 때, 각각의 웹 페이지들은 HTML, CSS, 자바스크립트 등을 이용해서 만들어집니다. HTML은 정적인(static) 웹 페이지를 만들 때 사용됩니다. CSS는 여기에 디자인을 더해주고, 자바스크립트는 어떤 변화를 다이내믹하게 반영하는 등 웹 페이지에 역동적인 효과를 낼 수 있게 해줍니다. 라이브러리(Library)라는 것은 웹 페이지를 보다 쉽게 만들 수 있는 여러 가지 기능들을 모아놓은 것입니다. 이 글에서는 이를 모두 통틀어서, 자바스크립트 라이브러리라고 부르겠습니다.

제이쿼리는 작고 빠른 자바스크립트 라이브러리입니다. 제이쿼리에는 아주 많은 기능들이 있는데요. 이는 HTML 문서의 탐색과 조작, 애니메이션, 이벤트 처리 그리고 에이잭스(Ajax)활용을 쉽게 만들어줍니다. 그리고 여러 다양한 브라우저에서도 동작하며, 사용하기 쉬운 API를 가지고 있죠. 제이쿼리는 그 뛰어난 기능으로 인해 자바 스크립트를 작성하는 방식을 아주 간단하게 바꾸어 놓았습니다. 자바스크립트를 사용해서 얻을 수 있는 결과를, 제이쿼리를 사용해서 똑같이 만들어 낼 수 있다는 뜻인데요. 그것도 훨씬 더 간단하면서도 복잡하지 않은 방식을 사용합니다.

​

제이쿼리(JQUERY)는 어떻게 쉽게 동작할까?

제이쿼리는 ‘더 적은 노력으로 더 많이’라는 아주 멋진 모토와 함께 만들어졌습니다. 제이쿼리의 모든 기능들은 코드를 간단하게 만드는 것에 중심이 맞춰져 있기 때문에 문서를 더욱 쉽게 탐색할 수 있게 해주는데요. 구체적으로 말하자면 사용자와 HTML 코드 사이에 있는 모든 것들을 처리해 주기 때문에 HTML 코드를 굳이 복잡하게 만들지 않고도, 사용자의 클릭과 같은 다양한 이벤트를 포착할 수 있는 매우 효과적인 방법을 제공해 주는 것입니다. 제이쿼리는 문서 객체 모델(DOM) 조작과 이벤트 처리, 그리고 기본적인 모든 작업들을 단순하게 만들어줍니다.

​

​

제이쿼리(JQUERY)로 할 수 있는 모든 것!

제이쿼리를 사용하면 애니메이션을 만들 수 있고, 에이잭스(Ajax) 기반의 애플리케이션을 개발할 수도 있습니다. 그리고 개발자들로 하여금 자바스크립트 라이브러리 위에 플러그인을 만들 수 있게 해주는데요. 라이브러리는 시스템 레벨에서의 상호작용에서부터, 애니메이션, 고급 효과 그리고 고차원의 테마 위젯까지 만들 수 있는 기능들을 API 형태로 만들어 둔 것입니다. 제이쿼리 라이브러리를 모듈 방식으로 활용하면 강력한 동적 웹 페이지와 웹 애플리케이션을 만들 수 있습니다.

​

​

제이쿼리(JQUERY), 왜 사용해야 할까?

1. 웹 개발자들은 상호작용하는 웹 페이지를 만들기 위해서 DOM을 조작하는데, 에이 쿼리는 이러한 DOM 조작을 아주 쉽게 만들어줍니다. DOM은 HTML 요소들이 트리 구조(tree structure)로 정리되어 있는 것입니다.
2. 제이쿼리는 무료이며 오픈 소스 라이브러리입니다. 여기에 기여하는 커뮤니티는 그 어떤 자바스크립트 라이브러리보다도 훨씬 다양하며 규모도 큽니다.
3. 프로젝트에 쉽게 포함시킬 수 있는 무료 플러그인들만 해도 1000개가 넘습니다.
4. 다양한 브라우저를 지원합니다. 그러니까, 일반적으로 사용되는 거의 모든 브라우저를 지원한다고 보시면 됩니다.

​

제이쿼리(JQUERY)의 전망은?

제이쿼리가 가진 문제점 중 하나는 실행 명령을 처리하는 데 오랜 시간이 걸린다는 점인데요. 이런 경우에는 웹사이트가 느려지게 됩니다. 하지만 제이쿼리는 여전히 가장 많이 사용되는 자바스크립트 라이브러리들 중 하나입니다. 통계에 의하면, 자바스크립트를 사용하는 모든 웹사이트의 약 97%에서 사용하고 있다고 합니다. 다른 많은 라이브러리가 있음에도 불구하고, 제이쿼리를 꺾을만한 대안은 나오기 힘들 것으로 보입니다.

출처 :  Wishket제이쿼리(jQuery)에 대한 모든 것, 한 번에 쉽게 알아보기. - Wishket

그런데, jquery를 검색하다보면 
한편, jquery가 필요없어진다는 말도 나오고 있는데? 
그래서 검색하다가 잘 정리된 글을 발견! 
출처 : 김원섭 | 에스코어㈜ 소프트웨어사업부 에 따르면 

웹페이지는 브라우저상에서 돔(DOM, Document Object Model)이라는 표준 형식으로 파싱(Parsing)되어 표현됩니다. 따라서 사용자 조작에 맞춰 동적으로 변화하는 대화형 웹(Interactive Web)을 구현하기 위해서는 돔 조작이 필수적입니다. 그런데 대부분의 브라우저에서 돔 조작이 발생할 때마다 배치나 화면 표시에 많은 연산을 발생시키다 보니 조작이 빈번해질수록 브라우저 성능이 낮아지는 문제가 있었고 이는 개발자의 창의력을 저해하는 요소로 작용하였습니다. 이러한 이슈를 해결하기 위해 자바스크립트 라이브러리의 하나인 리액트(React)는 가상 돔을 채용하여 대중화시켰습니다. 리액트를 활용하면 메모리에 가상 돔을 구성하여 실제 돔과의 차이점을 비교하고 변경된 부분을 실제 돔에 적용할 수 있습니다. 이러한 방식은 성능이 뛰어나고 화려한 웹페이지를 비교적 손쉽게 제작할 수 있도록 해 개발자들에게 크게 환영받았습니다. 이후 등장한 뷰(Vue.js) 등의 프레임워크와 라이브러리도 가상 돔을 적극 채용하고 있습니다.
 
가상 돔을 사용하는 라이브러리가 많아질수록 돔을 직접 조작하는 제이쿼리의 필요성이 줄어듭니다. 스테이트 오브 자바스크립트(https://2019.stateofjs.com/ko)에서 공개한 2019년 웹 프론트엔드 프레임워크 선호도 조사 결과에 따르면 개발자들은 제이쿼리보다 리액트·뷰와 같은 가상 돔 기반의 라이브러리에 매우 긍정적인 반응을 보이는 것으로 나타났습니다.

-제이쿼리의 대응 전략

이 같은 웹 프론트엔드 환경의 변화에 따라 제이쿼리는 은퇴를 준비하고 있을까요? 결론부터 말하면 "아니오"입니다. 제이쿼리가 속해있는 OpenJS재단(https://openjsf.org)은 제이쿼리를 노드JS(Node.js) 등과 함께 "영향력 있는 프로젝트(Impact Projects)"로 분류하였습니다. 즉, 제이쿼리는 이미 성장 목표에 도달했으며 개발, 유지보수 및 장기 지원의 지속적인 주기를 보장하는 성숙한 프로젝트로 관리하겠다는 것입니다. 재단의 이 같은 정책 방향과 제이쿼리 차기 버전(4.x)의 마일스톤을 바탕으로 유추해보건대 제이쿼리는 급격한 변화를 시도하지 않고 일반적인 자바스크립트 환경에서 자신의 영향력을 공고히 해나가는데 주력할 것으로 예상됩니다. 이러한 대응 전략을 엿볼 수 있는 제이쿼리 차기 버전(4.x)의 주요 마일스톤은 다음과 같습니다.
 
경량화
 
자바스크립트는 컴파일(Compile)을 하지 않고 바로 실행시킬 수 있는 스크립트 언어로 파일 크기가 커질수록 전송·파싱·실행에 지연이 발생하여 페이지 초기화 성능을 떨어뜨리기 때문에 자바스크립트 라이브러리들은 용량을 줄이기 위해 노력합니다. 제이쿼리는 경량의 라이브러리로 정평이 나 있습니다. 최신 버전인 v3.5.1의 압축된(Minified) 버전은 용량이 89KB 정도이며 에이잭스(Ajax)와 애니메이션 기능이 제외된 슬림(Slim) 버전의 경우 72KB에 불과합니다.(심지어 Gzip 압축 전송 시 30KB로 줄어듭니다) 하지만 제이쿼리는 여기에 만족하지 않고 차기 버전에서 다시 한 번 경량화를 시도하고 있으며 세부 내용은 다음과 같습니다.
 
인터넷 익스플로러11 미만 버전의 지원 중단
마이크로소프트는 윈도우 서버 및 임베디드 버전을 포함하여 2020년 1월부터 인터넷 익스플로러10 이하 버전에 대한 기술지원을 완전히 종료했습니다. 이로써 인터넷 익스플로러는 현재 11 버전만 기술지원이 이루어지고 있습니다. 제이쿼리 역시 국가별 점유율을 고려하여 인터넷 익스플로러11을 제외한 다른 버전의 지원을 중단할 예정입니다. 따라서 제이쿼리 차기 버전부터는 인터넷 익스플로러10 이하용 호환 코드들이 모두 제거되며 기존에 제공되던 API 중 일부가 "Deprecated(사용을 권장하지 않음)" 처리되거나 삭제됩니다.
 
시즐(Sizzle)의 내재화
제이쿼리가 지금의 위치에 도달하는 데는 CSS 선택자 엔진(Selector Engine)인 시즐(Sizzle)의 역할이 컸습니다. 인터넷 익스플로러8 버전이 등장하기 전까지 개발자들은 엘리먼트(Element)를 찾는데 getElementById와 같은 길고 복잡한 API를 사용할 수 밖에 없었기 때문에 복잡한 돔 구조에서 엘리먼트 몇 개만 찾으려고 해도 코드가 난잡해지기 일쑤였습니다. 하지만 시즐의 경우 CSS 작성 시 흔히 사용하는 선택자(Selector)와 시즐만의 확장 선택자를 이용하여 아무리 복잡한 돔 구조라도 짧은 코드로 손쉽게 엘리먼트를 찾아낼 수 있었습니다. 제이쿼리는 1.3버전부터 시즐을 포함하여 배포하였으며 이는 사람들이 제이쿼리를 호평하는 중요한 이유가 되었습니다. 하지만 동일한 역할을 하는 querySelector API가 인터넷 익스플로러8 이후의 모든 브라우저에서 지원되기 시작하였고 CSS 표준에서 선택자에 대한 지원도 강화되면서 표준 선택자만으로도 엘리먼트 선택이 가능해져 시즐의 필요성이 점차 줄어들었습니다. 결국 OpenJS재단은 시즐의 수명이 다한 것으로 판단해 “명예 프로젝트(Emeritus Projects)”로 분류하였습니다. 이에 따라 제이쿼리는 시즐을 내재화하였으며 점진적으로 시즐만의 확장 기능을 제거하고 필수 기능만 지원하는 형태로 수정할 계획입니다.
 
브라우저 호환 기능 추가
 
제이쿼리는 특정 브라우저만 제공하는 기능을 타 브라우저에서도 사용할 수 있도록 하는 브라우저간 호환 기능을 제공하고 있습니다. 예를 들면 비동기 작업 수행을 위한 표준 기능인 Promise는 인터넷 익스플로러에서 지원하지 않지만 제이쿼리의 Deferred를 이용하면 이에 상응하는 기능 구현이 가능합니다. 제이쿼리 차기 버전은 현재 크롬만 지원하는 기능인 “신뢰할 수 있는 타입(Trusted type)”을 모든 브라우저에서 사용 가능하도록 할 계획입니다. "돔 기반 교차 사이트 스크립팅(DOM XSS)”은 가장 일반적인 웹 보안 취약성 중 하나인데 “신뢰할 수 있는 타입”은 이러한 취약성을 제거할 수 있도록 작성, 보안 검토 및 유지 관리하는 도구를 제공합니다. 앞으로 제이쿼리를 통한 돔 엘리먼트 조작 시 신뢰하는 HTML인지 확인이 가능해지는 등 보안이 한층 더 강화될 것으로 예상됩니다.
 

출처 : 제이쿼리(jQuery)를 아직도 사용하나요? 제이쿼리의 현재와 미래 : 네이버 포스트 (naver.com)