스파르타 코딩 2주차

2주차: jQuery, Ajax
우리가 브라우저에서 엔터를 치지 않고 (페이지 전체가 re-loading 되지않고) 자바스크립트에서 서버쪽에다가 데이터를 요청할 수 있는 방법에 대해서 배우는 것이 목표!

JQuery란?
HTML의 요소들을 조작하는, 편리한 Javascript를 미리 작성해둔 것.
Javascript로도 모든 기능(예 - 버튼 글씨 바꾸기 등)을 구현할 수는 있지만

1) 코드가 복잡하고, 2) 브라우저 간 호환성 문제도 고려해야해서,
jQuery라는 라이브러리가 등장하게 되었다.

jQuery는 Javascript와 다른 특별한 소프트웨어가 아니라 미리 작성된 Javascript 코드이다. 전문 개발자들이 짜둔 코드를 잘 가져와서 사용하는 것이기 때문에 쓰기 전에 "임포트"를 해야함!

TIP: 부트스트랩을 사용한 경우 이미 부트스트랩에 jQuery가 미리 임포트 되어있기 때문에 임포트를 따로 또 할 필요가 없다. 그러나 부트스트랩 템플릿으로 시작하지 않은 경우에는 따로 임포트를 해주여야함!

자주쓰는 jQuery들 다뤄보기

1. input 박스의 값을 가져와보기

<div class="posting-box">
    <div class="form-group">
        <label for="exampleInputEmail1">아티클 URL</label>
        <input id="post-url" type="email" class="form-control" aria-describedby="emailHelp"
            placeholder="">
    </div>
    <div class="form-group">
        <label for="exampleInputPassword1">간단 코멘트</label>
        <input type="password" class="form-control" placeholder="">
    </div>
    <button type="submit" class="btn btn-primary">기사 저장</button>
</div>

// 크롬 개발자도구 콘솔창에서 쳐보기
// id 값이 post-url인 곳을 가리키고, val()로 값을 가져온다.
$('#post-url').val();

2. div 보이기 / 숨기기

// 크롬 개발자도구 콘솔창에 쳐보기
// id 값이 post-box인 곳을 가리키고, hide()로 안보이게 한다.(=css의 display 값을 none으로 바꾼다)
$('#post-box').hide();

// show()로 보이게 한다.(=css의 display 값을 block으로 바꾼다)
$('#post-box').show();

3. css의 값 가져와보기 (display 속성 값을 가져와보기!)

$('post-box').css('width');
//하면 post-box의 width값을 불러옴 

$('post-box').css('width','700px')
//하면 post-box의 width값을 700px로 바꿀 수 있음.

$('#post-box').hide();
$('#post-box').css('display');

$('#post-box').show();
$('#post-box').css('display');

4. 태그 내 텍스트 입력하기

**input box의 경우
$('#post-url').val('여기에 텍스트를 입력하면!');

**버튼의 텍스트바꾸기의 경우
// 가리키고 싶은 버튼에 id 값을 준다음
<button id="btn-posting-box" type="button" class="btn btn-primary">포스팅 박스 열기</button>

$('#btn-posting-box').text('포스팅 박스 닫기');

5. 태그 내 html 입력하기

// 사이에 html을 넣고 싶은 태그에 id값을 준 다음
<div id="cards-box" class="card-columns">
    <div class="card">
      <img class="card-img-top" src="https://www.fodors.com/wp-content/uploads/2018/10/4_UltimateRome_PiazzaNavona-975x650.jpg" alt="Card image cap">
      <div class="card-body">
        <a href="https://naver.com/" class="card-title">여기 기사 제목이 들어가죠</a>
        <p class="card-text">여기에 기사 내용이 들어가겠죠</p>
        <p class="card-text comment">여기엔 코멘트가 들어갑니다</p>
      </div>
    </div>
  </div>

let temp_html = '<button>나는 추가될 버튼이다!</button>';
$('#cards-box').append(temp_html);

// 주의: 홑따옴표(')가 아닌 backtick(`)으로 감싸야 한다.
// 숫자 1번 키 왼쪽의 버튼을 누르면 backtick(`)이 입력된다.
// backtick을 사용하면 문자 중간에 Javascript 변수를 삽입할 수 있음
let img_url = 'https://www.eurail.com/content/dam/images/eurail/Italy%20OCP%20Promo%20Block.adaptive.767.1535627244182.jpg';
let link_url = 'https://naver.com/';
let title = '여기 기사 제목';
let desc = '기사의 요약 내용. 동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라만세 무궁화 삼천리 화려강산...';
let comment = '여기에 코멘트';

let temp_html = `<div class="card">
                    <img class="card-img-top"
                        src="${img_url}"
                        alt="Card image cap">
                    <div class="card-body">
                        <a href="${link_url}" class="card-title">${title}</a>
                        <p class="card-text">${desc}</p>
                        <p class="card-text comment">${comment}</p>
                    </div>
                </div>`;
