[스파르타코딩클럽] 웹개발 종합반 - 2주차 개발일지

권혁준·2022년 3월 3일
국비지원코딩내일배움카드스파르타코딩클럽코딩독학
0

스파르타코딩클럽웹개발종합반18기

목록 보기
2/4

2주차: jQuery, Ajax

📚 학습목표 : HTML파일을 받았다고 가정하고, Javascript로 다시 서버에 데이터를 요청하고 받는 방법을 배워보자

1) jQuery를 이용해 Javascript로 HTML을 쉽게 제어
2) Ajax를 이용해 다시 서버에 데이터를 요청하고 받기

jQuery

1. jQuery에 대한 이해

1) jQuery란?

HTML의 요소들을 조작하는, 편리한 Javascript를 미리 작성해둔 것. 라이브러리!

⭐️ jQuery 등장배경
1) Javascriptd의 코드가 복잡
2) 브라우저 간 호환성 문제 고려

⭐️ jQuery와 Javascript 비교

  • Javascript - 코드를 길고 복잡하게 입력 
document.getElementById("element").style.display = "none";
  • jQuery - 보다 직관적이고 편리하게 입력
$('#element').hide();

2) jQuery 사용

✅jQuery를 사용하려면 <head>에 무조건 import 한 뒤에 jQuery문법들을 사용

  • jQuery CDN
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>

⭐️ jQuery 사용방법
CSS - 선택자로 class=""를 사용
jQuery - id="" 를 통해 특정 button/input/div/... 등을 조작가능

2. jQuery 연습

예시문)
<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>

(1) input 박스의 값을 가져오기

// 크롬 개발자도구 콘솔창에서 쳐보기
// 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의 값 가져오기 - ex) display 속성값 -

$('#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>

(5) 태그 내 html 입력

  • <div> ~ <div> 내에 동적으로 html을 넣을 때
    ex) 포스팅 → 카드 추가
// 사이에 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. 서버→클라이언트 : "JSON" 이해

JSON은 Key:Value 형태로 구조

🚨 크롬 익스텐션 JSONview를 설치하여 보는 것이 좋다
https://chrome.google.com/webstore/detail/jsonview/gmegofmjomhknnokphhckolhcffdaihd/related?hl=ko

2. 클라이언트→서버 : Get 요청 이해

⭐️ 클라이언트가 요청시 "타입"이 존재
1. GET : 통상적으로 데이터 조회(Read)를 요청할 때
ex) 영화 목록 조회
2. POST : 통상적으로 데이터 생성(Create), 변경(Update), 삭제(Delete)를 요청할 때
ex) 회원가입, 회원탈퇴, 비밀번호 수정

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

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

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

⭐️ Get 방식으로 데이터 전달 방법
? : 여기서부터 전달할 데이터가 작성된다는 의미
& : 전달할 데이터가 더 있다는 뜻

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

Ajax

1. Ajax에 대한 이해

🚨 Ajax는 jQuery를 임포트한 페이지에서만 동작 가능

jQuery가 임포트 되지 않은 페이지에서는 개발자도구 실행시
다음과 같은 에러가 발생
Uncaught TypeError: $.ajax is not a function

(1) Ajax 기본 골격

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

(2) 코드해설

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

(3) $ajax 코드 설명

  • type: "GET" → GET 방식으로 요청한다.
  • url: 요청할 url
  • data: 요청하면서 함께 줄 데이터 (GET 요청시엔 비워두세요)

    🚨
    GET 요청은, url뒤에 아래와 같이 붙여서 데이터를 가져갑니다.
    http://naver.com?param=value¶m2=value2
    POST 요청은, data : {} 에 넣어서 데이터를 가져갑니다.
    data: { param: 'value', param2: 'value2' },

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

(4) $Ajax 통신의 결과값 이용하기

  • 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) // 서버에서 준 결과를 이용해서 나머지 코드를 작성
  }
})
  • 개발자도구 콘솔에 찍기
$.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주차 숙제 : 원페이지 쇼핑몰에 환율 계산기 달기

1) 문제

1주차에 완성한 쇼핑몰에, 환율 정보를 넣어주세요!
로딩이 완료되면, 환율 API을 이용해서 환율을 표시해주세요.

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

    <!-- 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 href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR&display=swap" rel="stylesheet">

    <style>
        * {
            font-family: 'Noto Sans KR', sans-serif;
        }

        .item-page {
            width: 502px;
            height: 798px;
            margin: auto;
            margin-top: 16px;
            border: 1px solid black;
        }

        .item-image {
            background-color: green;
            width: 450px;
            height: 300px;
            background-image: url("https://post-phinf.pstatic.net/MjAyMTEwMjJfODUg/MDAxNjM0ODcwNjg5Mzc2.n7nH7taibbSgR5BvAijbRzeuUyBS5DnTX2eZIkgp8mog.gUpqOjxlRzaIqB2Yyc5_m7jfFp2Ya45ux3xCkpUNDdEg.JPEG/Screenshot_2021-10-22_at_10.22.00.jpg?type=w1200");
            background-size: cover;
            background-position: center;
            margin: auto;
            margin-top: 16px;
        }

        .item-info {
            width: 450px;
            margin: 16px 25px;
        }

        .item-info i {
            color: red;
            font-weight: bold;
        }

        .item-title {
            font-size: 30px;
            font-weight: bold;
        }

        .item-price {
            font-size: 20px;
            color: tomato;
            margin-left: 20px;
        }

        .item-order {
            width: 450px;
            margin: 0px 25px 16px 25px;
        }

        .item-order-btn {
            margin: auto;
            display: block;
        }

        .rate {
            color: blue
        }
    </style>

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

       function get_rate(){
   $.ajax({
        type: "GET",
        url: "https://api.manana.kr/exchange/rate.json",
        data: {},
        success: function (response) {
        let now_rate = response[1]['rate'];
            $('#now-rate').text(now_rate);
        }
    })
}

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

</head>

    <body>
        <div class="item-page">
            <div class="item-image"></div>
            <div class="item-info">
                <i>NEW</i>
                <h1 class="item-title">Sony A7IV ILCE-7M4<span class="item-price">3,360,530원</span></h1>
                <p>오늘날의 크리에이터들을 위한 풀프레임 미러리스, a7IV입니다. 풀프레임 베스트셀러 a7의 4세대 바디로서 카메라의 표준을 새로이 제시합니다.</p>
                <P class="rate">달러-원 환율: <span id="now-rate">1219.15</span></P>
            </div>
            <div class="item-order">
                <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">2</option>
                        <option value="3">3</option>
                    </select>
                </div>
                <div class="input-group mb-3">
                    <div class="input-group-prepend">
                        <span class="input-group-text">주소</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">전화번호</span>
                    </div>
                    <input type="text" class="form-control" aria-label="Default"
                           aria-describedby="inputGroup-sizing-default">
                </div>
                <button onclick="hey()" type="button" class="btn btn-primary item-order-btn">주문하기</button>
            </div>
        </div>
    </body>

</html>

3) 완성 화면


profile
권혁준
비전공개발자의 개발일지
이전 포스트

[스파르타코딩클럽] 웹개발 종합반 - 1주차 개발일지+수강후기

다음 포스트

[스파르타코딩클럽] 웹개발 종합반 - 3주차 개발일지

0개의 댓글

관련 채용 정보