스파르타 코딩클럽 개발일지_2주차

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

1. JQuery

HTML의 요소들을 조작하는, 편리한 Javascript를 미리 만들어놓은 코드.(라이브러리)
Javascript로도 모든 기능(예 - 버튼 글씨 바꾸기 등)을 구현할 수는 있지만, 1) 코드가 복잡하고, 2) 브라우저 간 호환성 문제도 고려해야해서, jQuery라는 라이브러리가 등장

javascript 코드

  
document.getElementById("element").style.display = "none";

jQuery 코드
1 $('#element').hide();
✔ javascript 코드와 비교했을 때 간단하고 직관적으로 코드 작성이 가능하다.

1-1 jQuery 다뤄보기

1) 임포트하기

미리 작성된 Javascript 코드를 가져오는 것을 ‘임포트’라고 한다.
임포트 하는 방법
1. jQuery CDN 부분을 참고해서 임포트하기: (링크)
2. <head> 와 </head> 사이에 아래 코드를 넣으면 임포트 완료!!
  1 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  2) input 박스의 값을 가져와보기
```html
아티클 URL
간단 코멘트
```

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

3) div 보이기 / 숨기기

  
<div class="posting-box" id="post-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-box인 곳을 가리키고, hide()로 안보이게 한다.(=css의 display 값을 none으로 바꾼다)
$('#post-box').hide();

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

4) css의 값 가져와보기

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

$('#post-box').show();
$('#post-box').css('display');
// display : block;(또는 다른 값)

5) 태그 내 텍스트 입력하기

input box의 경우

  
$('#post-url').val('여기에 텍스트를 입력하면!');

다른 것들 - 예) 버튼의 텍스트 바꾸기

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

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

6) 태그 내 html 입력하기

<div> ~ </div> 내에, 동적으로 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);

1-2 JQuery 적용하기(나홀로 메모장)

포스트 박스 열기/닫기 기능 추가(CSS 추가, text 변경, 조건문 활용)
포스트 박스 열기
포스트 박스 닫기

1-3 jQuery 퀴즈

Quiz1 사용 코드

  
<script>
  function q1() {
      let input = $('#input-q1').val(); // 텍스트를 변수에 기입
      if (input == '') {	// 빈칸 여부 확인
          alert('입력하세요!'); // 빈칸일 경우
      } else { // 빈칸이 아닐 경우
          alert(input);
      }
  }
</script>

Quiz2 사용 코드

  
<script>
  function q2() {
      let input = $('#input-q2').val(); // 텍스트를 변수에 기입
      if (input.includes('@') == true){
          let email = input.split('@')[1].split('.')[0]; 
          //1. @기준 텍스트 분리 -> 2. . 기준 텍스트 분리
          alert(email);
      } else { // @가 없는 경우(=이메일이 아닌 경우)
          alert("이메일이 아닙니다.")
      }

  }
</script>

Quiz3 사용 코드

  
<script>
  function q3() {
      let txt = $('#input-q3').val(); // 텍스트를 변수에 기입
      let temp_html = `<li>${txt}</li>`; // 추가할 HTML 코드 변수에 기입
      $('#names-q3').append(temp_html); // 텍스트 추가
  }

  function q3_remove() {
      $('#names-q3').empty(); // 축적된 텍스트 삭제
  }
</script>

2. Ajax

그 전에, 서버-클라이언트 통신 이해하기

ajax
비동기식으로 서버로부터 데이터를 가져오기 위해 사용
전체 페이지를 로드하는 동기식 통신이 아닌 일부분의 데이터만 변하기를 원할 경우 특정 부분만 로드하여 준다.
JSON
서버에 저장되는 데이터의 표준 포맷 양식이며 {키:값}형태로 구성
Ajax를 활용하기 위해 서버와 주고받는 데이터의 형식이 JSON인 것

2-1 Ajax 코드 설명

1) Ajax 기본 골격

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

2) GET , POST 타입

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

클라이언트가 요청 할 때에도, “타입”이라는 것이 존재

GET → 통상적으로! 데이터 조회(Read)를 요청할 때 예) 영화 목록 조회
POST → 통상적으로! 데이터 생성(Create), 변경(Update), 삭제(Delete) 요청 할 때 예) 회원가입, 회원탈퇴, 비밀번호 수정
GET 요청은, url뒤에 아래와 같이 붙여서 데이터 가져간다. http://naver.com?param=value&param2=value2
POST 요청은, data : {} 에 넣어서 데이터를 가져간다. data: { param: ‘value’, param2: ‘value2’ },

