React에서 환경변수 사용하기

네이버 로그인 중 직면한 문제

졸업 작품을 만들며 네이버 로그인을 구현하고 있는데

 

clientId를 그냥 변수로 노출시켜도 되나??
git에 올릴 예정인데 온라인 상에 노출시켜도 괜찮나?

 

라는 생각이 들어 React에서 환경변수 사용 방법을 알아보았다.

 

React에서 환경변수 사용하기

1. 자바스크립트 이용하기

src 폴더 아래에 임의의 js 파일을 생성한다.

 

 ex. src/variables.js

// varibales.js
export const CALLBACK_URL ='localhost:3000';
export const CLIENT_ID = 'Ocotopus';

 

컴포넌트에서 환경변수 불러와 사용하기

//Login.js
import * as vars from './variables'

const Login = ()=>{
      const initializeNaverLogin = () => {
        const naverLogin = new naver.LoginWithNaverId({
            clientId : vars.NAVER_CLIENT_ID, // 환경변수 사용
            callbackUrl :vars.NAVER_CALLBACK_URL, // 환경변수 사용
            //팝업창으로 로그인 진행 여부
            isPopup : false,
            //버튼타입
            loginButton : {color : 'green', type : 1, height : 38},
            callbackHandle : true,
        })
        naverLogin.init()

}
export default Login

 

 

2. .env 파일 이용하기

마찬가지로 src 폴더 밑에 .env 파일을 생성한다.

 

ex. src/.env

// .env
REACT_APP_CALLBACK_URL=localhost:3000
REACT_APP_CLIENT_ID=Octopus

이때 환경변수명 앞에 REACT_APP_을 꼭 붙여주어야 한다!

(= 앞뒤로 스페이스바를 넣으면 스페이스바도 변수명과 값의 일부로 인식하는 듯하다)

 

컴포넌트에서 환경변수 불러와서 사용하기

//Login.js

const Login = ()=>{
      const initializeNaverLogin = () => {
        const naverLogin = new naver.LoginWithNaverId({
            clientId : process.env.NAVER_CLIENT_ID, // 환경변수 사용
            callbackUrl :process.env.NAVER_CALLBACK_URL, // 환경변수 사용
            //팝업창으로 로그인 진행 여부
            isPopup : false,
            //버튼타입
            loginButton : {color : 'green', type : 1, height : 38},
            callbackHandle : true,
        })
        naverLogin.init()

}
export default Login

process.env.환경변수명으로 불러올 수 있다.

불러올 때에는 REACT_APP_을 제외해도 사용 가능하다!

 

 

env.development과 .env.production

환경변수를 알아보면 이런 파일명을 마주하게 되기도 한다.

 

이 두 파일명의 차이점은

.env.development -> npm start 실행 시 사용

.env.production -> npm run build 실행 시 사용

 

이라는 점에서 차이가 있다고 한다.