[스파르타 코딩 클럽] Web 개발 2주차 수강 후기/ 개발 일지

zae·2021년 7월 19일
APIjquerystudyweb
0

WEB

목록 보기
4/4

1주차에는 마냥 쉬웠던 것 같은데 확실히 2주차가 되니까 죠큼 어렵다..^
그래도 해야지 `ㅁ'

jQuery

jQuery는 'javascript를 미리 작성해둔 것'이라고 생각할 수 있다.
즉 라이브러리같은 느낌?!
이 jQuery를 이용해 코드를 짧게 작성할 수 있다.
jQuery를 사용하려면 import가 꼭! 필요한데, 사용 방법은 다음과 같다.

jQuery 사용법

  1. 다음 링크에 들어간다 -> 누르세요잇
  2. google CDN을 복사한 후 head 태그 안에 넣는다
  • 여기서 알아둘 점은, 전에 포스팅한 '부트 스트랩'을 사용하면 이미
    코드가 들어가 있기 때문에 중복으로 넣을 필요가 없다는 점!

자주 쓰는 jQuery

1. input 박스의 값 가져오기
id를 넣어주어 콘솔창에서 $('#id_name').val();을 통해 값을 불러온다.
2. 보이기/숨기기
숨기기(hide) -> $('#id_name').hide();
보이기(show) -> $('#id_name').show();

3. css 값 가져오기 - display 속성 값 가져오기
$('#id_name').css('display');
해당 내용을 작성하면, block(속성) 혹은 none으로 나온다.

4. 태그 내 텍스트 입력
만약 텍스트를 바꾸고 싶다면, $('#id_name').text('바꿀값')

5. 태그 내 html 입력
(이건 코드로 작성하겠습니당)

let temp_html = `<button> 버튼이당</button>`  // ``를 꼭 사용해줘야 한다!

$('#cards-box').append(temp_html)  // 추가 해주는 코드

서버-클라이언트 통신 이해

JSON이란?

서버에서 클라이언트로 데이터 전송을 할 때 사용하는 포멧

API란?

애플리케이션 프로그래밍 인터페이스(Application Programming Interface)로 은행 창구와 같은 역할을 한다. ('type'에 따라 요청하는 데이터가 다름)
GET : 데이터 조회(read)를 요청할 때
POST : 데이터 생성(create), 변경(update), 삭제(delete)를 요청할 때

Ajax

'비동기적 정보 교환 기법'으로 jQuery를 import한 페이지에서만 동작한다! 중요!
Ajax는 기본 골격 코드를 다른 곳에 적어두면 복사해 사용하기 편하다!

기본 골격 코드

$.ajax({
  type: "GET",
  url: "여기에URL을입력",
  data: {}, // get 요청시엔 비워두기
  success: function(response){
    console.log(response) // 예시
  }
})

미세먼지 API, 따릉이 API, 고양이 Open API를 이용해 Ajax를 연습하는 시간을 가졌다.
url은 API url 주소를 넣으면 되고,
response를 이용해 값을 정해주면 된다.

위 내용을 조합해 만든 1주차 HW였던 쇼핑몰 페이지를 업그레이드 해봤다.
이번 2주차 내용은 환율 API를 이용해 로딩하면 오늘의 환율을 보여주는 코드였다.

+ 로딩하자마자 나타나는 코드

$(document).ready(function(){
	// 들어갈 내용 - script 태그 안에 위 내용을 넣어주면 된다.
});

2주차 HW code - 환율 API를 이용해 환율 나타내기

밑 코드는 너무 기니까 이 링크 눌러서 source 구경하러 가보기!
유기묘 후원 물품 쇼핑몰 페이지

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

<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=Song+Myung&display=swap" rel="stylesheet">

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

    function R1() {
        $.ajax({
            type: "GET",
            url: "http://spartacodingclub.shop/sparta_api/rate",
            data: {}, // get 요청시엔 비워두기
            success: function (response) {
                let now_rate = response['rate']
                $('#rateHere').text(now_rate)
            }
        })
    }

    function order(){
        alert("주문 완료!");
    }
</script>

<title>유기묘 후원 물품.₊̣̇.ಇ/ᐠˬ ͜ ˬ ᐟ\∫.₊̣̇.</title>

<style>
    * {
        font-family: 'Song Myung', serif;
    }

    .imageClass {
        width: 650px;
        margin: auto;
    }

    .textClass {
        width: 600px;
        margin: 20px auto 40px auto;
    }

    .orderClass {
        width: 600px;
        margin: auto;
    }

    .buttonClass {
        background-color: pink;
        width: 110px;
        margin: 40px auto 40px auto;
    }

    .realClass {
        width: 950px;
        height: 300px;
        margin: auto;
    }

    .rateClass{
        color : blueviolet;
        width : 600px;
        margin: auto;
    }
</style>
``` 
<body>
<div class="imageClass">
    <div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
        <div class="carousel-inner">
            <div class="carousel-item active">
                <img class="d-block w-100"
                     src="https://image.idus.com/image/files/e74c559a75494d589109e58bff7ed0d4_1440.jpg"
                     alt="First slide">
            </div>
            <div class="carousel-item">
                <img class="d-block w-100"
                     src="https://image.idus.com/image/files/2f71c0afae52430582374b8db32c65f4_1440.png"
                     alt="Second slide">
            </div>
            <div class="carousel-item">
                <img class="d-block w-100"
                     src="https://image.idus.com/image/files/44237cf203ee4c248bacce5ac1126f82_1440.jpg"
                     alt="Third slide">
            </div>
        </div>
        <a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
            <span class="sr-only">Previous</span>
        </a>
        <a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
            <span class="carousel-control-next-icon" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
        </a>
    </div>
