개발과 배포에 쓰이는 값이 다른것들 있음
리액트 앱에서 외부 설정 변수를 사용하는 방법에는 여러 가지가 있습니다. 일반적으로는 빌드 시점에 환경 변수(Environment Variable)를 설정하여 사용하는 방법이 많이 사용됩니다.
예를 들어, .env 파일을 생성하여 다음과 같이 설정할 수 있습니다.
bashREACT_APP_API_URL=http://localhost:8000/api
위와 같이 .env 파일에 설정된 REACT_APP_API_URL 변수는 process.env.REACT_APP_API_URL로 리액트 앱에서 접근할 수 있습니다.
javascriptconst apiUrl = process.env.REACT_APP_API_URL;
위 코드는 REACT_APP_API_URL 변수를 apiUrl 상수에 할당하는 예시입니다.
주의할 점은, 환경 변수를 사용할 때에는 반드시 REACT_APP_ 접두사를 사용해야 합니다. create-react-app에서는 이 접두사가 있어야만 환경 변수를 인식합니다.
그리고, .env 파일은 프로젝트 루트 폴더에 위치해야 합니다. 또한, .env 파일은 보안상의 이유로 소스 코드 저장소에는 포함되지 않아야 하므로, .gitignore 파일에 .env 파일을 추가하여 git에 의해 추적되지 않도록 해야 합니다.
참고로, create-react-app에서는 .env.development, .env.production과 같은 이름의 파일을 생성하여, 개발/프로덕션 환경별로 다른 환경 변수를 사용할 수도 있습니다. 이 경우, REACT_APP_ 접두사가 붙어있는 변수들은 모든 환경에서 사용됩니다. 예를 들어, .env.development 파일에 REACT_APP_API_URL=http://localhost:8000/api-dev을, .env.production 파일에 REACT_APP_API_URL=https://example.com/api을 설정하면, 개발 환경에서는 http://localhost:8000/api-dev로, 프로덕션 환경에서는 https://example.com/api로 API URL이 설정됩니다.