스파르타 코딩클럽 2주차

YuJin Lee·2020년 10월 12일
0
  • 2주차
    Javascript로 서버에 데이터 요청하고 서버가 응답한 데이터 받아 조작하기
    클라이언트(브라우저) - 서버
    클라이언트가 서버에 데이터를 요청(Request)하면 서버가 응답(Response)하여 데이터를 전달해준다.

  • 웹 기초 동작원리
    웹은 HTTP라는 규약을 따른다. url에서 http://가 HTTP라는 규약을 따른다는 표시이다.
    클라이언트는 HTTP에서 요청을 하는 쪽이고 서버는 HTTP에서 요청을 받아 응답하는 쪽이다.
    Ajax를 이용해 Javascript로 서버에 데이터를 요청하고, 서버가 응답한 데이터를 받을 때 사용한 것이 API이다.
    API는 프로그램들이 서로 상호작용하는 것을 도와주는 매개체로 서버와 데이터베이스에 대한 출입구 역할을 한다.
    API를 사용할 때는 미리 정해둔 약속을 따라야 작동한다. 이 약속들은 API 페이지에 적혀있다.
    API로 요청을 하면 JSON 형식으로 데이터를 전달해준다.
    JSON은 Key:Value 로 이루어져 있다.

  • Ajax 통신
    크롬 확장프로그램 JSONView를 설치하면 크롬 화면에서 JSON화면을 보기 좋게 출력해준다.
    Ajax는 서버에서 클라이언트에게 데이터를 넘겨줄 때 사용되는 데이터 표현방식이다.
    JSON은 key: Value 형태로 이루어져 있다. 자료형 Dictionary와 아주 유사하다.
    OpenAPI를 통해 JSON형식의 데이터를 확인할 수 있다.
    ex) 서울시 OpenAPI(실시간 대기 환경정보)
    http://openapi.seoul.go.kr:8088/6d4d776b466c656533356a4b4b5872/json/RealtimeCityAir/1/99
    위 링크를 들어가면 아래와 같이 데이터가 나온다.

RealtimeCityAir: {
list_total_count: 25,
RESULT: {
CODE: "INFO-000",
MESSAGE: "정상 처리되었습니다"
},
row: [
{
MSRDT: "202010121000",
MSRRGN_NM: "도심권",
MSRSTE_NM: "중구",
PM10: 47,
PM25: 22,
O3: 0.015,
NO2: 0.037,
CO: 0.7,
SO2: 0.003,
IDEX_NM: "보통",
IDEX_MVL: 62,
ARPLT_MAIN: "NO2"
},

RealtimeCityAir라는 키 값에 딕셔너리형 value값이 들어가 있고,
그 안에 row라는 키 값에는 리스트형 value가 들어가 있다.

  • 반복문과 딕셔너리의 활용
let cityAir = [
  {
    MSRDT: "201912052100",
    MSRRGN_NM: "도심권",
    MSRSTE_NM: "중구",
    PM10: 22,
    PM25: 14,
    O3: 0.018,
    NO2: 0.015,
    CO: 0.4,
    SO2: 0.002,
    IDEX_NM: "좋음",
    IDEX_MVL: 31,
    ARPLT_MAIN: "O3",
  },
  {
    MSRDT: "201912052100",
    MSRRGN_NM: "도심권",
    MSRSTE_NM: "종로구",
    PM10: 24,
    PM25: 18,
    O3: 0.013,
    NO2: 0.016,
    CO: 0.4,
    SO2: 0.003,
    IDEX_NM: "좋음",
    IDEX_MVL: 39,
    ARPLT_MAIN: "PM25",
  },
  ...
 ]

위와 같은 딕셔너리가 있을 때
"PM10" 수치가 25㎍/㎥보다 작은 측정소(MSRSTE_NM)를 모두 출력하려면?

for(let i=0; i<cityAir.length; i++) {
	if(cityAir[i].PM10 < 25){
   	console.log(cityAir[i].MSRSTE_NM);
   }
}


// 입력받은 미세먼지 수치보다 작은 측정소를 출력하는 함수 만들기
function showUnderMise(value) {
 for(let i=0; i<cityAir.length; i++) {
 	if(cityAir[i].PM10 < value) {
   	console.log(cityAir[i].MSRSTE_NM);
   }
 }
}

  • 클라이언트 -> 서버: GET 요청 이해하기
    HTTP: 웹은 HTTP라는 규칙을 따른다.
    url에서 http://가 바로 HTTP라는 통신규약을 따른다는 표시이다.
    클라이언트는 서버의 API에 요청(Request)을 보내어 데이터(HTML, CSS, JS등)를 응답(Response)받는다.
    이처럼 클라이언트가 서버에 요청할 때에도, 방식이 존재한다.
    여러 방식이 존재하지만 가장 많이 쓰이는 것이 GET과 POST 방식이다.
    GET은 통상적으로 데이터 조회(Read)를 요청할 때 사용하고,
    POST는 데이터 생성(Create), 변경(Update), 삭제(Delete)를 요청할 때 사용한다.

  • Get 방식
    사이트 url에서
    ? 부터 전달할 데이터가 작성된다는 의미이다.
    & 전달할 데이터가 더 있다는 의미이다.
    딕셔너리처럼 key과 value가 쌍을 이루고 있다.

ex) https://movie.naver.com/movie/bi/mi/basic.nhn?code=30688
위 url에서
서버 주소는 https://movie.naver.com/movie/bi/mi/basic.nhn 이고
영화 정보는 code=30688 가 된다.

ex) google.com/search?q=해리포터&sourceid=chrome&ie=UTF-8
위 주소는 google.com의 search 창구에 다음 정보를 전달한다.

