[React] React .env 파일을 통한 API KEY 관리

프로젝트를 진행하다 보면 API KEY를 관리해야 할 때가 있습니다.

아래와 같이 API KEY가 그대로 노출이 된다면 보안에 문제가 발생할 수 있기 때문에, 하드코딩을 진행하면 안 된답니다.

오늘은 이러한 API KEY를 관리하는 방법을 알아보도록 하겠습니다.

.get(
    "https://wwww.abc.com?apiKey=12345678"
  )

 

.env 파일을 통한 API KEY 관리

우선 프로젝트 최상위 경로에 .env 파일을 생성해 줍니다.

그리고, 해당 파일에 아래와 같이 작성을 해줍니다.

참고로 변수명은 반드시 REACT_APP_로 시작되어야 합니다!

REACT_APP_API_KEY = 사용할 API KEY 작성

 

작성을 해주었으면 .env 파일이 GitHub 등에 노출되지 않도록 .gitignore에 등록을 꼭 해주어야 합니다.

 

마지막으로, 사용하고자 하는 부분에 .env 파일에서 작성했던 변수명을 작성하고 백틱(`)으로 감싸서 활용해 주시면 됩니다.

아까 위에 코드랑 확연하게 달라진 걸 볼 수 있습니다.

.get(
    `https://wwww.abc.com?apiKey=${process.env.REACT_APP_API_KEY}`
  )

 

앞으로 보안을 위해 env 파일을 활용하여 API KEY를 안전하게 관리합시다 ! :)