개발 환경 설정

• Firebase
• Node.js
• React.js

프로젝트 생성

npx create-react-app <프로젝트 이름>

Firebase

firebase는 다양한 서버 기능을 제공한다.
https://firebase.google.com/?hl=ko&authuser=0 여기서 확인가능~

• 데이터 저장을 위한 데이터베이스 서비스
• 회원가입, 로그인을 위한 인증 서비스
• 서비스 개시를 위한 호스팅 서비스

를 사용할 것이다~

1. Firebase 프로젝트 만들기 및 앱 등록

자바스크립트 앱에 Firebase를 추가하려면 우선 Firebase 프로젝트를 만들고 해당 프로젝트에 앱을 등록해야한다. Firebase에 앱을 등록하면 Firebase 프로젝트 리소스와 앱을 연결하는 데 사용할 Firebase 구성 객체를 얻게 됨

1. 프로젝트 추가
   
   프로젝트 이름 지정하고 상위 리소스 설정 필요 시 설정해준다.
   구글 애널리틱스 사용 x

2. 파이어베이스에 앱 등록
   웹 아이콘을 클릭하여 설정 워크플로를 시작
   앱 닉네임 설정 > 앱 등록

3. Firebase SDK 추가내용에서 firebaseConfig 값 복사

2. SDK 설치 및 Firebase 초기화

1. 명령어를 사용하여 프로젝트에 firebase를 추가한다.

   npm install firebase

2. 앱에서 Firebase를 초기화하고 Firebase 앱 객체 생성
   이전에 복사해두었던 firebaseConfig를 붙여넣으면 됨

   import { initializeApp } from 'firebase/app';
   
   // TODO: Replace the following with your app's Firebase project configuration
   const firebaseConfig = {
     //...
   };
   
   const app = initializeApp(firebaseConfig);

---

react-router-dom

npm install react-router-dom

라우터를 추가해주면 된다~

---

초기 화면

로그인이 구현되지 않은 상태의 화면이다.
Auth 컴포넌트를 렌더링 한 상태임

index.js

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

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

App.js

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

const App = () => {
  const [isLoggedIn, setIsLoggedIn] = useState(false);
  return (
    <>
      <AppRouter isLoggedIn={isLoggedIn} />
      <footer>&copy; {new Date().getFullYear()} Jwitter</footer>
    </>
  );
};

export default App;

AppRouter.jsx

import { BrowserRouter, Route, Routes } from 'react-router-dom';
import Auth from '../routes/Auth';
import Home from '../routes/Home';
// 상위 컴포넌트에게서 받은 props는 구조분해할당으로 사용가능하다
const AppRouter = ({ isLoggedIn }) => {
  return (
    <BrowserRouter>
      <Routes>
        {isLoggedIn ? (
          <Route path="/" element={<Home />} />
        ) : (
          <Route path="/" element={<Auth />} />
        )}
      </Routes>
    </BrowserRouter>
  );
};

export default AppRouter;

• 로그인 여부를 판단하여 Home 페이지와 Auth 페이지로 나뉘어진다.

Auth.jsx

import React from 'react';
import { useState } from 'react';

const Auth = () => {
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');

  const onChange = (e) => {
    const {
      target: { name, value },
    } = e;
    if (name === 'email') {
      setEmail(value);
    } else if (name === 'password') {
      setPassword(value);
    }
  };

  const onSubmit = (e) => {
    e.preventDefault();
 
  };
  return (
    <div>
      <form onSubmit={onSubmit}>
        <input
          type="email"
          name="email"
          placeholder="Email"
          value={email}
          onChange={onChange}
          required
        />
        <input
          type="password"
          name="password"
          value={password}
          placeholder="Password"
          onChange={onChange}
          required
        />
        <input type="submit" />
      </form>
      <div>
        <button>Continue with Google</button>
        <button>Continue with GitHub</button>
      </div>
    </div>
  );
};

export default Auth;