q=해리포터 : 검색어 q의 값은 해리포터
sourceid=chrome : 브라우저 정보 sorceid의 값은 chrome
ie=UTF-8 : 인코딩 정보 ie의 값은 UTF-8

  • Ajax로 서버와 통신하기
    Ajax는 비동기 서버 통신방식이다.
    비동기란 작업 요청을 해두고 작업 결과가 오기 전까지 다른 작업을 처리하는 것이다. 자원을 효율적으로 활용할 수 있다는 장점이 있다.
    Ajax를 이용하기 위해서는 jQuery가 import되어 있어야 한다.

  • GET 방식으로 요청(Request)해서 API가 응답(Response)하는 데이터 사용하기

$.ajax({
  type: "GET", // GET 방식으로 요청한다.
  url: "url", // 요청할 url
  data: {}, // 요청하면서 함께 줄 데이터 (GET 요청시엔 비워두세요)
  success: function(response){ // 서버에서 준 결과를 response라는 변수에 담음
    console.log(response) // 서버에서 준 결과를 이용해서 나머지 코드를 작성
  }
})

  • 모든 구의 미세먼지 값 출력해보기
$.ajax({
  type: "GET",
  url: "http://openapi.seoul.go.kr:8088/6d4d776b466c656533356a4b4b5872/json/RealtimeCityAir/1/99",
  data: {},
  success: function (response) {
    let cityAir = response["RealtimeCityAir"]["row"];
    for (let i = 0; i < cityAir.length; i++) {
      let mise = cityAir[i];
      let guName = mise["MSRSTE_NM"];
      let guMise = mise["PM10"];
      console.log(guName, guMise);
    }
  },
});

  • 숙제
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <title>스타벅스</title>
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
              integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z"
              crossorigin="anonymous">
        <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+KR:wght@300;400;500;600;700&display=swap"
              rel="stylesheet">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script><style>
            * {
                font-family: 'Noto Serif KR', serif;
            }
​
            .wrapper {
                width: 500px;
                margin: 0 auto;
            }
​
            .img {
                width: 600px;
                height: 600px;
                background-image: url('https://image.istarbucks.co.kr/upload/store/skuimg/2017/04/[9200000000487]_20170405152830688.jpg');
                background-size: cover;
                margin: 0 auto;
            }
