서버 & 클라이언트 통신이해하기

13127 단어 JavaScriptjqueryajaxJavaScript

웹개발종합반 66기 2주차

[ 목표 ]

  1. Javascript 문법에 익숙해진다.
  2. jQuery로 간단한 HTML을 조작할 수 있다.
  3. Ajax로 서버 API(약속)에 데이터를 주고, 결과를 받아온다.

* 자바스크립트로 홀짝 판별함수 만들기
<

<script>
    let count = 1;
    function hey() {
        if (count % 2 == 0) {
            alert('짝짝짝👏');
        } else {
            alert('홀홀홀🎅');
        }
					count += 1;
    }
</script>

* JQuery 란?
HTML의 요소들을 조작하는, 편리한 Javascript를 미리 작성해둔 것. 라이브러리로 Javascript 보다 직관적임.
jQuery에서는 id 값을 통해 특정 button/input/div/.. 등을 가리킴.
jQuery는 전문 개발자들이 짜둔 코드를 잘 가져와서 사용하는 것. (그렇게 때문에, 쓰기 전에 "import"를 해야한다!)

* 서버-클라이언트 통신 (JASON형식) 이해하기
JSON은, Key:Value로 이루어져 자료형 Dictionary와 아주- 유사함

API는 은행창구와 같음 !
클라이언트가 요청 할 때에도, "타입"이라는 것이 존재함.

  • GET →통상적으로! 데이터 조회(Read)를 요청할 때
    예) 영화 목록 조회

  • POST→통상적으로! 데이터 생성(Create), 변경(Update), 삭제(Delete) 요청 할 때
    예) 회원가입, 회원탈퇴, 비밀번호 수정

< GET 방식으로 데이터를 전달하는 방법 >

? : 여기서부터 전달할 데이터가 작성된다는 의미
& : 전달할 데이터가 더 있다는 뜻

예시) google.com/search?q=아이폰&sourceid=chrome&ie=UTF-8

     위 주소는 google.com의 search 창구에 다음 정보를 전달한다
     q=아이폰 (검색어)
     sourceid=chrome (브라우저 정보)
     ie=UTF-8 (인코딩 정보)
$.ajax({
  type: "GET", // GET 방식으로 요청한다.
  url: "http://spartacodingclub.shop/sparta_api/seoulair",
  data: {}, // 요청하면서 함께 줄 데이터 (GET 요청시엔 비워두세요)
  success: function(response){ // 서버에서 준 결과를 response라는 변수에 담음
    console.log(response) // 서버에서 준 결과를 이용해서 나머지 코드를 작성
  }
})
  • 모든 구의 미세먼지 값을 찍어보기
$.ajax({
  type: "GET",
  url: "http://spartacodingclub.shop/sparta_api/seoulair",
  data: {},
  success: function (response) {
    let mise_list = response["RealtimeCityAir"]["row"];
    for (let i = 0; i < mise_list.length; i++) {
      let mise = mise_list[i];
      let gu_name = mise["MSRSTE_NM"];
      let gu_mise = mise["IDEX_MVL"];
      console.log(gu_name, gu_mise);
    }
  }
});

---------------------------------------------------------------------------
#### *** console 창에 찍어 주는것이 아닌 '업데이트'버튼을 누름으로써 업데이트 될 수 있게 하기 **

> <script>
        function q1() {
            // 여기에 코드를 입력하세요
            $('#names-q1').empty();
            $.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'];
                        let 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()">업데이트</>
        <ul id="names-q1">
        </ul>
    </div>
</body>

</html>

< 느낀 점 >
이번에는 Ajax콜을 이용해 서울시 미세먼지 데이터를 이용해 데이터를 전달하는 공부를 했다. 역시 익숙하지않아서그런지 자잘한 실수들이 많았다. 서울시 날씨데이터를 이용해서 다시 연습해봤는데, 조금 연습해보니 그래도 대강 이해가 되었다. 역시 연습만이 살길인것같다. 언젠가는 이것도 아무것도 아닌 날이 오겠지? ㅠㅠ

java 정규 표현식 html 탭 속성 수정
| array - sorted 2d matrix

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage