스파르타 코딩 클럽 [웹개발종합반] 2주차 WIL(Week I Learned) - JQuery / Ajax

2주차 JQuery / Ajax

1주차인 HTML / CSS / JAVASCRIPT는 듣기 전에 어느정도 알고 있어서
빠르게 넘어갔었다.

하지만 2주차인 JQuery / Ajax는 처음 들어서 조금 걱정이 됐었다.
많은 것을 배운 것 같지는 않지만 그래도 기본적인 원리는 이해가 되었다!!
실습을 곁들여서 하니까 재미도 있었다.

숙제도 저번 주차 숙제에 추가하는 방식이라 더 좋았다!

2주차에 새로 배운 것들을 정리해보려 한다!


JQuery

JQuery란?

: 자바스크립트 코드를 미리 짜놓은 것. 다른 사람이 짜놓은 라이브러리

: 따라서, import해서 사용해야한다.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script><head> 안에 추가해야 한다.


JQuery로 요소 지칭하는 방법

$("#id명") 을 하면 요소를 지칭할 수 있다.

CSS의 선택자 같은 느낌


JQuery로 input box의 입력값 가져오기

$("#id명").val(); 하면 input 의 입력값을 가져올 수 있다.

$("#id명").val(입력값); 이렇게 val 안에 입력값을 주면 값도 저장할 수 있다.

※ val()은 input에서만 사용 가능하다!


JQuery로 보이기 / 숨기기

$("#post-box").hide(); 이렇게 hide() 를 쓰면 지칭한 요소를 숨길 수 있다.

$("#post-box").show(); 이렇게 show() 를 쓰면 숨긴 지칭한 요소를 나타낼 수 있다.


JQuery로 CSS 값 제어하기

$("#post-box").css("width")

→ id가 post-box인 요소의 width 를 알려준다.

$("#post-box").css("width, 700px")

→ id가 post-box인 요소의 width 를 700px로 바꾼다.

$("#post-box").css("display")

→ id가 post-box인 요소의 display 값을 알려준다.

→ 기존의 display 값 : block or inline

이때, display : none 을 하면 요소가 사라지게 된다.


JQuery로 태그 내 텍스트 변경하기

$("#btn-posting-box").text("랄라")

→ id가 btn-posting-box인 요소의 text 를 “랄라”로 바꾼다.


JQuery로 태그 내 html 입력하기

let temp_html = `<button>나는 버튼이다</button>`

$("#cards-box").append(temp_html)

👉 temp_html 변수에 html 태그를 백틱(`)으로 저장하고

$("#cards-box") 로 지칭한 다음, append(temp_html) 을 하면

JQuery에서 html 태그를 만들어서 html에 줄 수 있다.


JQuery로 태그의 내용 모두 비우기

$("#h1-tag").empty();

<h1 id = "h1-tag">AAAAA</h1>

-> <h1 id="h1-tag"></h1> 으로 바뀐다.

JAVASCRIPT로 문자열 포함 체크

String.includes("문자열") 을 사용하면

문자열이 포함되면 true, 포함되지 않으면 false를 반환한다.


JQuery로 이미지 태그의 src 변경하기

$("#img-tag").attr("src", "변경할 src주소"); 를 사용하면 변경된다!


JQuery로 페이지가 로드될 때 제어

$(document).ready(function() {
	~~
});

$(document).ready() 로 페이지가 로드될 때 괄호 안의 코드를 실행시킨다!


Ajax

서버-클라이언트 통신 이해하기

서버가 클라이언트에게 정보를 줄 때의 FORMAT : “JSON”

클라이언트에서 서버로 요청을 할 때 쓰는 타입 : “GET”

→ 여러 타입이 있지만 GET, POST 타입을 먼저 알면 된다.

GET : 통상적으로, 데이터 조회를 요청할 때 많이 쓰인다.

ex) 영화 목록 조회

POST : 통상적으로, 데이터 생성, 변경, 삭제를 요청할 때 많이 쓰인다.

ex) 회원가입, 회원탈퇴, 비밀번호 수정

GET의 요청 URL 예시

https://movie.naver.com/movie/bi/mi/basic.naver?code=161967 분석

  1. [movie.naver.com](http://movie.naver.com) : 이 서버의 주소(ex : 우리은행 용산지점)
  2. /movie/bi/mi/basic.naver : 우리은행 용산지점 안의 창구 이름
  3. ?code=161967 : ? 를 기준으로 뒤가 고객이 가져가는 데이터(ex : 주민등록번호=xxxxxx)

→ 여기서 code 라는 키워드는 요청을 하는 클라이언트와 요청을 받는 서버 사이에서 미리 약속한 것이다.

따라서, code 라는 키워드를 다르게 바꾸면 요청이 되지 않아 오류가 뜬다.

이때, code=161967 뒤에 뭔가를 이어 붙여도 잘 작동한다.

왜냐하면, 필요한 키워드(code)만 있으면 다른 키워드가 있어도 상관없다.

자동적으로 code만 요청을 받고 보내주기 때문에.

GET 방식으로 데이터를 전달하는 방법

👉 GET 방식으로 데이터를 전달하는 방법

?  : 여기서부터 전달할 데이터가 작성된다는 의미입니다.
& : 전달할 데이터가 더 있다는 뜻입니다.

예시) google.com/search?q=아이폰&sourceid=chrome&ie=UTF-8

         위 주소는 google.com의 search 창구에 다음 정보를 전달합니다!
         q=아이폰                        (검색어)
         sourceid=chrome        (브라우저 정보)
         ie=UTF-8                      (인코딩 정보)

👉 q / sourceid / ie 이런 것들이 다 서버와 클라이언트가 미리 약속한 것이다.

👉 키워드를 이어 붙일 때는 & 를 사용한다.


Ajax 기본 골격


$.ajax({
  type: "GET",
  url: "여기에URL을입력",
  data: {},
  success: function(response){
    console.log(response)
  }
})

① type : 사용할 타입 선언

② url : API 주소

③ data : GET type에서는 쓰지 않고, POST type에서 쓴다. ({} 로 빈 값 초기화)

④ success : 데이터를 받으면, function의 매개변수 response 에 데이터를 저장한다.


Ajax 예시


$.ajax({
  type: "GET",
  url: "http://openapi.seoul.go.kr:8088/6d4d776b466c656533356a4b4b5872/json/RealtimeCityAir/1/99",
  data: {},
  success: function(response){
    console.log(response)
  }
})

url은 서울시 미세먼지 OpenAPI이다.

이때, 코드를 실행시키면 url의 데이터가 function의 매개변수인 response 에 저장된다.

(관습적으로 데이터를 받는 매개변수 이름은 response 라고 쓴다.)

따라서, response["RealtimeCityAir"]["row"][0] 이렇게 인덱싱하여

원하는 곳의 정보만 받아볼 수 있다.


2주차 숙제

1주차 숙제에서 달러-원 환율을 페이지가 로드될 때마다 실시간으로 나타내는 기능을
Ajax와 Jquery를 사용해서 추가했다!!


2주차 끝 강의에서 3주차가 제일 재밌다고 하셨는데 기대가 된다!
3주차에서는 파이썬을 배우는데 기초 문법은 다 알고 있어서 쭉쭉 넘어갈 수 있을 것 같고,
크롤링?이 뭔지도 모르겠지만 많이 들어봤다.
지니 뮤직을 크롤링? 하는 것 같은데 재밌을 것 같다!

좋은 웹페이지 즐겨찾기