스파르타코딩클럽 웹개발종합반 2주차 기록 및 강의리뷰(JQuery, Ajax)

2. 웹개발종합반 2주차 기록

● JQuery와 Ajax 시작하기

• jQuery 란?
  • HTML의 요소들을 조작하는, 편리한 Javascript를 미리 작성해둔 것으로 라이브러리이다. 👉 Javascript로도 모든 기능을 구현할 수는 있지만, 1) 코드가 복잡하고, 2) 브라우저 간 호환성 문제도 고려해야해서, **j**Query라는 라이브러리가 등장하게 되었다.
  • jQuery와 Javascript - 코드 비교해보기 👉 jQuery는 Javascript와 다른 특별한 소프트웨어가 아니라 미리 작성된 Javascript 코드이다. 전문 개발자들이 짜둔 코드를 잘 가져와서 사용하는 것이다. 그렇기 때문에 쓰기 전에 임포트 해야한다. 👉 Javascript로 길고 복잡하게 써야 하는 것을 아래와 같이 변환한다.

    document.getElementById("element").style.display = "none"; -> $('#element').hide();

• jQuery 사용하기
  • 미리 작성된 Javascript 코드를 가져오는 것을 '임포트'라고 부른다. 👉 jQuery CDN 부분을 참고해서 임포트하기 : https://www.w3schools.com/jquery/jquery_get_started.asp

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

• jQuery를 사용하는 방법

  👉 css와 마찬가지로, jQuery를 쓸 때에도 "가리켜야" → 조작할 수 있다. 예) 특정 인풋박스의 값을 → 가져와줘! 예) 특정 div를 → 안보이게 해줘! css에서는 선택자로 class를 썼지만 jQuery에서는 id 값을 통해 특정 버튼/인풋박스/div 등을 가리키게 된다.

• Ajax 시작하기

즉, [http://google.com/] 과 같은 화면에서 개발자도구를 열면, jQuery가 임포트 되어있지 않기 때문에 아래와 같은 에러가 뜬다.

Uncaught TypeError: $.ajax is not a function
→ ajax라는 게 없다는 뜻

• Ajax 코드 해설

$.ajax({
  type: "GET", // GET 방식으로 요청한다.
  url: "http://spartacodingclub.shop/sparta_api/seoulair",
  data: {}, // 요청하면서 함께 줄 데이터 (GET 요청시엔 비워두세요)
  success: function(response){ // 서버에서 준 결과를 response라는 변수에 담음
    console.log(response) // 서버에서 준 결과를 이용해서 나머지 코드를 작성
  }
})

• $ajax 코드 설명
  - type: "GET" → GET 방식으로 요청한다.
  - url: 요청할 url
  - data: 요청하면서 함께 줄 데이터 (GET 요청시엔 비워두세요)

  ---

  👉 리마인드 * GET 요청은, url뒤에 아래와 같이 붙여서 데이터를 가져간다. -> http://naver.com?param=value¶m2=value2 * POST 요청은, data : {} 에 넣어서 데이터를 가져간다. -> data: { param: 'value', param2: 'value2' },

  ---

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

● 2주차 숙제(팬명록에 날씨정보 추가하기)

● 2주차 강의리뷰
1주차에 이어 이번에는 JQuery와 Ajax를 사용하는 법에 대해서 배울 수 있었다. 라이브러리를 이용하여 복잡했던 코드를 간단하게 작성할 수 있다는 것을 알게 되었고, 내가 원래 사용했던 코드를 간단하게 줄일 수 있다는 것이 신기했다. 숙제를 통해서 기온 데이터를 가져오게 되었는데 1주차에 이어 새로운 기능을 알게된 것 같아 더욱 흥미로워졌다.