[8팀 현지수] Chapter 1-1. 프레임워크 없이 SPA 만들기

[hyunzsu]

과제 체크포인트

배포 링크

https://hyunzsu.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를 구현하는 것이 처음이어서 처음에 어떤 것부터 시작해야 될지 몰랐고, 막막했습니다.
상태관리 → 라우터 → 컴포넌트 순서로 차근차근 접근하면서 전체적인 SPA 구조를 이해할 수 있었습니다.

기술적 성장

• 테스트 코드
• 이벤트 위임 방식
• 브라우저 API 활용

자랑하고 싶은 코드

1. Redux-like 상태 관리 패턴: 순수 함수 기반 리듀서와 액션 생성자 구현

복잡한 상태 관리를 어떻게 효율적이게 구현할 수 있을지 고민이 많았습니다. 초기에는 전역 변수나 DOM 직접 조작으로 상태를 관리하려 했지만, 컴포넌트 간 데이터 공유와 상태 동기화 문제가 발생했고, 애플리케이션이 복잡해질수록 상태 변화를 추적하기 어려워졌습니다.

// stores/index.js - 단방향 데이터 흐름을 위한 Store 구현
export const createStore = (reducer, initialState) => {
  let state = initialState;
  const listeners = [];
  
  const getState = () => state;
  const dispatch = (action) => {
    state = reducer(state, action);
    listeners.forEach(listener => listener());
  };
  const subscribe = (listener) => {
    listeners.push(listener);
    return () => { /* unsubscribe */ };
  };
  
  return { getState, dispatch, subscribe };
};

설계 이유:

• 상품 목록, 상품 상세, 라우팅, 로딩 상태 등 모든 애플리케이션 상태를 한 곳에서 관리하여 데이터 일관성을 보장하고 상태를 한눈에 파악할 수 있게 했습니다.
• 모든 상태 변경이 action을 통해서만 일어나도록 하여 디버깅과 추적이 용이하며, 특히 상품 로딩, 무한 스크롤, 페이지 전환 등 복잡한 상태 변화를 명확하게 관리할 수 있습니다.
• Action → Reducer → State → View 순서로 데이터가 흐르도록 하여 상태 변화의 원인을 쉽게 추적할 수 있습니다.

실제 적용 사례:

// stores/reducer.js - 무한 스크롤 상품 추가 처리
case ACTION_TYPES.APPEND_PRODUCTS: {
  const newProducts = [...state.products, ...action.payload.products];
  return {
    ...state,
    products: newProducts,
    pagination: {
      ...state.pagination,
      currentPage: action.payload.pagination.page,
      hasNext: action.payload.pagination.hasNext ?? newProducts.length < state.total,
    },
    isLoadingMore: false, // 로딩 상태 자동 해제
  };
}

// stores/actions.js - 타입 안전한 액션 생성자
export const actions = {
  appendProducts: (products, pagination) => ({
    type: ACTION_TYPES.APPEND_PRODUCTS,
    payload: { products, pagination },
  }),
};

2. 무한 스크롤 (Intersection Observer API)

// events.js 
export const registerInfiniteScroll = (productService) => {
  if (infiniteScrollObserver) {
    infiniteScrollObserver.disconnect();
    infiniteScrollObserver = null;
  }

  const sentinel = document.querySelector("#scroll-sentinel");
  if (!sentinel) return;

  const options = {
    root: null,
    rootMargin: "200px", // 200px 전에 미리 로딩
    threshold: 0.01,
  };

  infiniteScrollObserver = new IntersectionObserver((entries) => {
    entries.forEach((entry) => {
      if (entry.isIntersecting) {
        productService.loadMoreProducts();
      }
    });
  }, options);

  infiniteScrollObserver.observe(sentinel);
};

// events.js 
// pages/ProductListPage.js - 센티넬 요소 렌더링
const InfiniteScrollLoader = ({ isLoadingMore, hasNext, isInitialLoad }) => {
  // 초기 로드 중에는 센티넬 렌더링하지 않음
  if (isInitialLoad) return "";

  // 더 이상 로드할 상품이 없으면 완료 메시지
  if (!hasNext && !isLoadingMore) {
    return `<div class="text-center py-8 text-sm text-gray-500">
      모든 상품을 확인했습니다
    </div>`;
  }

  // 로딩 중일 때만 인디케이터 표시
  if (isLoadingMore) {
    return `<div class="text-center py-4">로딩 인디케이터</div>`;
  }

  // 센티넬 요소 (보이지 않는 감시 요소)
  return `<div id="scroll-sentinel" style="height: 1px; margin-top: -1px;"></div>`;
};

구현 이유:

