[220702] TIL - aixos. get 쿼리로 쏘다!

 

React를 사용해서 서버와 통신을 하기 위해서는 Axios 혹은 Fetch와 같은 HTTP 클라이언트를 사용합니다

Fetch API는 네트워크 요청을 위해 fetch()라는 메서드를 제공합니다. 모던 브라우저에서 내장되어있어서 따로 설치할 필요 없이 바로 사용할 수 있습니다. 반면 Axios의 경우에는 npm이나 yarn을 이용해서 설치를 해야합니다. 

둘 다 promise 기반이라서 이행 혹은 거부할 수 있는 promise를 반환합니다. 

 

Axios vs Fetch 문법

//Axios 

axios.get( url, { 옵션 }, {} )

or 

axios(url, {
method: 'get',
headers: {
 "Content-Type: "application/json" },
data: {},
})



//fetch

fetch(url, {
method: "GET",
headers: {
 "Content-Type": "application/json",
 },
 body: JSON.stringify({}),
 });

 

 

Axios vs Fetch 응답처리

axios를 json타입으로 response를 받는 반면, fetch는 json타입이 아니기 때문에 response 밭을 때. .json()을 붙여서 데이터 포맷을 한번 해줘야합니다. aixos는 responseType 역시 지정해서 받을 수 있습니다. (ex, 'document, blob 등)

 

 

 

 

기본적인 axios아 fetch에 대해서 알아봤습니다.

주로 node.js 환경에서 작업을 하다보니 자연스레 axios를 많이 쓰는 편입니다.  get, post 등 어떤 HTTP method를 쓰는냐에 상관없이 데이터를 어떻게 태워서 보낼 건가에 대한 이야기를 하고 싶습니다.  저는 쿼리로 보낸다고 하면 당연하게 url 뒤에 이어서 붙여서 변수를 넣어서 보낸다고 생각했는데, 그게 아니라 get 메서드를 사용할 경우에는 params로 바디에 태워 보내도 알아서 쿼리로 보내진다는 것! 원래 바디에 태워보내는것만 headers 앞에 data로 태우는거 아닌가요? 했더니 그것은 post를 쓸 때!!! get은 쿼리든 바디이든 다 데이터로 넣어서 보내면 된다는 사실을 알게되었습니다! 이전까지 쿼리로 보내주세요~ 하면 url에 이어 붙여서 보낼 파라미터만 변수로 넣어서 보냈던 기억뿐인데, 보내야할 쿼리가 엄청 많은데 이걸 다 줄줄이 적어서 어떻게 보내지? 라며 뭔가 이상하다는 걸 느꼈다! ㅎㅎㅎ.... 역시 잘 못 된 방법.....