React : Ajax : Axios / fetch 의 차이 , 서버 통신 과정.

갓데미 2022. 7. 13. 21:28

서버로 데이터 요청하는 방법은 여러가지가 있습니다.

가장 흔한 방법은 브라우저 주소창에 url을 넣는 것이고,

ajax를 통해서 자바스크립트 코드로 요청을 하는 방법이 있습니다.

AJAX 란?

AJAX는 Asynchronous JavaScript and XML의 약자로, JavaScript와 XML을 이용해서 비동기적으로 서버와 통신하는 기법.
요즘엔 XML 보다는 대부분 JSON을 사용합니다. 용어와 실제 기술간의 차이가 커져서 약어가 아닌 고유명사로 취급하고 있습니다.

Url로 get 요청시 새로 페이지를 받아오기 때문에 새로고침이 진행되지만,

자바스크립트 ajax는 새로고침 없이 서버와 데이터 주고받을 수 있다는 장점이 있습니다.

ajax 안에는 세가지 방법이 있습니다. XMLHttpRequest 방식은 이제는 많이 쓰지 않고, 두번째 fetch와 axios 라이브러리를 이용한 방법을 많이 씁니다.

- XMLHttpRequest 예전

- fetch() 현재

- axios 외부 라이브러리를 이용하는 방법.

<button onClick={() => {
  axios.get('https://codingapple1.github.io/shop/data2.json')
  .then((result) => { 
    console.log(result) })
}}></button>

.then 다음에 콜백함수에서 인자로 받아온 result 이것이, 서버에서 받아온 데이터 그 자체입니다.

-> 단순히 데이터 값 만이 아닌, 여러가지 정보가 들어 있습니다. 요청 성공 여부, header 등등..

그냥 데이터 자체만 보고 싶다면 result.data 를 통해서 data 값으로 접근하면 됩니다.

그러면 다른 정보들 말고 데이터 값만 나오게 됩니다. 어레이 안의 오브젝트 형식으로 받아옵니다.

이 자료들을 기존 어레이에 추가하고 싶다면, concat 혹은 아래와 같은 방식으로 합치면 됩니다.

let copy = […기존자료, …result.data] <— 이런 방식.

Spread 연산자로 배열을 벗겨주어서 … ->> [{} {} {} , {} {} {}] 이렇게 되는 것.

그리고 기존자료변경(copy).

Fetch 이용하기

axios 라이브러리가 아닌, fetch()로 진행할 경우에는 아래와 같은 방식으로 진행됩니다.

fetch("API 주소", {
  method: "POST",
  body: JSON.stringify({
    email: id,
    password: pw,
  }),
})
.then((response) => response.json())
.then((result) => console.log("결과: ", result));

fetch를 이용할 경우 직접 데이터를 json화 시켜주어야 합니다. axios라는 라이브러리는 result => .json(), json화 를 생략하게 합니다.

fetch는 internet explore 에서 동작 하지 않습니다.

fetch("https://jsonplaceholder.typicode.com/posts/")
  .then((response) => response.json())
  .then((data) => console.log(data));

Axios , fetch의 차이

axios	fetch
써드파티 라이브러리로 설치가 필요	현대 브라우저에 빌트인이라 설치 필요 없음
XSRF 보호를 해준다.	별도 보호 없음
data 속성을 사용	body 속성을 사용
data는 object를 포함한다	body는 문자열화 되어있다
status가 200이고 statusText가 ‘OK’이면 성공이다	응답객체가 ok 속성을 포함하면 성공이다
자동으로 JSON데이터 형식으로 변환된다	.json()메서드를 사용해야 한다.
요청을 취소할 수 있고 타임아웃을 걸 수 있다.	해당 기능 존재 하지않음
HTTP 요청을 가로챌수 있음	기본적으로 제공하지 않음
download진행에 대해 기본적인 지원을 함	지원하지 않음
좀더 많은 브라우저에 지원됨	Chrome 42+, Firefox 39+, Edge 14+, and Safari 10.1+이상에 지원

참고사이트 : https://inpa.tistory.com/entry/AXIOS-%F0%9F%93%9A-%EC%84%A4%EC%B9%98-%EC%82%AC%EC%9A%A9

