[env-cmd] 리액트 env 사용방법

nodejs처럼 리액트에서도 env를 사용해보자.

env-cmd를 설치하고 루트 경로에 .env-cmdrc를 추가한다.

npm i env-cmd

 

.env-cmdrc

개발환경에는 백엔드 로컬서버를 넣고 배포환경에는 배포시 사용될 URL을 넣는다.

{
    "development":{
        "REACT_APP_URL":"http://localhost:500/"
    },
    "production":{
        "REACT_APP_URL":"배포시 사용될 URL"
    }
}

 

package.json

scripts에 env-cmd -e 개발모드 혹은 배포모드를 추가한다.

  ...
  "scripts": {
    "start": "env-cmd -e development react-scripts start",
    "build": "env-cmd -e production react-scripts build",
    ...
  },

 

 

리액트 사용 예시 코드

await fetch(`${process.env.REACT_APP_URL}list`})
                    .then((res) => res.json())
                    .then((data) => {
                        console.log(data)
                    })
                    .catch((err) => {
                        console.log(err)
                    })
            }