코드숨_코드리뷰 스터디 6주차 회고

date

Jun 11, 2023

slug

codesoom6

author

status

Public

배운내용

1) historyApiFallback

historyApiFallback을 사용하면 개발 환경에서 index.html으로 redirect 해준다.

devServer: {
    historyApiFallback: {
      index: '/index.html',
    },
  },

2) Routing

라우팅이란 출발지에서 목적지까지의 경로를 결정하는 기능이다. 애플리케이션의 라우팅은 사용자가 태스크를 수행하기 위해 어떤 화면(view)에서 다른 화면으로 화면을 전환하는 내비게이션을 관리하기 위한 기능을 의미한다. 일반적으로 라우팅은 사용자가 요청한 URL 또는 이벤트를 해석하고 새로운 페이지로 전환하기 위해 필요한 데이터를 서버에 요청하고 페이지를 전환하는 위한 일련의 행위를 말한다.

브라우저가 화면을 전환하는 경우는 다음과 같다.

브라우저의 주소창에 URL을 입력하면 해당 페이지로 이동한다.

웹페이지의 링크(a 태그)를 클릭하면 해당 페이지로 이동한다.

브라우저의 뒤로가기 또는 앞으로가기 버튼을 클릭하면 사용자 방문 기록(history)의 뒤 또는 앞으로 이동한다. history 관리를 위해서는 각 페이지는 브라우저의 주소창에서 구별할 수 있는 유일한 URL을 소유해야 한다

PoiemaWeb

웹 프로그래밍 튜토리얼

https://poiemaweb.com/js-spa

3) memory-router

테스트할 때 메모리 라우터를 활용하면 외부소스에 연결하지 않고 테스트할 수 있다.

함수를 mocking 하듯 router를 가짜로 만들어 테스트해주는 것이라고 이해했다.

initialEntries로 배열안에 path 값들을 넣어주면 된다.

const renderApp = ({ path }) =>
    render(
      <MemoryRouter initialEntries={[path]}>
        <App />
      </MemoryRouter>
    );

context('path About', () => {
    it('Home', () => {
      const { container } = renderApp({ path: '/about' });

      expect(container).toHaveTextContent('About');
    });
  });

MemoryRouter v6.11.2

https://reactrouter.com/en/main/router-components/memory-router

4) base href 설정

parameter를 전달할 때 코드를 불러오지 못하는 에러가 있었다.

구글링을 해보니 base href 설정을 해주지 않으면 index파일이 경로를 찾지 못하는 에러가 발생했다.

아래와 같이 base url을 헤더에 넣어주면 된다.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Demo</title>
    <base href="/" />
  </head>
  <body>
    <div id="app"></div>
    <script src="main.js"></script>
  </body>
</html>

react-router에서도 basename을 설정해줄 수 있어서 이것도 해봤는데 이건 똑같이 에러가 발생하긴 했다.

나중에 좀 더 깊이 파보고 싶다.

import { BrowserRouter } from "react-router-dom";

const App = () => {
  return (
    <BrowserRouter basename="/app">
      <Main />
    </BrowserRouter>
  );
};

5) 테스트 코드

아직까지 어려운 내용은 redux 테스트 코드를 짜는 것이다. 특히 action.js 파일에 대한 테스트코드를 보면 redux-mock-store를 활용해 store도 mocking해서 테스트코드를 짜는 내용이 있다.

이 부분도 나중에는 한 번 더 깊이 공부해보면 좋겠다.

import configureStore from 'redux-mock-store';

const mockStore = configureStore(middlewares);

jest.mock('../services/api');

describe('actions', () => {
  let store;

  describe('loadInitialData', () => {
    beforeEach(() => {
      store = mockStore({});
    });

    it('runs setRegions and setCategories', async () => {
      await store.dispatch(loadInitialData());

      const actions = store.getActions();

      expect(actions[0]).toEqual(setRegions([]));
      expect(actions[1]).toEqual(setCategories([]));
    });
  });

아래는 api 파일에 대한 테스트코드인데, 마찬가지로 이 부분도 다음주 과제시에 한 번 더 직접 짜보면서 공부를 해봐야겠다.

describe('api', () => {
  const mockFetch = (data) => {
    global.fetch = jest.fn().mockResolvedValue({
      async json() {
        return data;
      },
    });
  };

  describe('fetchRegions', () => {
    beforeEach(() => {
      mockFetch(REGIONS);
    });

    it('returns regions', async () => {
      const regions = await fetchRegions();

      expect(regions).toEqual(REGIONS);
    });
  });

  describe('fetchCategories', () => {
    beforeEach(() => {
      mockFetch(CATEGORIES);
    });

    it('returns categories', async () => {
      const categories = await fetchCategories();

      expect(categories).toEqual(CATEGORIES);
    });
  });

회고

라우터 심화내용 다뤄보기

react-router의 기본적인 내용들은 그렇게 어렵지 않지만, 좀 더 심화된 기능들, history를 사용한다거나, parameter말고 router에 데이터를 싣는 좀 더 심화된 내용들을 공부해볼수 있겠다는 생각이 든다. 프로젝트를 하면서 좀 더 최근에 만들어진 다양한 옵션들을 활용해보면 좋겠다.

테스트코드는 아직 어렵다.

테스트코드를 잘 짜기 위해 명확한 인풋과 아웃풋을 만드는 작업은 아직 어렵다.

컴포넌트의 데이타와 작업들을 redux로 모킹하고, ui 요소가 보이는지에 대해서는 어느정도 이해를 했으나

action과 api 파일에 대한 테스트코드는 처음 해봐서 어려웠다.

다음에는 모든 파일에 대한 테스트코드를 처음부터 끝까지 다 짜봐야겠다라는 생각을 했다.