자바스크립트> Ajax 1 : 개념정리 & 상품더보기(데이터가져와서 작성)

서버란?

 

유저가 데이터달라고 요청을 하면 데이터를 보내주는 간단한 프로그램일 뿐입니다.

네이버웹툰 서버 : 유저가 웹툰 달라고 하면 웹툰 보내주는 프로그램

유튜브 서버 : 유저가 영상 달라고 하면 영상 보내주는 프로그램

입니다. 

 

근데 그냥 데이터달라고 떼쓰면 주는게 아니라

서버에 데이터를 요청할 때는

1. 어떤 데이터인지 url로 잘 기재해야하고

2. 어떤 방법으로 요청할지 결정해야 (GET/POST 등)

데이터를 보내줍니다. 

 

 

예를 들어서 쇼미더럭키짱이라는 네이버웹툰을 보고싶으면

https://comic.naver.com/webtoon/list?titleId=783054 여기로 GET요청하면 보내줍니다.

예를 들어서 독립일기라는 네이버웹툰을 보고싶으면

https://comic.naver.com/webtoon/list?titleId=748105 여기로 GET요청하면 보내줍니다.

 

 

 

 

 

GET/POST 요청하는 법?

 

GET요청은 서버에 있던 데이터를 읽고싶을 때 주로 사용하고

POST요청은 서버로 데이터를 보내고 싶을 때 사용합니다.

(서버는 유저데이터를 DB에 저장해주는 역할도 해서요)

실은 PUT, DELETE 요청도 있긴 합니다. 

 

 

GET요청을 날리고 싶으면 가장 쉬운 방법은 브라우저 주소창입니다.

거기에 url 적으면 그 곳으로 GET요청을 날려줍니다.

진짠지 테스트해보셈 

 

POST요청을 날리고 싶으면

<form action="요청할url" method="post"> 태그 이용하면 됩니다.

그럼 폼이 전송되었을 때 POST요청을 날려줍니다. 

 

근데 GET, POST 요청을 저렇게 날리면 단점이 뭐냐면 브라우저가 새로고침됩니다.

 

 

 

 

 

 

AJAX란? 

 

서버에 GET, POST 요청을 할 때 새로고침 없이 데이터를 주고받을 수 있게 도와주는

간단한 브라우저 기능을 AJAX라고 합니다. 

그거 쓰면 새로고침 없이도 쇼핑몰 상품을 더 가져올 수도 있고

새로고침 없이도 댓글을 서버로 전송할 수도 있고 

그런 기능을 만들 수 있는 것임 

 

 

 

 

 

 

 

jQuery로 AJAX요청하기 

 

$.get() 라는 함수를 쓰고 안에 url만 잘 기입하면 됩니다. 

연습삼아서 https://codingapple1.github.io/hello.txt 여기로 GET요청해보십시오.

그럼 인삿말을 하나 가져올 수 있습니다. 

 

$.get('https://codingapple1.github.io/hello.txt');

이러면 진짜 데이터 가져옵니다.

안되면 html파일 미리보기가 제대로 안떠있는 것입니다.

브라우저 주소창에 127.0.0.1:어쩌구 이렇게 떠있어야합니다.

VScode는 live server 익스텐션 설치하면 됩니다. 

 

 

$.get('https://codingapple1.github.io/hello.txt').done(function(data){
  console.log(data)
});

근데 가져온 데이터가 어디 들어있냐면 

.done 아니면 .then 뒤에 붙이고 콜백함수넣고 파라미터 하나 만들면 거기에 들어있습니다.

진짜 인삿말 들어있는지 출력해봅시다. 

 

 

 

$.post('url~~', {name : 'kim'})

서버로 데이터를 보낼 수 있는 POST요청을 날리고 싶으면 이렇게 씁니다.

url 잘 적고 뒤에 서버로 보낼 데이터를 적으면 됩니다.

당연히 얘도 .done 이런거 붙이기 가능

 

 

 

설명하다

 

$.get('https://codingapple1.github.io/hello.txt')
  .done(function(data){
    console.log(data)
  })
  .fail(function(error){
    console.log('실패함')
  });

ajax 요청 성공시 .done 안에 있는 코드를 실행해줍니다.

ajax 요청 실패시 .fail 안에 있는 코드를 실행해줍니다. 

error 저거 출력해보면 에러관련 정보를 출력해줍니다. 그거 보고 디버깅하면 됩니다.

예를 들어 404 이런 에러코드는 url 이 잘못되었다는 뜻입니다. 

 

done/fail 말고 then/catch 써도 됩니다. 

 

 

 

 

 

Q. 다음 url로 GET요청을 해서 가격정보를 가져와 콘솔창에 출력해보십시오.

https://codingapple1.github.io/price.json 여기로 GET요청하면 오늘의 상품가격을 알려줍니다.

콘솔창에 5000이 뜨면 성공이고 쉬우니 답은 없고 알아서 해봅시다.

 

 

 

 

 

쌩자바스크립트는 fetch 이런거써서 AJAX 요청가능

 

설명하다

 

fetch('https://codingapple1.github.io/price.json')
  .then(res => res.json())
  .then(function(data){
    console.log(data)
  })
  .catch(function(error){
    console.log('실패함')
  });

fetch 함수는 Edge 브라우저 이상에서만 동작합니다.

근데 코드가 한 줄 더 필요한 이유가 뭐냐면 

 

 

서버와 데이터를 주고받을 때는 문자만 주고받을 수 있습니다.

array, object 이런거 전송불가능 

