[2025 하계 모각코] 5주차 - 알고리즘 및 프론트엔드 테스팅

 

 

 

1. 모임 시간

2025.8.1 13:00 ~ 16:00 (Zoom)

 

 

2. 진행 내용

알고리즘 

솔브닥 클래스7에 포함된 문제를 밀어줬다.

 

 

 

 

다시 알고리즘을 잡으면서 느끼는 점은..

PS가 정말~ 가성비 떨어지는 분야라는 것.. 

 

우선 클래스에서 다루는 알고리즘 자체의 난이도도 쉽지 않다.

스위핑, 세그먼트트리, KMP, 최대유량, 이분매칭 등.. 

 

우선 저 알고리즘들을 이해하기 위해 유튜브 강의를 본다. (Tushar Roy님 강의를 많이 봤다)

유튜브 강의가 대충 3~40분 짜리인데, 저거를 제대로 이해하려면 우선 1시간 이상 사용해야 한다. 

 

이후 문제에 적용해보는 식으로 공부하는데.. 플레 이상 난이도의 문제를 하나 풀기 위해 몇 시간동안 문제를 잡고 있어야 하고.. 

좀 잡고있다가 안풀리면 구글링해서 힌트를 받고 이어서 푼다. 

 

아~ 사실상.. 기업 코딩테스트에는 이정도 알고리즘이 출제되지는 않는데.. 

CP를 위해서는 또 공부해야 하는 알고리즘이고.. 

그런데 CP에서 유의미한 성과를 내기 위해서는 그냥 좀 잘하는정도로는 안되고 ㅋㅋ..

 

우선은 이번에 목표로 설정한게 있으니 좀 더 알고리즘을 붙잡고 있을 거지만 

그 이후에는 진짜 심심할때 취미로 풀거나.. 기업 코딩테스트를 대비하는 정도로만 공부할 예정~ 

 

 

프론트엔드 테스팅

알고리즘과는 다르게 프론트엔드같은 개발 분야는 가성비가 좋다고 생각한다. 

공부한 내용을 바로 프로젝트로 녹여낼 수 있고, 진행한 프로젝트는 모두 내 자산이 되니까.. 

 

알고리즘을 공부하면서 배울 수 있는 여러 가지 최적화 방식, 게임 빌드 깎듯 접근하는 풀이 기법도 나름 재밌긴 한데 

바로 결과물을 확인할 수 있고, 응용할 수 있는 개발 쪽이 좀 더 재미있게 다가온다. 

 

import { describe, it, expect, beforeEach } from "vitest";
import { render, screen, waitFor } from "@testing-library/react";
import userEvent from "@testing-library/user-event";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { MemoryRouter } from "react-router-dom";
import { Suspense } from "react";
import { ThemeProvider } from "@emotion/react";
import { theme } from "@/styles/theme";
import { RankingSection } from "../RankingSection";
import { Spinner } from "@/components/common/Spinner";
import { AuthProvider } from "@/contexts/AuthProvider";

const renderWithProviders = (ui: React.ReactElement) => {
  const queryClient = new QueryClient({
    defaultOptions: {
      queries: {
        retry: false,
      },
    },
  });

  return render(
    <ThemeProvider theme={theme}>
      <QueryClientProvider client={queryClient}>
        <MemoryRouter>
          <AuthProvider>
            <Suspense fallback={<Spinner />}>{ui}</Suspense>
          </AuthProvider>
        </MemoryRouter>
      </QueryClientProvider>
    </ThemeProvider>,
  );
};

describe("<RankingSection />", () => {
  beforeEach(() => {
    localStorage.clear();
  });

  it("초기 렌더링 테스트", async () => {
    renderWithProviders(<RankingSection />);

    expect(screen.getByText("로딩중...")).toBeInTheDocument();

    const firstItem = await screen.findByText("스트로베리 요거트 생크림");
    expect(firstItem).toBeInTheDocument();
    expect(screen.getByText("실시간 급상승 선물랭킹")).toBeInTheDocument();

    expect(screen.queryByText("여성을 위한 립스틱")).not.toBeInTheDocument();
    expect(screen.queryByText("5만원권")).not.toBeInTheDocument();
  });

  it("'남성', '위시로 받은' 필터 적용 테스트", async () => {
    const user = userEvent.setup();

    renderWithProviders(<RankingSection />);
    await screen.findByText("스트로베리 요거트 생크림");

    await user.click(screen.getByRole("button", { name: "남성" }));
    await user.click(screen.getByRole("button", { name: "위시로 받은" }));

    const result = await screen.findByText("행운 가득 복 케이크");
    expect(result).toBeInTheDocument();

    expect(screen.queryByText("여성을 위한 립스틱")).not.toBeInTheDocument();
    expect(screen.queryByText("5만원권")).not.toBeInTheDocument();
  });

  it("'더보기' '접기' 버튼 테스트", async () => {
    const user = userEvent.setup();
    renderWithProviders(<RankingSection />);

    await screen.findByText(
      "마이넘버원 초코생크림 조각케이크+마이넘버원 고구마 조각케이크 +아이스 아메리카노 2잔",
    );
    expect(
      screen.queryByText("위시캣 아이냥 케이크(픽업가능)"),
    ).not.toBeInTheDocument();

    const moreButton = screen.getByRole("button", { name: "더보기" });
    await user.click(moreButton);
    const expandedItem =
      await screen.findByText("위시캣 아이냥 케이크(픽업가능)");
    expect(expandedItem).toBeInTheDocument();

    const collapseButton = screen.getByRole("button", { name: "접기" });
    await user.click(collapseButton);
    await waitFor(() => {
      expect(
        screen.queryByText("위시캣 아이냥 케이크(픽업가능)"),
      ).not.toBeInTheDocument();
    });
  });
});

 

 

msw로 MockServer를 구축하고, 테스트에서 사용되는 실제 api요청을 가로채서 정해진 응답을 반환하도록 설정하자. 

1. given 2. when 3. then 에 맞춰서 하나씩 테스트해보자. 

 

백엔드에서의 테스트보다는 프론트엔드에서의 테스트가 중요성이 좀 떨어진다고 생각한다. 

그러니까, 완급 조절을 잘 해야 한다.. 내가 작성한 모든 컴포넌트에 대해 테스트를 작성해야 하나? 그건 아닌 것 같다.

회사에 속한 개발자가 코드 치는 시간도 리소스로 잡히는데, 테스트 코드 작성에 너무 많은 리소스를 투자하는 것도 비효율적이다. 

 

백엔드에서든, 프론트엔드에서든 테스트는 내가 생각했을 때 치명적인 부분만 작성하는게 맞다고 생각한다. 

예를 들면.. 백엔드에서 결제 api를 개발한다고 하면, 결제는 버그가 터졌을 때 치명적인 도메인이니 이 부분에 대해서는 테스트를 제대로 작성해야겠고.. 

 

프론트엔드에서는 중요 도메인이라고 생각되는 부분에 대해 테스팅을 제대로 하는 것 처럼

예를 들면 채팅 도메인? 당근마켓에서는 채팅을 가장 중요한 도메인이라고 생각하니까, 채팅에 대해서테스트를 제대로 작성한다고 한다.

 

 

 

 

 

 

 

3. 팀 블로그 

민수 : https://curvelikeexp.tistory.com/m/entry/6

상우 : https://velog.io/@ah100/2025-%ED%95%98%EA%B3%84-%EB%AA%A8%EA%B0%81%EC%BD%94-5%EC%A3%BC%EC%B0%A8

윤재 : https://kyj3274.tistory.com/m/15