프론트에서 서버(백엔드) api를 호출하면 데이터를 받아올 수 있습니다. 자바스크립트
Web API fetch함수를 쓰거나,axios라이브러리를 사용하면 서버로부터 데이터를 받아올 수 있습니다.
- Web API는 클라이언트(프론트) 측에서 사용할 수 있는 자바스크립트의 내장함수입니다.
- 실무에서는
axios를 많이 사용하지만,fetch함수 만으로도 웬만한 기능을 충분히 구현할 수 있습니다. fetch와axios중 어떤 것을 사용하는지는 중요하지 않습니다.http 통신의 요청과 응답,Promise 개념에 대한 이해가 더 중요합니다.
fetch() 함수 기본
Arrow function을 사용한 경우
fetch('api 주소')
.then(res => res.json())
.then(res => {
// data를 응답 받은 후의 로직
});Arrow function을 사용하지 않은 경우
fetch('api 주소')
.then(function(res) {
return res.json();
})
.then(function(res) {
// data를 응답 받은 후의 로직
});- then 안에 들어있는 res는 임의의 값이지만, response혹은, res를 쓰는게 컨벤션입니다.
- 물론, 첫번째 then과 두번째 then의 res는 같지 않아도 됩니다.
//설명: 유저 정보를 가져온다.
base url: https://api.google.com
endpoint: /user/3
method: GET
응답형태:
{
"success": boolean,
"user": {
"name": string,
"batch": number
}
}method: GET
위와 같은 api명세를 통해서 아래와 같이 fetch() 함수를 쓸 수 있습니다.
fetch('https://api.google.com/user/3')
.then(res => res.json())
.then(res => {
if (res.success) {
console.log(`${res.user.name}` 님 환영합니다);
}
});fetch함수에 method를 써주지 않으면 default값은 GET입니다.
api주소를 보면 user/ 뒤에 3이 user id로 추측해볼 수 있고, id는 유동적이므로 아래와 같이 써줍니다.
import React, { Component } from 'react';
class User extends Component {
componentDidMount() {
// user id가 props를 통해 넘어온다고 가정
const { userId } = this.props;
fetch(`https://api.google.com/user/${userId}`)
.then(res => res.json())
.then(res => {
if (res.success) {
console.log(`${res.user.name}` 님 환영합니다);
}
});
}
}method: POST
- method가 post인 경우에는 fetch()함수에 method 정보를 인자로 넘겨줘야 합니다.
- api 정보를 알기 위해서는 api를 만든 개발자 (주로 백엔드)와 소통해야 합니다.
//설명: 유저를 저장한다.
base url: https://api.google.com
endpoint: /user
method: POST
요청 body:
{
"name": string,
"batch": number
}
응답 body:
{
"success": boolean
}위와 같은 api 명세를 받았을 때, 아래와 같이 fetch함수를 사용하면 됩니다.
fetch('https://api.google.com/user', {
method: 'post',
body: JSON.stringify({
name: "hyosikkim",
batch: 1
})
})- 첫번째 인자에
GET과 같이 api주소를 적어주고, 두번째 인자에 method, headers, body를 써줍니다.- headers에는 생략가능한데, 로그인 후 서버로부터 받은 토큰을 저장해 줄 수 있습니다.
headers: {Authorization: 'res-token'}- body에서 JSON.stringify()함수에 자바스크립트로 작성된 객체를 인자로 전달하여 JSON형태로 변환해 줍니다. (
res.json())- POST로 데이터를 보낼 때 JSON.stringfy를 항상 하다보니 axios는 굳이 감싸주지 않고 객체만 작성해도 되는 편리한 점이 있습니다. axios는 소소하게 편한한 설정을 제공해주고, 요청과 응답에 대한 확장성 있는 기능을 만들 수 있습니다.
method: GET인데 parameter를 전달해야 하는 경우
- 위의
GET예제에서 3이라는 user id를 path로 넘겨주었습니다. 그런데 path 말고 query string으로 넘겨줘야 할 수도 있습니다. - 데이터를 전달하는 방식 또한 백엔드 개발자에게 물어봐야 합니다. 여기서는 같은 api를 사용했지만, api마다 path를 사용할지 query string을 사용할지 다릅니다.
//설명: 유저 정보를 가져온다.
base url: https://api.google.com
endpoint: /user
method: get
query string: ?id=아이디
응답형태:
{
"success": boolean,
"user": {
"name": string,
"batch": number
}
}query string을 사용한다면 아래와 같이 사용하면 됩니다.
fetch('https://api.google.com/user?id=3')
.then(res => res.json())
.then(res => {
if (res.success) {
console.log(`${res.user.name}` 님 환영합니다);
}
});
then을 따로 따로 2번 써주는 이유는 이 개념을 이해하기 위해서는promise라는 개념을 이해해야 하지만, 여기서는promise개념을 다루지 않고 설명하자면fetch함수와json()함수가 모두 비동기 방식이기 때문입니다. 첫번째then에서 자바스크립트를json형식으로 바꿔주고, 그 작업이 완료된 이후에 두번째then이 실행되야 합니다.
자기개발 :)