ajax

서버란?

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

서버에 데이터를 요청할 때는 정확한 규격에 맞춰서 요청해야하는데

1. 어떤 데이터인지 (URL 형식으로)

2. 어떤 방법으로 요청할지 (GET or POST)

잘 기재해야 데이터를 보내준다.

데이터를 가져올 때는 보통 GET 고르면 되고
데이터를 서버로 보낼 때는 POST 고르면 됨.

GET/POST 요청하는 법?

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

POST요청을 날리고 싶으면
<form action="요청할url" method="post"> 태그 이용.
그럼 폼이 전송되었을 때 POST요청을 날려쥼.

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

AJAX란?

서버에 GET, POST 요청을 할 때
새로고침 없이 데이터를 주고받을 수 있게 도와주는
간단한 브라우저 기능을 AJAX라고 한다.

AJAX로 GET/POST요청하려면 방법 3개 중 택1 ㄲ.

1. XMLHttpRequest라는 옛날 문법 쓰기

2. fetch() 라는 최신 문법 쓰기

3. axios 같은 외부 라이브러리 쓰기

난 axios 쓸 거니까, axios 다운받고 ㄱ ㄱ

npm install axios 

AJAX 요청하는 법

버튼누르면 서버로 ajax 요청을 해보쟈.

import axios from 'axios'

function App(){
  return (
    <button onClick={()=>{
      axios.get('url')
      .then((result)=>{
        console.log(result.data)
      })
      .catch(()=>{
        console.log('실패함')
      })
    }}>버튼</button>
  )
}

1. axios를 쓰려면 상단에서 import해오고

2. axios.get(URL) 이러면 그 URL로 GET요청이 됨.

3. 데이터 가져온 결과는 결과.data 안에 들어있.

그래서 위의 버튼 누르면 서버에서 가져온 데이터가 콘솔창에 출력된다.

4. 인터넷이 안되거나 URL이 이상하면 실패하는데
   실패했을 때 실행할 코드는 .catch() 안에 적으면 된다.

POST요청 하는 법

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

동시에 AJAX 요청 여러개 날리려면

Promise.all( [axios.get('URL1'), axios.get('URL2')] )

---

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

하지만, object/array 자료에 따옴표를 쳐놓아 문자자료로 바꾸면 됨.

"{"name" : "kim"}"

이걸 JSON 이라고 한다.

JSON은 문자 취급을 받기 때문에 서버와 자유롭게 주고받을 수 있.

그래서 실제로 결과.data 출력해보면 따옴표쳐진 JSON이 나와야하는데

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

출력해보면 object/array가 나온다.

fetch는 그런거 안해줘서 json변경 코드 작성해야됨.

fetch('URL')
.then(결과 => 결과.json())
.then((결과) => { console.log(결과) } )