본문 바로가기
코딩/개발일지 TIL

(2주차) JQuery 와 Ajax 알기

by summer indigo 2021. 9. 5.

JavaScript와 관련된 부분들인 JQuery와 Ajax에 대해 배웠다.

 

출처: Pixabay 로부터 입수된  Pexels 님의 이미지

jQuery란? 

jQuery(제이쿼리)는 JavaScript 라이브러리로 JavaScript를 더욱 쉽고 빠르게 작성할 수 있도록 해줍니다.

JavaScript는 프로그래밍 언어인 반면 jQuery는 JavaScript 코드의 모음인 것입니다.  jQuery 외에도 여러 JavaScript 라이브러리들이 있지만 그 중에서 jQuery가 가장 유명하고 개발자들 사이에서 가장 많이 사용되며 좀 더 직관적이라 쓰기 쉽다고 합니다.

 

jQuery 사용 방법

jQuery를 사용하기 위해서는 임포트 해야 하는데, 이 방법으로는 jQuery를 직접 다운 받는 것과 CDN 호스트를 사용하는 방법이 있습니다.

제가 사용한 방법은 CDN 호스트를 통한 것으로 HTML의 head 사이에 아래와 같이 코드를 넣으면 된다.  

<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>

참고 링크: 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 문법과 시행착오 >

  • script 안에 내용을 작성함
  • CSS를 사용하기 위해 class 를 사용한 것처럼, JQuery를 사용하는데에 id 를 사용함

id에 입력한 내용을 (body에 있는 내용)

<div class="mytitle" id="title-box"> </div>

script에 가져다가 사용하기 위해  $("# id명 ")  으로 입력해서 사용함.

$("#title-box").val()

val() 외에

hide()

show()

empty()

css('width')

css('width','700px')

css('display') = block

text('룰루랄라') --> text가 '룰루랄라' 로 바뀜

등 다양하게 사용할 수 있음. 

 

*** cf. 찾아본 결과 꼭 jQuery를 가져오기 위해 id 만 사용하는 것은 아닌 것 같다. 

참고 링크: https://www.webheads.co.kr/gnu/bbs/board.php?bo_table=tip&wr_id=172

 

웹헤즈, 활용 Tip, javascript / jquery 를 이용한 id, name, class 값 가져오기

lt;div class=test_class id=test_id name=test_namegt;lt;/divgt; jquery 사용 유무에 따라 나눠서 말씀 드리겠습니다. Jquery 사용시. //id로 접근하여 가져오기 var name_by_id = $('#test_id�

www.webheads.co.kr

 

  • 많이 사용하는 것
$(document).ready(function(){ })
let temp_html = `<tr><th scope="row">${name}</th>
                    <td>${number}</td>
                    <td>${address}</td>
                    <td>${phone}</td></tr>`
$('#title-box').append(temp_html)

