[2주차][웹 개발일지] jQuery, AJAX

errSum·2022년 8월 1일

[스파르타코딩클럽][웹개발일지]

목록 보기
2/2

jQuery

jQuery는 JavaScript의 라이브러리중 하나이다. 순수 JavaScript로만 구현하기엔 코드도 복잡하고 브라우저간 호환성 문제도 고려해야하기 때문에, 어려운 기능들을 손쉽게 구현 가능하게 해주며, HTML 제어를 용이하게 만들들어주는 jQuery가 탄생했다.

아래는 예제 코드.

Javascript로 길고 복잡하게 써야 하는 것을

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

jQuery로 보다 직관적으로 쓸 수 있다.

$('#element').hide();

라이브러리 임포팅은 알기 때문에 생략.

jQuery 연습

  1. input 박스의 값 가져와 보기
<div class="form-floating mb-3">
    <input id="url" type="email" class="form-control" placeholder="name@example.com">
    <label>영화URL</label>
</div>

위와 같은 코드에서 id 값을 통해 input 박스 내의 값을 손쉽게 가져올수 있다.

	$('#url').val(); // id 값은 '$(#변수명')을 통해 가져올수 있다.
  1. div 보이기 / 숨기기
<div class="mypost" id="post-box">
    <div class="form-floating mb-3">
        <input id="url" type="email" class="form-control" placeholder="name@example.com">
        <label>영화URL</label>
    </div>
    <div class="input-group mb-3">
        <label class="input-group-text" for="inputGroupSelect01">별점</label>
        <select class="form-select" id="inputGroupSelect01">
            <option selected>-- 선택하기 --</option>
            <option value="1">⭐</option>
            <option value="2">⭐⭐</option>
            <option value="3">⭐⭐⭐</option>
            <option value="4">⭐⭐⭐⭐</option>
            <option value="5">⭐⭐⭐⭐⭐</option>
        </select>
    </div>
    <div class="form-floating">
        <textarea class="form-control" placeholder="Leave a comment here" id="floatingTextarea2"
                  style="height: 100px"></textarea>
        <label for="floatingTextarea2">코멘트</label>
    </div>
    <div class="mybtns">
        <button type="button" class="btn btn-dark">기록하기</button>
        <button type="button" class="btn btn-outline-dark">닫기</button>
    </div>
</div>
// id 값이 post-box인 곳을 가리키고, hide()로 안보이게 한다.
$('#post-box').hide();

// show()로 보이게 한다.
$('#post-box').show();
  1. 태그 내 html 입력하기

div 내에 새로운 엘리먼트를 넣고 싶다면 아래와 같이 작성 할 수 있다.

let temp_html = `<button>나는 추가될 버튼이다!</button>`;
$('#cards-box').append(temp_html);

백틱(`)을 통해 HTML을 작성하듯 추가할 엘리먼트를 변수에 대입하고, 넣고자하는 div id값에 .apppend를 통해 붙여넣어주면 된다.

참고로 백틱을 이용하면 중간에 변수 값 또한 삽입 할 수 있다.

// 주의: 홑따옴표(')가 아닌 backtick(`)으로 감싸야 합니다.
// 숫자 1번 키 왼쪽의 버튼을 누르면 backtick(`)이 입력됩니다.
// backtick을 사용하면 문자 중간에 Javascript 변수를 삽입할 수 있습니다.
let title = '영화 제목이 들어갑니다';

let temp_html = `<div class="col">
				            <div class="card h-100">
				                <img src="https://movie-phinf.pstatic.net/20210728_221/1627440327667GyoYj_JPEG/movie_image.jpg"
				                     class="card-img-top" alt="...">
				                <div class="card-body">
				                    <h5 class="card-title">${title}</h5>
				                    <p class="card-text">여기에 영화에 대한 설명이 들어갑니다.</p>
				                    <p>⭐⭐⭐</p>
				                    <p class="mycomment">나의 한줄 평을 씁니다</p>
				                </div>
				            </div>
				        </div>`;
$('#cards-box').append(temp_html);

