[React] API, axios

'따라하며 배우는 리액트 A-Z' 강의를 따라 넷플릭스 클론 사이트를 만들게 되었다.
TMDB 데이터베이스를 사용할 것이므로, 우선 API KEY를 발급받아야 한다.

1. the movie 웹사이트로 이동
2. 가입/로그인 후 api key 받기
3. vscode에서 themovieDB API를 위한 설정하기

• api url : https://api.themoviedb.org/3/movie/

axios

axios는 브라우저, node.js 를 위한 promise api 를 활용하는 http 비동기 통신 라이브러리이다. 쉽게 말해, 백엔드랑 프론트엔드랑 통신을 쉽게 하기위해 ajax와 더불어 사용한다.
dp api 서버와 프론트엔드를 연결해주는 징검다리 역할을 해준다.

axios 설치 및 사용법 + 에러

1. npm install axios —save 모듈 설치
2. axios.get(’https://api.themoviedb.org/trending/all/week’)⇒ 이것처럼 가져올 api url 주소를 명시해준다. 해당 방법의 자세한 내용은 아래 후술한다.

❗ error - A complete log of this run can be found in: file path

'이 실행의 전체 로그는 다음에서 찾을 수 있습니다.: 파일 경로 '

모듈 설치 시 에러가 났다. 해당 오류가 나면 일단 해볼 것은 캐시 삭제이다.
npm cache clean --force
명령어를 사용해 캐시를 강제로 지워준다.

❗ error - 설치 시 에러 뜨는 이유

React, React-DOM 라이브러리의 버전과 설치하려는 axios 라이브러리의 버전이 다르기 때문에 (react라이브러리가 더 높기때문에) 오류가 발생하는 것으로 추정.

해결방법

기존 커맨드에서 --save --legacy-peer-deps 키워드 추가
-> 기존 라이브러리들의 버전을 무시하고 설치하고자 하는 라이브러리를 설치한다.

axios 인스턴스화

axios를 인스턴스하는 이유 ?
TMDB API의 경우 여러개의 api url을 사용하는데, 계속 중복되는 api url(root path) 를 입력하지 않아도 되고, 여러 url을 변수에 할당해 사용할 수 있다.

인스턴스 하는 방법?
src 폴더 내부에 axios 폴더를 생성하고, axios.jsx와 request.jsx 파일을 생성하여 분리해준다. axios.jsx는 base url (반복되는 부분) 그리고 params로 구성되어 있는데 params는 api_key, 그리고 language 로 이루어져 있다.

// instants.jsx
import React from 'react'
import axios from 'axios'

const instants = axios.create({
    baseURL:'https://api.themoviedb.org/3',
    params:{
        api_key:'18509a0e8d3f6ca8832fc9ef29b59fba',
        language:'ko-KR'
    }
})

export default instants;

이렇게 인스턴스 생성시에는 처음에 axios.create({})를 통해 instance객체를 만들어 줘야한다.

// requests.jsx

const requests = {
  fetchNowPlaying: `movie/now_playing`,
  fetchNetflixOriginals: `/discover/tv?with_networks=213`,
  fetchTrending: `/trending/all/week`,
  fetchTopRated: `/movie/top_rated`,
  fetchActionMovies: `/discover/movie?with_genres=28`,
  fetchComedyMovies: `/discover/movie?with_genres=35`,
  fetchHorrorMovies: `/discover/movie?with_genres=27`,
  fetchRomanceMovies: `/discover/movie?with_genres=10749`,
  fetchDocumentaries: `/discover/movie?with_genres=99`,
}

export default requests;

requests.jsx에는, 각각의 api url 을 요청할 주소들을 입력해준다 (base url 뒤에 따라오는 주소)

//component.jsx

import axios from '../api/instants'

const fetchData = async () => {
	const request = await axios.get(requests.fetchNowPlaying)
}

axios의 HTTP GET 요청

axios는 HTTP 클라이언트 라이브러리로, 주로 웹 애플리케이션에서 서버로 데이터를 가져오거나 서버로 데이터를 보낼 때 사용된다.
axios.get() 메서드는 HTTP GET 요청을 보내는 메서드로, 인자로는 요청을 보낼 URL을 받는다.

일반적으로는 baseUrl 을 포함한 axios.create({}) 를 사용해 인스턴스화 시킨 후 불러오는게 바람직하다. 그러나 인스턴스 없이 바로 axios.get() 메서드를 사용하려면, baseURL을 포함한 요청할 url전문을 get메서드 내부에 인자로 넣어주면 된다.

axios.get() 메서드는 비동기적으로 작동하며 HTTP 요청을 보내고, 이 요청에 대한 응답은 Promise 객체로 반환된다. 따라서 const request = await axios.get(requests.fetchNowPlaying) 구문에서 request 변수에 할당되는 값은 Promise 객체이다.
이 Promise 객체는 HTTP 요청의 결과를 나타내며, 성공적으로 요청이 완료되면 이행(resolve)되어 응답 데이터를 포함하고, 요청이 실패하면 거부(reject)되어 에러를 포함한다.

// 예시

const { data : movieDetail } = await axios.get(`movie/${movieId}`, {
      params: { append_to_response: 'videos' },
    });

setMovie(movieDetail)

// const { data: movieDetail }
// 객체 속성중 data만 뽑아서 movieDetail에 넣겠다는 함축적 의미

axios.get() 메서드는 두 개의 인자를 가질 수 있다. 첫 번째 인자는 요청할 URL이고, 두 번째 인자는 설정 객체(options object)이다. 이 설정 객체에는 요청을 구성하는 다양한 옵션들을 포함할 수 있다.

• params: 요청에 추가할 URL 매개변수
• headers: 요청에 포함될 헤더 정보
• auth: 인증 관련 정보
• timeout: 요청 제한 시간
  config 객체는 생략될 수 있으며, 이 경우에는 요청에 대한 추가 설정 없이 단순한 GET 요청이 수행됩니다.

두 번째 인자로 전달된 설정 객체에는 params 속성이 있디. 이 속성은 쿼리 파라미터를 지정하는 데 사용된다. API에 따라 다르지만, 주로 API에서 요청한 리소스에 추가적인 정보를 포함하고자 할 때 사용하는 append_to_response가 쿼리 파라미터 이름이고, 'videos'가 해당 파라미터의 값이다. 요청 URL에는 ?append_to_response=videos가 추가되어서 최종적인 요청 URL이 만들어진다.

params
{ append_to_response: 'videos' }에서 append_to_response는 해당 API에서 지원하는 기능 중 하나이다. 이 기능은 API가 특정 리소스에 대해 추가 정보를 요청하고자 할 때 사용된다.
videos
이 값은 해당 API에서 특정 리소스에 대해 추가 정보를 요청하고자 할 때 사용되는 값이다. 이것은 내가 임의로 지정하는 것이 아니라, 해당 API의 기능에 따라 정해진 값이며 이를 사용하여 API에서 지원하는 추가 정보를 요청힌다.