jQuery에 대해
jQuery는 웹사이트에서 자바스크립트를 쉽게 사용 할 수 있도록 도와주는 자바스크립트 라이브러리이다.
jQuery를 이용하면 웹페이지를 쉽게 조작할 수 있고 모든 웹브라우저와 대응이
가능할 정도로 호환성도 뛰어나다.
또한 javascript와 비교했을때 코드도 간견한 편에 속하는데 아래와 같이 비교를 해본다면
javascript로 숨김기능을 구현할 때
document.getElementById("element").style.display = "none";jQuery로 숨김기능을 구현할 때
$('#element').hide();위처럼 굉장히 간결하고 직관적인 코드로 기능을 구현할 수 있다.
jQuery의 사용
jQuery의 CDN을 <head>와 </head>사이에 import해줘야한다.
jQuery CDN
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
jQuery의 한계
jQuery는 쉽고 코드도 간결하고 호환성도 뛰어나다는 장점이 있지만 요즘 시대와는 맞지않는 성능에 단점이 있다
웹페이지는 돔(Dom, Document Object Model)이라는 형식으로 파싱되어 표현되는데 동적인 웹페이지를
구현하기 위해선 이러한 돔 조작은 필수적으로 필요하다.
하지만 돔 도작이 빈번할수록 많은 연산을 발생시켜 성능이 낮아지는 문제가 발생했다.
최근들어서는 또 다른 자바스크립트의 라이브러리인 리액트가 이러한 문제를 해결하기위해
가상 돔이라는 기술을 채용하기시작했고 가상 돔은 메모리에서 가상 돔을 구성하고
실제 돔과 비교해 차이점을 실제 돔에 적용하는 방식으로 성능이 기존 돔을 조작하는 방식보다
훨씬 뛰어나고 보다 더 쉽게 웹페이지를 제작할 수있기에 이후 등장하는 많은
프레임워크나 라이브러리도 이러한 가상 돔을 적극적으로 채용하고 있다.
그리고 그럴수록 jQuery의 필요성은 줄어들고 있다.
Ajax에 대해
Ajax란 Asynchronous Javascript And XML의 약자로 브라우저의 XMLHttpRequest객체를 사용해
전체 페이지를 새로 고치지 않고 페이지의 일부만 로드하는 기법이다.
즉 클라이언트와 서버간의 XML데이터를 주고 받는 기술이다.
XML이라고 표시는 되어 있지만 JSON데이터 또한 받을 수 있다.
ajax는 비동기 방식으로 웹페이지를 새로 고치지않고 데이터를 불러옴으로써 프로그램도 계속 돌고 있고
시간도 빠른 장점이 있다.
Ajax의 사용
서울시 OpenAPI를 이용해 데이터를 가져온다고 했을때 ajax를 이용하면 아래와 같이 손쉽게 가져 올 수 있다.
$.ajax({
type: "GET",
url: "http://spartacodingclub.shop/sparta_api/seoulair",
data: {},
success: function(response){
// 값 중 도봉구의 미세먼지 값만 가져와보기
let dobong = response["RealtimeCityAir"]["row"][11];
let gu_name = dobong['MSRSTE_NM'];
let gu_mise = dobong['IDEX_MVL'];
console.log(gu_name, gu_mise);
}
})
'legacy > 항해99 일지' 카테고리의 다른 글
| 20221108 (화) TIL (0) | 2022.11.08 |
|---|---|
| 20221107 (월) TIL (0) | 2022.11.07 |
| 항해99 TIL 시작 (0) | 2022.11.07 |
| 항해99 0주차 사전스터디 미니프로젝트 (0) | 2022.11.01 |
| 스파르타코딩클럽 웹개발종합반 1주차 (1) | 2022.10.15 |
