[React] env : npm, vite 환경 변수 사용하기, 변수 숨기기

 

 

💡 API_KEY 등 보안이 필요한 값에 환경 변수로 써보자

❗️ 환경변수는 깃헙 같이 오픈된 곳에 올리면 안된다!

 

우선 루트 풀더에 .env 파일을 만든다.

// npm
REACT_APP_SERVER_URL = http://localhost:4000

//vite
VITE_SERVER_URL = http://localhost:4000

 

App.jsx

// npm
const fetchTodos = async () => {
  const { data } = await axios.get(
  `${process.env.REACT_APP_SERVER_URL}/todos`
  );
  setTodos(data);
};

// vite
  `${import.meta.env.VITE_SERVER_URL}/todos`

 

이런 식으로 사용 ~

const URL = import.meta.env.VITE_SERVER_URL;

const fetchTodos = async () => {
  const { data } = await axios.get(`${URL}/todos`);
  setTodos(data);
};

const onSubmitHandler = async () => {
  axios.post(`${URL}/todos`, inputValue);
  fetchTodos();
};

const onDeleteBtnHandler = async (id) => {
  axios.delete(`${URL}/todos/${id}`);
  setTodos(todos.filter((todo) => todo.id !== id));
};

 

 

 

🔗 https://velog.io/@tmdgp0212/TIL230316-using-.env-on-vite

TIL230316📑React) VITE에서 .env 환경변수 사용