스파르타 코딩클럽 [ 웹개발 종합반 ] - 2주차

배운 것

JQuery

Ajax

 

내용 정리

 

JQuery

    - HTML,의 요소들을 조작하는, 편리한 Javascript를 미리 작성해둔 것. 라이브러리

    - js로 작성한 것을 JQuery로 보다 직관적으로 쓸 수 있음 (편리)

 

js

document.getElementById("element").style.display = "none";

JQuery

$('#element').hide();

 

 

Javascript로도 모든 기능(예 - 버튼 글씨 바꾸기 등)을 구현할 수는 있지만, 1) 코드가 복잡하고, 2) 브라우저 간 호환성 문제도 고려해야해서, jQuery라는 라이브러리가 등장하게 되었음

jQuery는 Javascript와 다른 특별한 소프트웨어가 아니라 미리 작성된 Javascript 코드, 
전문 개발자들이 짜둔 코드를 잘 가져와서 사용하는 것임(따라서, 쓰기 전에 "임포트"를 해야함)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

 

 

 

Ajax

    - 웹 페이지 전체를 다시 로딩하지 않고도, 웹 페이지의 일부분만을 갱신할 수 있음

    - 서버와 통신하여, 그 결과를 웹 페이지의 일부분에만 표시할 수 있는 기능

    - JQuery를 임포트한 페이지에서만 동작 가능

 

ㅇ 형식

$.ajax({
  type: "GET", // GET 방식으로 요청한다.
  url: "http://openapi.seoul.go.kr:8088/6d4d776b466c656533356a4b4b5872/json/RealtimeCityAir/1/99",
  data: {}, // 요청하면서 함께 줄 데이터 (GET 요청시엔 사용x)
  success: function(response){ // 서버에서 준 결과를 response라는 변수에 담음
    console.log(response) // 서버에서 준 결과를 이용해서 나머지 코드를 작성
  }
})

• success: 성공하면, response 값에 서버의 결과 값을 담아서 함수를 실행

 

 

 

느낀 점 / 보완할 점

조금씩 익숙해지는 것이 느껴짐

역시 자주 쳐보고 직접 해보는 것이 큰 도움 되는 것 같다.

 

어떻게 동작하는 지를 대강 머리속에서나, 글로 그려보고 직접 해보는 게 좋은 방식인 거 같음!