백틱 중간에 ${변수명}을 넣어주면 변수 값을 사용할 수 있다.

jQuery 연습문제 3개 풀이

  1. 빈칸 체크 함수 만들기
        function q1() {
            // 1. input-q1의 입력값을 가져온다. $('# .... ').val() 이렇게!
            // 2. 만약 입력값이 빈칸이면 if(입력값=='')
            // 3. alert('입력하세요!') 띄우기
            // 4. alert(입력값) 띄우기

            let temp = $('#input-q1').val(); // input-q1 은 입력 박스의 id 값이다.
            if (temp == '') {
                alert('입력하세요!');
            } else {
                alert(temp);
            }
        }
  1. 이메일 판별 함수 만들기
        function q2() {
            // 1. input-q2 값을 가져온다.
            // 2. 만약 가져온 값에 @가 있으면 (includes 이용하기 - 구글링!)
            // 3. info@gmail.com -> gmail 만 추출해서 ( .split('@') 을 이용하자!)
            // 4. alert(도메인 값);으로 띄우기
            // 5. 만약 이메일이 아니면 '이메일이 아닙니다.' 라는 얼럿 띄우기

            let temp = $('#input-q2').val();
            if (temp.includes('@')) { // includes 함수는 변수 내에 특정 문자열이 존재하는지 검사하는 함수이다.
                let domain = temp.split('@')[1].split('.')[0];
                alert(domain);
            } else {
                alert('이메일이 아닙니다.')
            }
        }
  1. HTML 붙이기 / 지우기 연습

        function q3() {
            // 1. input-q3 값을 가져온다. let txt = ... q1, q2에서 했던 걸 참고!
            // 2. 가져온 값을 이용해 names-q3에 붙일 태그를 만든다. (let temp_html = `<li>${txt}</li>`) 요렇게!
            // 3. 만들어둔 temp_html을 names-q3에 붙인다.(jQuery의 $('...').append(temp_html)을 이용하면 굿!)

            let name = $('#input-q3').val();
            let temp_html = `<li>${name}</li>`
            $('#names-q3').append(temp_html);
        }

        function q3_remove() {
            // 1. names-q3의 내부 태그를 모두 비운다.(jQuery의 $('....').empty()를 이용하면 굿!)
            $('#names-q3').empty();
        }

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

서버에서 클라이언트로 데이터를 가져오는 방식 중 JSON 데이터 구조를 가져오는 것이 간편한 방법중 하나이다.

이런 JSON 데이터를 클라이언트에서 서버로 요청을 하는 방법에는 GET방식과 POST방식이 주로 쓰이는데, 이번 주차에선 GET방식에 대해 자세히 알아보았다.

GET 요청 이해하기

GET은 통상적으로, 데이터 조회(Read)를 요청할 때 쓰이고
POST는 데이터 생성(Create), 변경(Update), 삭제(Delete)를 요청 할 때 쓰인다고 한다.

아래 네이버영화 주소를 자세히 보자

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 (인코딩 정보)

이때, code라던지 q, sourceid,ie 같은 이름으로 데이터를 요청하라고 정한것은 프론트엔드 개발자와 백엔드 개발자가 미리 정해둔 약속이다. 그렇기 때문에 이런 API 요청서를 정확히 작성하지 않으면 문제가 발생할 확률이 크다.

Ajax

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

Ajax의 기본 골격을 보자.

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

아래는 각 키에 대한 설명이다.

  • 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 값에 서버의 결과 값을 담아서 함수를 실행한다.

👉 결과가 어떻게 response에 들어가는지는 그냥 받아들이는걸루...
(대부분의 개발자들도 내부 원리는 코드를 안 뜯어봐서 모른다고 한다...)

    success: function(response){ // 서버에서 준 결과를 response라는 변수에 담음
      console.log(response) 
    }

Ajax 연습

  $.ajax({
    type: "GET",
    url: "http://spartacodingclub.shop/sparta_api/seoulair",
    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);
    }
  })

