ajax 서버 요청

1. 서버란?

유저가 데이터를 잘라고 요청했을 때 데이터를 보내주는 곳이다.
데이터를 요청할 때는 정확한 규격에 맞춰서 요청해야 한다.
1. 어떤 데이터인지(url 형식으로)
2. 어떤 방법으로 요청할지(GET or POST)

2. GET/POST 요청하는 방법?

GET 요청을 보내는 가장 쉬운 방법은 브라우저 주소창이다.
url을 적으면 그곳으로 GET요청을 보낸다.

POST 요청을 보내고 싶으면

<form action="요청할 url" method="post">

태그를 이용하면 된다. 그럼 form에 전송되었을 때 POST 요청을 보내준다.

단점 : 요청이 보내질 때마다 브라우저가 새로고침 된다.

3. AJAX란?

서버에 GET, POST 요청을 할 때 새로고침 없이 데이터를 주고받을 수 있게 도와주는 간단한 브라우저 기능이다.
새로고침 없이도 쇼핑몰 상품을 더 가져올 수 있고,
새로고침 없이도 댓글을 서버로 전송할 수 있다.

4. AJAX로 GET/POST 요청 보내는 방법

1. XMLHttpRequest 라는 문법 쓰기
2. fetch() 문법 쓰기
3. axios 외부 라이브러리 쓰기

npm i axios

axios를 쓰려면 설치해준다.

5. AJAX 요청하는 법

import axios from 'axios'

function App(){
  return (
    <button onClick={()=>{
      axios.get('https://codingapple1.github.io/shop/data2.json').then((결과)=>{
        console.log(결과.data)
      })
      .catch(()=>{
        console.log('실패함')
      })
    }}>버튼</button>
  )
}

1. 설치 후 상단에 import 해온다.
2. axios.get('url') 해당 url로 GET 요청이 된다.
3. 데이터 가죠온 결과는 결과.data 안에 들어있다.
4. 인터넷이 안되거나 url이 이상하다면 실패하는데, 실패했을 때 실행할 코드는 .catch() 안에 적으면 된다.

6. 서버로 데이터 전송하는 POST 요청

서버에서 데이터를 받아오는 것 뿐만 아니라 데이터를 서버로 전송하는 것도 가능하다.
전송할때는 보통 post요청을 쓴다.

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

받아오는 방식과 마찬가지로 url을 입력하고 그 뒤에 데이터를 실어 보낼 수 있다.

7. 동시에 ajax 요청 여러개 하려면

Promise.all([axios.get('/url1'), axios.get('/url2')])
.then(()=>{
  // 실행할 코드
}

promise내의 요청이 모두 성공했을 경우 then 안의 코드가 실행된다.

8. 원래 서버와 문자만 주고받을 수 있다.

array 잘 받아지는데?

"{ "content" : "ali and taobao", }"

""따옴표로 감싸서 문자열로 인식하게 하면 array, object 자료도 주고받기가 가능하다.
원래는 JSON파일로 받아지지만 axios가 자동으로 array로 바꿔준다.

9. fetch

fetch('url')

라이브러리를 쓰지 않고도 get요청이 가능하다.

fetch('url')
.then(결과=>결과.json()) // json -> array/object 변환과정
.then(data=>{})

fetch를 쓰면 array/object로 변환하지 않고 json파일 그대로 가져온다.
josn -> array/object 변환 과정이 필요
axios 라이브러리를 쓰는 이유다. 변화해주는 과정을 안 써도 된다.

10. ajax로 가져온 데이터를 html로 받을 때 에러가 나는 이유

ajax 요청보다 html 렌더링이 더 빠른 경우 에러가 날 수 있다.
if문으로 데이터가 있다면 보여주고 아니라면 "로딩중"과 같은 화면을 보여주는 방법이 있다.