[JS/리액트] Ajax 한 눈에 보기 ( jquery / axios 의 공통점과 차이점)

 AJAX요청

JS - jQuery 로 요청

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

리액트 - axios 로 요청 

axios.get("https://codingapple1.github.io/shop/data2.json").then(function(){ });

axios.get("https://codingapple1.github.io/shop/data2.json").then(() => { });

---

jQuery의 $.get와
Axios의 axios.get의 공통점

공통점 >
.done 아니면 .then 뒤에 붙이고 콜백함수넣고 파라미터(data - 작명 자유롭게) 하나 만들기

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

 axios.get("https://codingapple1.github.io/shop/data2.json")
                    .then((결과) => {
                      console.log(결과.data);
                    })
                    .catch(() => {
                      console.log("실패함");
                    });​

요청 실패했을 때 
특정코드 실행할 수 있도록 .catch /.fail 사용

 

---

콜백 함수 존재와
파라미터 사용 이유

done / then 안의 콜백함수 역할

function(data) { ... }
=  콜백함수 부분

done()메서드는 AJAX 요청이 성공적으로 완료되었을 때 실행될 콜백 함수를 지정하는 메서드

AJAX 요청이 완료되면,서버에서 반환된 데이터가 이 콜백 함수에 전달

테이블에 옮겨진 데이터 

function 안에 들은 파라미터 data 의 역할

data는 서버에서 반환된 데이터를 의미

data라는 파라미터는 서버에서 반환된 데이터를 받기 위해 사용

데이터 담는 테이블 위의 그릇 같은 거라고 생각

파라미터 사용하는 이유

= 파라미터는 함수가 호출될 때 전달된 값을 받기 위해

---

파라미터 data 담기

JS

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

리액트

 axios.get("https://codingapple1.github.io/shop/data2.json").then((data) => {console.log(data)});

axios.get("https://codingapple1.github.io/shop/data2.json")
.then((data) => {console.log(data.data)});

---

axios 를 사용하는 경우
뒤에 .data를 더 붙이는 이유

왜 data.data를 사용하는가?

 axios.get("https://codingapple1.github.io/shop/data2.json")
   .then((data) => {console.log(data)});

axios.get("https://codingapple1.github.io/shop/data2.json")
.then((data) => {console.log(data.data)});

axios.get 을 사용하여 서버에서 데이터를 가져오면, 서버는 응답으로 여러 가지 정보를 줍니다.
이 정보들은 하나의 큰 객체(response객체)에 담겨서 옵니다.
이 객체는 실제 데이터뿐만 아니라 요청에 대한 여러 메타정보를 포함합니다.


우편물: 전체 응답 객체 (response)
편지: 실제 데이터 (response.data)
봉투: 응답의 다른 메타정보 (상태 코드, 헤더 등)

axios.get("https://codingapple1.github.io/shop/data2.json")
  .then((response) => {
    console.log(response);  // 우편물 전체를 보여줌 (편지 + 봉투)
  });

서버에서 받은 우편물 전체를 보여줍니다. 즉, 편지와 봉투 모두를 포함하는 것입니다.

axios.get("https://codingapple1.github.io/shop/data2.json")
  .then((response) => {
    console.log(response.data);  // 편지만 꺼내서 보여줌 (실제 데이터만)
  });

뒤에 .data 를 붙임으로서
우편물에서 편지(실제 데이터)만 꺼내서 보여줌. 
즉, 실제 우리가 필요한 정보(데이터) 만을 출력하는 것.

왜 response.data를 사용하는가? >>
전체 응답 객체 (response): 우편물 전체를 말합니다.
여기에는 편지(실제 데이터)뿐만 아니라 봉투(메타정보)도 포함되어 있습니다.

응답 객체의 data 속성 (response.data): 우편물에서 실제 편지(실제 데이터)만
꺼내서 보여주는 것입니다.

요약 >>
**response**는 전체 응답 객체로, 여러 가지 정보를 포함합니다.
**response.data**는 응답 객체의 실제 데이터 부분만을 의미합니다.
대부분의 경우 우리는 실제 데이터만 필요하므로 response.data를 사용합니다.

---

jQuery의 $.get와
Axios의 axios.get의 차이점

js 를 사용할 때, jquery 를 사용하는 경우
axios 처럼 뒤에다가
.data 를 붙이지 않는 지 

