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

김선호·2021년 10월 5일
스파르타코딩클럽
0

스파르타 코딩클럽 프로젝트_V2

목록 보기
2/6

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

1. JQuery

  • HTML의 요소들을 조작하는, 편리한 Javascript를 미리 만들어놓은 코드.(라이브러리)

  • Javascript로도 모든 기능(예 - 버튼 글씨 바꾸기 등)을 구현할 수는 있지만, 1) 코드가 복잡하고, 2) 브라우저 간 호환성 문제도 고려해야해서, jQuery라는 라이브러리가 등장

  • javascript 코드

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

  • jQuery 코드

    $('#element').hide();

    ✔ javascript 코드와 비교했을 때 간단하고 직관적으로 코드 작성이 가능하다.

1-1 jQuery 다뤄보기

1) 임포트하기

  • 미리 작성된 Javascript 코드를 가져오는 것을 '임포트'라고 한다.
  • 임포트 하는 방법
    1. jQuery CDN 부분을 참고해서 임포트하기: (링크)
    2. <head> 와 </head> 사이에 아래 코드를 넣으면 임포트 완료!!
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

2) 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();

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 변경, 조건문 활용)

  • 포스트 박스 열기

  • 포스트 박스 닫기

  • 사용 코드

<!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">

    <!-- 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>

    <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=Jua&display=swap" rel="stylesheet">

    <style>
        * {
            font-family: 'Jua', sans-serif;
        }

        .wrap {
            width: 900px;
            margin: auto;
        }

        .commend {
            color: blue;
            font-weight: bold;
        }

        .form {
            display: none;

            width: auto;

            margin: 0px auto 30px auto; /*시계 방향*/
            border: solid 3px black;
            border-radius: 10px;

            padding: 40px;
        }
    </style>
    <script>
        $(document).ready(function () {
            $('#cards-box').empty();
        })
        function openclose() {
            let status = $('#postbox').css('display');
            if (status == 'block') {
                $('#postbox').hide();
                $('#btn-postbox').text('포스트박스 열기');
            } else {
                $('#postbox').show();
                $('#btn-postbox').text('포스트박스 닫기');
            }
        }
    </script>
</head>

<body>
<div class="wrap">
    <div class="jumbotron">
        <h1 class="display-4">나홀로 링크 메모장!</h1>
        <p class="lead">중요한 링크를 저장해두고, 나중에 볼 수 있는 공간입니다</p>
        <hr class="my-4">
        <p class="lead">
            <a onclick=openclose() id="btn-postbox" class="btn btn-primary btn-lg" href="#" role="button">포스팅박스 열기</a>
        </p>
    </div>
    <div class="form" id="postbox">
        <div class="form-group">
            <label for="exampleInputEmail1">아티클 URL</label>
            <input type="text" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp"
                   placeholder="">
        </div>
        <div class="form-group">
            <label for="exampleFormControlTextarea1">간단 커멘트</label>
            <textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
        </div>
        <button type="submit" class="btn btn-primary">기사저장</button>
    </div>
    <div class="card-columns" id="cards-box">
        <div class="card">
            <img class="card-img-top"
                 src="https://images.unsplash.com/photo-1632746973199-14de86b1c430?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1170&q=80"
                 alt="Card image cap">
            <div class="card-body">
                <h5 class="card-title"><a href="...">여기 기사 제목이 들어가죠</a></h5>
                <p class="card-text">기사의 요약 내용이 들어갑니다. 동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라만세 무궁화 삼천리 화려강산...</p>
                <p class="card-text commend">여기에 코멘트가 들어갑니다.</p>
            </div>
        </div>
        <div class="card">
            <img class="card-img-top"
                 src="https://images.unsplash.com/photo-1632746973199-14de86b1c430?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1170&q=80"
                 alt="Card image cap">
            <div class="card-body">
                <h5 class="card-title"><a href="...">여기 기사 제목이 들어가죠</a></h5>
                <p class="card-text">기사의 요약 내용이 들어갑니다. 동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라만세 무궁화 삼천리 화려강산...</p>
                <p class="card-text commend">여기에 코멘트가 들어갑니다.</p>
            </div>
        </div>
        <div class="card">
            <img class="card-img-top"
                 src="https://images.unsplash.com/photo-1632746973199-14de86b1c430?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1170&q=80"
                 alt="Card image cap">
            <div class="card-body">
                <h5 class="card-title"><a href="...">여기 기사 제목이 들어가죠</a></h5>
                <p class="card-text">기사의 요약 내용이 들어갑니다. 동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라만세 무궁화 삼천리 화려강산...</p>
                <p class="card-text commend">여기에 코멘트가 들어갑니다.</p>
            </div>
        </div>
        <div class="card">
            <img class="card-img-top"
                 src="https://images.unsplash.com/photo-1632746973199-14de86b1c430?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1170&q=80"
                 alt="Card image cap">
            <div class="card-body">
                <h5 class="card-title"><a href="...">여기 기사 제목이 들어가죠</a></h5>
                <p class="card-text">기사의 요약 내용이 들어갑니다. 동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라만세 무궁화 삼천리 화려강산...</p>
                <p class="card-text commend">여기에 코멘트가 들어갑니다.</p>
            </div>
        </div>
        <div class="card">
            <img class="card-img-top"
                 src="https://images.unsplash.com/photo-1632746973199-14de86b1c430?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1170&q=80"
                 alt="Card image cap">
            <div class="card-body">
                <h5 class="card-title"><a href="...">여기 기사 제목이 들어가죠</a></h5>
                <p class="card-text">기사의 요약 내용이 들어갑니다. 동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라만세 무궁화 삼천리 화려강산...</p>
                <p class="card-text commend">여기에 코멘트가 들어갑니다.</p>
            </div>
        </div>
        <div class="card">
            <img class="card-img-top"
                 src="https://images.unsplash.com/photo-1632746973199-14de86b1c430?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1170&q=80"
                 alt="Card image cap">
            <div class="card-body">
                <h5 class="card-title"><a href="...">여기 기사 제목이 들어가죠</a></h5>
                <p class="card-text">기사의 요약 내용이 들어갑니다. 동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라만세 무궁화 삼천리 화려강산...</p>
                <p class="card-text commend">여기에 코멘트가 들어갑니다.</p>
            </div>
        </div>

    </div>
</body>

</html>

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¶m2=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주차 숙제

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

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

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);
            }
        })
    }
profile
김선호
이전 포스트

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

다음 포스트

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

0개의 댓글