1. 수업 목표

1) javascript 문법에 익숙해진다.

2) jQuery로 간단한 html을 조작할 수 있다.

3) Ajax로 서버 api에 데이터를 주고, 결과를 받아온다.

2. 배운것들

1) jQuery

jQuery는 html의 요소들을 조작하는, 편리한 javascript를 미리 작성해둔 라이브러리
사용시 head 사이에 jQuery CDN을 임포트 해와서 사용한다.
jQuery에서는 class가 아닌 id를 div에 줘서 사용한다. id를 주면 $('#id')로 가르킨다.

<수업중 사용했던 것들>

$('#id').val(); ---> 값을 가져온다

$('#id').show; ---> 보이게 하거나 숨김
    .hide;

let temp_html = `<span>${}</span>`

$('#id').append(temp_html); ---> 내용을 추가함

$('#id').empty() ---> 내용 삭제

$('#id').attr('src', 이미지url); ---> 이미지바꾸기

$('#id').text('바꾸고싶은텍스트'); ---> 텍스트바꾸기

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

JSON은 딕셔너리하고 리스트가 합쳐진 형태로 내려온는 것, key:value로 이루어져있다.

API는 은행 창구와 같은 것이다. 요청을 하고/처리를 해준다.
클라이언트가 요청하는 타입에는 get과 post가 있다고한다.(post는 4주차에 다룬다고 한다.)
get타입은 통상적으로 데이터 조회(read)를 요청할 때 사용한다고 한다. (ex) 목록 조회)
post타입은 통상적으로 데이터 생성(create), 변경(update), 삭제(delete) 요청을 할 때 사용한다고 한다. (ex) 회원가입,탈퇴, 비밀번호 수정)
(ex) https://movie.naver.com/movie
movie.naver.com 이란 서버에
/movie 창구 )

3) Ajax

Ajax는 jQuery를 임포트한 페이지에서만 동작 가능하다.

<Ajax 기본 골격>

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

url에 요청할 url을 넣고,
open API에서 필요한 데이터가 어디있는지 찾은 다음 담는다.
(ex) let mise_list = response['RealtimeCityAir']['row'])

3. 느낀점,보완점

2주차 내용까지는 배우면서 막막하거나 크게 부딪히는 부분이 없었다. 강의에서 배운대로 실습해보면서 작동되는 것을 보니 재미있다. 사용하는 코드들을 최대한 이해하려고 노력하는 중이다. Ajax로 필요한 데이터를 가져오고 jQuery를 통해 원하는 모습으로 작동되게 하는 연습을 계속해야할 것 같다. 가끔식 막혀서 전에 했던 것들을 찾아보게 된다. 반복 연습을 통해서 완전히 이해하도록 노력해야겠다.