1. JSON은 Key:Value로 이루어진 일종의 Dictionary 자료형과 매우 흡사하다
Jason View 설치후 다음을 확인하면 서울시 미세먼지와 관련된 open api를 확인해 볼 수 있다
http://openapi.seoul.go.kr:8088/6d4d776b466c656533356a4b4b5872/json/RealtimeCityAir/1/99
1-1) 서버 -> 클라이언트 / 클라이언트 -> 서버간에 통신을 가능케 해주는것이 Jason 이다
1-2) 통상적으로 데이터 조회(Read)를 요청할때는 GET요청을 서버로 보내며, 반대로 데이터 생성(Create), 변경(Update), 삭제(Delete)요청을 할 때는 POST 요청을 보내게 된다
TMI: GET과 POST요청에서 수행하는 작업을 묶어서 CRUD라고 하며 이에 최적화된 프레임워크 중 하나가 나중에 배우게될 Django이다
1-3) GET 방식으로 데이터를 전달하는 방법
?: 여기서 부터 전달할 데이터가 작성된다는 의미
&: 전달할 데이터가 더 남아있음을 뜻함
ex) google.com/search?q=아이폰&sourceid=chrome&ie=UTF-8
q = 아이폰 (검색어) #q는 query를 뜻하는 건가..?
sourceid=chrome (브라우저 정보)
ie=UTF-8 (인코딩 정보) 를 의미한다
2. Ajax 시작하기
$.ajax({
type: "GET",
url: "http://spartacodingclub.shop/sparta_api/seoulair",
data: {},
success: function (response) {
let rows = response['RealtimeCityAir']['row']
for (let i = 0; i < rows.length; i++) {
let gu_name = rows[i]['MSRSTE_NM']
let gu_mise = rows[i]['IDEX_MVL']
console.log(gu_name,gu_mise)
}
}
})2-1) 우선 아까 JSON 형식으로 담아놨던 API를 이용하기 위해서 해당 url과 GET요청을 통해 접근한다
2-2) 성공적으로 요청에 대한 응답을 받았을 때 (success: function (response)) 이 데이터들을 직접적으로 담고있는 rows부분을 별도로 정의해 준다 {let rows = response['RealtimeCityAir']['row']}
#API 들어가서 직접 확인해보면 인덱싱 명들이 무엇을 가리키고 있는지 알 수 있음
2-3) 해당 rows 안의 자료값들을 전체적으로 돌면서 (for (let i = 0; < rows.length; i++)) 각 구의 이름을 의미하는 ['MSRSTE_NM']부분과 미세먼지 수치를 나타내는 ['IDEX_MVL'] 부분을 정의하고 콘솔에 찍어본다
3. Ajax 연습하기
#이전 연습과정과 마찬가지로 이전에 콘솔을 통해 확인했던 JSON 데이터들을 직접 html상의 동작을 바탕으로 화면에 띄워주는 연습을 해보자
3-1) 2.Ajax시작하기에서 구현했던 데이터 조회 코드를 버튼에 onclick 형식으로 달아서, 클릭할 때마다 각 구의 미세먼지 수치를 실시간으로 조회할 수 있게 한다
#영상에선 $('#names-q1).empty()를 Ajax 호출 이전에 넣는걸로 보여주셨지만, 개인적인 생각에는 호출에 실패했을경우 이전 데이터라도 보여줄 수 있는 상태로 남는것이 좀더 좋지 않을까 해서 success: function (response) 구문 밑에 추가해 보았다
3-2) 데이터를 조회하는 사람들이 미세먼지가 좋지않은 지역을 좀 더 쉽게 알아볼 수 있도록, 미세먼지 수치가 특정 값을 초과하는 경우 빨간색으로 표시될 수 있게끔 만들어 보자
#기본 메커니즘은 3-1과 같지만 반복문을 돌면서 각 데이터를 불러올 때 조건문을 삽입하여 gu_mise가 n보다 크면 빨간색으로 표시되게끔만 해주면 된다 (작성 시점을 기준으로 미세먼지 수치가 그리 높지않아 영상처럼 120을 기준으로 잡으면 결과값의 차이를 확인할 수 없어 부득히 하게 51로 잡았다)
#조건부에 따라 표기방법만 바꿔줄뿐 부모 데이터는 동일하기 때문에 굳이 여러 변수를 둘 필요가 없다고 판단하여 temp_html 뒤 백틱을 공란으로 두고 조건문에서는 값만 넣어준 것이다
#좀 더 확연히 구분하고 싶다면, 반복문 내에서 미세먼지 수치가 높을때/낮을때를 나타내는 변수를 따로 지정하고 각각을 조건문에 대입해도 상관없다
4. Ajax_Quiz(1)
4-1) 이제까지 해왔던 것들을 몇번 정도 반복하며 익숙해지도록 해보자
#서울시 자전거 거치대 현황 API
http://spartacodingclub.shop/sparta_api/seoulbike
#API를 확인해보면 우리에게 필요한 데이터는 크게 3가지 정도로, 거치대 위치명/전체 거치대의 수/현재 남은 거치대의 수 정도가 될 것이다
4-2) 이전 연습단계와 마찬가지의 흐름대로 코드를 작성한다
#위와같은 방식으로 필요한 데이터를 전부 불러올 수 있는 것을 확인한다음
4-3) 이용 가능한 거치대가 특정 갯수 미만일 경우 빨간색으로 표기될 수 있게 해보자
#연습때와 완전히 동일한 방식이라 추가적으로 덧붙일 건 없지만, 표기 방식을 좀 더 연습해보기위해, 이번에는 반복문 안에서 temp_red(이용가능 거치대 수 10개 미만인경우)와 temp_green으로 나누어 정의하며 실행해 보았다
5. Ajax_Quiz(2)
5-1) 이번에는 텍스트 정보 뿐 아니라 버튼을 누를때마다 새로운 이미지를 받아와 보여줄 수 있도록 해보자
#텍스트는 이전과같은 방법으로 받아오되, 이미지를 받아올때는 $('#id').attr('src', url) 형식으로 정의해야 한다.(url 부분은 사전에 먼저 정의해 둘것)
5-2) 마찬가지로 데이터가 바뀌어 출력될때마다 결과물이 누적되선 안되므로, 함수 호출시 초기화를 시켜주는 부분 $('#text-rtan').empty()을 추가한다. (이미지 부분은 추가가 아닌 바뀌는 형식(attr)으로 작성되었었기 때문에 굳이 초기화할 필요없음) 이제 결과를 보도록 하자
#이렇게 '르탄이 나와' 버튼을 누를때마다 API에서 제공하는 랜덤 이미지 url과 msg를 호출하여 html에 그려주는 것을 확인 할 수 있었다
6. 2주차 숙제(이전에 만든 팬명록에 실시간 날씨정보 추가하기)
- 지역별 기온과 날씨 아이콘을 제공해주는 API를 활용한다
http://spartacodingclub.shop/sparta_api/weather/seoul - 기온 정보를 받아와서 띄워주는건 그리 어렵지 않을 것이기 때문에, 옆에 날씨 아이콘을 붙여보도록 하자
- url을 통한 실시간 날씨아이콘을 받아오되 온도 바로 옆에 붙여 주기 위해 부모div에 display:flex를 주었다... 끗!
