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 에서는 분리한 만큼 라우트 관련된 내용만 다루도록 했다.

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

좋은 웹페이지 즐겨찾기