[TIL] Firebase 리액트에서 .env 환경변수 및 input autoFoucus

대빵·2023년 11월 23일

.env

웹, 앱 개발을 하다보면 포트, DB관련 정보, API_KEY등.. 개발자 혼자서 또는 팀만 알아야 하는 값 즉, git, 오픈소스에 올리면 안되는 값들이 있다. 이때 필요한 것이 dotenv패키지이며 환경변수 파일을 외부에 만들어 URL, 포트, API_KEY등..을 저장시켜 소스코드 내에 하드 코딩하지 않고 사용할 수 있다.

.env파일

외부 파일(.env)에 환경번수를 정의하여 변수로 받아오는 이유는 보안과 유지보수에 용이하기 때문이다. .env파일은 프로젝트의 최상위 루트에 파일을 만들어 놓아야 한다.

.env내에서 환경변수 적는 법

REACT_APP_FIREBASE_API_KEY = API_KEY
REACT_APP_FIREBASE_AUTH_DOMAIN = AUTH_DOMAIN
REACT_APP_FIREBASE_PROJECT_ID = PROJECT_ID
REACT_APP_FIREBASE_STORAGE_BUCKET = STORAGE_BUCKET
REACT_APP_FIREBASE_MESSAGING_SENDER_ID = MESSAGING_SENDER_ID
REACT_APP_FIREBASE_MEASUREMENT_ID = MEASUREMENT_ID
REACT_APP_CLIENT_ID = CLIENT_ID

create-react-app에서는 보안이 필요한 환경변수의 유출을 미연에 방지하기 위해 REACT_APP_으로 시작되지 않는 환경변수는 무시하기 때문에 항상 변수명은 REACT_APP_을 앞에 작성 . 후변수이름을 만들어 주어야 한다.

환경변수 가져오는 법

const firebaseConfig = {
  apiKey: process.env.REACT_APP_FB_API_KEY,
  authDomain: process.env.REACT_APP_FB_AUTH_DOMAIN,
  projectId: process.env.REACT_APP_PROJECT_ID,
  storageBucket: process.env.REACT_APP_STORAGE_BUCKET,
  messagingSenderId: process.env.REACT_APP_MESSAGING_SENDER_ID,
  appId: process.env.REACT_APP_APP_ID
};

리액트는 라이브러리나 컴포넌트 사용 시 import를 하고 나서 사용을 할 수있지만, .env에 등록된 변수는 별도의 import가 필요하지 않습니다. 전역 어디서든 process.env.로 작성해둔 환경변수를 가져와서 사용하면 된다.

input autoFoucus

정적인 방법

포커싱 처리하고자 하는 input element에 autoFoucus속성을 사용

<input type="text" autoFoucus />

동적인 방법

Hook기반의 컴포넌트

const App = () => {
  const inputFocus = useRef(null);
    
  useEffect(() => {
    inputFocus.current.focus();
  }, []);
  
  return (
    <React.Fragment>
      <input ref={inputFocus} />
    </React.Fragment>
}