개발 일기

[개발 일기] 왕초보 시작반 2주차 by 스파르타코딩클럽

건브로 2021. 6. 23. 17:38

안녕하세요 건브로입니다.

이번에 배운 내용은 jQuery와 Ajax였습니다.

저는 온라인 강의를 들을 때마다 jQuery를 사용하는 것보다 바닐라 자바스크립트 쓰는 게

좋다고 들었습니다. 하지만, 이 강의는 왕초보를 위한 강의여서 그런지

코드를 직관적이고, 간단하게 쓸 수 있게 강의가 구성되었습니다. 

제 생각엔 웹 개발할 때 팀원들과 소통이 되려면 모두 다 해보는 게  맞는 것 같습니다.

1. jQuery

jQuery는 자바스크립트를 미리 만들어 놓은 라이브러리이다.

라이브러리여서 jQuery를 사용하려면 위 사진처럼 script태그 형식으로 넣어서 사용해도 되고,

아니면 라이브러리를 다운로드하여서 사용해도 된다.

만약 script 태그 형식으로 하고 싶으면 아래 링크에 들어가서 Google CDN을 복사하자

 

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

 

jQuery Get Started

jQuery Get Started Adding jQuery to Your Web Pages There are several ways to start using jQuery on your web site. You can: Download the jQuery library from jQuery.com Include jQuery from a CDN, like Google Downloading jQuery There are two versions of jQuer

www.w3schools.com

 

주로 사용한 jQuery 코드는 아래와 같다.

$('#아이디').val();
//input태그에서 주로 사용한다. val()만 사용하면 값을 가져올 수 있고, val('안녕')이라고 하면 값을 바꿀 수 있다.
$('#아이디').empty();
//선택한 요소의 내용을 삭제한다.
$('#아이디').append();
//해당 요소의 자식태그로 추가하거나, 문자를 추가할 수 있다.
$('#아이디').attr('속성이름', [값]);
//태그의 속성 값을 가져올 때 사용한다. 물론 수정도 가능한데, 수정할 때는 옵션에 바꿀 값을 넣으면 된다.
$('#아이디').hide();
//hide는 해당 요소의 CSS의 display 속성 값을 none으로 바꾼다.
$('#아이디').show();
//hide와는 반대로 해당 요소의 CSS의 display 속성 값을 block으로 바꾼다.
$('#아이디').css('css속성');
//css속성은 해당 요소의 'display', 'background'와 같은 속성들의 값을 가져온다.
$('#아이디').text(['값']);
//해당 요소의 문자열을 가져오거나 값이와도 된다. 수정 할 때 값이 온다.

여기 코드를 보면 주로 요소가 아이디로 되어있는데,

클래스도 들어 올 수도 있다.

2. Ajax

Ajax는  JavaScript의 라이브러리 중 하나이며

Asynchronous Javascript And Xml(비동기식 자바스크립트와 xml)의 약자이다.

주로 우리가 form을 사용해서 데이터를 주고받고 하면 새로고침이 되기 마련이다.

하지만, Ajax를 사용하면 화면 전환이 일어나지 않고 비동기 통신을 한다.

 

이렇게 되면 사용자의 불만을 줄일 수도 있고, 개발자도

언제 어디서나 데이터를 서버한테 요청할 수 있게 된다.

 

Ajax 코드는 아래와 같다.

 

$.ajax({
  type: "GET", // GET 방식으로 요청한다.
  url: "URL",
  data: {}, // 요청하면서 함께 줄 데이터 (GET 요청시엔 비워두기!)
  success: function(response){ // 서버에서 준 결과를 response라는 변수에 담음
    console.log(response) // 서버에서 준 결과를 이용해서 나머지 코드를 작성
  }
})

 

ajax는 함수이며, 그 안에 객체 형식으로 키와 값으로 넣으면 된다.

type이 get일 때는 주로 데이터를 조회할 때이며,

post일 때는 데이터를 생성, 조회, 삭제 시 사용된다.

url에는 말 그대로 url을 입력하면 된다.

data의 값은 get을 사용할 때는 비워두고, post를 사용할 때 데이터를 넣으면 된다.

success 함수는 성공적으로 서버와 통신에 성공했을 때 실행하는 함수이다.

그래서 매개변수로 response가 오고, response에는 우리에게 필요한 값이 담겨 있다.

 

3. jQuery와 Ajax를 이용한 과제

Ajax와 Jquery를 이용한 과제