3) Ajax 활용 예시

서울 미세먼지 API 활용

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

값 중 도봉구의 미세먼지 값만 가져와보기

  
$.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);
    }
    }
});

2-2 Ajax 퀴즈

1) 서울시 미세먼지 현황

완성 페이지 ✔ 추가 기능 : 미세먼지 수치 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 = ''
          // 70 이상 구 구별, 클래스 활용 css 추가
                          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">
          </ul>
      </div>
  </body>

  </html>

2) 실시간 따릉이 현황

완성 페이지 ✔ 추가 기능 : 주차된 따릉이 대수가 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;
          }
      </style>

      <script>
          function q1() {
              $('#names-q1').empty();
              $.ajax({
                  type: "GET",
                  url: "http://spartacodingclub.shop/sparta_api/seoulbike",
                  data: {},
                  success: function (response) {
                      let bike = response['getStationList']['row'];
                      for (let i = 0; i < bike.length; i++) {
                          let station = bike[i]['stationName']
                          let rack = bike[i]['rackTotCnt']
                          let park = bike[i]['parkingBikeTotCnt']

                          let temp_html = ``
          // 5대 이하 구 구별, 클래스 활용 css 추가
                          if (park < 5) {
                              temp_html = `<tr class="urgent">
                                                  <td>${station}</td>
                                                  <td>${rack}</td>
                                                  <td>${park}</td>
                                              </tr>`
                          } else {
                              temp_html = `<tr>
                                                  <td>${station}</td>
                                                  <td>${rack}</td>
                                                  <td>${park}</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>

3) 랜덤 고양이 사진 업로드 페이지

완성 페이지

사용 코드

  
  <!doctype html>
  <html lang="ko">
    <head>
      <meta charset="UTF-8">
      <title>퀴즈3_김선호</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 cat = response[0]['url'];
                    $("#img-cat").attr("src", cat); //'ajax img src 변경' 구글링
                  }
              })
        }
      </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" src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png"/>
        </div>
      </div>
    </body>
  </html>

temp_html은 위에 이미 let에 선언을 해 두었기 때문에 여기선 let을 선언해서는 안된다.

2주차 숙제

나만의 쇼핑몰 페이지에 환율계산기 추가

환율API를 활용
페이지 로딩과 동시에 환율이 페이지에 표시

1) 완성 페이지

2) 사용 코드

  
    <!doctype html>
    <html lang="en">

    <head>
        <!-- Required meta tags -->
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

        <!-- Bootstrap CSS -->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
            integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

        <!-- Google fonts 추가    -->
        <link rel="preconnect" href="https://fonts.googleapis.com">
        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
        <link href="https://fonts.googleapis.com/css2?family=Nanum+Gothic:wght@700&display=swap" rel="stylesheet">

        <!-- Optional JavaScript -->
        <!-- jQuery first, then Popper.js, then Bootstrap JS -->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
            integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
            crossorigin="anonymous"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
            integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
            crossorigin="anonymous"></script>

        <title>나만의 쇼핑몰_김선호</title>
        <style>
            * {
                font-family: 'Nanum Gothic', sans-serif;
            }
            .wrap {
                width: 700px;
                margin: 50px auto auto auto;
            }
            .img {
                width: 700px;
                height: 500px;

                background-image: url("https://images.unsplash.com/photo-1568702846914-96b305d2aaeb?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1170&q=80");
                background-position: center;
                background-size: cover;

            }

            .description {
                font-size: 20px;
            }
            .description_price {
                font-weight: normal;
                font-size: 20px;

            }
            .btn-primary {
                font-size: 20px;

                display: block;
                width: auto;
                margin: auto;

                border-radius: 5px;
            }
            #dollartowon {
                color:blue;
                font-size: 15px;

            }
        </style>

        <script>
            $(document).ready(function () {
                dollar_to_won();
            })

            function ordered () {
                alert("주문완료!!")
            }

            function dollar_to_won() {
                $.ajax({
                    type: "GET",
                    url: "http://spartacodingclub.shop/sparta_api/rate",
                    data: {},
                    success: function (response) {
                        let rate = response['rate'];
                        let date = response['date'];
                        let temp_html = `<p>(${date} 기준)<br>
                                         오늘의 환율($ → ₩) : ${rate} 원</p>`;
                        $('#dollartowon').append(temp_html);

                    }
                })
            }
        </script>
    </head>

    <body>
        <div class="wrap">
            <div class="img"> </div>
            <div class="description">
                <h1>사과를 팝니다 <span class="description_price">가격: 1,000원/개</span></h1>
                <p>이 사과는 먹으면 기분이 좋아지는 효과가 있어요. 이유는 그냥 달고 맛있거든요😁</p>
                <p id="dollartowon" > </p>
            </div>
            <div class="orderbox">
                <div class="input-group mb-3">
                    <div class="input-group-prepend">
                        <span class="input-group-text" id="inputGroup-sizing-default">주문자 이름</span>
                    </div>
                    <input type="text" class="form-control" aria-label="Default"
                           aria-describedby="inputGroup-sizing-default">
                </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></option>
                        <option value="1">1개</option>
                        <option value="2">3개</option>
                        <option value="3">6개</option>
                        <option value="3">12개</option>
                    </select>
                </div>
                <div class="input-group mb-3">
                    <div class="input-group-prepend">
                        <span class="input-group-text" id="inputGroup-sizing-default">주소</span>
                    </div>
                    <input type="text" class="form-control" aria-label="Default"
                           aria-describedby="inputGroup-sizing-default">
                </div>
                <div class="input-group mb-3">
                    <div class="input-group-prepend">
                        <span class="input-group-text" id="inputGroup-sizing-default">전화번호</span>
                    </div>
                    <input type="text" class="form-control" aria-label="Default"
                           aria-describedby="inputGroup-sizing-default">
                </div>
                <button onclick = ordered() type="button" class="btn-primary">주문하기</button>
            </div>
        </div>
    </body>
    </html>

3) 숙제 해결 간 발생한 문제점

스파르타에서 제공해준 해설 코드보다 비효율적인 코드 작성

문제점
내가 작성한 코드는 환율 계산기의 텍스트까지 페이지 로딩 시 새로 가져오는 방식이지만 해설 코드는 환율 데이터만 가져오는 방식을 활용하여 효율적인 코딩을 못한 생각이 들었다.

해설 function 코드

  
   function get_rate(){
          $.ajax({
              type: "GET",
              url: "http://spartacodingclub.shop/sparta_api/rate",
              data: {},
              success: function (response) {
                  let now_rate = response['rate'];
                  $('#now-rate').text(now_rate);
              }
          })
      }

내가 작성한 function 코드

  
function dollar_to_won() {
  $.ajax({
      type: "GET",
      url: "http://spartacodingclub.shop/sparta_api/rate",
      data: {},
      success: function (response) {
          let rate = response['rate'];
          let date = response['date']; // 개인적으로 추가한 코드
          let temp_html = `<p>(${date} 기준)<br>
                              오늘의 환율($ → ₩) : ${rate} 원</p>`;
          $('#dollartowon').append(temp_html);
      }
  })
}

스파르타 코딩클럽 개발일지_2주차

1. JQuery

1-1 jQuery 다뤄보기

1) 임포트하기

2) input 박스의 값을 가져와보기

3) div 보이기 / 숨기기

4) css의 값 가져와보기

5) 태그 내 텍스트 입력하기

6) 태그 내 html 입력하기

1-2 JQuery 적용하기(나홀로 메모장)

1-3 jQuery 퀴즈

2. Ajax

그 전에, 서버-클라이언트 통신 이해하기

2-1 Ajax 코드 설명

1) Ajax 기본 골격

2) GET , POST 타입

3) Ajax 활용 예시

2-2 Ajax 퀴즈

1) 서울시 미세먼지 현황

2) 실시간 따릉이 현황

3) 랜덤 고양이 사진 업로드 페이지

2주차 숙제

나만의 쇼핑몰 페이지에 환율계산기 추가

1) 완성 페이지

2) 사용 코드

3) 숙제 해결 간 발생한 문제점

Further Reading

스파르타 코딩클럽 개발일지_1주차

스파르타 코딩클럽 개발일지_3주차

스파르타 코딩클럽 개발일지_4주차