안녕하세요 파인애플P TIL입니다 2021년도 홈페이지 제작에 더 이상 jquery가 없어도 되는 이유를 말씀드리고 싶습니다.
jQuery의 탄생 배경 jQuery는 htmlDOM 처리 및 이벤트를 쉽게 할 수 있는 라이브러리입니다.웹 개발자라면 한번 들어봤을 유명한 javascript 기반 라이브러리입니다.홈페이지의 동적인 요소를 담당하는 javascript를 손쉽게 사용하게 해주는 jQuery는 많은 웹 개발자들에게 사랑을 받았습니다.사용하기 어려운 자바스크립트 2000년대 중후반 당시의 웹페이지 제작 환경은 자바스크립트가 매우 사용하기 어렵고 어려운 부분이 있었습니다. 그 당시 웹 개발자들은 어쩔 수 없이 사용하긴 하지만 불편을 호소하는 개발자들이 많았습니다.
예를 들어, box라고 하는 클래스 이름의 요소를 읽는 코드를 살펴보겠습니다.위 코드가 javascript, 아래 코드가 jquery입니다.전체적인 코드가 jquery에 비해 길고 어렵게 느껴져 웹 개발에 입문한 초보자가 사용하기에는 진입 장벽이 높은 것이 사실이었습니다. 이를 해결해 줄 jquery의 등장은 웹 개발을 준비하고 공부하는 입장에서 매우 기쁜 존재였습니다.
슬로건처럼 적게 쓰고 더 많은 작업을 할 수 있는 장점이 있다.브라우저 호환성 문제 jquery의 등장으로 도움을 받은 것은 초보 개발자뿐만이 아니었습니다. 그 당시 주로 쓰이던 브라우저는 IE(인터넷 익스플로러), 크롬, 파이어폭스, 오페라, 사파리 등 각 브라우저마다 코드를 읽어 처리하는 방식이 다소 달라 브라우저마다 호환성을 위해 코드를 따로 작성해야 하는 경우도 있었습니다.jquery 사용하면서 얻을 수 있는 또 다른 장점은 다양한 브라우저에서도 코드를 따로 작성할 필요가 없어 호환성이 높았던 점도 큰 장점이었습니다. jquery의 등장으로 작업시간에 큰 단축을 가져왔습니다.
파인애플 PTIL은 왜 jQuery를 사용하지 않나요?이렇게 장점도 많이 있고, 많은 사람들이 사용하는 jQuery를 왜 2021년 현재는 더 이상 사용하면 안 되는지, 또 jQuery의 단점은 무엇인지 한번 살펴보겠습니다.
웹 페이지의 성능 저하
javascript에 비해 jQuery는 성능면에서 많이 떨어집니다.모바일 기기의 폭발적인 증가로 스마트폰을 사용하여 홈페이지에 접속하는 사용자가 많아지면서 웹 최적화 및 가벼운 홈페이지에 대한 수요는 높아졌습니다.
그에 비해 jQuery는 javascript를 활용하여 만들었기 때문에 순수 javascript에 비해 DOM을 읽는 성능에 뒤쳐질 수밖에 없었습니다. 물론 사람이 느끼는 만큼의 차이는 없지만 최적화를 고려할 때 jQuery를 선택하기는 어렵습니다.
실제 제작하는 홈페이지를 jQuery를 사용했을 때와 javascript+webpack으로 최적화를 진행한 경우를 비교했을 때 로드 속도, 애니메이션의 부드러움에서 유의미한 차이가 있었습니다.자바스크립트의 사용성 개선과 최신 라이브러리 등장에 앞서 설명한 사용성이 좋지 않은 자바스크립트의 단점이 버전이 바뀌면서 대폭 개선된 점도 큰 역할을 했습니다.또 jQuery보다 가볍고 성능이 좋은 React, vue.js 등이 등장하면서 jQuery 필요성이 줄어든 것도 이유입니다.자바스크립트에 익숙하지 않은 jQuery 개발자에게 도움이 되는 사이트 TOP2 jQuery에 익숙하고 자바스크립트를 사용하는 데 어려움이 있을 경우 아래와 같은 사이트를 통해 정보를 얻을 수 있습니다.
- Cheat sheet for moving from jQuery to vanilla 자바스크립트 This reference guide will help you convert jQuery’s most common patterns to vanilla JavaScripttobiasahlin.com
분류마다 깔끔하게 정리되어 있어 사용하기 편리합니다.
2. You might not need jQuery jQuery and its cousins are great, and by all means use the mif it makes it easier to develop your application. If you’re developing a library on the other hand, please take a moment to consider if you actually need jQuery. Maybe you’re developing a library on the other hand.
jQuery 코드를 javascript로 이해하기 쉽게 변환하여 정리되어 있습니다.
2021년 어도비 플래시 종료, 그리고 IE의 운명 2020년 12월 31일 한때 웹 제작시 없어서는 안 될 요소였던 플래시가 adobe사의 지원을 더 이상 받지 못하고 역사 속으로 사라지게 되었습니다.
한때 웹디자인기능사 자격시험 때 꼭 배워야 할 프로그램이었지만 이제는 없어져야 할 프로그램으로 바뀌었습니다.
웹 개발 트렌드는 하루가 다르게 급변하고 있으며, 그 변화의 바람이 이제 IE(인터넷 익스플로러)에도 불고 있습니다.
마이크로소프트는 자신이 만든 웹 브라우저의 보안과 성능 문제에 대해 인지하고 새로운 브라우저인 Edge로 사용자를 이동시키고 있습니다.
네이버, 유튜브, 페이스북 등 대기업들도 곧 지원을 종료할 예정이며 곧 대부분 사이트에서 ie는 접속할 수 없게 될 예정입니다.
IE와 같은 구형 브라우저를 지원하기 위해 jQuery를 사용해 온 웹 개발자들에게 사용성이 대폭 개선되고 성능도 좋은 javascript 대신 jQuery를 사용할 이유는 더 이상 없어 보입니다. 마이크로소프트의 노력으로 점유율이 엣지에 추월당하고 ActiveX는 공공기관에서 조금씩 퇴출되고 있는 중이라 IE를 쓸 필요도 거의 없기 때문입니다.