temp_html 을 설정할 때 사용하는  `  는 백틱(back tick)으로 작은 따옴표가 아님! 

append()는 컨텐츠를 선택된 요소 내부의 끝 부분에서 삽입하는 것.

 

  • 많이한 실수 1 - 백틱을 두번 치고 그 사이에 필요한 값을 입력한 줄 알았는데 백틱이 하나밖에 없었음
  • 많이한 실수 2 - 복붙하다 보니 괄호가 개수가 안 맞아서 실행이 안 됨 

서버 - 클라이언트 통신

정보가 서버 --> 클라이언트 (클라이언트가 서버한테 요청함) 로 이동할 때 전달해 주는 데이터의 형식(포멧)이 JSON 

JSON View라는 크롬 확장팩 설치하면 정보를 깔끔하게 볼 수 있습니다.

JSON의 특징은 dictionary형 자료랑 list형 자료를 같이 볼 수 있다는 것입니다. 

 

정보가 클라이언트 --> 서버 (클라이언트에서 서버로 요청함) 로 이동할 때는 타입이 get 요청과 post 요청으로 나뉩니다. 

get 요청 post 요청
통상적으로 데이터 조회(read)를 요청 통상적으로 데이터 생성(create), 변경(update), 삭제(delete)를 요청

 

Ajax란?

Ajax(에이젝스)는 새로고침 없이(페이지 전환 없이) 클라이언트가 요청한 값(정보)을 서버에서 받아올 수 있게 합니다. 

 

< Ajax의 기본 골격 >

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

get 요청의 경우에는  data: { }  를 비워두기!

 

jQuery와 Ajax를 함께 사용한 예시 (get 요청)

    <script>
        function q1() {
            $('#names-q1').empty();
            $.ajax({
                type: "GET",
                url: "http://spartacodingclub.shop/sparta_api/seoulbike",
                data: {},
                success: function (response) {
                    let rows = response["getStationList"]["row"];
                    for (let i = 0; i < rows.length; i++) {
                        let rack_name = rows[i]['stationName'];
                        let rack_cnt = rows[i]['rackTotCnt'];
                        let bike_cnt = rows[i]['parkingBikeTotCnt'];
                        let temp_html = '';
                        if (bike_cnt < 5) {
                            temp_html = `<tr class="urgent">
                                <td>${rack_name}</td>
                                <td>${rack_cnt}</td>
                                <td>${bike_cnt}</td>
                              </tr>`
                        } else {
                            temp_html = `<tr>
                                <td>${rack_name}</td>
                                <td>${rack_cnt}</td>
                                <td>${bike_cnt}</td>
                              </tr>`
                        }
                        $('#names-q1').append(temp_html);
                    }
                }
            })
        }
    </script>
  • q1( )은 body에  <button onclick="q1( )"> 으로 설정되어 있는데, 해당 버튼을 누르면
    • id가 "names-q1"인 영역이 비워지고 
    • Ajax에 넣은 내용을 부르는 것 
  • 큰따옴표, 작은따옴표에 든 내용은 url 에 있는 자료의 이름값  
  •  for (let i = 0; i < rows.length; i ++)  는 1주차 때 배운 반복문 
  •  rows[i]['stationName']  는 i번째 'row'에 'stationName' 값을 가져오는 것
  •  $('#names-q1').empty  는 위처럼 Ajax 앞에 넣어도 되고, 아니면 Ajax 안에,  let rows = response[ ]  앞에 넣는 것도 가능

 

  • 활용했던 다른 자료에서는 'getStationList' 와 'row' 같은 이름값이 없어서 어떻게 해야할지 고민을 많이 했고 혼자서는 생각 못했었는데 
    •  response[0] 으로 작성하면 되는 것이었다. (아래 코드)
    • 이 자료 url의 경우는 하나의 자료가 새로고침하면 랜덤으로 바뀌는 것이었기 때문에 [0] 으로 해서 하나 있는 자료를 가져오는 것이었다. 
    • cf. attr( ) 는 이미지태그의 src를 바꾸는데 활용
<script>
      function q1() {
        $.ajax({
          type: "GET",
          url: "https://api.thecatapi.com/v1/images/search",
          data: {},
          success: function(response){
              let imgurl = response[0]['url'];
              $("#img-cat").attr("src", imgurl);
            }
          })
      }
    </script>

 

jQuery 문법

참고 링크: http://tcpschool.com/jquery/jq_basic_syntax

 

코딩교육 티씨피스쿨

4차산업혁명, 코딩교육, 소프트웨어교육, 코딩기초, SW코딩, 기초코딩부터 자바 파이썬 등

tcpschool.com

 

JSON View 확장팩 다운로드

참고 링크: https://chrome.google.com/webstore/detail/jsonview/chklaanhfefbnpoihckbnefhakgolnmc?hl=ko 

 

JSONView

Validate and view JSON documents

chrome.google.com

 

 

저작자표시 비영리 변경금지 (새창열림)

'코딩 > 개발일지 TIL' 카테고리의 다른 글

팀 프로젝트 (1) 기획 및 코딩 공부 | 공유 여행 기록장 만들기  (0) 2021.10.06
모바일 버전 만들기, JavaScript 시행착오 | 취미 전시관 만들기 (2일차)  (1) 2021.09.15
hover 기능, 이미지 주소 설정 등 | 취미 전시관 만들기 (1일차)  (0) 2021.09.15
제2회 스파르톤 참가! 생존일지  (4) 2021.09.04
(1주차) 코딩 시작 ! HTML, CSS, JavaScript 배우기  (0) 2021.08.29

관련글

댓글

티스토리툴바