Firebase?

Firebase는 데이터베이스였는데 구글이 인수하고 확장함으로써 웹에서 백엔드 기능 서비스를 제공하고 있다. 사용하는 경우는 Firebase는 실제 프로젝트에 사용하기보다 아이디어가 있어서 프로젝트를 테스트 해보고 싶을 때 사용하기 적절한 서비스이다.

env?

env파일은 git에 코드를 올릴때 공개하고 싶지 않은 데이터를 저장해두는 파일이다.

fbase.js

import { initializeApp } from "firebase/app";
import "firebase/auth"
import { getAuth } from "firebase/auth";
const firebaseConfig = {
    apiKey: process.env.REACT_APP_API_KEY,
    authDomain: process.env.REACT_APP_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
  };

const app = initializeApp(firebaseConfig);
export const authService = getAuth();

이 코드에서 fiarbaseConfig 부분을 보면 Key, Id와 같이 공개적으로 올리기에 민감한 데이터들이 있는데 이런 데이터들을 만약 Key, Id 값 그대로 작성하게 된다면 git에 코드를 올렸을 때 git에 Key, Id 같은 정보들이 그대로 공개될 것이다.

.env

REACT_APP_API_KEY=AIzaSyCPBm0zMfslT4Gl7rMkPm8WXPyiox-vJRo
REACT_APP_AUTH_DOMAIN=nwtitter.firebaseapp.com
REACT_APP_PROJECT_ID=nwtitter
REACT_APP_STORAGE_BUCKET=nwtitter.appspot.com
REACT_APP_MESSAGING_SENDER_ID=860508248363
REACT_APP_APP_ID=1:860508248363:web:0baebcc362534a468c4d6e

이와 같이 env파일을 작성해두면 js파일에서 process.env.변수명으로 호출하여 사용할 수있다.

.gitignore

# dependencies
/node_modules
/.pnp
.pnp.js

# testing
/coverage

# production
/build

# misc
.DS_Store
.env.local
.env.development.local
.env.test.local
.env.production.local

npm-debug.log*
yarn-debug.log*
yarn-error.log*
.env

gitignore파일은 git에 프로젝트를 올릴 때 제외시키고 싶은 요소들을 작성하는 파일이다.
위와 같이 .env를 gitignore파일에 작성해주면 git에 코드를 올릴때 env파일을 제외하고 프로젝트를 push하게 된다.

따라서 민감한 데이터를 env파일 안에 작성해줌으로써 정보를 지켜줄 수 있는 것이다.
하지만, 결국에는 env파일에 있던 데이터가 페이지가 로드될 때 넘어가는 것이기 때문에 이 방법이 보안을 위한 방법이라기 보다는 git에 코드를 올릴 때에만 정보를 가려주는 용도이다.

데이터가 두번씩 호출되는 현상

위 이미지는 firestore를 통해서 데이터를 가져오는 과정 중에 I'm still hungry와 I'm always hungry 두 가지 데이터가 각각 두 번씩 실행되는 현상이 발생한 것이다.
이 문제는 리액트 프로젝트의 index.js파일에서 strictmode기능 때문인데 stricemode는 개발환경에서만 side effect를 줄이기 위해서 두 번씩 실행시키는 것이다.

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './components/App';


const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

그러므로 React.StrictMode부분을 제거해주면 해결된다.

해결된 모습