[React] 환경변수를 .env로 만들기

devicii·2021년 5월 8일
1

react

목록 보기
5/8

어쩌다가 env?

현재 진행중인 프로젝트에서 카카오 로그인 기능을 사용하고 있는데, 카카오 로그인 기능을 사용하기 위해 삽입한 자바스크립트 api키가 index.html에 고스란히 남아있는 상황이다. 로컬에서만 개발을 하다가 이제 서버에 올리는 단계가 되어 env를 활용하여 보안상의 이슈를 해결해야겠다는 생각을 하게 되었다.

How to use .env

  1. src폴더 안에 .env파일을 만들어 준다! 여기서 주의할 점은 src의 최상단에 위치해야 한다. 만약 최상단 루트가 아니면 작동하지 않는다.

  1. 저렇게 된 포멧으로 자신이 필요한 데이터를 할당해주면 된다. 여기서 주의할 점은 무조건 앞에는 REACT-APP 이후에 원하는 이름을 작명해야 한다! 그렇지 않으면 할당된 예약어가 아니라서 적용되지 않는다

  1. process.env.<env변수명> 위 사진처럼 자신이 만든 변수명을 다시 할당해주면 된다.
    아주 쉽고 간편하다

+++주의사항

혹시나 본인의 .ignore에 .env가 없다면 추가해주도록 하자 잘 숨겨놨다가 깃허브에선 벌거벗은 본인의 .env를 보기 싫다면!

profile
Life is a long journey. But code Should be short :)

0개의 댓글