항해플러스 프론트엔드 6기 기술블로그

[4팀 김수민] Chapter 1-1. 프레임워크 없이 SPA 만들기

Open

by nimusmix2025. 7. 11.

과제 체크포인트

배포 링크

https://nimusmix.github.io/front_6th_chapter1-1/

기본과제

상품목록

상품 목록 로딩

페이지 접속 시 로딩 상태가 표시된다
데이터 로드 완료 후 상품 목록이 렌더링된다
로딩 실패 시 에러 상태가 표시된다
에러 발생 시 재시도 버튼이 제공된다

상품 목록 조회

각 상품의 기본 정보(이미지, 상품명, 가격)가 카드 형태로 표시된다

한 페이지에 보여질 상품 수 선택

드롭다운에서 10, 20, 50, 100개 중 선택할 수 있으며 기본 값은 20개 이다.
선택 변경 시 즉시 목록에 반영된다

상품 정렬 기능

상품을 가격순/인기순으로 오름차순/내림차순 정렬을 할 수 있다.
드롭다운을 통해 정렬 기준을 선택할 수 있다
정렬 변경 시 즉시 목록에 반영된다

무한 스크롤 페이지네이션

페이지 하단 근처 도달 시 다음 페이지 데이터가 자동 로드된다
스크롤에 따라 계속해서 새로운 상품들이 목록에 추가된다
새 데이터 로드 중일 때 로딩 인디케이터와 스켈레톤 UI가 표시된다
홈 페이지에서만 무한 스크롤이 활성화된다

상품을 장바구니에 담기

각 상품에 장바구니 추가 버튼이 있다
버튼 클릭 시 해당 상품이 장바구니에 추가된다
추가 완료 시 사용자에게 알림이 표시된다

상품 검색

상품명 기반 검색을 위한 텍스트 입력 필드가 있다
검색 버튼 클릭으로 검색이 수행된다
Enter 키로 검색이 수행된다
검색어와 일치하는 상품들만 목록에 표시된다

카테고리 선택

사용 가능한 카테고리들을 선택할 수 있는 UI가 제공된다
선택된 카테고리에 해당하는 상품들만 표시된다
전체 상품 보기로 돌아갈 수 있다
2단계 카테고리 구조를 지원한다 (1depth, 2depth)

카테고리 네비게이션

현재 선택된 카테고리 경로가 브레드크럼으로 표시된다
브레드크럼의 각 단계를 클릭하여 상위 카테고리로 이동할 수 있다
"전체" > "1depth 카테고리" > "2depth 카테고리" 형태로 표시된다

현재 상품 수 표시

현재 조건에서 조회된 총 상품 수가 화면에 표시된다
검색이나 필터 적용 시 상품 수가 실시간으로 업데이트된다

장바구니

장바구니 모달

장바구니 아이콘 클릭 시 모달 형태로 장바구니가 열린다
X 버튼이나 배경 클릭으로 모달을 닫을 수 있다
ESC 키로 모달을 닫을 수 있다
모달에서 장바구니의 모든 기능을 사용할 수 있다

장바구니 수량 조절

각 장바구니 상품의 수량을 증가할 수 있다
각 장바구니 상품의 수량을 감소할 수 있다
수량 변경 시 총 금액이 실시간으로 업데이트된다

장바구니 삭제

각 상품에 삭제 버튼이 배치되어 있다
삭제 버튼 클릭 시 해당 상품이 장바구니에서 제거된다

장바구니 선택 삭제

각 상품에 선택을 위한 체크박스가 제공된다
선택 삭제 버튼이 있다
체크된 상품들만 일괄 삭제된다

장바구니 전체 선택

모든 상품을 한 번에 선택할 수 있는 마스터 체크박스가 있다
전체 선택 시 모든 상품의 체크박스가 선택된다
전체 해제 시 모든 상품의 체크박스가 해제된다

장바구니 비우기

장바구니에 있는 모든 상품을 한 번에 삭제할 수 있다

상품 상세

상품 클릭시 상세 페이지 이동

상품 목록에서 상품 이미지나 상품 정보 클릭 시 상세 페이지로 이동한다
URL이 /product/{productId} 형태로 변경된다
상품의 자세한 정보가 전용 페이지에서 표시된다

상품 상세 페이지 기능

상품 이미지, 설명, 가격 등의 상세 정보가 표시된다
전체 화면을 활용한 상세 정보 레이아웃이 제공된다

상품 상세 - 장바구니 담기

상품 상세 페이지에서 해당 상품을 장바구니에 추가할 수 있다
페이지 내에서 수량을 선택하여 장바구니에 추가할 수 있다
수량 증가/감소 버튼이 제공된다

관련 상품 기능

상품 상세 페이지에서 관련 상품들이 표시된다
같은 카테고리(category2)의 다른 상품들이 관련 상품으로 표시된다
관련 상품 클릭 시 해당 상품의 상세 페이지로 이동한다
현재 보고 있는 상품은 관련 상품에서 제외된다

