스파르타코딩클럽 웹개발 종합반 2-1 ~ 2-14, 2주차 숙제

JaeSung Lee·2022년 10월 24일
ajaxjquery
0

국비스파르타코딩

목록 보기
4/7
post-thumbnail

2주차부터는 jQuery, Ajax를 배운다.
jQuery는 배우지말라는 말이 많은데
일단은 교육의 일환으로써 맛보기로 무엇인가 라는 느낌으로 강의를 들었다.

짝/홀수 onclick함수

    <script>
        let count = 1;
        function hey() {
            if (count % 2 == 0) {
                alert('짝짝짝👏');
            } else {
                alert('홀홀홀🎅');
            }
						count += 1;
        }
    </script>
    
    버튼을 클릭할때마다 count가 올라간다.
    
    나누기 2로 나눠서 나머지가 0이면 짝수고
    아니면 홀수라는 함수다.
    
    %  나머지 구하는 수식
    ==  같다라는 표시다.

jquery

jquery는 수업자료로 대체하겠다.


- 1) jQuery 란?
    - HTML의 요소들을 조작하는, 편리한 Javascript를 미리 작성해둔 것. 라이브러리!
        
        <aside>
        👉 Javascript로도 모든 기능(예 - 버튼 글씨 바꾸기 등)을 구현할 수는 있지만,
        
        1) 코드가 복잡하고, 2) 브라우저 간 호환성 문제도 고려해야해서,
        **j**Query라는 라이브러리가 등장하게 되었답니다.
        
        </aside>
        
    - jQuery와 Javascript - 코드 비교해보기
        
        <aside>
        👉 jQuery는 Javascript와 다른 특별한 소프트웨어가 아니라 미리 작성된 Javascript 코드입니다. 전문 개발자들이 짜둔 코드를 잘 가져와서 사용하는 것임을 기억해주세요! (그렇게 때문에, 쓰기 전에 "임포트"를 해야합니다!)
        
        </aside>
        
        Javascript로 길고 복잡하게 써야 하는 것을
        
        ```jsx
        document.getElementById("element").style.display = "none";
        ```
        
        jQuery로 보다 직관적으로 쓸 수 있어요. 편리하죠? :-)
        
        ```jsx
        $('#element').hide();
        ```
        
- 2) jQuery 사용하기
    - 미리 작성된 Javascript 코드를 가져오는 것을 '임포트'라고 부릅니다.
        
        <aside>
        👉 jQuery CDN 부분을 참고해서 임포트하기: [(링크)](https://www.w3schools.com/jquery/jquery_get_started.asp)
        
        </aside>
        
        
            ```html
            https://www.w3schools.com/jquery/jquery_get_started.asp
            ```
            
    - <head> 와 </head> 사이에 아래를 넣으면 끝!
        
        
        
        ```html
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
        ```
        
    - jQuery를 사용하는 방법
        
        <aside>
        👉 css와 마찬가지로, jQuery를 쓸 때에도 "가리켜야" → 조작할 수 있습니다.
        예) 특정 인풋박스의 값을 → 가져와줘!
        예) 특정 div를 → 안보이게 해줘!
        
        css에서는 선택자로 class를 썼지요?
        jQuery에서는 id 값을 통해 특정 버튼/인풋박스/div/.. 등을 가리키게 됩니다.

서버-클라이언트 JSON이해하기

  • JSON은, Key:Value로 이루어져 있다.
    자료형 Dictionary와 아주- 유사

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

클라이언트가 서버 요청 방식

API는 은행 창구와 같다.

같은 예금 창구에서도 개인 고객이냐 기업 고객이냐에 따라
가져와야 하는 것 / 처리해주는 것이 다른 것처럼,

클라이언트가 요청 할 때에도, "타입"이라는 것이 존재한다.

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

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

get 조금 더 세부적으로!

1. https://movie.naver.com/movie/bi/mi/basic.nhn?code=161967

위 주소는 크게 두 부분으로 쪼다. 바로 "?"가 쪼개지는 지점.
"?" 기준으로 앞부분이 <서버 주소>, 뒷부분이 [영화 번호].