서버로 데이터 보낼 때

서버에서 데이터를 get 해오는게 아니라, 로그인 인증 / 인가와 같이 서버로 데이터를 보낸 이후에 받아오는 상황이라면,

post method를 사용합니다. post 요청시 key 값에 대해서. 백엔드에서 {email : "" , password :"" } 형태로 주세요! 와 같이 사전에 협의가 되어 있어야 합니다.

서버에서는 클라이언트가 요청한 정보를 받아서, 토큰을 보내준다다던지, 통신 실패에 대한 설명등을 json형태의 데이터로 보내줍니다.

클라이언트는 그걸 받아서 맞는지 틀린지 분기 처리를 할 수 있습니다.

JSON에 대하여.

서버에 데이터를 보낼 때 오브젝트를 JSON화 시켜서 서버에 보냅니다. 서버에서 오브젝트를 읽기 못하기 때문입니다.

서로 알고 있는 공통의 json 언어로 바꿔서 주고 받는 거라고 생각하면 됩니다.

받아올 때 마찬가지로 서버에서 보낸 JSON언어 데이터를 자바스크립트 언어로 변환해서 사용합니다.

로그인 소통.

+ access token 과 Jwt 의 개념 / http의 stateless

프론트 - 백엔드 test / ajax 요청 실패할 경우

개발자도구 - 네트워크를 통한 확인

개발자 도구 - 네트워크를 열어 endpoint 가 찍힐 것. 들어오지 않았다면 연결 자체가 안 됐을 때의 확인사항 체크

1) 연결이 안되었을 때

동일한 WIFI 를 사용하고 있는지 확인.
fetch 함수가 실행이 되는지 확인.
API 주소에 http://10.58.8.116:8000/users/signup 과 같이 http:// , IP주소 , 포트번호 , 엔드포인트 다 작성이 잘 되었는지 확인.
백엔드 IP 주소 재확인.
백엔드 서버가 열려 있는지 확인.

2) 연결은 되었을 때

fetch 함수의 syntax 확인.
body 에 담아서 전달해 주어야 하는 정보중 누락된 것이 있는지 확인.
body 에 key 값이 올바르게 들어갔는지 확인.

+ 400에러 프론트 / 500에러 백엔드.

추가로 catch method를 이용해서 에러 상황을 대비할 수 있습니다.

<button onClick={() => {
  axios.get('https://codingapple1.github.io/shop/data2.json')
  .then((result) => { 
    console.log(result) })
  .catch(() => {
    console.log("실패하였습니다.")
  })
}}></button>

.then 대신 .catch 를 쓰고 오류 시에 실행할 작업을 콜백함수를 통해 지정해 주면 됩니다.

버튼 클릭 후 로딩 중 글자 띄우기.

자료들을 받아오는 시간동안 로딩 화면을 띄우고 싶다면 아래 위치에 값을 입력해 주면 됩니다.

      <button onClick={() => {

<<여기에다가 로딩중 ui 띄우기>>>>

              axios.get('https://codingapple1.github.io/shop/data2.json')
              .then((result) => {console.log(result) 

<<<<<<< 로딩중 ui 숨기기 >>>>})

              .catch(() => { console.log("실패하였습니다.")
              })
              }}></button>

ajax를 여러곳으로 하고 싶을 때

axios.get(‘url1’)
axios.get(‘url2’);

Promise.all([ axios.get(‘url1’),   axios.get(‘url2’)  ])
.then(() => {})

이렇게 하면 두 자료를 다 get 한 다음, then 이후의 실행할 일들이 실행됩니다.

활용 예시

useEffect(() => { axios
    .get(`http://jsonplaceholder/${id}`);
    .then(res => {
    console.log(res)
    setPosts(res.data)
    })

    .catch(err => {
    console.log(err)
    })}, [id])


return (
    <div>
    <input type = “text” value={id} onChange={e=> setId(e.target.value)}
    </div>
);

이렇게 하면 사용자가 인풋창에 입력하는 아이디 값에 따라 해당 아이디를 주소값으로 가지고 있는 페이지로 이동할 수 있습니다.

대괄호 안의 값이 id로 바뀐 것도 중요.