<!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>
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?family=Jua&display=swap" rel="stylesheet">
    <title>스파르타코딩클럽 | 부트스트랩 연습하기</title>
    <style>
        * {
            font-family: 'Jua', sans-serif;
        }

        .mainWrap {
            width: 700px;
            margin: auto;
        }

        .wrap1 {
            width: 700px;
            height: 1000px;
            background-image: url("https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTKhsDyGC9K2_u9NNmP2FZHf8FbliZSfCFzJg&usqp=CAU");
            background-size: cover;
            margin: 20px 0px;
        }
        #exchange-rate{
            color: blue;
        }

        .orderBtn {
            display: block;
            width: 100px;
            margin: auto;
        }
    </style>
    <script>
        $(document).ready(function () {
            calculate();
        });

        function calculate() {
            $.ajax({
                type: "GET", // GET 방식으로 요청한다.
                url: "URL",
                data: {}, // 요청하면서 함께 줄 데이터 (GET 요청시엔 비워두세요)
                success: function (response) { // 서버에서 준 결과를 response라는 변수에 담음
                    let rate = response['rate'];
                    $('#exchange-rate').append(rate);
                }
            })
        }
    </script>
</head>

<body>
<div class="mainWrap">
    <div class="wrap1"></div>
    <div class="wrap2">
        <h2>전공책 팔겠습니다!! <small>가격: 8900원/개</small></h2>
        <p>이 전공책은 제가 수강 신청했다가 저와 맞지 않는 것 같아서 수강포기 했습니다..
            원래는 35000원인데 많이 깎아서 8900원입니다!! </p>
    </div>
    <div class="wrap3">
        <h4 id="exchange-rate">달러·원 활율: </h4>
        <div class="form-group row">
            <label for="customer" class="col-sm-2 col-form-label">주문자 성함:</label>
            <div class="col-sm-5">
                <input type="text" class="form-control" id="customer">
            </div>
        </div>
        <div class="form-group row">
            <label for="address" class="col-sm-2 col-form-label">수량:</label>
            <div class="dropdown">
                <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton"
                        data-toggle="dropdown"
                        aria-haspopup="true" aria-expanded="false">
                    -- 수량 --
                </button>
                <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
                    <a class="dropdown-item" href="#">1</a>
                    <a class="dropdown-item" href="#">2</a>
                    <a class="dropdown-item" href="#">3</a>
                    <a class="dropdown-item" href="#">4</a>
                    <a class="dropdown-item" href="#">5</a>
                    <a class="dropdown-item" href="#">6</a>
                </div>
            </div>
        </div>
        <div class="form-group row">
            <label for="address" class="col-sm-2 col-form-label">주소:</label>
            <div class="col-sm-5">
                <input type="text" class="form-control" id="address">
            </div>
        </div>
        <div class="form-group row">
            <label for="number" class="col-sm-2 col-form-label">전화번호:</label>
            <div class="col-sm-5">
                <input type="number" class="form-control" id="number">
            </div>
        </div>
    </div>
    <button type="button" class="btn btn-primary orderBtn">주문하기</button>
</div>
</body>

</html>

 

위 코드는 저번에 1주 차 때 만들었던 코드에 새로 Ajax와 jQuery를 추가한 것이다.

처음에 화면이 로드될 때 함수가 실행되도록 하는 함수 $(document).ready(function(){calculate()})를 이용한다.

그리고 그 함수 안에 있는 calculate함수를 호출하여 환율 API를 적용한다. 

 

4. 느낀 점

점점 재밌어지고 있고, 내가 코딩을 하면서 벽을 느꼈던 쪽이 서버 쪽이었다.

그리고 3주 차가 서버랑 관련이 있는 주제이기 때문에 더 집중해서 들어야겠다.

파이팅하자! 

'개발 일기' 카테고리의 다른 글

[개발 일기] 왕초보 시작반 4주차 by 스파르타코딩클럽  (0) 2021.06.30
[개발 일기] 왕초보 시작반 3주차 by 스파르타코딩클럽  (0) 2021.06.26
[개발 일기] 왕초보 시작반 1주차 by 스파르타코딩클럽  (0) 2021.06.20
[개발 일기] Feeding Plants 만들기 #2  (0) 2021.02.17
[개발 일기] Feeding Plants 만들기 #1  (0) 2021.02.15

'개발 일기'의 다른글

  • 현재글[개발 일기] 왕초보 시작반 2주차 by 스파르타코딩클럽

관련글

티스토리툴바