서버-클라이언트 통신 이해하기
8) 서버→클라이언트: "JSON"을 이해하기
클라이언트 -> 서버로 데이터를 요청하고 서버에서 클라이언트로 데이터를 전송해줄 때 데이터포맷을 JSON 이라고 한다. 서울시 OpenAPI에 접속해보기
http://openapi.seoul.go.kr:8088/6d4d776b466c656533356a4b4b5872/json/RealtimeCityAir/1/99
https://chrome.google.com/webstore/detail/jsonview/chklaanhfefbnpoihckbnefhakgolnmc?hl=ko 에서 JSON 뷰를 설치하면 데이터형식을 좀 더 깔끔하게 볼 수 있다.
JSON은, Key:Value로 이루어져 있습니다. 자료형 Dictionary와 아주- 유사하죠
9) 클라이언트→서버: GET 요청 이해하기
API는 은행 창구와 같은 것! 같은 예금 창구에서도 개인 고객이냐 기업 고객이냐에 따라 가져와야 하는 것 / 처리해주는 것이 다른 것처럼, 클라이언트가 요청 할 때에도, "타입"이라는 것이 존재합니다.
* GET → 통상적으로! 데이터 조회(Read)를 요청할 때 예) 영화 목록 조회
* POST → 통상적으로! 데이터 생성(Create), 변경(Update), 삭제(Delete) 요청 할 때 예) 회원가입, 회원탈퇴, 비밀번호 수정
GET 방식 예제 : https://movie.naver.com/movie/bi/mi/basic.nhn?code=161967
위 주소는 크게 두 부분으로 쪼개집니다. 바로 "?"가 쪼개지는 지점인데요.
"?" 기준으로 앞부분이 <서버 주소>, 뒷부분이 [영화 번호] 입니다.
GET 방식으로 데이터를 전달하는 방법
? : 여기서부터 전달할 데이터가 작성된다는 의미입니다.
& : 전달할 데이터가 더 있다는 뜻입니다.
예시) google.com/search?q=아이폰&sourceid=chrome&ie=UTF-8
위 주소는 google.com의 search 창구에 다음 정보를 전달합니다!
q=아이폰 (검색어)
sourceid=chrome (브라우저 정보)
ie=UTF-8 (인코딩 정보)
여기서 잠깐, 그럼 code라는 이름으로 영화번호를 주자!는 것은 누가 정하는 것일까요?
바로 프론트엔드 개발자와 백엔드 개발자가 미리 정해둔 약속입니다.
프론트엔드: "code라는 이름으로 영화번호를 주면 될까요?"
백엔드: "네 그렇게 하시죠. 그럼 code로 영화번호가 들어온다고 생각하고 코딩하고 있을게요"
08. Ajax 시작하기
10) Ajax 시작하기
참고! Ajax는 jQuery를 임포트한 페이지에서만 동작 가능합니다.
즉, http://google.com/ 과 같은 화면에서 개발자도구를 열면, jQuery가 임포트 되어있지 않기 때문에 아래와 같은 에러가 뜹니다.
Uncaught TypeError: $.ajax is not a function
→ ajax라는 게 없다는 뜻jQuery가 임포트 되어있는 페이지에서 검사 - console - ajax 이해해보기
$.ajax({
type: "GET", // GET 방식으로 요청한다.
url: "http://openapi.seoul.go.kr:8088/6d4d776b466c656533356a4b4b5872/json/RealtimeCityAir/1/99",
data: {}, // 요청하면서 함께 줄 데이터 (GET 요청시엔 비워두세요)
success: function(response){ // 서버에서 준 결과를 response라는 변수에 담음
console.log(response) // 서버에서 준 결과를 이용해서 나머지 코드를 작성
}
})위 예제에 쓰인 URL은 서울시 미세먼지 API 주소입니다. 위 구문을 실행하면 서울시 미세먼지 API에서 조회된 모든 정보가 response에 담깁니다.
$ajax 코드 설명
- type: "GET" → GET 방식으로 요청한다.
- url: 요청할 url 주소 기입
- data: 요청하면서 함께 줄 데이터 (GET 요청시엔 비워두세요)
GET 요청은, url뒤에 아래와 같이 붙여서 데이터를 가져갑니다.
POST 요청은, data : {} 에 넣어서 데이터를 가져갑니다. data: { param: 'value', param2: 'value2' }, - success: 성공하면, response 값에 서버의 결과 값을 담아서 함수를 실행한다.
- success: function(response){ // 서버에서 준 결과를 response라는 변수에 담음 console.log(response) }
👉 결과가 어떻게 response에 들어가나요? → 받아 들이셔야 합니다..!
(대부분의 개발자들도 내부 원리는 코드를 안 뜯어봐서 몰라요.^^;;)
Ajax 연습하기 1. 서울시 미세먼지 API를 활용하여 각 구별 미세먼지 수치를 출력하되, 미세먼지 수치가 70 이상인 경우 빨갛게 보여준다.
<!doctype html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>jQuery 연습하고 가기!</title>
<!-- jQuery를 import 합니다 -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<style type="text/css">
div.question-box {
margin: 10px 0 20px 0;
}
.bad{
color:red;
}
</style>
<script>
function q1() {
$('#names-q1').empty()
$.ajax({
type: "GET",
url: "http://openapi.seoul.go.kr:8088/6d4d776b466c656533356a4b4b5872/json/RealtimeCityAir/1/99",
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']
let temp_html = ``
if (gu_mise >70){
temp_html = `<li class="bad">${gu_name} : ${gu_mise}</li>`
}else {
temp_html = `<li>${gu_name} : ${gu_mise}</li>`
}
$('#names-q1').append(temp_html)
}
}
})
}
</script>
</head>
<body>
<h1>jQuery+Ajax의 조합을 연습하자!</h1>
<hr />
<div class="question-box">
<h2>1. 서울시 OpenAPI(실시간 미세먼지 상태)를 이용하기</h2>
<p>모든 구의 미세먼지를 표기해주세요</p>
<p>업데이트 버튼을 누를 때마다 지웠다 새로 씌여져야 합니다.</p>
<button onclick="q1()">업데이트</button>
<ul id="names-q1">
<li>중구 : 82</li>
<li>종로구 : 87</li>
<li>용산구 : 84</li>
<li>은평구 : 82</li>
</ul>
</div>
</body>
</html>- 업데이트 버튼 클릭 시 데이터가 모두 지워졌다가 새로 씌어지도록 한다. $('#names-q1').empty()
- 반복문을 활용하여 API의 MSRSTE_NM(구 이름), IDEX_MVL(미세먼지 수치) 값을 받아 gu_name, gu_mise 변수에 저장한다.
- temp_html 변수에 `<li>${gu_name} : ${gu_mise}</li>` 저장하되
미세먼지 수치가 70이상인 경우 class = 'bad'를 추가한다.
style 속성에 클래스명이 bad인 경우 글자 색을 red로 설정한다. - 업데이트 버튼 클릭 시 해당 페이지에 temp_html을 추가한다. ($('#names-q1').append(temp_html)
Ajax 연습하기 2. 서울시 따릉이 API를 활용하여 따릉이 현황을 출력한다.(거치대 위치, 거치대 수, 현재 거치된 따릉이 수) 현재 거치된 따릉이 수가 5개 이하인 경우 빨갛게 보여진다.
<!doctype html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>jQuery 연습하고 가기!</title>
<!-- jQuery를 import 합니다 -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<style type="text/css">
div.question-box {
margin: 10px 0 20px 0;
}
table {
border: 1px solid;
border-collapse: collapse;
}
td,
th {
padding: 10px;
border: 1px solid;
}
.urgent {
color: red;
font-weight: bold;
}
</style>
<script>
function q1() {
//업데이트 버튼을 누를때마다 데이터 초기화 후 보여지도록 함.
$('#names-q1').empty();
$.ajax({
type: "GET",
url: "http://spartacodingclub.shop/sparta_api/seoulbike",
data: {},
success: function (response) {
let rows = response["getStationList"]["row"];
for (let i = 0; i < rows.length; i++) {
let rack_name = rows[i]['stationName'];
let rack_cnt = rows[i]['rackTotCnt'];
let bike_cnt = rows[i]['parkingBikeTotCnt'];
let temp_html = '';
if (bike_cnt < 5) {
temp_html = `<tr class="urgent">
<td>${rack_name}</td>
<td>${rack_cnt}</td>
<td>${bike_cnt}</td>
</tr>`
} else {
temp_html = `<tr>
<td>${rack_name}</td>
<td>${rack_cnt}</td>
<td>${bike_cnt}</td>
</tr>`
}
$('#names-q1').append(temp_html);
}
}
})
}
</script>
</head>
<body>
<h1>jQuery+Ajax의 조합을 연습하자!</h1>
<hr />
<div class="question-box">
<h2>2. 서울시 OpenAPI(실시간 따릉이 현황)를 이용하기</h2>
<p>모든 위치의 따릉이 현황을 보여주세요</p>
<p>업데이트 버튼을 누를 때마다 지웠다 새로 씌여져야 합니다.</p>
<button onclick="q1()">업데이트</button>
<table>
<thead>
<tr>
<td>거치대 위치</td>
<td>거치대 수</td>
<td>현재 거치된 따릉이 수</td>
</tr>
</thead>
<tbody id="names-q1">
</tbody>
</table>
</div>
</body>
</html>- 업데이트 버튼 클릭 시 데이터가 모두 지워졌다가 새로 씌어지도록 한다. $('#names-q1').empty()
- 반복문을 활용하여 API의 stationName(거치대 위치), rackTotCnt(거치대 수), parkingBikeTotCnt(현재 거치된 따릉이 수) 값을 받아 rack_name, rack_cnt, bike_cnt 변수에 저장한다.
- temp_html 변수에 `<tr><td>${rack_name}</td><td>${rack_cnt}</td><td>${bike_cnt}</td></tr>` 저장하되
bikecnt 값이 5 미만인 경우 class = 'urgent'를 추가한다.
style 속성에 클래스명이 urgent인 경우 글자 색을 red로 설정한다. - 업데이트 버튼 클릭 시 해당 페이지에 temp_html을 추가한다. ($('#names-q1').append(temp_html)
Ajax 연습하기 3. 랜덤 고양이 사진 API를 활용하여 고양이 사진을 보여주는 페이지를 만드시오.
* jquery img src 변경 참고
<!doctype html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>JQuery 연습하고 가기!</title>
<!-- JQuery를 import 합니다 -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<style type="text/css">
div.question-box {
margin: 10px 0 20px 0;
}
div.question-box > div {
margin-top: 30px;
}
</style>
<script>
function q1() {
$.ajax({
type: "GET",
url: "https://api.thecatapi.com/v1/images/search",
data: {},
success: function(response){
let imgurl = response[0]['url'];
$("#img-cat").attr("src", imgurl);
}
})
}
</script>
</head>
<body>
<h1>JQuery+Ajax의 조합을 연습하자!</h1>
<hr/>
<div class="question-box">
<h2>3. 랜덤 고양이 사진 API를 이용하기</h2>
<p>예쁜 고양이 사진을 보여주세요</p>
<p>업데이트 버튼을 누를 때마다 지웠다 새로 씌여져야 합니다.</p>
<button onclick="q1()">고양이를 보자</button>
<div>
<img id="img-cat" width="300" src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png"/>
</div>
</div>
</body>
</html>let imgurl = response[0]['url']; // API에서 랜덤으로 가져온 이미지 url을 imgurl 변수에 저장.
$("#img-cat").attr("src", imgurl); // jquery img src 경로 변경
'Spec UP - Frontend > 생활코딩_JavaScript' 카테고리의 다른 글
| jquery Quiz (0) | 2021.12.23 |
|---|---|
| jQuery (0) | 2021.12.23 |
| 스타벅스 랜딩 페이지(홈페이지)를 만드는 예제 (0) | 2021.10.28 |
| 라이브러리와 프레임워크 (0) | 2021.10.12 |
| 파일로 쪼개서 정리정돈하기 (.js) (0) | 2021.10.05 |
댓글