[React+Firebase] Set up, Auth

원하는 디렉터리에

> npx create-react-app 내플젝이름

> code 내플젝이름 

이렇게 명령어 입력해서 VScode 편집기로 내 플젝 열기

 

VScode 터미널에서 firebase를 install 해준다.

npm i firebase@9.6.1

 

src 폴더에 firebase.js 파일 만들어주고

내가 firebase 사이트에서 만든 앱 정보 넣어주기

import firebase from 'firebase/app';

const firebaseConfig = {
 ...
};

export default firebase.initializeApp(firebaseConfig);

 

index.js에서 import해주고 console.log 찍어보기 (실행은 VScode 터미널에서 npm run start)

 

object가 잘 나온다.

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
// import 부분
import firebase from 'firebase/compat/app';
console.log(firebase);

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

reportWebVitals();

 

 

firebase.js 에 key와 url을 적어두는 것 대신에 .env 파일을 생성했다. (.env 파일은 src폴더 '안'말고 폴더와 같은 깊이에 있어야한다)

.env파일에는 환경변수가 들어가는데 React.js 어플리케이션의 경우에 환경 변수를 써야 한다면

REACT_APP으로 시작해야하고 그 뒤로 내가 원하는 이름을 붙여줘야한다.

원칙이다!!!

이 부분은 Github만을 위한 코드이다. 서비스를 위해 빌드하고 웹 사이트를 띄우면

create-react-app은 이 코드를 모두 실제 값들로 변환한다.

 

 

React Router Setup

src 폴더에 components, routes 폴더 두 개를 만들어주었다. 

routes에는 Auth, EditProfile, Home, Profile 4개의 페이지가 될 파일을 만들어주었다.

 

그리고 components에 Router.js 파일을 하나 더 만들어주었다.

🔽 Router.js

로그인 상태면 Home 으로 아니라면 Auth 페이지를 보여준다.

import React, { useState } from 'react';
import { HashRouter as Router, Route, Switch } from 'react-router-dom';
import Auth from '../routes/Auth';
import Home from '../routes/Home';

const AppRouter = ({ isLoggedIn }) => {
  return (
    <Router>
      <Switch>
        {isLoggedIn ? (
          <>
            <Route exact path="/">
              <Home />
            </Route>
          </>
        ) : (
          <>
            <Route exact path="/">
              <Auth />
            </Route>
          </>
        )}
      </Switch>
    </Router>
  );
};

export default AppRouter;

state 는 App으로 넣어주고 props 로 전달해줬다.

import React, { useState } from 'react';
import AppRouter from './Router';

function App() {
  const [isLoggedIn, setIsLoggedIn] = useState(false);
  // props 전달
  return <AppRouter isLoggedIn={isLoggedIn} />;
}

export default App;

 

 

 

App 안에 AppRouter를 사용하는 이유는 footer를 사용하고 싶을 수도 있기 때문..!

 

https://firebase.google.com/docs/reference/js/auth

인증 패키지  |  Firebase

 

auth를 사용하기 위해서 제일 먼저 할 것은 import 하기이다.

https://create-react-app.dev/docs/importing-a-component

Importing a Component | Create React App

 

이렇게 함으로써 절대경로로 import 해야했던 것을 그냥 import 할 수 있게 되었다.

(컴퓨터가 모든 것들이 src로부터 시작된다는 것을 알게 된다.)

- 버전 문제 때문에 코드가 조금씩 바뀌었다.

// 여기에서
import fbase from "../fbase";
// 이렇게
import { auth } from 'fbase';

 

firbase.js 이름을 fbase.js로 바꾸고 auth를 import 해줬다

🔽 fbase.js

import { initializeApp } from 'firebase/app';
import { getAuth } from 'firebase/auth';

const firebaseConfig = {
  ...
};

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

 

우리가 만든 앱에서 Authentication 탭에 들어가서 여러 가지를 설정해준다.

 

이메일/비밀번호, Google, .Github를 켜줬는데

Github를 키려면 Github 에서 App을 하나 만들어주어야한다.

https://github.com/settings/apps

GitHub: Where the world builds software

 

 

 

Register 해준 후 보이는 ID와 비밀번호를 넣어주면 된다.

 

 

!오류 - 이런 오류가 났는데 Network 탭에서 No throttling으로 설정하니까 다시 잘 됐다.

VM156:6770 crbug/1173575, non-JS module files deprecated.
(anonymous) @ VM156:6770