0704-TIL-axios 환경변수 설정

axios를 사용해서 데이터를 가져올 경우에

데이터를 가져오는 서버나 주소 값은 노출되어선 안된다!

그래서 .env 파일을 생성해서 git에 올라가지 않도록 해야한다.

 

.env를 작성할 때는 

리액트이기 때문에 제일 앞에 

REACT_APP_을 꼭 붙여주어야 한다!

그래야지 리액트에서 .env 파일을 읽어올 수 있다고 한다.

 

그리고 환경변수를 사용할 때는

process.env.환경변수이름

이런 식으로 작성하면 된다!

 

이렇게 다 작성을 하고, 

리액트를 실행시켰는데 계속해서 404 에러가 나타났다.

Get을 해오는 주소가 잘못되었다는 내용인 것 같았다.

Get을 하는 주소가

http://localhost:4000/todos 로 확인되어야 하는데,

계속해서 앞에 localhost:3000이 붙어서 나온 것이다..!

 

그래서 콘솔에 process.env.를 찍어봤는데

값은 제대로 넘어온 것을 확인할 수 있었다..!!

 

그래서 검색도 해봤지만,

나와 같은 오류는 찾지 못했고,

다시 한 번 코드를 살펴보았다...

 

문제점

• api.js

const instance = axios.create({
  baseURL: 'process.env.REACT_APP_SERVER_URL',
});

baseURL 키는 제대로 입력했는데,

process.env. 를 따옴표로 감싸서 발생한 문제였다..!!

언제 감쌌는지는 모르겠지만...

저렇게 작성하면 string으로 값이 넘어가기 때문에 발생한 문제였다.

 

해결 내용

• .env

REACT_APP_SERVER_URL=http://localhost:4000

 

• api.js

import axios from "axios";

const instance = axios.create({
  baseURL: process.env.REACT_APP_SERVER_URL,
});

export default instance;

 

• App.jsx

import api from "./axios/api";

  const fetchTodos = async () => {
    const { data } = await api.get("/todos");
    setTodos(data);
  };