(이전버전/JS)React study - twitter clone(1)

 

import React, { useState } from "react";

import { HashRouter as Router, Route, Switch } from "react-router-dom";

export default () => {

    //hooks

    const [isLoggedIn, setIsLoggedIn] = useState(false);

    return (

        <Router>

            <Switch>

                {/* {isLoggedIn ? show home : show login page} */}

                {isLoggedIn ?

                <>

                <Route>

                </Route>

                </> : <Route><Auth/></Route>

                }

            </Switch>

        </Router>

    )

}

Router.js에서 <Auth/> 태그를 열어서 작성해주고

 

import React from "react";

const Auth = () => <span>Auth</span>;

export default Auth;

Auth.js에서 위처럼 선언해주면 자동으로 import된다 ( 다른js파일에서 import 상단에 작성 )

Auth.js >> Authentication 화면

 

export default () => {

    //hooks

    const [isLoggedIn, setIsLoggedIn] = useState(false);

    return (

        <Router>

            <Switch>

                {/* {isLoggedIn ? show home : show login page} */}

                {isLoggedIn ? (

                <>

                <Route exact path="/">

                    <Home/>

                </Route>

                </> ) : (

                <Route exact path="/">

                    <Auth/>

                </Route>

                )}

            </Switch>

        </Router>

    )

}

로그인 여부를 확인해서 로그인 상태라면 <Home/> 화면을 출력

로그인을 하지 않았거나 기본상태일 경우에는 false를 반환받아 <Auth/> 화면을 출력

<> </>  Fragment >> 많은 요소들을 render하고 싶을 때 사용 (부모요소가 없을 때)

<Switch> </Switch>   Switch >> 한번에 하나의 Route만 볼 수 있게 해준다

 

기존의Router.js 파일에 있던 

    //hooks

    const [isLoggedIn, setIsLoggedIn] = useState(false);

코드를 App.js 파일로 이동시킨다.

 

 

function App() {

    //hooks

    const [isLoggedIn, setIsLoggedIn] = useState(false);

  return (

    <div className="App">

      <AppRouter isLoggedIn={isLoggedIn}/>

    </div>

  );

}

Router.js에 prop을 전달하기 위해서 isLoggedIn={isLoggedIn}  을 작성하고

Router.js파일에 const AppRouter = ({isLoggedIn}) => { 로 받아준다

 

 

import "firebase/auth";

firebase에서 auth를 사용하기위해서 가져오기

 

 

import firebase from "../firebase";

App.js에서 import

 

 

{

    "compilerOptions": {

        "baseUrl": "src"

    },

    "include": ["src"]

}

jsconfig.json 파일을 생성하고 코드 작성

src를 잡아주면 import를 할 때

 

 

import AppRouter from "./Router";

import AppRouter from "components/Router";

./ ../ 를 사용하지않고 src부터 시작하여 경로를 지정해 줄 수 있다.

 

 

firebase/auth 에서 가져오는값들은 아래의 공식문서에서 확인가능

 

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

Auth interface  |  Firebase JavaScript API reference

 

authService.currentUser 로 유저 로그인여부를 확인가능

 

 

const [isLoggedIn, setIsLoggedIn] = useState(authService.currentUser);

useState()에 값으로 넘겨 유저의 로그인여부를 확인가능.

 

 

 

firebase 프로젝트에서Authentication에서 추가해주기

github를 추가하려면 github에서 app설정해줘야함.

 

settings에서 Developer settings를 클릭

 

OAuth Apps >> new application

 

위와같이 작성을 해주고 

 

 

 

URL은 firebase에서 제공하는 URL을 사용하면 된다.

 

 

 

application을 생성하면 발급되는 Client ID와 Cl