API key 환경 변수로 설정하기 (.env)

예를 들어 아래와 같이 fetch를 하는 코드에 API Key가 필요하다고 가정하자.

 

tanstack 쿼리는 리액트 라이브러리이지만 기본적인 fetch 함수에도 통용이 되는 개념이다.

 

import { useQuery } from '@tanstack/react-query';
import axios from 'axios';

function useFetch() {
  const apiUrl = 'API URL 또는 Key';

  const { data, error, isPending } = useQuery({
    queryKey: ['data'],
    queryFn: async () => {
      try {
        const response = await axios.get(apiUrl);
        return response.data;
      } catch (error) {
        console.error('Error fetching data:', error);
        throw error;
      }
    },
    staleTime: 5 * 60 * 1000,
    cacheTime: 30 * 60 * 1000,
  });

  return { data, error, isPending };
}

export default useFetch;

 

여기서 민감한 정보만 분리해서 최상위 디렉토리에 .env 파일을 생성한 뒤 URL 또는 Key를 분리한다.

 

REACT_APP_API_URL=URL 또는 Key

 

 

그리고 별도의 import 없이 위에서 좌항에 작성한 키워드로 호출할 수 있다.

 

import { useQuery } from '@tanstack/react-query';
import axios from 'axios';

function useFetch() {
  const apiUrl = process.env.REACT_APP_API_URL;

  const { data, error, isLoading } = useQuery({
    queryKey: ['data'],
    queryFn: async () => {
      try {
        const response = await axios.get(apiUrl);
        return response.data;
      } catch (error) {
        console.error('Error fetching data:', error);
        throw error;
      }
    },
    staleTime: 5 * 60 * 1000,
    cacheTime: 30 * 60 * 1000,
  });

  return { data, error, isLoading };
}

export default useFetch;

 

단 이 환경 변수 파일은 깃허브에 업로드 되지 않기 때문에 협업을 하거나 본인의 프로젝트를 다시 클론 받을 때 .env 파일을 다시 생성해주어야 한다.