웹 개발 기초 2(JQuery, Ajax)

김범준·2022년 10월 6일
JavaScriptajaxhtmljquery항해99
0

웹 개발 기초(항해99)

목록 보기
2/4

이전 포스팅에는 간단히 페이지를 표시하는데 그쳤다.
서버에서도 마찬가지로 페이지의 코드를 보내주면 이를 브라우저에서 우리가 볼 수 있도록 변환시킨다.

하지만 여기서 HTML의 내용이 길어지고 우리가 봐야할 한 부분의 데이터가 변환되었을때마다 이 모든 것을 새로 받아와야 한다면 이또한 자원의 낭비이다.
때문에 전체 틀에서 특정 데이터만을 최신화 할 수 있는 방법을 알아야 하는데 우선 태그를 가져오고 태그의 속성 등을 변환 시킬 수 있도록 해주는 jQuery, 서버에서 데이터를 요청하는 Ajax에 대해 간단히 알아보려 한다.

jQuery

사실 jQuery는 필수가 아니다. jQuery로 구현할 수 있는 것은 JavaScript로 구현이 가능하다. 그렇다면 jQuery를 왜 쓸까?
이는 JavaScript로 구현시 코드가 길어지며 브라우저간 호환성을 고려해야 하기 때문이다.

이전에 배운 css에서 해당 태그를 표시를 설정하는 display라는 속성이 있다. 이를 "none"로 지정하면 해당태그를 숨긴다. 이를 JavaScript로 수정하여 각 상황에 맞게 변환해야 한다고 하면 아래 코드를 사용한다.

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

그리고 이를 jQuery로 쓰면

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

가 된다. 확실히 코드도 짧아지며 직관적이게 쓸 수 있다.
하지만 이를 쓰기 위해서 <head>영역에 따로 명시를 해줘야 한다

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
※다른 코드에서 가져다 쓰게될때 저러한 형태를 보게되면 마찬가지로 위와같이 명시를 해줘야 제대로 작동한다.

자주쓰는 기능

	$('#element').val(); //해당 요소의 값을 가져온다.
	$('#element').hide(); //해당 요소를 숨긴다.
	$('#element').show(); //숨겨진 해당 요소를 다시 표시한다.
	$('#element').text("바꿀 내용"); //해당 요소의 text를 파라미터로 넣은 '바꿀 내용'으로 교체한다.
	$('#element').append(temp_html) //해당 요소에 파라미터에 들어가는 요소를 추가한다.
	$('#element').attr('src', url) //해당 요소에 src 즉, 링크를 url로 교체한다.

Ajax

Asynchronous JavaScript And XML의 약자로 비동기 자바스크립트와 XML을 말한다.
이는 서버와 통신하기 위해 XMLHttpRequest 객체를 사용하는 것을 말하는데 요청을 보내고 데이터를 받으면 전체를 새로고침하지 않고도 일부분만 수행되는 비동기이다. 때문에 사용자의 Event(버튼을 누른다던가, 마우스를 올린다던가 하는 정의된 행위)가 있으면 일부분만 업데이트가 가능하다.

Ajax 동작 방식

  1. 브라우저를 통해 서버에 정보를 요청한다.
  • 이때 요청시 집어넣을 데이터, 요청할 주소, 요청 방식 등을 정의할 수 있다.
  1. 이후 응답받은 데이터를 페이지에 추가한다.

예시

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

위 예시를 보면 조금 익숙한 느낌을 받을텐데 '$'을 보면 위에서 배운 jQuery가 생각날 것이다.
ajax는 데이터를 받기위한 기술이며 위 코드는 jQuery로 구현된 형태이다.

데이터 표시

위 내용들로 데이터를 받아오는 방법과 현재 페이지의 요소를 바꾸는 방법을 배웠다. 하지만 이는 정말 부품을 배운것으로 이를 활용하는 방법을 배워보자

먼저 아래와같은 Json데이터가 ajax를 통해 http://faulty337.com 에서 받는다고 가정하자

{
  Data: {
      	row: [
      		{
      			name: "김범준",
      			age: 27,
      			email: "faulty337@gmail.com"
    		},
			{..},
			{..},
			{..},
			{..},

		]
	}
}

여기서 json의 형태를 볼줄 알아야 하는데 지금의 형태는 Data라는 변수안에 row라는 변수 안에 name에는 "김범준", age에는 27, email에는 "faulty337@gmail.com"이라는 데이터가 들어갔다.
한마디로 '김범준'의 데이터를 얻기 위해서는 Data안에 row안에 0번째('김범준'의 데이터가 가장 처음에 있기 때문이다)거를 가져와야한다는 뜻이다.
이를 가져오면

	$.ajax({
      type: "GET",
      url: "http://faulty337.com",
      data: {},
      success: function(response){
            let user = response["Data"][row][0];
        	console.log(user);
      }
    })