* 서버 주소: https://movie.naver.com/movie/bi/mi/basic.nhn
* 영화 정보: code=161967



2. GET 방식으로 데이터를 전달하는 방법

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

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

         위 주소는 google.com의 search 창구에 다음 정보를 전달!
         q=아이폰                        (검색어)
         sourceid=chrome        (브라우저 정보)
         ie=UTF-8                      (인코딩 정보)


※ code라는 이름으로 영화번호를 준것은 프론트엔드 개발자와 백엔드 개발자가 서로 정해놓은 약속이다.(그러니 회사마다 다 다를것이다.)

Ajax

Ajax 기본 골격

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


그렇게해서 채우면

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

참고로 
POST 요청은, data : {} 에 넣어서 데이터를 가져갑니다.
data: { param: 'value', param2: 'value2' },

+ 결과가 response에 들어가는 원리는 그냥 외우자...
코드를 뜯어봐야 알수있다...

예제

도봉구 미세먼지 값 구하기(도봉구는 12번째있다.)
$.ajax({
  type: "GET",
  url: "http://spartacodingclub.shop/sparta_api/seoulair",
  data: {},
  success: function(response){
		// 값 중 도봉구의 미세먼지 값만 가져와보기
		let dobong = response["RealtimeCityAir"]["row"][11]; /*0부터 시작하니 11이다*/
		let gu_name = dobong['MSRSTE_NM'];
		let gu_mise = dobong['IDEX_MVL'];
		console.log(gu_name, gu_mise);
  }
})

모든 구 미세먼지 구하기
$.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);
    }
  }
});


따릉이 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>


랜덤 르탄이 보여주기
- 이미지 바꾸기 : `$("#아이디값").attr("src", 이미지URL);`
- 텍스트 바꾸기 : `$("#아이디값").text("바꾸고 싶은 텍스트");`

<!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() {
        // 여기에 코드를 입력하세요
      }
    </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-rtan" width="300" src="http://spartacodingclub.shop/static/images/rtans/SpartaIcon11.png"/>
        <h1 id="text-rtan">나는 ㅇㅇㅇ하는 르탄이!</h1>
      </div>
    </div>
  </body>
</html>

2주차 숙제

내가만든 팬명록에 현재기온을 넣는게 숙제다.
위에 내용 토대로 간단하게 만들수있지만
막상 만들려니 어렵넹...ㅜㅜ
한번 만들어 봅시다.

body에 현재기온 뼈대를 만들자!
    <h1>이재성 팬 방명록</h1>
        <p>현재기온 : <span id="temp"></span></p>
    </div>




이제 head부분 작성


가장먼저 세팅부터하자 
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  
  
  
  알람창
  <script>
        $(document).ready(function(){
            alert('다 로딩됐다!')
        });
    </script>
    
    
    
   날씨 api 연결해서 필요한 기온을 따오자
     <script>
    $.ajax({
        type: "GET",
        url: "http://spartacodingclub.shop/sparta_api/weather/seoul",
        data: {},
        success: function (response) {
          $('#temp').text(response['temp'])
          }
        }
      );
    </script>

이러면 끝이다!
날씨 api따오는건 알겠는데 그걸 body와 연결하는 부분을 몰랐다.
조금만 더 간결하고 간편하게 생각하는 습관을 가져야겠다.

2주차 강의가 끝났다.
프론트엔드 개발자들이 하나같이 하는 소리가
제이쿼리 배우지말라고 한다.
그래서 그냥 맛보기 찍먹같은 개념으로 강의를 들었다.
중간중간 JS관련 반복문이나 if문 나오는것만 집중해서 들었다.
어찌됐든 2주차도 끝!

profile
JaeSung Lee
정말 최선을 다하겠습니다.
이전 포스트

스파르타코딩클럽 웹개발 종합반 1주차 숙제

다음 포스트

스파르타코딩클럽 웹개발 종합반 3-1 ~ 3-14

0개의 댓글