서버에서도 네트워크 요청을 보내야 하는 일이 있다.

보통 많이 쓰는 것들로는

• fetch
• axios

가 있다.

뭘 써야할까?

fetch

fetch('--url to request-', options)
	.then((response) => {})
    .catch(err => {})

fetch 의 기본적인 작동 구조.
첫 인자로 통신할 url을 받고 options 로는 header, method 등의 인자를 받을 수 있다.

axios

axios.get('url to request')
	.then((response) => {})
    .catch((err) => {})

request를 취소할 수 있는 능력을 가진다. fetch와 구분되는 큰 장점일 것 같다.

또한 인터셉터 라는 기능을 가진다.

좀 더 자세한 설명.

then 이나 catch 로 처리되기 전에 할 행동을 설정해두는 것으로, 여러개의 요청에 공통적으로 하고 싶은 행동이 있을 때 이용하면 편리하다고 한다.
예를들어

• 에러 처리
• 헤더 추가
• 기본 url 설정

에서 많이 쓰인다.

그리고 fetch는 response를 json으로 변환하는 과정을 거쳐야 하지만 axios는 자동으로 json으로 변환해준다. xml으로 왔을 때도 마찬가지. 공공 데이터는 xml로 바로 오는 경우가 많아서 도움이 됐다.

또한, axios가 좀 더 범용성이 높다. fetch의 경우 안되는 브라우저가 좀 있다고.

참고
https://www.geeksforgeeks.org/difference-between-fetch-and-axios-js-for-making-http-requests/

axios 이용하기(예시)

const baseURL = 'https://api.themoviedb.org/3/movie';
const url = `${baseURL}/${id}`;

const res: MovieResponseDto = await axios.get(url, {
	params: {
    		api_key: process.env.movie_api_key,
        	language: 'ko',
        	},
      });

path parameter 는 url에 바로 넣고
query parameter 는 axios.get의 두번째 인자에 params로 넣어줄 수 있다.