트위터 클론코딩 -2 Router 설정

이번엔 프로젝트 구조와 Router 설정을 해보자 !

 

src 폴더 안에 compoents와 routes 폴더를 만든 뒤 필요한 파일들을 생성 해준다.

그리고 gitignore에 따로 apikey 값들은 빼둘려고 .env 파일을 만들어 그 곳에 보관해뒀다.

 

 

AppRouter 파일에 route 설정을 해줬다.

 

import React, { useState } from "react";
import { HashRouter as Router, Switch, Route } from "react-router-dom";
import Home from "../routes/Home";
import Profile from "../routes/Profile";
import Auth from "../routes/Auth";
function AppRouter() {
  const [LoggedIn, setLoggedIn] = useState(true);
  return (
    <Router>
      <Switch>
        {LoggedIn ? (
          <>
            <Route exact path="/">
              <Home />
            </Route>
          </>
        ) : (
          <Route exact path="/">
            <Auth />
          </Route>
        )}
      </Switch>
    </Router>
  );
}

export default AppRouter;

 

 

아직 로그인 값은 전달 안해줬지만 useState에 일단 로그인 유무를 체크해서 삼항연산자를 활용해 조건부 렌더링으로 

보여지는 페이지를 나누어 줬다.

 

이번 프로젝트에는 늘 사용 해왔던 BrowserRouter가 아닌 HashRouter을 사용했는데 그 둘의 차이는 다음과 같다.

 

BrowserRouter 와 HashRouter 의 차이점

BrowserRouter
* HTML5의 history API를 활용해서 UI를 업데이트 한다.
* 동적인 페이지에 적합하다. (서버에 있는 데이터들을 스크립트에 의해 가공 처리 한 후 생성되어 전달되는 웹페이지)
* 새로 고침 하면 경로를 찾지 못해서 에러가 난다. (주소를 사용하여 페이지를 찾아갈 때에도 에러 발생)
* 이를 해결하기 위해서는 서버에 추가적인 세팅이 필요하다. 페이지의 유무를 서버에 알려줘야 하며 서버 세팅시 검색엔진에 신경써야한다.
* github pages에서 설정하기 복잡하다. (배포가 복잡)

HashRouter
* URL의 hash를 활용한 라우터이다.
* 주소에 #가 붙는다.
* 정적인 페이지에 적합하다. (미리 저장된 페이지가 그대로 보여지는 웹페이지)
* 검색 엔진으로 읽지 못한다. #값 때문에 서버가 읽지 못하고 서버가 페이지의 유무를 알지 못하기 때문. (그 이유 때문에 거의 사용하지 않는다.)
* 새로고침 해도 에러가 나지 않는다.
* github pages에서 설정하기 간편하다. (배포가 간편)

 

 

 

백엔드와 연동할 땐 HashRouter는 잘 안쓰는 것 같다.

 

 

참고링크:worker-k.tistory.com/entry/React-BrowserRouter%EC%99%80-HashRouter%EC%9D%98-%EC%B0%A8%EC%9D%B4%EC%A0%90-%EC%A0%95%EB%A6%AC?category=884697

---

개발이슈 : 원레 알고 있었지만 한번 더 찾아본 jsconfig.json !