[스파르타_웹개발종합] 2주차_JQuery & Ajax

et Ji·2022년 10월 10일

ajax jquery 스파르타 웹개발종합

TIL

목록 보기

2/40

학습일자 : 22.10.7 ~ 10.9

2. 1 - 2 강 JQuery 시작하기

JQuery란? CSS를 간단하게 사용하게 도와주는 부트스트랩처럼, 자바스크립트를 조작하기 쉽도록 미리 작성해둔 코드의 모음집이다. 라이브러리라고 한다.

2. 3 강_JQuery 다뤄보기 (1)

※ 아이디가 url 이라고 가정했을 때.

$(’요소’).val( ) : 인풋창 값 제어

// 값 바꾸기 (val = value)
$('#url').val('입력을 하고싶다')
S.fn.init [input#url.form-control]
// 값 가져오기
$('#url').val()
'입력을 하고싶다'

$(’요소’).hide( ), $(’요소’).show( ) : 요소 숨기기 / 보여주기

$('#post-box').hide()
$('#post-box').show()

2. 4 강_JQuery 다뤄보기 (2)

$(’요소’).append(추가할 요소) : 요소 추가하기

let temp_html = `<div class="col">
                <div class="card">
                    <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">여기에 제목이 들어갑니다.</h5>
                        <p class="card-text">여기에는 내용이 들어갑니다.</p>
                        <p>⭐⭐⭐</p>
                        <p class="mycomment">여기에 코멘트가 들어갑니다.</p>
                    </div>
                </div>
            </div>`

('#cards-box').append(temp_html);

2. 7 강_JQuery 다뤄보기 (2)

$(’요소’).append(추가할 요소) : 요소 추가하기

let temp_html = <div class="col">
<div class="card">
  <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">여기에 제목이 들어갑니다.</h5>
      <p class="card-text">여기에는 내용이 들어갑니다.</p>
      <p>⭐⭐⭐</p>
      <p class="mycomment">여기에 코멘트가 들어갑니다.</p>
    </div>
    </div>
</div>
('#cards-box').append(temp_html);

2. 8 강_ 서버-클라이언트 통신 이해하기

💡 용어설명

JSON :
- Key:Value로 이루어져 있으며, 리스트와 딕셔너리의 조합이라고 생각하면 쉽다.
- 비동기 브라우저/서버 통신 (AJAX)을 위해, 넓게는 XML(AJAX가 사용)을 대체하는 주요 데이터 포맷이다.
- 특히, 인터넷에서 자료를 주고 받을 때 그 자료를 표현하는 방법으로 알려져 있다.
AJAX :
- 비동기 자바스크립트와 XML (Asynchronous JavaScript And XML)을 말한다.
  간단히 말하면, 서버와 통신하기 위해 XMLHttpRequest 객체를 사용하는 것.
- JSON, XML, HTML 그리고 일반 텍스트 형식 등을 포함한 다양한 포맷을 주고 받을 수 있다. AJAX의 강력한 특징은 페이지 전체를 리프레쉬 하지 않고서도 수행 되는 "비동기성"이다.

1) 서버 ▶ 클라이언트 : "JSON"을 이해하기

서버로부터 데이터를 내려주는 형태 중 하나인 JSON을 활용

2) 클라이언트 ▶ 서버 : GET 요청 이해하기

클라이언트가 서버에게 데이터를 요청할 때, API를 통해 데이터 타입에 따른 요청을 하게 된다.

👉 API는 은행 창구와 같은 것!
같은 예금 창구에서도 개인 고객이냐 기업 고객이냐에 따라
가져와야 하는 것 / 처리해주는 것이 다른 것처럼,
클라이언트가 요청 할 때에도, "타입"이라는 것이 존재.

API의 타입 (아래 외에도 추가적으로 더 있음)

GET : 통상적으로 데이터 조회(Read)를 요청할 때
예) 영화 목록 조회

GET 요청 이해하기

GET 방식은 서버와 클라이언트 간의 약속된 부분으로,

URL에 code라는 값으로 숫자를 담아서 서버에 전달하면,  서버가 클라이언트에게 code에 해당하는 정보를 돌려준다. 

프론트엔드 : *"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 방식으로 데이터를 전달하는 방법

URL뒤에 ? 를 사용하여 Parameter를 작성하게 되고 & 을 붙여 여러개의 Parameter를 구분


?  : 여기서부터 전달할 데이터가 작성된다는 의미
& : 전달할 데이터가 더 있다는 뜻

예시) google.com/search?q=아이폰&sourceid=chrome&ie=UTF-8

         위 주소는 google.com의 search 창구에 다음 정보를 전달
         q=아이폰                        (검색어)
	       sourceid=chrome           (브라우저 정보)
         ie=UTF-8                      (인코딩 정보)

