Notice
Recent Posts
Recent Comments
Link
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | |
7 | 8 | 9 | 10 | 11 | 12 | 13 |
14 | 15 | 16 | 17 | 18 | 19 | 20 |
21 | 22 | 23 | 24 | 25 | 26 | 27 |
28 | 29 | 30 | 31 |
Tags
- 코딩테스트
- 한글 공부 사이트
- 자바스크립트
- 리액트 팀 프로젝트
- 내일배움캠프 최종 프로젝트
- js
- useState
- 그리드 정렬
- 타입스크립트 props
- 타입스크립트 리액트
- 파이썬 enumerate
- JavaScript
- 프로그래머스
- 리액트 페이지 이동
- 파이썬 slice
- 내일배움캠프
- 내배캠 프로젝트
- 리액트 프로젝트
- 리액트 훅
- typeScript
- 파이썬 반복문
- React Hooks
- 파이썬 list
- REACT
- 리액트
- 내일배움캠프 프로젝트
- Next 팀 프로젝트
- 타입스크립트
- 파이썬 for
- 파이썬 for in
Archives
- Today
- Total
aotoyae
[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 환경변수 사용
인터넷 강의를 보며 프로젝트 진행 중 create-react-app으로 프로젝트를 생성하신 강사님과 vite로 프로젝트를 생성한 내 환경의 차이점때문에 생긴 이슈를 해결해보고자 한다!
velog.io
'React' 카테고리의 다른 글
[React] Redux Thunk : 미들웨어 (0) | 2024.02.19 |
---|---|
[React] axios & interseptor : api 생성, URL 생략 & 요청, 응답 사이에 관여 (0) | 2024.02.19 |
[React] Fetch & Axios 의 차이 (0) | 2024.02.19 |
[React] axios.post/delete/patch : HTTP 통신으로 데이터 생성/삭제/수정하기 (0) | 2024.02.19 |
[React] axios.get : HTTP 통신으로 데이터 가져오기 (0) | 2024.02.19 |