$('#cards-box').append(temp_html);

클라이언트→서버: GET 요청 이해하기

-API는 은행 창구와 같은 것! 같은 예금 창구에서도 개인 고객이냐 기업 고객이냐에 따라 가져와야 하는 것 / 처리해주는 것이 다른 것처럼,클라이언트가 요청 할 때에도, "타입"이라는 것이 존재한다.

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

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

Ajax 시작하기

!Warning! Ajax는 jQuery를 임포트한 페이지에서만 동작 가능.
즉, http://google.com/ 과 같은 화면에서 개발자도구를 열면, jQuery가 임포트 되어있지 않기 때문에 아래와 같은 에러가 뜬다.

Uncaught TypeError: $.ajax is not a function
→ ajax라는 게 없다는 뜻

Ajax 기본 골격

$.ajax({
  type: "GET",
  url: "여기에URL을입력",
  data: {},
  success: function(response){
    console.log(response)
  }
})

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) // 서버에서 준 결과를 이용해서 나머지 코드를 작성
  }
})

리마인드
GET 요청은, url뒤에 아래와 같이 붙여서 데이터를 가져간다.
http://naver.com?param=value¶m2=value2

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

success: 성공하면, response 값에 서버의 결과 값을 담아서 함수를 실행한다.

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 dobong = response["RealtimeCityAir"]["row"][11];
		let gu_name = dobong['MSRSTE_NM'];
		let gu_mise = dobong['IDEX_MVL'];
		console.log(gu_name, gu_mise);
  }
})

$.ajax({
  type: "GET",
  url: "http://openapi.seoul.go.kr:8088/6d4d776b466c656533356a4b4b5872/json/RealtimeCityAir/1/99",
  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);
    }
  }
});

위의 연습을 토대로
Quiz_Ajax 연습하기(1)

 <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 name = rows[i]['stationName'];
                        let total = rows[i]['rackTotCnt'];
                        let bike = rows[i]['parkingBikeTotCnt'];

                        let temp_html = ''
                        if (bike < 5) {
                        
                               temp_html =`<tr class = "low">
                               //현재 거치되어있는 따릉이가 5대 이하이면 빨간색 글씨로 나타내어라
                                            <td>${name}</td>
                                            <td>${total}</td>
                                            <td>${bike}</td>
                                            </tr>`
                              } else {
                                temp_html =`<tr>
                                            <td>${name}</td>
                                            <td>${total}</td>
                                            <td>${bike}</td>
                                            </tr>`
                         }
                        $('#names-q1').append(temp_html);
                    }
                }
            })
        }
    </script>

2주차 끝 & 숙제

1주차에 완성한 쇼핑몰에 환율 정보를 넣기
로딩이 완료되면 환율 API을 이용해서 환율을 표시되게하기
새로 고침을 할 때 마다 실시간 환율이 나와야함
(rate 값이 로딩이 되자마자 ajax로 API를 call해가지고 http://spartacodingclub.shop/sparta_api/rate의 rate값을 찍어줘야됨)

      $(document).ready(function () {
        q1();
      });
      //페이지가 로딩이 되자마자 q1()을 불러와라 

        <script>
        function order(){
            alert('주문이 완료되었습니다!');
        }

        $(document).ready(function () {
            q1();
        });

        function q1() {
            $.ajax({
                type: "GET",
                url: "http://spartacodingclub.shop/sparta_api/rate",
                data: {},
                success: function (response) {
                    //rate의 값을 가져와서
                    let rates = response['rate']
                    $('#rate').text(rates);


                }
            })
        }

        </script>

완성!
실시간 환율이 페이지를 새로고침 할때마다 바뀌어야 한다는 힌트를 보고도 뭔가 너무 어렵고 복잡한거 같다는 생각에 아무렇게나 $('#names-q1').append( );를 적용했었다. 물론 .append()는 표시하고자 하는 내용을 줄줄히 붙여주는것이기 때문에 원하는 결과물을 얻을 수 없었다. 분명 거의 다 한거같은데 도대체 이 불러온 rate값을 어떻게 홈페이지 저 부분에 보여주지? 하다가 딱 생각난것이 강의 초반에 배웠던 $('#btn-posting-box').text('포스팅 박스 닫기');였다! ( )안에 들어가는 것만 이번 프로젝트에 맞게 바꿔주니 허무할정도로 실시간 환율이 새로고침을 할 때마다 잘 찍혀 나왔었다 ㅎㅎ......뭔가 2주차부터 슬슬 내용이 어려워지니까 머리쓰기를 본능적으로 거부하는거 같은데 더 고생하기 싫으면 무엇을 해결해야하는지 그 해결방안에는 어떤것이 있는지 차근차근 생각해보는 습관을 들여야겠다.