// 이렇게 안씀
$.get('https://codingapple1.github.io/hello.txt').done(function(data){
  console.log(data.data)

위에 axios 처럼 .data를 붙이지 않는다.

jQuery의 $.get와
Axios의 axios.get는 서버에서 데이터를 가져오는 데 사용되지만,
반환되는 데이터의 구조와 사용 방법에서 차이를 가짐.

jQuery의 $.get >>

$.get('https://codingapple1.github.io/hello.txt').done(function(data) {
  console.log(data);  // 여기서 data는 실제 데이터 (텍스트)
});

jQuery의 $.get은 서버에서 데이터를 가져올 때 직접 데이터를 반환
즉, 서버에서 받은 데이터가 바로 콜백 함수로 전달. 데이터를 감싸는 추가적인 객체가 없음

data 는 서버에서 반환된 실제 데이터
data 자체가 우리가 필요한 정보

---

$.get('https://codingapple1.github.io/hello.txt').done(function(book) {
  console.log(book);  // 바로 받은 책 (실제 데이터)
});

jQuery의 $.get을 사용하는 것은 마치 서점에서 책을 사서 바로 그 책을 받는 것과 같다.
서점에서 책을 사고, 바로 그 책을 손에 받는다

---

Axios의 axios.get >>

axios.get("https://codingapple1.github.io/shop/data2.json").then((response) => {
  console.log(response.data);  // 여기서 response.data는 실제 데이터
});

Axios의 axios.get 은 서버에서 받은 응답을 하나의 큰 객체로 반환
이 객체는 실제 데이터뿐만 아니라 추가적인 정보를 포함하고 있다

response는 서버 응답 전체를 포함하는 객체.
이 객체 안에 여러 정보가 있고,
우리가 필요한 실제 데이터는 response.data 에 들어 있다.

---

axios.get("https://codingapple1.github.io/shop/data2.json").then((package) => {
  console.log(package.book);  // 책 (실제 데이터)
});

서점에서 책을 사면, 서점 직원이 책과 함께 영수증과 책에 대한 설명서를 함께 주는 것과 같다

서점에서 책을 사고, 책과 함께 영수증과 설명서를 받는다.
우리가 실제로 읽고 싶은 것은 책이지만, 영수증과 설명서도 함께 받는다

package는 책, 영수증, 설명서를 모두 포함하는 큰 봉투.
package.book을 통해 우리가 실제로 원하는 책을 꺼낼 수 있다.

요약

$.get('https://codingapple1.github.io/hello.txt').done(function(data) {
  console.log(data);  // 데이터 자체가 바로 우리가 원하는 정보
});​

jQuery의 $.get: 직접 데이터를 받는다.

axios.get("https://codingapple1.github.io/shop/data2.json").then((response) => {
  console.log(response.data);  // response 안에 있는 data가 우리가 원하는 정보
});​

Axios의 axios.get: 데이터와 추가 정보를 함께 받는다.

jQuery의 $.get에서는 데이터를 직접 받기 때문에
data.data처럼 쓸 필요가 없고,
Axios의 axios.get 에서는 응답 객체에서 실제 데이터를 꺼내기 위해
response.data 를 사용해야 한다

---

 POST 요청

JS

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

$.post("https://codingapple1.github.io/hello.txt", { name: "kim" }).done(
  function (data) {
    console.log(data);
  }
);

리액트

axios.post('URL', {name : 'kim'})

---

서버와 데이터를
주고받을 때는 문자만 가능
= JSON 자동변환 해주는 ( axios / jquery )
= 자동변환 안해주는 ( fetch )

 

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

근데 아까 { price : 5000 } 이런 object 무리없이 받아옴.

=  object를 JSON으로 바꿔서 전송해줬기 때문

 

"{"name" : "kim"}"

이걸 JSON 이라고 한다.

 

axios 라이브러리는 JSON -> object/array 변환작업을 자동으로 해줌.

또한,

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

쌩자바스크립트의 fetch 를 쓸 경우

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

 res.json() 이런 코드 한 줄 추가 해줘야

fetch() 로 가져온 결과를 array/object로 변환

 

결론) 귀찮으면 jQuery나 axios 이런 라이브러리 설치하면 ajax가 약간 더 간편