상품 상세 페이지 내 네비게이션

상품 상세에서 상품 목록으로 돌아가는 버튼이 제공된다
브레드크럼을 통해 카테고리별 상품 목록으로 이동할 수 있다
SPA 방식으로 페이지 간 이동이 부드럽게 처리된다

사용자 피드백 시스템

토스트 메시지

장바구니 추가 시 성공 메시지가 토스트로 표시된다
장바구니 삭제, 선택 삭제, 전체 삭제 시 알림 메시지가 표시된다
토스트는 3초 후 자동으로 사라진다
토스트에 닫기 버튼이 제공된다
토스트 타입별로 다른 스타일이 적용된다 (success, info, error)

심화과제

SPA 네비게이션 및 URL 관리

페이지 이동

어플리케이션 내의 모든 페이지 이동(뒤로가기/앞으로가기를 포함)은 하여 새로고침이 발생하지 않아야 한다.

상품 목록 - URL 쿼리 반영

검색어가 URL 쿼리 파라미터에 저장된다
카테고리 선택이 URL 쿼리 파라미터에 저장된다
상품 옵션이 URL 쿼리 파라미터에 저장된다
정렬 조건이 URL 쿼리 파라미터에 저장된다
조건 변경 시 URL이 자동으로 업데이트된다
URL을 통해 현재 검색/필터 상태를 공유할 수 있다

상품 목록 - 새로고침 시 상태 유지

새로고침 후 URL 쿼리에서 검색어가 복원된다
새로고침 후 URL 쿼리에서 카테고리가 복원된다
새로고침 후 URL 쿼리에서 옵션 설정이 복원된다
새로고침 후 URL 쿼리에서 정렬 조건이 복원된다
복원된 조건에 맞는 상품 데이터가 다시 로드된다

장바구니 - 새로고침 시 데이터 유지

장바구니 내용이 브라우저에 저장된다
새로고침 후에도 이전 장바구니 내용이 유지된다
장바구니의 선택 상태도 함께 유지된다

상품 상세 - URL에 ID 반영

상품 상세 페이지 이동 시 상품 ID가 URL 경로에 포함된다 (/product/{productId})
URL로 직접 접근 시 해당 상품의 상세 페이지가 자동으로 로드된다

상품 상세 - 새로고침시 유지

새로고침 후에도 URL의 상품 ID를 읽어서 해당 상품 상세 페이지가 유지된다

404 페이지

존재하지 않는 경로 접근 시 404 에러 페이지가 표시된다
홈으로 돌아가기 버튼이 제공된다

AI로 한 번 더 구현하기

기존에 구현한 기능을 AI로 다시 구현한다.
이 과정에서 직접 가공하는 것은 최대한 지양한다.

과제 셀프회고

과제를 처음 받았을 때 어 생각보다 어렵진 않네? 재밌겠다! 했어요 우매함의 봉우리라고 하죠..? 고작 일주일 동안 한 과젠데 아쉬운 점이 생각보다 많아요.

SPA에 대해 좀 더 생각하고 시작했어야 했다. 처음 main.js를 봤을 때 일단 페이지를 분리하고 라우터를 만든 뒤 어디서 data fetching을 해야 할까? 고민했습니다. presentation과 container를 분리해야 한다고 생각해서 일단 페이지에서는 fetching 하고 싶지 않았어요. 그리고 데이터가 바뀌었을 때 전체를 렌더링시키고 싶지 않았어요. 그게 재앙의 시작이었습니다.. MVC 패턴을 도입하자! 하고 Controller를 만들기 시작합니다. Controller에서 컴포넌트를 조합하고, DOM 조작은 Controller의 역할이라며 Controller에 updateFilter(), updateSort() 같은 함수들을 마구 만들었어요. 결국 Controller는 비대해지고 저는 현타가 왔습니다. 리액트였으면 진짜 금방인데.. 하다가 그럼 리액트처럼 만들어보자! 했어요. 그 때부터 과제가 진도가 나가기 시작했습니다..~ 아 코치님이 작성해주신 자료 읽을 걸! 이라는 생각이 들었어요 ..
갈아 엎을까 말까 할 때 엎을 걸 위 MVC 이슈로.. 회사에서도 과제 생각 밖에 안 나서 반차 쓰고 오고 자려고 누워도 잠이 안 왔어요 (ㅋㅋㅋ) 너무 마음에 안 들어서 갈아엎고 싶은데, 지금 엎으면 과제 완성 못할 것 같고 그런 거 있죠 그래서 괴로워하다가 시간이 꽤 지났는데 차라리 그 때 확 엎고 다시 시작했어야 했다고 생각해요 ㅠ_ㅠ
렌더링과 이벤트 리스너는 항상 어렵다. 렌더링이 여러 번 되면서 이벤트 리스너가 반복해서 붙어서 브라우저가 엄청 느려지기도 하고, 환장의 조합으로 렌더링이 여러 번 반복되면서 테스트 코드를 줄기차게 실패하기도 했습니다. 이거.. 어떻게 하면 더 잘 이해할 수 있을까요?

