🚨 [costagram] react 에서 환경변수(env) 사용하기

🚨 문제상황

게시글 READ 기능을 위해 get요청을 하는 로직을 아래와 같이 작성했다.

// http 통신 로직(get)

import axios from 'axios';

const getPosts = async () => {
  return axios
    .get(`/post`, {
      baseURL: process.env.REACT_PUBLIC_API_URL,
      headers: {
        withCredentials: true,
// 로그인 기능은 아직 구현중이라 서버담당 팀원분이 토큰없이도 확인가능하도록 해주셨다. 
        // Authorization: `Bearer ${localStorage.getItem('token')}`,  
        'Content-Type': `application/json`,
      },
    })
    .catch(err => console.log(err));
};

export default getPosts;

// react-query의 useQuery를 이용하는 로직 
import { useQuery } from '@tanstack/react-query';
import getPosts from '../../apis/post/getPosts';

const useGetPosts = () => {
  return useQuery(['get/post'], () => getPosts(), {
    enabled: false,
  });
};

export default useGetPosts;

// 요청 및 응답에 대한 data를 받아 사용할 컴포넌트 
import { useEffect } from 'react';
import useGetPosts from '../hooks/post/useGetPost';

const RenderPosts = () => {
  const { data, refetch } = useGetPosts();
  useEffect(() => {
    refetch();
  }, []);
  console.log(data); // refetch 실행이 잘 된다면 응답데이터가 찍혀야함 
  return <div>posts</div>;
};

export default RenderPosts;

위와같이 로직을 작성했더니 404오류와 함께 요청이 클라이언트 서버 주소로 가고있는 것을 확인했다.

❓ 문제분석

.env 환경변수 파일 내 localhost:8080 으로 api 주소도 잘 작성해둔 것을 확인했고 로직들을 다시 살펴봐도 문제있어보이는 곳이 없었다.

왜 요청api가 클라이언트 서버로 되어있을까? 고민하던 중 환경변수가 잘못되었을까하는 의심이 생겼고 확인을 위해 변수 대신 직접 api를 넣어보았다.

응답을 잘 받아왔다!! 그렇다면 환경변수의 문제!
api 주소는 잘 작성되어 있으니 이름이 문제였고 구글링을 통해 React 환경변수 변수명 조건을 알게되었다.

✨ 해결방안

react 환경변수

react에서 환경 변수 지정 시, 변수명의 접두사로 REACT_APP_ 을 사용해야 한다.

변수명 변경 후 적용해주니 잘 작동했다!! 👏👏👏

+ 💡 Next.js 에서는 NEXT_PUBLIC_ 을 붙여주어야 한다.