[트위터 클론 코딩] #2. LogIn/Out-1

~2.2까지의 강의

 

AppRouter를 하나의 용도, 즉 Routes들만 보여주는 것으로만 사용해야 한다.

그래서 App.js에다가 useState를 쓴다음에 분리시켜서 쓸 수 있게 한다.

 

그 전에, fbase에 무엇인가를 추가해보자.

export const authService = firebase.auth();

먼저 authService를 사용하고 싶다면 import해야하는데, 우리는 이미 import했다.

그리고, 위의 코드를 export 시켜서 다른 곳에서도 authService를 사용할 수 있도록 한다.

 

jsconfig.json

{
    "compilerOptions": {
      "baseUrl": "src"
    },
    "include": ["src"]
 }

 

jsconfig를 만들면, 덕분에 src로 시작되는 것을 알게된다.

따라서 기존에 import할 때 생겼던 ..을 쓰지 않아도 된다.

 

App.js

import React, { useState } from "react";
import AppRouter from "components/Router";
import { authService } from "fbase";


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

export default App;

 

useState는 사용자의 로그인 정보를 알게 된다.

즉 실행되고 나면, 로그인 되었는지 판단해서 정보를 AppRouter로 보내준다.

 

Router.js

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;

그 정보를 받으면, 로그인이 되었을 때는 Home으로, 되지 않았을 때는 Auth로 이동한다.

그런데 우리는 아직 로그인을 구현하지 않았으므로 Auth로 가게된다.

 

---

로그인을 구현하기 전, firebase 콘솔에서 Authentication섹션으로 가보자.

시작하기 클릭을 하면, 오른쪽과 같은 화면이 나온다. 먼저, 기본 제공업체의 이메일/비밀번호를 클릭한다.

왼쪽 그림과 같이 사용 설정을 클릭한 후, 추가 제공업체로 Google을 선택한 후 마찬가지로 사용설정을 클릭한다.

 

그 다음에 깃허브를 추가하기 위해서는 먼저, 깃허브에서 사용설정을 해야한다.

Settings/Developer settings에 있는 OAuth Apps를 들어가, New OAuth App을 클릭한다.

왼쪽(firebase)에 나와있는 주소가 깃허브의 주소이다. 깃허브로 들어가 다음과 같이 입력해준다.

firebase에 Client ID와 key를 입력하라고 하는데, 마찬가지로 깃허브에 나와있다!

 

Auth.js

import React,{useState} from 'react';

const Auth = () => {
    const [email, setEmail] = useState("");
    const [password, setPassword] = useState("");
    const onChange = (event) => {
      const {
        target: { name, value },
      } = event;
      if (name === "email") {
        setEmail(value);
      } else if (name === "password") {
        setPassword(value);
      }
    };
    const onSubmit = (event) => {
      event.preventDefault();
    };
    return (
      <div>
        <form onSubmit={onSubmit}>
          <input
            name="email"
            type="text"
            placeholder="Email"
            required
            value={email}
            onChange={onChange}
          />
          <input
            name="password"
            type="password"
            placeholder="Password"
            required
            value={password}
            onChange={onChange}
          />
          <input type="submit" value="Log In" />
        </form>
        <div>
          <button>Continue with Google</button>
          <button>Continue with Github</button>
        </div>
      </div>
    );
  };
export default Auth;

 

input은 onChange와 value가 있다.

value를 얻어내서 사용하고 싶은 것들이 있기 때문에, useState를 두개(email과 password) 만든다.

 

onChange를 쓸 때마다, 즉 키를 누르는 순간마다 값이 바뀔 때마다 onChange가 생성된다.

onChange에서 event는 무슨 일이 일어났는가?이다. 

그리고 그 event로부터 많은 정보, 즉 변경이 일어난 부분을 받아올 수 있다. 

target에는 name, value가 있다.

우리는 name을 써주는 것이고 value는 키보드를 통해 입력한 값이다.

 

입력값이 email, password이면 값을바꿔주는 것이다.

input마다 onChange function을 호출한다. 즉 input에 입력한 값들을 토대로 저장시킨다.

input이 없으면 뭐라 타이핑하던간에 작동하지 않는데, input의 value는 state에 저장된다.

 

HTML만을 사용해서 from을 submit하는 순간에 새로고침이 되어 버린다.

이렇게 된다면 React와 state가 사라진다.

그래서 eventLister를 사용해서 submit할 때마다,

기본행위가 실행되는 것을 원치않고, 내가 컨트롤 하라는 뜻에서 preventDefault를 적어준다.

 

실행화면