촬리의늘솔길

2주차 필기/ 개발일지 본문

✍~2022/WEB

2주차 필기/ 개발일지

리촬리 2021. 6. 18. 02:12

jQuery는 미리 작성된 javascript코드

그래서 임포트해줘야함

https://www.w3schools.com/jquery/jquery_get_started.asp

$('#article-url').val()

article-urlt ===id 지정해준 값

id에 맞는 .~에 따라 기능이 달라짐

ex)

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

 

html문자

`(백틱)

 

서버 -클라이언트

JSON

딕셔너리와 리스트의 조합과 생김새가 똑같다.

리스트안에 여러 딕셔너리 있는거

 

클라이언트 - 서버

같은 주소의 창구더라도, GET이냐 post냐에 따라서 가져가야할 데이터라던지, 동작하는 기능이 다름

 

API는 은행 창구와 같은 것!

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

클라이언트가 요청 할 때에도, "타입"이라는 것이 존재합니다.

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

이 중에서 오늘은 GET 방식에 대해 배워보겠습니다. (POST는 4주차에 배웁니다)

 

브라우저에 엔터를 치는 행위 자체가 get요청

code라는 파라미터 값 전달(예시)

요청하는 클라이언트 프로그래머와 요청받는 서버 프로그래머가 약속한 code파라미터 값

 

<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사용

jQuery를 임포트한 페이지에서만 사용가능

 

Ajax기본 골격(외우는거 아님, 외울필요 x)

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

이제 temp_html = <li>${gu_name} : {gu_mise}<\li>

<!-- console.log(temp_html)확인하기 -->

 

 

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 rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?family=Song+Myung&display=swap" rel="stylesheet">
    <style>
        * {
            font-family: 'Song Myung', serif;;
        }

        .mytitle {
            background-color: white;
            width: 300px;
            height: 50px;
            padding top: 20px;
        }

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

        .mybyn {
            width: 500px;
            margin: auto;
            display: block;

        }

        .rates {
            text-align: left;
            color: blue;

        }
    </style>
    <script>//새로고침할때함수불러주는코드
        $(document).ready(function () {
            q1();
        });

        function q1() {
            $("#book-rate").empty()

            $.ajax({
                type: "GET",
                url: "http://spartacodingclub.shop/sparta_api/rate",
                data: {},
                success: function (response) {
                    let rate = response['rate']
                    let temp_html = `<span class = "rates">달러-원 환율: ${rate}</span>`
                    $("#book-rate").append(temp_html)
                }
            })
        }
    </script>
</head>

<body>

<div class="wrap">
    <div class="mytitle"></div>
    <img src='http://image.yes24.com/goods/68145670/XL' width='500' height='400'>
    <h1>책을 팝니다 <span style="font-size:15pt">책의가격 : 42000원/권</h1>
    <h6>이 책을 풀면 저혈압이신 분들도 고혈압이 될 수 있답니다! 아주 좋은 자연 치료제에요~! 다들 구매하신다면 화가 뿜뿜>_<</h6>
    <span id="book-rate"></span>
</div>
<div class="mybyn">

    <div class="input-group mb-3">
        <div class="input-group-prepend">
            <span class="input-group-text" id="basic-addon1">주문자이름</span>
        </div>
        <input type="text" class="form-control" placeholder="Username" aria-label="Username"
               aria-describedby="basic-addon1">
    </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 mb-3">
        <div class="input-group-prepend">
            <span class="input-group-text" id="basic-addon1">주소</span>
        </div>
        <input type="text" class="form-control" placeholder="" aria-label="Username"
               aria-describedby="basic-addon1">
    </div>
    <div class="input-group mb-3">
        <div class="input-group-prepend">
            <span class="input-group-text" id="basic-addon1">전화번호</span>
        </div>
        <input type="text" class="form-control" placeholder="" aria-label="Username"
               aria-describedby="basic-addon1">
    </div>

    <button type="submit" class="btn btn-primary">주문하기</button>
</div>
</div>
</div>
</body>

</html>

결과:

Ajax기본 골격 활용법 잊지않기,

jquery는 검색하면나옴

id값 이용하는거 잊지않기

``기억

728x90

'✍~2022 > WEB' 카테고리의 다른 글

5주차 필기/개발일지  (0) 2021.07.01
4주차 개발/필기일지  (0) 2021.07.01
3주차 필기/개발일지  (0) 2021.06.20
1주차 필기/개발일지  (0) 2021.06.14
개발일지 프롤로그  (0) 2021.05.24
'✍~2022/WEB' Related Articles more