POST : 통상적으로 데이터 생성(Create), 변경(Update), 삭제(Delete) 요청 할 때
예) 회원가입, 회원탈퇴, 비밀번호 수정

2. 9 강_ Ajax 시작하기

1) Ajax 시작하기

📒 참고

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

Ajax 기본 골격

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

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 요청시엔 비워두세요)
success: 성공하면, response 값에 서버의 결과 값을 담아서 함수를 실행한다.

👉
GET 요청은, url뒤에 아래와 같이 붙여서 데이터를 가져갑니다.
http://naver.com?param=value¶m2=value2
POST 요청은, data : {} 에 넣어서 데이터를 가져갑니다.
data: { param: 'value', param2: 'value2' },

2. 10 _ Ajax 함께 연습하기

서울시 OpenAPI(실시간 미세먼지 상태)를 이용하기

success 에서 response를 받는다
- **success**: **function (response)** { 실행 코드 }
받은 response 데이터에서 필요한 부분의 데이터를 추출한다.
- success: function (response) { let rows = response["RealtimeCityAir"]["row"];
추출한 데이터를 변수에 담아 html 에 추가한다.
- let temp_html = <li>${gu_name} : ${gu_mise}</li>
$('#names-q1').append(temp_html);

포인트 코드

<head>
<!-- jQuery를 import 합니다 -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

<script>
function q1() {
            // 여기에 코드를 입력하세요
            $('#names-q1').empty();
            $.ajax({
                type: "GET",
                url: "http://spartacodingclub.shop/sparta_api/seoulair",
                data: {},
                success: function (response) {
                    **let rows = response["RealtimeCityAir"]["row"];
                    for (let i = 0; i < rows.length; i++) {
                        let gu_name = rows[i]['MSRSTE_NM'];
                        let gu_mise = rows[i]['IDEX_MVL'];
                        let temp_html = `<li>${gu_name} : ${gu_mise}</li>`
                        $('#names-q1').append(temp_html);**
                    }
                }
            })
        }
	</script>
</head>

2.11 - 12_ Quiz_Ajax 연습하기(2)

서울시 OpenAPI(실시간 따릉이 현황)을 보여주는 표

! ) 배치 자전거가 5대 미만이면 빨간색으로 보여주기

5대 미만이면 특정 클래스가 추가되도록하여 , 특정 클래스의 style을 따로 지정해준다.

포인트 코드

<head>
    <!-- JQuery를 import 합니다 -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<style type="text/css">
    .urgent {
        color: red;
        font-weight: bold;
    }
</style>
<script>
	function q1() {
          $('#names-q1').empty()
          $.ajax({
              type: 'GET',
              url: 'http://spartacodingclub.shop/sparta_api/seoulbike',
              data: {},
              success: function (response) {
                  // console.log(response)
                  let rows = response['getStationList']['row']
                  for (let i = 0; i < rows.length; i++) {
                      let name = rows[i]['stationName']
                      let rack = rows[i]['rackTotCnt']
                      let bike = rows[i]['shared']
                      // let temp_html = `<tr>
                      //                     <td>${name}</td>
                      //                     <td>${rack}</td>
                      //                     <td>${bike}</td>
                      //                 </tr>`
                      // $('#names-q1').append(temp_html)
                      // console.log(name, rack, bike)
                      let temp_html = ''
                      if(bike < 5){
                          temp_html = `<tr class="urgent">
                                          <td>${name}</td>
                                          <td>${rack}</td>
                                          <td>${bike}</td>
                                      </tr>`
                      } else {
                          temp_html = `<tr>
                                          <td>${name}</td>
                                          <td>${rack}</td>
                                          <td>${bike}</td>
                                      </tr>`
                      }
                      $('#names-q1').append(temp_html)
                  }
              }
          })
      }
</script>
<body>
		<tbody id="names-q1">
				<!-<tr>-->
				<!--<td>104. 합정역 1번출구 앞</td>-->
				<!--<td>16</td>-->
				<!--<td>0</td>-->
				<!--</tr>-->
    </tbody>
</body>

2.13_ Quiz_Ajax 연습하기(3)

르탄이 이미지, 텍스트 랜덤하게 바꾸기

📒 TIP

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

<head>
		<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>
		<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>
</body>

💡 배운 내용

AJAX 와 JQuery를 사용하여 코드 작성하는 법

⁉️ 어려웠던 내용

서버와 클라이언트의 데이터 교류 방식

❎ 한 번 더 공부할 내용

API 종류와 사용 방법 ( POST까지 배우고 한번 더 정리하기 )

🎯 문제와 해결

📗 출처

스파르타 코딩클럽 - 웹개발 종합반 수업 자료
MDN

et Ji

codesign

이전 포스트

[스파르타_웹개발종합] 1주차_HTML, CSS, JS 기초

다음 포스트