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

 

2-0. Intro

[수업 목표]

1. JavaScript 문법에 익숙해진다.

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

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

 

셋다 생활코딩 공부에서 가볍게 맛봤던 만큼, 이번 주차 강의에서 복습하면서 체화시켜보자.

 

 

2-1. 2주차에서 배울 것: jQuery & Ajax

 

- html 파일이 있을 때, JS로 다시 서버에 데이터를 요청하고 받는 법

- jQuery를 이용해 JS로 HTML을 쉽게 제어

- Ajax를 이용해 다시 서버에 데이터를 요청하고 받기

 

* Ajax => 웹페이지 url을 이동하지 않고 그 상태에서 백단에서 데이터를 받아와 업데이트해주는 기술! (비동기 처리)

 

2-2. JavaScript 복습

 

한 번 클릭하면 홀수, 두 번 클릭하면 짝수를 alert하는 기능을 적용하고 싶다?

<script>
let count = 1;
function hey() {
	if (count % 2 ==0) {
    alert('짝수입니다!')
    } else {
    alert ('홀수입니다!')
    }
    count += 1;
    
*주의: count 변수를 함수 바깥에서 설정해야! 함수 내부에서 count를 정의하면 실행할 때마다 count=1로 초기화됨.

 

2-3. jQuery 시작하기

 

- jQuery? HTML 요소를 조작하는 편리한 JS를 미리 작성해 둔 라이브러리!

- jQuery => JS와 다른 특별한 소프트웨어가 아니라 미리 작성된 JS 코드! 전문 개발자들이 짜둔 코드를 잘 가져와서 사용! => 쓰기 전에 import를 해야 된다! 남이 짜둔 자바스크립트 코드!

 

2-4. jQuery 다뤄보기

 

- 시작: import부터!

 

- 요소를 숨기거나 드러내게 할 수도 => $('id 이름').hide() / $('id 이름').show()

 

- 텍스트 내용 바꾸고 싶다? $('id 이름').text('바꾸고 싶은 내용')

 

  2-7. Ajax 공부: 서버-클라이언트 통신 이해하기

 

서버에서 클라이언트한테 데이터를 줄 때 포맷: JSON 형식으로 준다. 이 JSON을 이해할 필요가 있음.

- JSON: 딕셔너리와 유사한 파일 포맷! key & value로 이뤄져 있고 딕셔너리 안에는 여러 하위 딕셔너리가 존재!

 

반대로 클라이언트에서 서버로 요청할 때는? POST/GET 요청을 이해해야!

 

API는 은행 창구와 같다. 같은 예금 창구에서도 개인 고객이냐 기업 고객이냐에 따라 가져와야 하는 것 / 처리해주는 것이 다른 것처럼, 클라이언트가 요청할 때도 "타입"이라는 것이 존재 => POST/GET 타입!

 

* GET: 통상적으로 only read 상황에서 요청할 때 쓰는 타입. 데이터 조회(Read)를 요청할 때 주로 사용 ex) 영화 목록 조회

* POST: 얘는 통상적으로 데이터를 생성(create), 변경(update), 삭제(delete) 요청할 때 사용 ex) 회원가입, 회원탈퇴, 비번 수정 등

 

2주차에는 GET 방식을 배운다 (POST는 4주차에!)

 

GET? 우리가 url 엔터치는 게 다 GET 요청!

물음표 뒤? => URL querystring! 클라이언트가 읽고 싶은 데이터를 서버에서 전송해준 것! 클라이언트가 가져가는 데이터를 말함.

그럼 이 querystring에 해당하는 문자열은 어떻게 정하는가? 해당 웹 페이지를 만들 때 개발자가 서버와 클라이언트 사이에 약속을 지정한다.

 

 

2-8. Ajax 시작하기

 

*주의: Ajax는 jQuery를 임포트한 페이지에서만 동작 가능! ex) 현재 과제로 주어진 미세먼지 API에서는 jQuery 임포트 안 해놨기 때문에 동작 안 함! 반면 앞에서 숙제로 했던 나홀로 메모장에서는 jQuery 임포트했으니 콘솔 창 띄워서 Ajax 동작 가능하다!

 

Ajax 예시 코드를 보자. 현재 실습으로 하고 있는 서울시 미세먼지 API에서 데이터를 JSON 포맷으로 가져온다.

 

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

 

 

type: POST/GET 중 선택하는 것이고

url: 해당 API 데이터를 불러오는 url을 의미

data: post 방식일 때는 data 항목에다가 우리가 원하는 데이터를 저장시켜서 불러옴. 현재는 GET 방식이기 때문에 data 안은 비워져 있다.