Part 2. API 불러오기 (feat. Axios)

Axios를 사용하는 이유

 

1. 더 많은 기능을 제공함 (timeout, baseUrl 등등)

2. 사람들이 더 많이 사용함

3. 백엔드 nodeJS에서는 fetch를 사용할 수 없음

4. 단점은 설치해야한다 뿐임

 

fetch를 사용한다면..

axios를 사용하게 된다면 상당히 깔끔해진다

import api from "../api"

const API_KEY=process.env.REACT_APP_API_KEY
function getMovies(){
    return async (dispatch)=>{
        const popularMovieApi = await api.get(`movie/popular?api_key=${API_KEY}&language=en-US&page=1`)

}}

export const movieActions = {
    getMovies
}

 

 

단, 깔끔하게 사용하기위해서 어디서든 간단하게 불러올수 있도록 api파일을 만들어둬야한다.

import axios from "axios"

const api = axios.create({
    baseURL:"https://api.themoviedb.org/3/",
    headers:{"Content-type":"application/json"}
})

// 요청 인터셉터 추가하기
api.interceptors.request.use(function (config) {
    // 요청이 전달되기 전에 작업 수행
    console.log("request start",config)
    return config;
  }, function (error) {
    // 요청 오류가 있는 작업 수행
    console.log("request error",error)
    return Promise.reject(error);
  });

// 응답 인터셉터 추가하기
api.interceptors.response.use(function (response) {
    // 2xx 범위에 있는 상태 코드는 이 함수를 트리거 합니다.
    // 응답 데이터가 있는 작업 수행
    console.log("get response",response)
    return response;
  }, function (error) {
    // 2xx 외의 범위에 있는 상태 코드는 이 함수를 트리거 합니다.
    // 응답 오류가 있는 작업 수행
    console.log("response error",error)
    return Promise.reject(error);
  });

  export default api;

 

API 통신 성공

 

 

 

추가)

API통신시 API 키는 공개적인곳에 올리면 안된다. 

안전하게 보호하기 위해서 환경설정 형식인 env파일에 설정하고, gitignore파일에 추가하여 깃허브에 올리지 않아야 한다.

REACT_APP_API_KEY=a04d1fe3abf6087a##########################

env파일 작성시 띄어쓰기 금지!!