[메가테라 FE 생존코스] 7주차 회고

3L 회고

👍 Liked

• 이제 푸드코트 키오스크 과제를 반복 숙달하니 혼자서 설명하면서도 구현을 잘 할 수 있다는 자신감이 생겼다.
  • 나중에 기업과제를 진행한다고 하더라도 푸드코트 과제를 떠올리면서 자신감을 얻을 수 있다.
• 테스트 코드 작성에 대한 두려움이 사라졌고 컴포넌트 테스트 코드를 작성할 때 UI 보단 비즈니스 로직에 초점을 맞춰 테스트 코드를 작성하려고 노력하면서 스스로 성장하고 있다는 것을 발견하여 좋았다.

📘 Learned

• MSW 테스트를 잘못하고 있었다는 것을 배웠다.
  • 그동안 테스트 코드 내에서 jest.mock 함수를 호출하여 MSW 테스트 인줄 알고 해왔었는데, 그게 아니고 handlers에 테스트 하려는 API를 작성을 잘못하고 있었던 것을 바로 고칠 수 있었다.
  • MSW 테스트를 작성하는 과정에서 2버전 공식 홈페이지를 보면서 1 버전을 사용하려고 해서 애를 좀 먹긴했었다 ㅋㅋ

const { restaurants, order, food } = fixture;
const handlers = [
  // GET
  rest.get(`${BASE_URL}/restaurants`, (req, res, ctx) => res(
    ctx.status(200),
    ctx.json({ restaurants }),
  )),
  rest.get(`${BASE_URL}/orders/:id`, (req, res, ctx) => res(
    ctx.status(200),
    ctx.json({ order }),
  )),

  // POST
  rest.post(`${BASE_URL}/orders`, (req, res, ctx) => res(
    ctx.status(201),
    ctx.json({ id: order.id }),
  )),
];

export default handlers;

• 또한, MSW로 요청에 실패했을 경우를 테스트하는 것을 배웠다.

context('데이터 응답이 실패하면', () => {
    beforeEach(() => {
      server.use(
        rest.get(`${BASE_URL}/restaurants`, (req, res, ctx) => res(ctx.status(500))),
      );
    });
    it('식당을 불러오지 못했습니다.를 렌더링한다.', async () => {
      const errorMsg = await screen.findByText('식당을 불러오지 못했습니다.');
      expect(errorMsg).toBeInTheDocument();
    });
  });

• React-Router를 프로젝트에서 어떻게 효율적으로 관리할 수 있는지 배웠다.
  • 라우트 파일을 따로 분리하여 라우트 파일에 대한 테스트를 진행할 수 있다.
  • 공통되는 컴포넌트를 Layout 컴포넌트에 모아두고 중첩 라우팅을 통해 경로에 따라 자식컴포넌트만 바꿔주는 구조를 설계한다.

function Layout() {
  return (
    <div>
      <header>
        <h1>메가테라 푸드코트 키오스크</h1>
      </header>
      <main>
        <Outlet />
      </main>
    </div>
  );
}

const routes = [
  {
    element: <Layout />,
    children: [
      {
        path: '/',
        element: <IntroPage />,
      },
      {
        path: '/order',
        element: <OrderPage />,
      },
      {
        path: '/order/complete',
        element: <ResultPage />,
      },
    ],
  },
];

export default routes;

• React-Testing-Library에서 unmount 되었을 때 실행하는 함수를 테스트하는 방법을 배웠다.
  • render함수가 반환하는 unmount 함수를 호출하여 해당 컴포넌트가 unmount 되도록 테스트할 수 있다.

해설코드를 보며 배운점 🤔

// /src/testHelper.tsx

import { render } from '@testing-library/react';

import { ReactNode } from 'react';

import { MemoryRouter } from 'react-router-dom';

type Option = {
  path?: string;
}

export function renderWithProviders(
  node: ReactNode,
  { path = '/' }: Option = {},
) {
  return render((
    <MemoryRouter initialEntries={[path]}>
      {node}
    </MemoryRouter>
  ));
}

• 컴포넌트 내부에서 navigate를 사용하고 있을 때 해당 컴포넌트 테스트 코드 작성할 때는 컴포넌트가 <MemoryRouter> 내부에 있어야만 가능하므로 이를 자주 사용하니 함수로 빼주었다.

😅 Lacked

• 주문하기 버튼을 클릭할 때 요청한 API의 응답으로 결과페이지의 쿼리스트링을 추가하는데 요청에 실패했을 때 테스트를 어떻게 하면 좋을지 생각하지 못한게 아쉬웠다.
• get에 대한 REST API 요청은 익숙한데, POST, DELETE, UPDATE에 대한 REST API 요청이 아직 바로바로 떠오르지 않아서 이 부분을 좀 더 자주 사용하면서 익숙하게 훈련해야겠다.

느낀점

이번 주는 회사 일이 바쁘지 않아 여유로운 한주를 보낼 수 있어서 좋았다. 그만큼 메가테라에 집중도 잘되었던 일주일이었다. 이번주는 라우팅에 대해서 공부하였는데, 가장 수월했던 한주였던 것 같다. 관심사 분리를 통한 라우트 파일 분리, 라우트 테스트 코드를 작성하는 것들을 배워서 더 견고한 어플리케이션을 설계하는데 도움이 될 것 같다. 벌써 4월달이 지나고 5월이 시작되었다. 메가테라도 절반 이상 지난 지금 초심을 잃지 않고 끝까지 열심히 공부하여 내년에는 내가 원하는 대기업(네이버, 토스, 카카오, 당근, 쿠팡 등)에 사원증을 목에 걸고 싶다.