Axios 인스턴스 생성

Axios 인스턴스화 하는 이유?

중복된 부분을 계속 입력하지 않아도 되기 때문

Axios 인스턴스 만드는 순서

1.src폴더 하위에 인스턴스 생성할 폴더 파일 생성
2.axios.js 파일 생성

import axios from "axios";

const instance = axios.create({
  baseURL: 
  params: {
    api_key: 
    language: "ko-KR",
  },
});

export default instance;

!!!이 때 주의할 점은 api키의 경우 그대로 깃허브에 올리게 되면 탈취 해킹될 수 있기 때문에 .env파일로 따로 빼주어.gitignore파일에 추가 해주어야 한다.

api 키를 숨기는 방법

1. 루트 폴더에 .env 파일 생성

2. .env 파일에 내용 입력

REACT_APP_API_KEY=api key 

REACT_APP으로 시작하여야 한다.

3. .gitignore 파일에 .env 파일 추가

4. API key가 필요한 파일에서 변수에 저장해서 사용

const API_KEY = process.env.REACT_APP_API_KEY;

인스턴스화된 axios를 사용하기 위해서는

import axios from "axios";

가 아닌

import axios from "인스턴스를 저장한 파일";

로 불러와야한다.

사용예시

import axios from "axios";
const API_KEY = process.env.REACT_APP_API_KEY;
const baseURL = process.env.REACT_APP_BaseURL;

const instance = axios.create({
  baseURL: baseURL,
  params: {
    api_key: API_KEY,
    language: "ko-KR",
  },
});

export default instance;

"../api/axios"

const requests = {
  fetchNowPlaying: "/movie/now_playing",
  fetchTrending: "/trending/all/week",
  fetchTopRated: "/movie/top_rating",
  fetchActionMovies: "/discover/movie?with_genres=28",
  fetchComedyMovies: "/discover/movie?with_genres=35",
  fetchHorrorMovies: "/discover/movie?with_genres=27",
  fetchRomanceMovies: "/discover/movie?with_genres=10749",
  fetchDocumentMovies: "/discover/movie?with_genres=99",
};

export default requests;

"../api/requests"

import axios from "../api/axios"; !!중요!!
import React, { useEffect, useState } from "react";
import requests from "../api/request";

const Banner = () => {
  const [movie, setMovie] = useState([]);

  useEffect(() => {
    fetchData();
  });
  const fetchData = async () => {
    const request = await axios.get(requests.fetchNowPlaying);
    console.log(request);
  };
  return <div>Banner</div>;
};

export default Banner;