근데 아까 { price : 5000 } 이런 object 무리없이 받아왔죠?

어떻게 한거냐면 object를 JSON으로 바꿔서 전송해줘서 그렇습니다.

 

array 아니면 object에 따옴표를 다 쳐서 '{ "price" : 5000 }' 대충 이렇게 만들면 JSON이라는 자료가 됩니다. 

JSON은 문자로 인식하기 때문에 서버와 데이터주고받기가 가능합니다. 

 

하지만 

jQuery의 $.get() 이런건 JSON으로 자료가 도착하면 알아서 array/object 자료로 바꿔줍니다.

기본함수 fetch() 이런건 JSON으로 자료가 도착하면 알아서 array/object 자료로 바꿔주지 않습니다.

그래서 fetch() 로 가져온 결과를 array/object로 바꾸고 싶으면 res.json() 이런 코드 한 줄 추가하면 됩니다. 

 

그게 귀찮으면 jQuery나 axios 이런 라이브러리 설치하면 ajax가 약간 더 간편해집니다.

 

var products = 생략;

products.forEach((a, i)=>{
      var 템플릿 = 
      `<div class="col-sm-4">
        <img src="https://via.placeholder.com/600" class="w-100">
        <h5>${products[i].title}</h5>
        <p>가격 : ${products[i].price}</p>
      </div>`;
      $('.row').append(템플릿)
});

 

상품 더보기 버튼누르면 상품3개 가져오기

 

버튼하나 만들고 그거 누르면 상품을 더 가져와봅시다.

https://codingapple1.github.io/js/more1.json 여기로 GET요청하면 상품 3개 데이터를 보내줍니다.

버튼누르면 상품데이터 가져와서 콘솔창에 출력해보십시오.

 

<div class="container">
  <button class="btn btn-danger" id="more">더보기</button>
</div>

<script>
  $('#more').click(function(){
    $.get('https://codingapple1.github.io/js/more1.json')
      .done((data)=>{
        console.log(data)
      });
  });
</script><div class="container">
  <button class="btn btn-danger" id="more">더보기</button>
</div>

<script>
  $('#more').click(function(){
    $.get('https://codingapple1.github.io/js/more1.json')
      .done((data)=>{
        console.log(data)
      });
  });
</script>

 

 

 

 

 

 

가져온 데이터로 카드 3개 만들기

 

버튼누르면 데이터는 잘 가져오고 있는데 

가져온 데이터로 카드레이아웃을 3개 더 만들어봅시다. 

그래서 버튼 누르면 카드레이아웃이 3개 더 생성되면 성공입니다.

그리고 더 가져온 상품제목, 가격도 html에 잘 박혀있으면 됩니다. 

알아서 코드짜보도록 합시다. 

 

<div class="container">
  <button class="btn btn-danger" id="more">더보기</button>
</div>

<script>
  $('#more').click(function(){
    $.get('https://codingapple1.github.io/js/more1.json')
      .done((data)=>{
        
        data.forEach((a, i)=>{
          var 템플릿 = 
          `<div class="col-sm-4">
            <img src="https://via.placeholder.com/600" class="w-100">
            <h5>${data[i].title}</h5>
            <p>가격 : ${data[i].price}</p>
          </div>`;
          $('.row').append(템플릿)
        })
        
      });
  });
</script>

 

 

 

 

오늘의 응용문제

 

1. 더보기버튼을 2번째 누르면 7,8,9번째 상품을 더 가져와서 html로 보여주십시오

https://codingapple1.github.io/js/more2.json 여기로 GET요청하면 7,8,9번째 상품이 도착합니다.

 

 

힌트는 유저가 더보기버튼을 몇 번 눌렀는지를 어디 기록해놔야

내가 버튼 누를 때마다 어디로 GET요청할 지 판단할 수 있겠군요. 

그리고 그 다음 10,11,12번 상품은 없으니

버튼을 3번은 못누르게 버튼을 숨기거나 그래도 좋을듯요 

 

 

 

2. 유사한 코드가 발생하고 있습니다.

지금 코드를 잘 보면 forEach() 반복문을 2번 쓴 것 같은데 

이 코드들이 매우 유사해보입니다.

함수나 그런걸로 축약해보는 연습도 해보면 좋을 것 같군요 

 

 

힌트는 

함수로 축약할 때 안에 미지의 변수같은게 있으면 파라미터로 바꾸는게 좋다고 했는데

a, i 이런 변수는 이미 콜백함수에 의해 파라미터화가 되어있기 때문에 a, i는 신경안써도 될듯요

 

 var clickCount = 0;

         $('#more').on('click', function() {

        clickCount++;

        if (clickCount == 1) {

            $('#more').click(function(){

             $.get('https://codingapple1.github.io/js/more1.json')

            .done((data)=>{

             console.log(data);

         

             data.forEach((a, i)=>{

          var 템플릿 =

          `<div class="col-sm-4">

           

            <h5>${data[i].title}</h5>

            <p>가격 : ${data[i].price}</p>

          </div>`;

          $('.row').append(템플릿)

        })  

       })

 })

} else if(clickCount == 2)

$('#more').click(function(){

             $.get('https://codingapple1.github.io/js/more2.json')

            .done((data)=>{

             console.log(data);

         

             data.forEach((a, i)=>{

          var 템플릿 =

          `<div class="col-sm-4">

           

            <h5>${data[i].title}</h5>

            <p>가격 : ${data[i].price}</p>

          </div>`;

          $('.row').append(템플릿);

          $('.btn').remove();

        })  

       })

 })

})