Intro
프론트엔드에서 .env 파일에서 백엔드 url등의 환경변수를 설정 후 빌드를 하게 되면 .env 안의 내용들이 함께 패킹되면서 빌드된 파일의 환경변수 설정을 바꾸는 것이 어렵다.
빌드 후에도 url 변경을 용이하게 하기 위해서 config.js 파일을 생성 후 관리할 수 있다.
config.js 파일 생성하기
index.html 파일이 들어있는 publc 폴더 안에 config.js 파일을 생성 후 아래와 같이 변수를 생성한다.
// public/config.js
window.backendUrl = "URL"
// example
window.backendUrl = "http://192.168.0.1:8080/api"index.html에 config.js 추가하기
html → body → script → config.js 추가하기
<!--public/index.html-->
<body>
<script src="%PUBLIC_URL%config.js"></script>
<div id="root"></div>
</body>
참고
React에서 public 안에 있는 경로는 html, javascript 에 때라 다르다
HTML: %PUBLIC_URL%
JavaScript: process.env.PUBLIC_URL
타입 추가하기
TypeScript 환경에서 타입을 추가해야한다. 아래는 타입이 정의 되어있는 폴더에 추가하는 예시이다.
index.d.ts 파일을 생성 후 다음과 같이 타입을 추가해준다.
// src/types/index.d.ts
declare global {
interface Window {
backendUrl: string;
}
}
export {}코드 수정 및 빌드하기
이제 URL이 필요한 위치에서 별도 import 없이 window.URL 으로 전역에서 사용할 수 있다.
axios.get(window.backendUrl)빌드 후 build 폴더 안에 config.js가 생성되어 있는 것을 확인할 수 있다.
'React' 카테고리의 다른 글
| [React-Query] Axios로 로컬 GeoJSON 파일 불러오기 (1) | 2024.02.06 |
|---|---|
| [React] Vite 4.0 이상에서 SVG 사용하는 방법 (2) | 2024.02.02 |
| [React] useEffect 랜더링 순서 (0) | 2023.12.26 |
| [React] Option에 JSON 객체를 value에 넣기 - JSON.stringify (0) | 2023.07.24 |
| [React] useState 리스트에서 index로 요소 제거하기 (0) | 2023.07.22 |
