항해 99 5기

항해99 5기 시작전 웹개발 종합반 2주차 리뷰

65살까지 코딩 2021. 12. 11. 19:14
728x90
반응형

2주차 역시 중요하다고 생각하는 것만 다시 한번 복기

  • jQery는 미리 javascript 코드로 작성된 라이브러리로 쉽고 직관적으로 코드를 줄여준다.

예시

//라이브러리 import
<script src="jquery-3.5.1.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

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

//jQuery
$('#element').hide();
  • Json은 데이터 교환 형식으로 dictionary와 유사한 형태로 key와 value로 이루어져 있다. 예로http://openapi.seoul.go.kr:8088/6d4d776b466c656533356a4b4b5872/json/RealtimeCityAir/1/99가있다.
  • 요청방식은 여러가지가 있는데 GET과 POST 방식이 주로 사용된다. 
  • GET 방식은 클라이언트가 서버측 데이터에 대해서 무언가를 변경하지 않고 단순히 가져오거나 보는데 사용된다. (Read)
  • Post는 무언가를 변경하는 데 사용된다.(Create, Update, Delete)
  • 즉 GET은 원격 데이터를 검색하는데 사용되며 POST는 원격 데이터를 삽입/업데이트/삭제하는데 사용된다.
  • GET 방식으로 데이터를 전달하는 방법 url의 ?부터 시작하여 &는 전달할 데이터가 더 있다는 것이다.예를 들어https://codingstudytrace.tistory.com/manage/newpost/?type=post&returnURL=%2Fmanage%2Fposts%2F여기서 tpye이라는 키값과 post라는 벨류, returnURL이라는 key값과 %2Fmanage%2Fposts%2F라는 벨류값이 있는 것이다.
  • Ajax는 Jquery가 import되야 하며 기본적인 골격은 다음과 같다. 
    $.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: "POST", // POST 방식으로 요청한다.
  url: "http://openapi.seoul.go.kr:8088/6d4d776b466c656533356a4b4b5872/json/RealtimeCityAir/1/99",
  data: {param: 'value', param2: 'value2'}, // 요청하면서 함께 줄 데이터 
  success: function(response){ // 서버에서 준 결과를 response라는 변수에 담음
    console.log(response) // 서버에서 준 결과를 이용해서 나머지 코드를 작성
  }
})​

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

    <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=Black+Han+Sans&display=swap" rel="stylesheet">
    <!-- 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>
    <style>
        * {
            font-family: 'Black Han Sans', sans-serif;
        }

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

        .image {
            width: 500px;
            height: 400px;
            background-image: url("https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSEBRVdDHxxmfslbKBP1zErGvWZIlQ83Fj0VQ&usqp=CAU");
            background-size: cover;
            background-position: center;
        }

        h1 {
            display: inline;
        }

        .mybtn {
            text-align: center;
            width: 500px;
            margin: auto;

        }
    </style>
    <title>스파르타코딩클럽 | 부트스트랩 연습하기</title>

    <script>
                $(document).ready(function(){
	                q1();
                });
                function q1(){
                    $.ajax({
                        type: "GET",
                        url : "http://spartacodingclub.shop/sparta_api/rate",
                        data: {},
                        success: function (response){
                            let change = response['rate'];
                            $('.content').append(`<p style="color: blue">달러/원 환율:${change}</p>`);
                        }
                    })
                }
    </script>
</head>

<body>
    <div class="wrap">

        <div class="image">

        </div>
        <div class="content">
            <h1>아이맥을 팝니다</h1>
            <span>가격:100만원/대</span>
            <p>
                이 컴퓨터는 어마무시한 성능을 가지고 있으며 디자인도 탁월해 많은 사람들이 사용하는 컴퓨터입니다.
            </p>
        </div>

        <div class="form">
            <div class="input-group input-group-sm mb-3">
                <div class="input-group-prepend">
                    <span class="input-group-text" id="inputGroup-sizing-sm">주문자 이름</span>
                </div>
                <input type="text" class="form-control" aria-label="Small" aria-describedby="inputGroup-sizing-sm">
            </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">One</option>
                    <option value="2">Two</option>
                    <option value="3">Three</option>
                </select>
            </div>
            <div class="input-group input-group-sm mb-3">
                <div class="input-group-prepend">
                    <span class="input-group-text" id="inputGroup-sizing-sm">주소</span>
                </div>
                <input type="text" class="form-control" aria-label="Small" aria-describedby="inputGroup-sizing-sm">
            </div>
            <div class="input-group input-group-sm mb-3">
                <div class="input-group-prepend">
                    <span class="input-group-text" id="inputGroup-sizing-sm">전화번호</span>
                </div>
                <input type="text" class="form-control" aria-label="Small" aria-describedby="inputGroup-sizing-sm">
            </div>
        </div>
        <div class="mybtn">
            <button type="button" class="btn btn-primary">주문하기</button>
        </div>
    </div>
</body>

</html>

 

728x90
반응형