[React] API 연결에 대해 알아보자(axiosInstance, 환경변수)

지금 진행 중인 프로젝트에서 UI를 거의 다 마치고 api 연결할 시점이 되어서...
개념 정리를 해보겠다

1. 환경변수 사용의 필요성

const fetchUserInfo = useCallback( async () => {
    if(accessToken){
        try {
            const response = await axios.get('http://localhost:3000/user/me', {
                headers: {
                    Authorization: `Bearer ${accessToken}`,
                },
            });
            console.log(response);
            setNickname((response.data.email).split('@')[0]);
        } catch (error) {
            console.log('사용자 정보 얻기 실패:', error);
        }
    }
    },[accessToken]);

배포한 서버 url이나 인증 토큰 같은 경우 유출되면 안 되는데 이런식으로 하면 깃에 그대로 올라가기 때문에 곤란함..

따라서, api를 배포하지 않고 개발환경(로컬)에만 적용할 수 있도록 환경변수로 설정해야 함!

2. 환경변수 사용법

로컬에 파일 생성 > ".env"라는 이름의 파일을 만들고 거기에 각종 API 키들을 저장한다.

REACT_APP_API_KEY = api key
VITE_API_KEY = api key

vite는 VITE, 일반 react는 REACT_APP을 앞에 붙여야 함
뒷부분은 원하는 변수명을 적으면 된다

(예: VITE_KAKAO_AUTH_URL = https://kauth.kakao.com/oauth/...)

이후 .env 파일이 깃에 업로드되지 않도록 gitignore에 env를 추가한다

사용할 때는 import.meta.env.코드이름으로 가져다 쓰면 된다.

const handleKakaoLogin = async() =>{
    window.location.href = import.meta.env.VITE_KAKAO_AUTH_URL;
};

3. axiosInstance

보통 코드를 연결 할 때 서버 링크 앞부분이 다 겹치기 마련이다

axios.post('http://localhost:3000/auth/login',data);
axios.post('http://localhost:3000/auth/register',data);

이부분을 환경변수 처리한다 하더라도 매번 겹치는 부분때문에 비효율적임
따라서 겹치는 부분을 baseURL로 설정한 custom hook을 만들면 좋다!

import axios from "axios";

const axiosInstance =axios.create({
	headers: {
    	Authorization: `Bearer ${import.meta.env.VITE_TMDB_TOKEN}`,
    },
    baseURL: import.meta.env.VITE_TMDB_URL,
})

export {axiosInstance}

토큰 인증이 필요한 경우 헤더까지, 아닐 시 baseURL만 설정해주면 된다.