Twitter_Clone(1)

💻 노마드 코더에서의 twitter clone 프로젝트.
😀 준비과정
1. create-react-app 프로젝트 설치.
2. firebase 프로젝트 만들기.
3. firebase 패키지 설치.

📌 firebase 설치.

🎈 firebase import 해주며, js파일 만들어주기.

💻 firebase.js

import firebase from "firebase/app"

const firebaseConfig = {
   apiKey: "AIzaSyBg0hPYEK6DM7roObrG-N9raHQTi-yHktU",
   authDomain: "twitter-18cc6.firebaseapp.com",
   projectId: "twitter-18cc6",
   storageBucket: "twitter-18cc6.appspot.com",
   messagingSenderId: "715865745869",
   appId: "1:715865745869:web:293bca02cdc5c3eec33c84"
 };

 export default firebase.initializeApp(firebaseConfig);

📌 환경변수

🎈 환경 변수 나눠주기.
- .env파일 나눠줘서 key보이지 않게 하기.

💻 .env

    REACT_APP_API_KEY = AIzaSyBg0hPYEK6DM7roObrG-N9raHQTi-yHktU,
    REACT_APP_AUTH_DOMAIN = twitter-18cc6.firebaseapp.com,
    REACT_APP_PROJECT_ID= twitter-18cc6,
    REACT_APP_STORAGE_BUCKET= twitter-18cc6.appspot.com,
    REACT_APP_MESSAGEIN_ID = 715865745869,
    REACT_APP_APP_ID = 1:715865745869:web:293bca02cdc5c3eec33c84

💻 firebase.js

const firebaseConfig = {
    apiKey: process.env.REACT_APP_API_KEY,
    authDomain: process.env.REACT_APP_AUTO_DOMAIN,
    projectId: process.env.REACT_APP_PROJECT_ID,
    storageBucket: process.env.REACT_APP_STORAGE_BUCKET,
    messagingSenderId: process.env.REACT_APP_MESSAGIN_ID,
    appId: process.env.REACT_APP_APP_ID,
  };

📌 코드 설명

1. git에 자신의 key가 올라가지 않게 하기 위해 나눠주기.
2. 환경변수는 REACT_APP로 시작하게 약속.
3. REACT_APP 없으면 ❌ 꼭 써주기.

📌 Router setup

🎈 npm install react-router-dom
import {HashRouter as Router, Route, Switch} from "react-router-dom"

💻 Router.js

const AppRouter = () => {
    const [isLoggedIn, setIsLoggedIn] = useState(false);
    return(
        <Router>
            <Switch>
                {isLoggedIn? ( 
                <> 
                <Route exact path = "/">
                   <Home /> 
                </Route>
                </>
                ): (
                <Route exact path="/">
                    <Auth />
                    </Route> 
                    )}
            </Switch>
        </Router>
    )
}

export default AppRouter;

📌 코드 설명

1. Hook의 useState를 사용.
   • useState의 값 isLoggedIn : bool값.
   • 초기값은 false로 설정.
2. isLoggedIn의 bool값에 의해 Route 설정 다르게.
3. isLoggedIn : true -> Home 페이지.
4. isLoggedIn : false -> Auth 페이지.
5. <></> : 여러개를 묶고싶을때 사용.
6. Switch : 자식 컴포넌트 Route중 매치되는 첫 번째 요소를 렌더링.

<출처 : 노마드 코더>