기술적 성장

Observer 패턴을 처음 써봤어요 어렵지만 잘 익혀두면 유용할 것 같습니다!
React 쓰면서 클래스를 쓸 일이 잘 없어서 클래스에 대해서 잘 몰랐는데, 이번 기회에 더 이해할 수 있었습니다!

자랑하고 싶은 코드

export default class Home extends Component {
  setup() {
    this.router = getRouter();
    this.cart = getCart();

    this.productsHook = useProducts();

    this.unsubscribe = this.productsHook.subscribe(() => {
      this.render();
    });

    const { query } = this.router.getQueryParams();
    this.productsHook.loadInitialData(query);

    this.setupEvents();
  }

  template() {
    const { products, categories, isLoading, isLoadingMore, pagination } = this.productsHook.getState();
    const { query } = this.router.getQueryParams();

    return Layout(
      `
      <div class="bg-white rounded-lg shadow-sm border border-gray-200 p-4 mb-4">
        ${SearchInput(query.search ?? "")}
        <div class="space-y-2 mb-4">
        ${BreadCrumb(query.category1, query.category2)}
        ${CategoryFilter(categories, query.category1, query.category2)}
        ${SortFilter(query.limit ?? "20", query.sort ?? "price_asc")}
        </div>

        ${ProductList({ products, isLoading, isLoadingMore, pagination })}
      </div>
    `,
      {
        title: "쇼핑몰",
        showBackButton: false,
      },
    );
  }

  setEvent() {}

  setupEvents() {
    if (this.eventsSetup) {
      return;
    }

    this.addEvent("click", "[data-breadcrumb='reset']", () => {
      this.router.updateQuery("category1", null, { rerender: false });
      this.router.updateQuery("category2", null, { rerender: false });
      this.router.updateQuery("page", "1", { rerender: false });

      const { query } = this.router.getQueryParams();
      this.productsHook.loadProducts(query);
    });

...중략...

    this.eventsSetup = true;
  }

  unmount() {
    if (this.unsubscribe) {
      this.unsubscribe();
    }

    if (this.handleScroll) {
      window.removeEventListener("scroll", this.handleScroll);
    }
  }
}

구조에 대한 고민을 엄청 하다가 결국 이렇게 구성했어요 template 부분이 깔끔하고 예뻐서 묵은 체증이 확 내려간 코드였답니다! ProductDetail도 이렇게 하고 싶었는데 시간이 부족해서 아쉬워요 ㅠ_ㅠ

개선이 필요하다고 생각하는 코드

역설적이게도 위랑 같은 코드인데요.. useProducts() hook을 만들어두고 this.productsHook = useProducts() 이런 식으로 써야 한다는 것이 싫었어요 필요한 부분에서 각자 useProducts()를 호출하게 하고 싶었는데, subsribe 이슈를 해결하지 못해 그러지 못했어요

또, products만 변경되어도 전체가 리렌더링 되기 때문에 변경된 부분만 리렌더링되면 좋을 것 같아요

학습 효과 분석

SPA에서 가장 중요한 것은 상태 관리다 라는 걸 알게 되었습니다. 그리고 코치님께서 주신 발제 자료가 참 흥미로웠는데요! 어떤 문제를 해결하기 위해 나왔는지 그래서 어떻게 해결했는지 이런 것들을 중심으로 공부해보면 기억에 잘 남고 재밌을 것 같아요!

과제 피드백

단위 테스트에 자꾸 실패해서 시간을 좀 낭비했는데 e2e 테스트에서는 잘 돌아가더라구요 테스트를 엄격하게 작성할 거라면 그런 부분까지 고려하는 게 당연히 맞지만, 아직 테스트에 대해 잘 모르는 상태인지라 거기에 시간을 많이 쏟아서 hard까지 다 못해낸 게 좀 아쉽습니다ㅠㅠ

AI 활용 경험 공유하기

Cursor를 이용했어요. 특별히 학습시키지는 않았고, 작성하기 귀찮은 부분들 짜달라고 부탁했습니다!

리뷰 받고 싶은 내용

(리뷰는 아닌데 궁금한 점) MVC 패턴이랑 SPA가 궁합이 맞지 않는 것인지 아니면 해결할 방법이 있었는데 제가 잘 몰랐던 것인지 궁금합니다!
제가 구현한 라우터와 Component class가 과한 렌더링을 유발하지는 않는지 궁금합니다. 코드만으로 몇 회 불필요한 렌더링이 일어나는지 이런 걸 생각하는 게 어려운데 잘하고 싶어요..!
디스코드로 질문 드렸던 내용인데, 단위 테스트 환경에서 query가 {}로 인식되어 통과하지 못하는 문제가 있었어요. 테스트 환경에서 window 객체가 없는데 window에 바인딩한 router를 사용해서 그런 걸까요? 근데.. 테스트 환경에서 window 객체 없는 거 맞..나..?