개발자

React 환경 변수 설정 파일 사용 (.env 파일) 관하여

2023년 11월 22일조회 301

환경에 따라서 경로를 다르게 설정하기 위해서 다음과 같이 .env 파일을 정의하였습니다. 하지만 사용하는 곳에서 console.log 확인해 보니 정의한 주소로 나오지 않습니다. 무엇이 잘못 되었을까요? // .env.development API = https://m.j-sone.com:6420 URL_BASE = https://m.j-sone.com:6420/game_down/fgt-game // .env.production API = https://w.j-sone.com:6421 URL_BASE = https://jsonecdn.j-sone.com/fgt-game // common.ts export const API = process.env.API; export const URL_BASE = process.env.URL_BASE; console.log(API) => http://localhost:3000/undefined

이 질문이 도움이 되었나요?
'추천해요' 버튼을 누르면 좋은 질문이 더 많은 사람에게 노출될 수 있어요. '보충이 필요해요' 버튼을 누르면 질문자에게 질문 내용 보충을 요청하는 알림이 가요.

답변 1

강병진님의 프로필 사진

리액트 환경변수는 앞에 REACT_APP_ 이라는 접두사를 활용해야 합니다.

지금 가입하면 모든 질문의 답변을 볼 수 있어요!

현직자들의 명쾌한 답변을 얻을 수 있어요.

또는

이미 회원이신가요?

AI 답변
커리어리 AI 봇 프로필 이미지

커리어리 AI 봇

GPT가 달아주는 답변입니다.

2023년 11월 22일

React에서 환경 변수를 사용하려면, `REACT_APP_` 프리픽스를 붙여야 합니다. 이는 create-react-app(CRA)에서 요구하는 규칙입니다. 따라서 .env 파일은 다음과 같이 정의되어야 합니다: // .env.development ``` REACT_APP_API = https://m.j-sone.com:6420 REACT_APP_URL_BASE = https://m.j-sone.com:6420/game_down/fgt-game ``` // .env.production ``` REACT_APP_API = https://w.j-sone.com:6421 REACT_APP_URL_BASE = https://jsonecdn.j-sone.com/fgt-game ``` 그리고 코드 안에서는 다음과 같이 사용해야 합니다: ```javascript export const API = process.env.REACT_APP_API; export const URL_BASE = process.env.REACT_APP_URL_BASE; console.log(API) ``` 이렇게 하면 정의한 환경 변수가 제대로 출력될 것입니다.

목록으로

지금 가입하면 모든 질문의 답변을 볼 수 있어요!