</div>
<div class="textClass">
    <h1>❤유기묘 후원 물품❤</h1>가격 | 반지-12,000원 / 팔찌-8,000원 / 목걸이-10,000원
    <p></p>
    <p>쓸쓸한 길 위에서 혼자 길을 헤메고 있을 길고양이들을 위해 기부해주세요 :)</p>
    <p>반지, 팔찌, 목걸이 구매시 수입금의 80%를 유기묘 후원 단체에 기부합니다.</p>
    <p>모두 뜻깊은 기부에 동참해주시길 바랍니다 :)</p>
</div>

<p class="rateClass">환율 : <span id="rateHere">1234.56</span></p>

<div class="orderClass">
    <h2>주문하기</h2>

    <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=""
               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="유기묘 후원 반지">유기묘 후원 반지</option>
            <option value="유기묘 후원 팔찌">유기묘 후원 팔찌</option>
            <option value="유기묘 후원 목걸이">유기묘 후원 목걸이</option>
        </select>
    </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" id="basic-addon1">주문자 주소</span>
        </div>
        <input type="text" class="form-control" placeholder="" aria-label=""
               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=""
               aria-describedby="basic-addon1">
    </div>
</div>
<div class="buttonClass" onclick="order()">
    <button type="button" class="btn btn-warning">구매 및 기부하기</button>
</div>
<div class="realClass">
    <div class="card-group">
        <div class="card">
            <div class="card-body">
                <h5 class="card-title">실제 유기묘 후원 반지 구매</h5>
                <p class="card-text">유기견, 유기묘 유기동물 후원 반지</p>
                <p class="card-text"><small class="text-muted">14,000원</small></p>
                <a href="https://www.idus.com/w/product/990182f5-7813-4b77-bcd8-8a391d071505" class="card-link"
                   style="color:gold">구매 페이지
                    이동</a>
            </div>
        </div>
        <div class="card">
            <div class="card-body">
                <h5 class="card-title">실제 유기묘 후원 팔찌 구매</h5>
                <p class="card-text">유기견유기묘 후원 팔찌 써지컬</p>
                <p class="card-text"><small class="text-muted">10,000원</small></p>
                <a href="https://www.idus.com/w/product/499427a0-74fe-4e5d-8fed-bdb0629ee99c?keyword_channel=user&search_word=%EC%9C%A0%EA%B8%B0%EB%AC%98%20%ED%9B%84%EC%9B%90%20%ED%8C%94%EC%B0%8C"
                   class="card-link" style="color:gold">구매 페이지 이동</a>
            </div>
        </div>
        <div class="card">
            <div class="card-body">
                <h5 class="card-title">실제 유기묘 후원 목걸이 구매</h5>
                <p class="card-text">유기견, 유기묘 유기동물 후원 목걸이</p>
                <p class="card-text"><small class="text-muted">12,000원</small></p>
                <a href="https://www.idus.com/w/product/f609cb06-c7ea-428e-87b2-1cde5097676f?keyword_channel=user&search_word=%EC%9C%A0%EA%B8%B0%EB%AC%98%20%ED%9B%84%EC%9B%90%20%EB%AA%A9%EA%B1%B8%EC%9D%B4"
                   class="card-link" style="color:gold">구매 페이지 이동</a>
            </div>
        </div>
    </div>
</div>
</body>

</html>

어마무시 짱짱 기네..? velog에서도 hide와 show 이용해서 토글 형태로 만들 수 있다면 나중에 다시 수정해봐야겠다. 쨌든 이번 주차도 많은 것을 배워 뿌듯하다!

profile
zae
코린이 성장 과정! 깊이 있게 파고들 공부를 탐색하고 있습니다 :)
이전 포스트

[스파르타 코딩 클럽] Web 개발 1주차 강의 내용 및 개발 일지

0개의 댓글