위 코드는 서울시 미세먼지 API의 JSON 데이터를 GET방식으로 가져와 11번째 있는 구이름과 미세먼지 값을 로그로 출력하는 코드이다. 실제 API 주소에 접속하면 사진과 같이 JSON 형태의 데이터를 띄고 있는 것을 알 수 있다.

Ajax 활용

지금까지 배운 것을 모두 활용하여 랜덤으로 이미지와 텍스트를 서버 데이터에서 받아와 버튼을 누를 때마다 바뀌는 사이트를 구현해 보았다.

참고로 jQuery를 통해 이미지와 텍스트는 아래와 같이 바꿀 수 있다.

  • 이미지 바꾸기 : $("#아이디값").attr("src", 이미지URL);
  • 텍스트 바꾸기 : $("#아이디값").text("바꾸고 싶은 텍스트");

참고로 서버에서 제공하는 이미지와 텍스트는 실시간으로 바뀌기 때문에 랜덤으로 나온다.

<!doctype html>
<html lang="ko">
  <head>
    <meta charset="UTF-8">
    <title>JQuery 연습하고 가기!</title>
    <!-- JQuery를 import 합니다 -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    
    <style type="text/css">
      div.question-box {
        margin: 10px 0 20px 0;
      }
      div.question-box > div {
        margin-top: 30px;
      }
      
    </style>

    <script>
      function q1() {
        $.ajax({
          type: "GET",
          url: "http://spartacodingclub.shop/sparta_api/rtan",
          data: {},
          success: function(response){
              let imgurl = response['url'];
              $("#img-rtan").attr("src", imgurl);

              let msg = response['msg'];
              $("#text-rtan").text(msg);
            }
          })
      }
    </script>

  </head>
  <body>
    <h1>JQuery+Ajax의 조합을 연습하자!</h1>

    <hr/>

    <div class="question-box">
      <h2>3. 르탄이 API를 이용하기!</h2>
      <p>아래를 르탄이 사진으로 바꿔주세요</p>
      <p>업데이트 버튼을 누를 때마다 지웠다 새로 씌여져야 합니다.</p>
      <button onclick="q1()">르탄이 나와</button>
      <div>
        <img id="img-rtan" width="300" src="http://spartacodingclub.shop/static/images/rtans/SpartaIcon11.png"/>
        <h1 id="text-rtan">나는 ㅇㅇㅇ하는 르탄이!</h1>
      </div>
    </div>
  </body>
</html>

📝 숙제

1주차에 완성한 팬명록에 날씨 정보를 넣기!
로딩이 완료되면,날씨API을 이용해서 날씨를 표시하는 것.

  <!doctype html>
  <html lang="en">

  <head>
    
 <!-- 생략 -->
    
    <style>
      *{
        font-family: 'Stylish', sans-serif;
      }

      .title {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;

        width: 100%;
        height: 250px;

        background-image:  linear-gradient(0deg, rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.35)), url("https://img.hankyung.com/photo/201909/2019093009473121424-540x540.jpg");
        background-position: center;
        background-size: cover;

        color: white;
      }

 <!-- 생략 -->
      
    </style>

    <script>
      $(document).ready(function () {
        $.ajax({
          type: "GET",
          url: "http://spartacodingclub.shop/sparta_api/weather/seoul",
          data: {},
          success: function (response) {
            $('#tempura').text(response['temp'])
          }
        })
      });
    </script>

  </head>

  <body>
    <div class="title">
      <h1 class="titleText">이바다 팬명록</h1>
      <p>현재기온 : <span id="tempura">00.0</span>도</p>
    </div>
 <!-- 생략 -->
  </body>

  </html>

대부분이 1주차와 코드가 같아 생략을 많이 했다. ready 함수는 이미 알고 있기도 해서 별로 어렵지 않았다.

브라우저에서 로딩이 완료 되면 코드를 실행하는 함수가 ready 함수이다.

$(document).ready(function(){ (실행할 코드) })

위 결과물과 같이 타이틀 글 하단에 현재 기온이 서울시의 실시간 온도가 불러와진다.

끝!

profile
errSum
Future' ME
이전 포스트

[1주차][웹 개발일지] HTML,CSS,JavaScript 연습

0개의 댓글