Open API : 개발자라면 누구나 사용할 수 있도록 공개된 API
API(Application Programming Interface) : 컴퓨터 간의 서로 통신을 위해 규격을 맞춘 명세서
Fetch API
Fetch API는 간단한 호출에는 괜찮지만 미흡한 부분이 존재한다.
최신 브라우저 위주의 호환성, XSRF 보안 기능 미흡, Request Cancel이 불가능한 특징이 있다.
https://developer.mozilla.org/ko/docs/Web/API/Fetch_API/Using_Fetch
Fetch API 사용하기 - Web API | MDN
Fetch API는 HTTP 파이프라인을 구성하는 요청과 응답 등의 요소를 JavaScript에서 접근하고 조작할 수 있는 인터페이스를 제공합니다. Fetch API가 제공하는 전역 fetch() 메서드로 네트워크의 리소스를
developer.mozilla.org
Axios
$ yarn add axioshttps://axios-http.com/kr/docs/intro
시작하기 | Axios Docs
시작하기 브라우저와 node.js에서 사용할 수 있는 Promise 기반 HTTP 클라이언트 라이브러리 Axios란? Axios는 node.js와 브라우저를 위한 Promise 기반 HTTP 클라이언트 입니다. 그것은 동형 입니다(동일한 코
axios-http.com
// pokemonService.ts
import axios from "axios";
const remote = axios.create();
export interface PokemonListReponseType {
count: number,
next: string,
results: {
name: string,
url: string
}[]
}
export const fetchPokemons = async () => {
const defaultUrl = 'https://pokeapi.co/api/v2/pokemon'
const response = await remote.get<PokemonListReponseType>(defaultUrl)
return response.data;
}interface PokeCardProps {
name: string
}
const PokeCard = (props:PokeCardProps) => {
const navigate = useNavigate();
const handleClick = () => {
navigate(`/pokemon/${props.name}`);
}
return (
<Item onClick={handleClick}>
<Header>
<PokeNameChip name={props.name}/>
</Header>
<Body>
<Image src={TempImgUrl} alt="포켓몬 이미지" />
</Body>
<Footer>
<PokeMarkChip />
</Footer>
</Item>
)
}