💡깨달음💡/jQuery
jQuery란,
과부하가즈아
2024. 1. 9. 19:49
❓제이쿼리~ 제이쿼리~~하는데 그간 딱히 사용했던 적이 없어서 그냥 무시해왔었는데,,, (그럼 안됬지만) 이제서야 뭔지 알고 싶어졌다❓
jQuery
jQuery(제이쿼리)란
Javascript 언어를 간편하게 사용할 수 있도록 단순화시킨 오픈 소스 기반의 Javascript의 라이브러리
✔️Javascript는 동적인 기능 구현을 할 수 있지만 코드가 너무 길어지고 복잡해지는 단점이 있다. 이때 jQuery를 사용하면 같은 기능도 간략하고 단순한 코드로 구현할 수 있다.( Javascript, HTML, CSS에 비해 단순하고 간편한 코드 문법을 가지고 있고 웹 페이지에 다양한 효과나 연출을 적용할 수 있음)
✔️ jQuery는 클릭 이벤트, 체인지 이벤트 등 웹 페이지 동작의 기능을 조작할 때 브라우저의 영향을 받지 않고 원하는 기능을 제작할 수 있다. 브라우저의 버전에 따라 작동하지 않는 코드를 jQuery로 변경해서 사용하면 브라우저 문제 없이 사용할 수 있다.
코드와의 호환성 문제를 많이 이르키는 브라우저들이 있다.
우리나라에서 많이 사용했던 IE(Internet Exploer)가 대표적이다. IE에서는 버전이나 호환성의 문제로 코드가 제대로 작동하지 않을 때가 많았다. 이 문제를 해결하고자 ‘크로스 브라우징’ 기능을 가진 jQuery가 탄생했다. 크로스 브라우징이란 다양한 브라우저에서 같은 코드로 동일한 동작을 할 수 있게 하는 기능으로 코드가 브라우저에 따라 제대로 작동하지 않는 문제를 해결할 수 있다.
장점
뛰어난 DOM 구조 탐색
DOM은 문서 객체 모델로 트리 자료구조의 형태를 가지고 있다. (나무처럼 뻗어나가면서 하위로 펼쳐져서 내려가는 구조)
코드에서도 전개 순서가 필요하고 그 순서에 맞게 코드를 작성하는 것을 DOM이라고 하며, 순서대로 작성된 코드 사이에서 원하는 위치의 값을 가져오거나 입력할 때 편리하다.
자바 스크립트 같은 경우에도 요소의 class나 Id 등으로 찾아올 수 있지만 원하는 위치의 정보를 정확히 불러오기에는 조금 복잡하다.
jQuery는 css 검색 스타일로 원하는 위치를 정확하게 뽑아내어 요소를 추가/삭제하기 때문에 더 간단하고 편리하게 원하는 요소를 찾아낼 수 있다.
EX. 자바 스크립트로는 각 요소들마다 class나 Id 값을 줘서 해당 위치를 찾아와야 하는데, css 검색 스타일은 원하는 위치의 대상을 찾을 때 편리하게 자기 자신을 나타내는 $(this), 특정 요소를 모두 가져오는 $("element name") 등으로 상대적으로 Id나 class 값을 부여하지 않아도 위치 찾기를 쉽게 할 수 있도록 구성 되어있다.
크로스 브라우징
브라우저에는 IE와 크롬, 사파리 등 다양한 브라우저가 있다. 동작에는 전혀 문제가 없는 정상적인 코드라도 특정 브라우저를 만나면 동작을 안 하는 경우가 있다. 이를 해결하기 위해 jQuery를 사용한다.
jQuery는 모든 브라우저를 지원하고 있어, 코드가 깨지지 않고 동작한다. jQuery의 제일 큰 장점이라고도 할 수 있다.
예를 들어 jQuery를 사용하지 않았을 때, 홈페이지가 특정 브라우저에서 동작이 안되어 이를 해결하기 위해 코드 작업을 다시해야 하는 상황이 올 수 있고 최악의 경우 문제가 있는 부분의 앞단, 뒷단의 코드까지 확인해야되서 작업시간이 오래 걸리게된다.
하지만 jQuery를 사용하면 해당 코드 확인을 위해 코드의 연결 구조를 확인하는 문제없이 원하는 기능을 구현이 가능하게된다.
단점
느린 구현 속도
순수 자바 스크립트를 이용해 구현한 코드보다 속도가 현저히 느리다.
jQuery가 동작할 때는 라이브러리에 걸쳐 해당 브라우저에 맞는 네이티브 자바 스크립트로 변환 시켜야 하기에 코드가 많아지면 속도가 느려지게 된다.
속도를 올리기 위해서는 동적인 이벤트를 주어야 할 때 적은 양의 코드를 사용하고, 요소의 Class보다는 Id로 쓰는 것이 좋다.
Class 같은 경우에는 html 요소 중에 여러 요소에서 중복으로 사용이 가능해 특정 이벤트를 Class로 구현시, 같은 Class가 있는 모든 요소의 동작을 동시에 실행되기 때문이다.
반면 Id 같은 경우에는 한 가지 태그에서 밖에 사용 못 하기 때문에 특정 이벤트를 실행하여도 해당 Id에 있는 요소로만 동작을 하므로 Id를 쓰는 것이 속도를 개선하기에 더 좋다.
또한 DOM의 위치를 찾을 때 구체적인 위치를 제시해 주면 속도감을 조금 올릴 수 있다
코드 관리의 어려움
코드가 간결해서 쉽게 느낄 수도 있지만 코드를 관리하는 부분에서는 힘들 수도 있다. jQuery가 탄생한 이유는 자바 스크립트의 브라우저 호환성 문제와 복잡한 코드로 인한 문제를 해결하기 위해서이다.
자바 스크립트에 비해 간편하고 편리한 코드 구조 덕분에 개발자 사이에서 갑작스럽게 흥행하였고, jQuery를 배우는 개발자들이 급속도로 늘어나게 되었다. 하지만 자바 스크립트를 배우지 않고 바로 jQuery를 배우는 사람이 늘어나면서 jQuery의 원리를 모르고 코드를 잘못 사용하는 경우가 생기게 되었고, 이에 따라 프로젝트를 유지, 관리하는 데 어려움을 겪는 경우가 발생하게 된다.
💡정리하자면 js로 동적인 기능을 위한 코드를 작성할때 축약으로 사용할 수 있도록 구현된 자바스크립트 라이브러리이고, 주된 목적으로는 코드의 간결성과 크로스 브라우징 정도로 이해💡
🔗참고🔗