React 배포별 백엔드 주소 변경하기! 🧋

프로젝트를 진행하다보면 백엔드 주소를 변수로 사용하는데요.
develop 과정에서는 local 백엔드 서버를 돌려서 상관없지만,
백엔드 서버를 배포하고나면 주소가 변경되어 클라이언트에서도 수정을 해줘야 해요.

그 귀찮음을 해결하고자 한 가지 방식을 공유합니다!!
(사실 작업 방식에 따라 필요없음 😔)

CRA에서의 환경변수 사용

const backURL = process.env.NODE_ENV === 'development'
  ? 'http://localhost:8080'
  : 'https://[your api]';

와 같이 활용해보았습니다.

그리고 요즘 잘 사용중인 vite

VITE의 환경변수 사용

환경변수를 사용하여 현재 구동중인 환경을 알아낼 수 있습니다.

const backURL = import.meta.env.DEV
  ? 'http://localhost:8080'
  : 'https://[your api]';

import.meta.env.DEV 를 통해 개발 환경이라면 true를 리턴합니다. / 반대의 값은 import.meta.env.PROD와 가 있습니다.

그 외에도 환경 변수와 모드는

• import.meta.env.MODE: {string} 현재 앱이 동작하고 있는 모드
• import.meta.env.BASE_URL: {string} 앱이 제공하는 베이스 URL
• import.meta.env.PROD: {boolean} 앱이 프로덕션(빌드)에서 실행 중인지
• import.meta.env.DEV: {boolean} 앱이 개발 환경에서 실행 중인지
• import.meta.env.SSR: {boolean} 앱이 서버단에서 실행 중인지

등등 다양하게 있네요. 이러한 환경변수를 잘 활용하여 조금 더 효율적인 개발이 되길 바라겠습니다. 😌