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 에서는 분리한 만큼 라우트 관련된 내용만 다루도록 했다.
이제 기본적인 설정들은 마무리 되었고, 인증 관련 내용부터 하나씩 내용을 정리해보도록 해야겠다.
Author And Source
이 문제에 관하여(1.2 React Setup), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@arihi/1.2-React-Setup저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)