React + firebase로 트워터 클론코딩 1일차 (feat 노마드코더)

리액트 + 파이어베이스 기초셋팅

리액트로 CRA 하고, 파이어 베이스와 연결하기 위해 Firebase.js를 만들어 SDK를 넣는다.

📝 Firebase.js

import firebase from 'firebase/app'
import "firebase/firebase-analytics" import 할 것 들을 import,
const firebaseConfig = SDK 
firebase.initializeApp(firebaseConfig);
export const firebaseInstance = firebase;
export const authService = firebase.auth();

// export 해 둘 것들을 선언해둠.

Router.JS

👩‍🎓 Routing을 맡을 Router.js를 만들어서 중앙 서버 역할을 하게 함

• Home,Sign,Auth 총 3개의 컴포넌트를 제작

const [isLoggedIn,setIsLoggedIn] = useState(false)
//로그인 유무를 판단하기위해 토글 state를 제작 
<Router>
	<Switch>
	  {
	    isLoggedIn ? (
	    <> // 예를 들면 JSX문법에서 <div></div>같은 것이다. 
              // 삼항연산자는 원래 한줄 밖에 안되는데 ( <> </> )를 쓰면 여러줄 가능하다
	   <Route exact path="/">
	     <Home/>
	   </Route>
	   </>
	  ) : (
	  <Route exact path="/">
	     <sign/>
	  </Route>
          <Route exat path="/Auth">
            <Auth/>
          </Route>
          //Sign에서 회원가입 버튼을 누르면 Auth로 가게 만들기 전 만들어둠.
	  )
	}
       </Switch>
</Router>

👩‍🎓 로그인이 됐을 땐 Home을 메인으로 보여주고 아닐 땐 Sign를 메인으로 보여준다