이런식으로 쓰면 정확히 '김범준'의 데이터가 가져올 수 있게 된다.

위에서도 말했지만 이는 데이터를 가져오는 역할만을 위한것이다. 만약 유저가 페이지에 접속했을 때 콘솔창을 열지 않는 이상 해당 데이터를 볼 수 없다.
데이터는 받아왔으니 이를 유저에게 표시해줘야 하는데 유저가 볼 수 있는 것이라고는 HTML에 써져있는 요소뿐이다.
그렇다면 이 요소를 변경하면 되는데 이때 사용되는게 jQuery이다.
위코드를 살짝 변경하여 이를 가져와서

<head>
  <script>
      $.ajax({
        type: "GET",
        url: "http://faulty337.com",
        data: {},
        success: function(response){
    		let user = response["Data"][row][0];
			let temp_html = `<li>이름 : <span>${user['name']}</span>/<li><li>나이 : <span>${user['age']}</span>/<li><li>이메일 : <span>${user['email']}</span>/<li>`;
      		$('#userdata').append(temp_html);
        }
      })
  </script>
</head>
<body>
  <ul class="userdata">
    <li>이름 : <span></span>/<li>

이렇게 표시하게 되면 <ul>태그 내에 유저정보가 <li>의 형태로 각각 들어가게 된다.

전체 연습코드

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

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
  integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
  integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
  crossorigin="anonymous"></script>

  <title>jQuery 및 ajax 연습하기</title>

  <link href="https://fonts.googleapis.com/css2?family=Gowun+Dodum&display=swap" rel="stylesheet">
  <style>
    * {
      font-family: 'Gowun Dodum', sans-serif;
    }
    .mytitle{
      /*background-color: green;*/

      width: 100%;
      height: 250px;

      background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("https://lh3.googleusercontent.com/1uG4RyrHQBid2gA0Nezc2I-elPnfeLDlTK4p9bQdnhs6hJHqq1PDszbFNKc0Dd-spBTHn1sVoIabIg=w816-h340-p-l90-rj");
      background-position: center;
      background-size: cover;

      color: white;

      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
    }
    .commentList{
      /*width: 300px;*/
      margin-top: 10px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
    }
    .commentList>div{
      margin-top: 10px;
      max-width: 500px;
      width: 95%;
    }

    .mypost{
      max-width: 500px;
      width: 95%;
      /*background-color: green;*/
      margin: 10px auto 0px auto;
      box-shadow: 0px 0px 3px 0px gray;
      padding: 20px;
    }
    .postbutton{
      margin-top: 10px;
    }

  </style>
  <script>
    $(document).ready(function(){
        $.ajax({
        type: "GET",
        url: "---",
        data: {},
        success: function(response){
          let temp = response['temp']
          console.log(temp)
          $('#jeju_temp').text(temp)
        }
      })
    });
  </script>
</head>

<body>
  <div class="mytitle">
    <h1>찰리 푸스(Charlie Puth) 팬명록</h1>
    <p>현재기온 : <span id="jeju_temp">00.0</span>도</p>
  </div>

  <div class="mypost">
    <div class="form-floating mb-3">
      <input type="email" class="form-control" id="floatingInput" placeholder="name@example.com">
      <label for="floatingInput">닉네임</label>
    </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="postbutton">
      <button type="button" class="btn btn-dark">응원 남기기</button>
    </div>

  </div>
  <div class="commentList">
    <div class="card">
    <div class="card-body">
      <blockquote class="blockquote mb-0">
        <p>새로운 앨범 너무 멋져요!</p>
        <footer class="blockquote-footer">호빵맨</footer>
      </blockquote>
    </div>
  </div>
    <div class="card">
    <div class="card-body">
      <blockquote class="blockquote mb-0">
        <p>새로운 앨범 너무 멋져요!</p>
        <footer class="blockquote-footer">호빵맨</footer>
      </blockquote>
    </div>
  </div>
    <div class="card">
    <div class="card-body">
      <blockquote class="blockquote mb-0">
        <p>새로운 앨범 너무 멋져요!</p>
        <footer class="blockquote-footer">호빵맨</footer>
      </blockquote>
    </div>
  </div>
  </div>


</body>

</html>
profile
김범준
그럴싸한 계획을 가지고 있는
이전 포스트

웹 개발 기초 1(HTML, JavaScript, CSS)

다음 포스트

웹 개발 기초 3(Python, 크롤링, MongoDB)

0개의 댓글