공부한점

오늘은 코드숨 6주차 라우팅 강의를 들었습니다!

정리

historyApiFallback

존재하지않는 웹페이지 접근시 index.html로 연결해줄수가있는데 webpack devServer 에서 설정해줄수가있다.

module.exports = {
  //...
  devServer: {
    historyApiFallback: {
      index: 'index.html',
    },
  },
};

window.location 객체

객체에는 url에 관련된 다양한 정보들을 얻어올수가있다

Routing

화면을 전환하는 내비게이션을 관리하기 위한 기능

react-router

react에서 라이브러리 사용하지않고 구현해보기

  const { location: { pathname } } = window;
  const MyComponent = {
    '/': IndexPage,
    '/video': VideoPage,
    '/book': BookPage,
  }[pathname] || NotFoundPage;
  return (
    <MyComponent />
  );

react-router-dom 사용

// exact : 정확하게 이페이지일때만 여기를 렌더링 시키는 옵션
 return (
   <BrowserRouter>
     <Switch>
       <Route exact path="/" component={IndexPage} />
       <Route path="/video" component={VideoPage} />
       <Route path="/book" component={BookPage} />
     </Switch>
   </BrowserRouter>
 );

라우팅에대한 test 코드 작성

• 테스트코드에선 BrowserRouter 대신 MemoryRouter를 사용해준다 ( 가벼운장점 )
• url에 맞는 테스트를 진행하고싶다면 <MemoryRouter initialEntries={['/']}> 사용

  // ex)
  const { container } = render((
    <MemoryRouter initialEntries={['/']}>
      <App />
    </MemoryRouter>
  ));

느낀점

react-router-dom은 원래 사용했었지만 그걸 사용하지 않고 구현해본다는 생각조차 안해봤었는데 강좌에서 이렇게도 구현을 할수있구나라는 좀 신선한충격? 을 받았다
점점 여러가지 유형에 테스트케이스들을 접하는거같은데 익숙해지려면 많이써보는게 좋을거같다!