오늘 알게된 내용 (React Router)

배진오

@baealex

소비적인 일보단 생산적인 일을 좋아합니다.

React-Router-Dom

기존 포트폴리오 페이지#가 단일 페이지로 생성되었는데 내가 만들었던 작업물을 좀 더 다양하게 보여주고 기존 블로그에 있었던 팔레트 페이지도 이쪽으로 옮겨오려 하였음. 여하간 페이지 분리가 필요하게 되었음

개요
  • SPA는 원래 단일 페이지의 어플리케이션을 의미하지만 실직적으로 거의 모든 웹사이트에는 페이지 분리가 필요함. 하지만 SPA의 모든 리소스는 합쳐져 있으므로 사용자가 방문하지 않을 페이지의 리소스까지 받아오는 문제가 생길 수 있음. 라우터로 페이지를 분할함으로써 사용자가 필요한 리소스만을 가져와서 로딩하도록 도와주는 라이브러리임
  • <BrowserRouter>안에 <Route path="/" component={Component}>를 생성하여 사용할 수 있음. 내가 느끼기론 마치 장고의 urls.py를 만드는 것 같은 느낌을 받았음. Routeexact라는 옵션을 명시하지 않으면 모든 페이지에서 불러오게 됨 필요에 따라서 설정하거나 설정하지 않으면 됨
  • 분리된 Route들은 Link를 이용해서 새로고침 없이(!) 페이지를 넘어 다닐 수 있음 <Link to="/pages">와 같이 생성함
문제점

위 라이브러리를 사용하여 손쉽게 페이지를 분리할 수 있었으나 몇 가지 문제점을 발견할 수 있었음

  • 깃허브 페이지에 배포된 사이트에 접속할 경우 path로 직접 접근할 때 404 에러가 발생하였음
    • 깃허브 페이지는 태초에 React 배포를 염두하지 않았기 때문에 이러한 문제가 발생한다고 함 404index에서 다음 코드를 추가하는 등 작업이 필요함. 깃허브 페이지에서 커스텀 404를 사용할 수 있는데 이 페이지를 활용해서 다시 메인으로 돌아와 요청했던 적합한 페이지를 찾아가는 방식임
    • 하지만 이러한 경우엔 실질적으로 404가 발생해도 유저가 알 수 없음 따라서 별도의 404 컴포넌트를 생성하여 요청했던 적합한 페이지가 없으면 보여주도록 해야함. Router4 이후 버전인 경우 대충 아래와 같은 느낌으로 만들게 됨
      <Switch>
      <Route exact path="/" component=...>
      <Route component={NotFound}>
      </Switch>
  • Link를 통해서 넘어간 페이지가 이전 넘어가기 전 페이지와 동일한 스크롤 위치를 가지고 있었음
    • 이를 해결하기 위해서 라우터를 감싸는 새로운 컨포넌트를 만들어서 강제로 상위 위치로 이동할 수 있게 하였음
<BrowserRouter>
  <ScrollToTop>
    <Navbar/>
    <Switch>
      <Route exact path="/" component={Index}/>
      <Route exact path="/product" component={Products}/>
      <Route exact path="/palette" component={Palette}/>
      <Route component={NoMatch}/>
    </Switch>
  </ScrollToTop>
</BrowserRouter>

전체적으로 위와같은 모습이 되었음


Node-SASS

기존 포트폴리오 페이지는 리액트를 다룬지 얼마 안되서 만들었던 페이지여서 상당히 난잡하게 구성되어 있었음 이를 좀 더 컴포넌트 단위로 쪼개고 컴포넌트 단위별로 관리하기 편리하게 각각의 스타일 파일로 분리하려 하였고 그러면서 scss를 사용하고자 함

npm i node-sass

위와같이 패키지를 설치하고 scss 파일을 생성하여 컴포넌트에 import 해주면 알아서 컴파일되고 다해줌. 이걸 왜 이제야 썻을까...


CSS, Grid and Flex

이번 포트폴리오 페이지에 꼭 넣고 싶었던 레이아웃이 있었음 바로 그리드 형태로 된 페이지임.

이제까지 레이아웃은 항상 부트스트랩에 의존하고 있었는데 직접 시간을 들여 그리드에 대해서 알아봄. Grid와 Flex는 (내 기준에서) 최신 CSS 방법론으로 알려짐. 처음에 Flex를 들어보기만 했고 사용할 일은 없었는데 레아아웃 배치 작업하다가 알게 되었음. 레이아웃을 뒤집는데 CSS 코드 한 줄로 가능하다니 놀라움을 금치 못함. 아직 완벽하게 다루진 못하지만 지속적으로 알아갈 예정임. 아래는 그리드의 간단한 사용방법.

.grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    @media (max-width: 1200px) and (min-width: 760px) {
        grid-template-columns: 1fr 1fr;
    }
    @media (max-width: 760px){
        grid-template-columns: 1fr;
    }
}

위와같이 해두면 크기에 맞게 그리드를 알아서 배치함 매우 편리한 듯... 새로운 기술이 나오고 이 기술들을 익혀가면서 내가 여지껏 알고 있었던 지식들이 구데기가 되어가는 걸 느낌. 새로 익혀야 한다는 사실도 속상한데 기존의 생각들이 쓸모없어 진다는 건 더더욱 속상하다.

😥 작성된 댓글이 없습니다!
댓글을 작성하기 위해 로그인이 필요합니다.