사전 지식
API(Application Programming Interface)
- 소프트웨어 프로그램(애플리케이션) 내부에 존재하는 기능 및 규칙의 집합
- API를 제공하는 애플리케이션과 서드파티 소프트웨어 및 하드웨어 등의 것들 사이의 간단한 계약(인터페이스)
- 프로그램들이 소통하는 방법 → 코드끼리 소통하기 위해 만들어진 방법
- 웹 개발에서 API
- 개발자가 앱을 통해 사용자의 웹 브라우저에서 상호작용할 수 있도록 하는 코드 기능들
- 사용자의 컴퓨터 상에 있는 다른 소프트웨어 및 하드웨어
- 서드파티 웹사이트나 서비스의 집합
JSON(JavaScript Object Notation)
- 데이터를 주고받을 수 있을 때 사용하는 간단한 형식의 파일 포맷
- key-value로 구성
- serialization(직렬화) 또는 데이터 전송 시 사용
fetch API
의미
- 네트워크 통신을 포함한 리소스를 가지고 오기 위한 인터페이스를 제공하는 브라우저 API → 즉, 특정 URL로 부터 정보를 받아오는 역할을 함
- API를 기반으로 둔 Promise → 정보를 받아오는 과정이 비동기적으로 이루어짐
특징
fetch()가 반환하는 프로미스 객체는 HTTP 오류 상태(ex. 404, 500)를 수신해도 거부되지 않음- 프로미스가 거부되는 경우는 네트워크 연결이 실패하는 경우를 포함, 아예 요청을 완료하지 못한 경우로 한정됨
사용법
fetch('http://example.com/movies.json')
.then((response) => response.json())
.then((data) => console.log(data));fetch(): 하나의 인수만 받고, 이는 가져오고자 하는 리소스의 경로를 나타냄Response객체: HTTP 응답 전체를 나타내는 객체로, 직접 JSON 응답 본문을 받을 수는 없음
→ JSON 본문 콘텐츠를 추출하기 위해json()메서드를 호출해야함json()메서드: 응답 본문 텍스트를 JSON으로 파싱한 결과로 이행하는, 또 다른 프로미스를 반환함
Axios
브라우저, Node.js를 위한 Promise API를 활용하는 HTTP 비동기 통신 라이브러리
fetch API와 비교
| Axios | Fetch API |
|---|---|
| 써드파티 라이브러리로 설치가 필요함 | 빌트인 API라 별도의 설치 필요없음 |
| 자동으로 JSON데이터 형식으로 변환됨 | .json() 메서드를 사용해야 함 |
사용법
설치하기
npm install axios불러오기
import axios from 'axios'GET 요청
axios.get("url"[,config])
- 정보를 요청하기 위해 사용하는 메서드
- 첫번째 인자에는 url주소가 들어가며, 필수적임
- 두번째 인자에는 요청 시 사용할 수 있는 옵션 설정
axios
.get('https://koreanjson.com/users/1')
.then((response) => {
const { data } = response; //자동으로 JSON데이터 형식으로 변환하기 때문에 .json() 필요 없음
})
.catch((error) => console.log(error));POST 요청
axios.post("url"[, data[, config]])
- 서버에게 데이터를 보내기 위해 사용되는 메서드
- 첫번째 인자에는 url주소가 들어가고, 필수적으로 입력함
- 두번째 인자에는 요청 시 보낼 데이터를 설정
- 옵션의 경우 필수는 아니라 상황에 따라 설정함
axios.post('/user', {
firstName: 'Fred',
lastName: 'Flintstone'
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});참고자료
mdn - API
JavaScript Fetch API Ultimate Guide
Axios Docs - Post 요청