​
            h1 {
                margin: 20px 0 10px;
                font-size: 30px;
            }
​
            h2 {
                margin: 20px 0;
                font-size: 24px;
            }
​
            .fx-rate-info {
                color: cornflowerblue;
            }
​
            .btn-box {
                text-align: center;
            }
​
            table {
                width: 100%;
                text-align: center;
                margin-bottom: 50px;
            }
​
            thead {
                background: #eee;
            }
​
            thead tr {
                height: 40px;
            }
​
            tbody tr {
                height: 50px;
                border-bottom: 1px solid #ddd;
            }</style><script>
            $(document).ready(function () {
                $.ajax({
                    type: "GET",
                    url: 'https://api.manana.kr/exchange/rate.json',
                    data: {},
                    success: function (response) {
                        let fxData = response[1].rate;
                        $('#fx-rate').append(fxData);
                    }
                })
            })function order() {
                let name = $('#name-input').val();
                let amount = $('#inputGroupSelect01').val();
                let address = $('#address').val();
                let phone = $('#phone').val();let innerHTML = `<tr>
                                    <td>${name}</td>
                                    <td>${amount}</td>
                                    <td>${address}</td>
                                    <td>${phone}</td>
                                 </tr>`if ($('#name-input').val() == '') {
                    alert('성함을 입력해주세요');
                } else if ($('#inputGroupSelect01').val() == 'none') {
                    alert('수량을 선택해주세요');
                } else if ($('#address').val() == '') {
                    alert('주소를 입력해주세요');
                } else if ($('#phone').val() == '') {
                    alert('연락처를 입력해주세요');
                } else {
                    alert('주문이 완료되었습니다');
                    $('#order-info').append(innerHTML);
                }}
​
​
​
        </script>
    </head>
    <body>
        <div class="wrapper">
            <div class="img"></div><h1>바닐라 크림 콜드 브루</h1>
            <p>
                가격: 6,000원 / 1잔
            </p>
            <p class="fx-rate-info">
                달러/원 환율: <span id="fx-rate"></span>
            </p>
            <p>
                콜드 브루에 더해진 바닐라 크림으로 깔끔하면서 달콤한 콜드 브루를 새롭게 즐길 수 있는 음료입니다.<br>
                제품 영양 정보: Tall(톨) / 355ml (12 fl oz)
            </p><h2>주문하기</h2>
            <div class="input-group mb-3">
                <div class="input-group-prepend">
                    <span class="input-group-text" id="name">주문자 성함</span>
                </div>
                <input type="text" class="form-control" aria-label="Username"
                       aria-describedby="basic-addon1" id="name-input">
            </div><div class="input-group mb-3">
                <div class="input-group-prepend">
                    <label class="input-group-text" for="inputGroupSelect01">수량</label>
                </div>
                <select class="custom-select" id="inputGroupSelect01">
                    <option selected value="none">-- 수량을 선택하세요 --</option>
                    <option value="1">1</option>
                    <option value="2">2</option>
                    <option value="3">3</option>
                </select>
            </div><div class="input-group mb-3">
                <div class="input-group-prepend">
                    <span class="input-group-text">주소</span>
                </div>
                <input type="text" class="form-control" aria-label="Username"
                       aria-describedby="basic-addon1" id="address">
            </div><div class="input-group mb-3">
                <div class="input-group-prepend">
                    <span class="input-group-text" id="basic-addon1">전화번호</span>
                </div>
                <input type="text" class="form-control" aria-label="Username"
                       aria-describedby="basic-addon1" id="phone">
            </div><p class="btn-box">
                <button class="btn btn-success" onclick="order()">주문하기</button>
            </p><table>
                <thead>
                <tr>
                    <td>이름</td>
                    <td>수량</td>
                    <td>주소</td>
                    <td>전화번호</td>
                </tr>
                </thead>
                <tbody id="order-info">
                </tbody>
            </table>
        </div>
    </body>
profile
배운 것을 기록하는 곳 💻🙂

0개의 댓글