1.2 React Setup

노마드코더의 트위터 클론 강의 내용을 바탕으로 진행되었습니다.

🙋‍♀️ CRA로 시작하기

npx create-react-app [app-name]

개인적인 키 코드 정보는 어떻게 보관할까?

Firebase Setup에서 추가 했던 아래 코드 같은 경우, github에 그대로 올리게 되면 프라이빗한 코드가 온세상에 노출이 되어버린다.

//fbase.js
const firebaseConfig={...}

이런 상황을 피하고 보안을 위해 (완벽하진 않지만) .env 를 사용 해보도록 하자.
.env 파일로 만들어 키 코드를 저장해두고 process.env 로 불러와 사용하도록 할 수 있다.
React CRA 을 사용했을 경우, .env 를 사용할 때 주의 해야 할 점이 있는데, 앞에 REACT_APP_ 를 붙여야 한다는 사실이다.

//.env
REACT_APP_API_KEY=asdfghjkl
REACT_APP_AUTH_DOMAIN=qwertyuiop
//...

//firebase.js
const firebaseConfig = {
  apiKey: process.env.REACT_APP_API_KEY,
  authDomain: process.env.REACT_APP_AUTH_DOMAIN,
  //...
};

React Directory structure

src/
  index.js
  firebase.js
  components/
    App.js
    Router.js
  routes/
    Auth.js
    Home.js
    Profile.js

Router

Router.js 안에 Route를 모아두는 형식으로 진행되었다.
그럼 이제 Router를 사용해보자.

npm install react-router-dom

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


const AppRouter = ({ isLoggedIn }) => {
  return (
    <Router>
      <Switch>
        {isLoggedIn ? (
          <>
            <Route exact path="/">
              <Home />
            </Route>
            <Route exact path="/profile">
              <Profile />
            </Route>
          </>
        ) : (
          <>
            <Route exact path="/">
              <Auth />
            </Route>
            <Redirect from="*" to="/" />
          </>
        )}
      </Switch>
    </Router>
  );
};

export default AppRouter;

isLoggedIn : App.js 에서 useState 로 상태를 관리하고, AppRouter에게 prop으로 내려 주는 형식으로 작성했다.
그래서 Router.js 에서는 분리한 만큼 라우트 관련된 내용만 다루도록 했다.

이제 기본적인 설정들은 마무리 되었고, 인증 관련 내용부터 하나씩 내용을 정리해보도록 해야겠다.