• scroll 이벤트는 스크롤할 때마다 수십 번 발생하여 성능을 저하시키지만, Intersection Observer는 요소가 뷰포트에 들어올 때만 한 번 실행되어 성능 개선됩니다.
• 로딩 상태를 체크하여 동시에 여러 번 API 호출이 발생하는 것을 방지합니다.

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

전반적으로 모두 개선이 필요하다고 생각해요.....🥲
상태 관리와 URL 중심 접근 사이의 경계가 모호해서 같은 데이터를 여러 곳에서 관리하는 문제가 심각한 것 같아요.

AI 활용 경험 공유하기

• cursor
• claude

리뷰 받고 싶은 내용

1. 현재 Redux 패턴을 모방해서 Store-Reducer-Action 구조로 상태관리를 구현했습니다. 이런 방식으로 구현한 것이 바닐라 JavaScript 환경에서 적절한 선택이었는지 궁금합니다. 특히 매번 전체 렌더링이 발생하는 부분이 성능상 문제가 될 것 같아 고민입니다.
2. 현재 렌더링 시마다 이벤트 리스너를 재등록하는 구조로 되어 있습니다. 이 방식이 메모리 누수를 유발할 수 있다고 생각되는데, 바닐라 JavaScript 환경에서는 어떤 식으로 이벤트 생명주기를 관리하는 것이 좋을까요?
3. JavaScript로 SPA를 구현할 때 실무에서 자주 사용하는 패턴이나 베스트 프랙티스가 있는지 궁금합니다!
4. 현재 코드가 많이 꼬여있고 리팩토링을 진행하고 싶은데, 어떤 순서로 진행하는게 좋을까요?

• 어떤 부분부터 우선적으로 개선해야 할까요?
• 기존 구조를 유지하면서 점진적으로 개선할지, 아니면 전면적인 재설계가 필요할까요?

[ckdwns9121]

와 지수님 이렇게 액션 만들어서 쓰는거 짱인거같아요

[unseoJang]

실무에서 이렇게 쓰시나봐요~아주 좋네요

[unseoJang]

지수님!!시간 없으셧을 텐데 과제하시느라 너무 수고 많으셨습니다.
코드가 전체적으로 1년차 답지 않게 React, Redux 기반의 설계에 잘 따라서 코드가 구성되어 있네요,
나머지 과제들을 진행한다면 지금보다 훨씬 더 발전한 지수님 모습이 기대가 될것 같아요.
분명 과제 끝까지 하셨다면 충분히 BP받고도 남을 수준의 과제였던 것 같습니다.
구조도 탄탄하고 네이밍이 특히 잘 구성되어있어서 남들이 보기에도 명확한 기능을 갖고 있는 코드라는 것을 알수 있었습니다.

다음 과제에선 과제 완성해서 BP노려보도록 합시다.
너무 수고하셨습니다.

[unseoJang]

오...이런식으로 전역 설정하는건 처음봐요

[hyunzsu]

운서님 꼼꼼한 코드리뷰 감사합니다 😇
피드백 주신 부분들 반영해서 더 개선해보겠습니다!

[unseoJang]

아직 미완성인 부분이 있네요, 코드 자체는 모듈화, 관심사, 네이밍 등 너무 적절하게 구성해주셧어요!
담번애는 완성을 목표로 과제를 진행해봅시다

[unseoJang]

되도록 일관성을 유지하면서 코드를 작성하는게 좋을것 같아요, 전체적으로는 addEventListener를 썻는데 여기서만 onchange를 썻네요

[unseoJang]

시간이 좀더 있었으면 지수님 실력정도면 컴포넌트 관심사 분리를 할수 잇었을것 같아요 추후 2챕터의 클린코드에서 해당 컴포넌트 관심사 분리과제가 있으니 해당 챕터에서 경험해 보고 해당 코드 리펙토링 하는 것도 좋을 것 같아요!

[unseoJang]

여기 코드도 마찬가지로 전체적으로 컴포넌트 관심사 분리가 필요해보여요

[hyunzsu]

맞습니다....🥲

[unseoJang]

실무에서 이렇게 쓰시나봐요~아주 좋네요

[unseoJang]

해당 코드 Redux를 보는것같네요
지수님 리액트를 정확히 잘 이해하고계시네요...잘하신다 1년차 같진 않아요
저보다 훨씬 더 코드 깔끔하게 구성하시는것같네요

[unseoJang]

여기서 비동기 처리 액션만 같이 지원해주면 좋을 것 같아요

[unseoJang]

Redux라이브러리 공부를 한번 따로 하신걸까요? reducer까지 따로 이렇게 구현한건 대단한거같아요

[hyunzsu]

Redux는 사용해본 적이 없고, useReducer 훅 써본 경험을 바탕으로 구현했습니다!

[unseoJang]

각 역할마다 분기처리가 잘 되어있네요 DEFAULT_PARAMS를 상수로 두고 쓰는 것도 너무 좋아요