과제 체크포인트

https://devchangjun.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로 다시 구현한다.
• 이 과정에서 직접 가공하는 것은 최대한 지양한다.

과제 셀프회고

기술적 성장

처음에는 1주차 과제이니 어려워봤자 얼마나 어렵겠어? 하고 막연하게 설계없이 개발부터 진행했습니다. main.js에서 모든 로직을 작성하기 시작했는데 제 크나큰 오산이였고 파일을 전부 되돌리고 설계부터 다시 시작했습니다. 컴포넌트는 어떻게 추상화 할것이고, 상태관리는 어떻게 하며, 렌더링은 어떻게 시키고... 그런 고민들부터 시작해서 하나하나 구현해나갔습니다.

• createStore 함수를 구현하면서 상태 관리의 원리를 직접 체험해보고 createObserver를 통해 리스너를 등록/해제하고 상태가 변경될 때 알림을 주는 pub/sub 패턴을 직접 구현해보고 이해할 수 있었습니다.
• React Router 같은 라이브러리 덕분에 그동안은 크게 고민하지 않았던 popstate 이벤트의 역할을 직접 라우터를 만들면서 처음으로 배우게 되었습니다. 또한 pushState, replaceState 같은 히스토리 API를 직접 다뤄보며 브라우저에서 URL을 어떻게 바꾸고, 그 변화에 맞게 화면과 상태를 업데이트하는지 경험할 수 있었습니다.
• cleanup 함수를 구현해서 이벤트 리스너 제거, 상태 초기화 같은 작업을 진행하면서 React의 unmount 라이프 사이클 그리고 cleanup 함수가 왜 존재하는지 알 수 있었습니다.

JavaScript만으로 SPA를 직접 구현하면서 React의 라우터, 상태관리, 라이프사이클을 직접 구현해보았고 여러 에러들을 몸소 겪으며 SPA의 동작원리를 깊이있게 배울 수 있었습니다. 그리고 React나 Vue와같은 SPA 프레임워크가 어떤 문제를 해결하고자 하는지 조금이나마 공감할 수 있었던 과제였습니다.

자랑하고 싶은 코드

아래와 같은 라우팅 → 렌더러 → 페이지 cleanup → 앱 종료까지의 흐름을 설계하고 구현했습니다.

navigate() (router)
 └─ handleRouteChange() (router)
     └─ notify subscribers → renderer.render()
         ├─ componentCleanup() ← 이전 페이지 cleanup 호출
         └─ render new component + register new cleanup

destroyApp()
 └─ appInstance.destroy()
     ├─ removeGlobalEventListeners()
     ├─ renderer.destroy() → componentCleanup()
     └─ router.unsubscribe()

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

문제점 테스트 코드가 localStorage를 직접 제어하고 있기 때문에, cart의 localStorage 값이 변경되더라도 현재 작성된 테스트 코드 기준에서는 상태 변경을 감지하거나 트리거할 방법이 없었습니다. 결국 수동으로 updateCartBadge()나 renderModalContent() 같은 함수를 호출해 UI를 강제로 업데이트하는 방식을 채택하게 되었습니다. 하지만 이 구현은 상태 관리와 UI 렌더링이 강하게 결합되고(단일 책임 원칙 위배), 코드가 반복되며, 이후 확장이 어려워질 수 있다는 문제점이 있습니다.

개선방안 브라우저 스토리지를 pub/sub 패턴으로 구독해 상태 변경 시 모달 UI를 자동으로 갱신하도록 개선할 수 있을 것 같습니다. 다만, 테스트 코드를 변경하지 않고 이런 로직을 도입했을 때 테스트를 통과시킬 수 있을지는 의문입니다. 테스트 코드에서는 localStorage를 직접 컨트롤하고 있기 때문에, pub/sub 구조로 전환하면 테스트 코드 역시 store를 통해 상태를 변경하거나 강제로 동기화를 트리거하도록 수정할 필요가 있을 것 같습니다.

const handleAddToCart = (e) => {
  e.preventDefault();
  const { addBtn, pid } = getAddBtnAndPid(e);
  if (!addBtn || !pid) return;

  const productCard = addBtn.closest(".product-card");
  const productData = getProductData(productCard);

  productCard ? addToCart(productData, 1) : addToCartById(pid, 1);
  updateCartBadge(); // 이런식으로 UI를 직접 업데이트
};

// 상세 페이지에서 장바구니 담기
const handleDetailAddToCart = (e) => {
  const { detailBtn, pid } = getDetailBtnAndPid(e);
  if (!detailBtn) return;

  e.preventDefault();
  if (!pid) return;

  const qty = getQuantity();
  addToCartById(pid, qty);
  updateCartBadge(); // 이런식으로 UI를 직접 업데이트
};

학습 효과 분석

가장 큰 배움이 있었던 부분

1. 상태 관리 로직 createStore와 createObserver를 직접 만들며 상태 관리의 기본 동작을 비슷하게 흉내내봤습니다. 상태를 안전하게 변경하고, 변경 시 구독자에게 알림을 보내는 pub/sub 패턴을 직접 구현해보았는데 상태 관리 뿐만 아니라 어떤 특정 동작을 트리거 할때 유용할 것 같습니다. 또한, 단순한 상태 저장소를 넘어서 모듈화, 불변성, 상태 동기화 같은 고민들도 자연스럽게 하게 되었습니다.

2. 라우팅 구현 기존에는 React Router 같은 라이브러리가 있어서 popstate 이벤트에 대해서 전혀 고민한 적 없었습니다. 그리고 라우터를 직접 구현하니 URL 변화, 히스토리 관리 등 생각보다 URL 관리가 정말 까다롭구나.. 그리고 그 URL을 기반으로 상태를 업데이트해주고 화면을 리렌더해야하는 로직까지 구현해보면서 실제 React Router의 동작원리를 이해했습니다.

3. 라이프사이클에 대한 이해 SPA 컴포넌트의 생성, 업데이트, 제거 시점에서 어떤 코드가 실행되어야 하는지 고민하며 자연스럽게 라이프사이클 개념을 접했습니다. React의 useEffect 같은 훅이 외 필요한지 그리고 이들이 내부적으로 언제 실행되는지를 작은 예제들을 통해 체감할 수 있었습니다.

추가 학습이 필요한 부분

1. 완벽하게 이해하지 못한 라우팅 시스템 SPA 라우터 구현에서 동적 라우팅 매칭(:id 같은 동적 세그먼트 처리) 부분은 아직 완전히 이해하지 못했다고 느꼈습니다. AI의 도움을 받아 중첩 라우팅 구현이나 동적 파라미터 추출 같은 그리고 URL 세그먼트 비교 과정에 대한 로직은 구현했지만 내부 동작의 흐름을 명확하게 이해하지 못했습니다.

과제 피드백

• 테스트코드를 처음 접해봤는데 잘 작성되어있는 테스트 코드는 문서 역할을 할 수도 있을거같습니다 .
• 테스트코드가 완벽하지 않다고는 생각했는데 테스트코드에 대한 개념이 없다보니 최대한 수정하지 않고 개발하려고 했습니다.
• React 개발자가 아닌 프론트엔드 개발자로서 성장할 수 있는 시간이였습니다. 만약 다른 SPA 프레임 워크나 다른 상태관리 툴을 배우더라도 동작 원리를 이해하고 있기 때문에 더 빠르게 학습할 수 있을 것 같습니다.
• 테스트를 어떻게 디버깅 해야하는지 아직 감이 잘 안잡힙니다. 이부분은 추후 학습하면서 공부해야겠습니다
• github actions 환경과 로컬환경의 테스트환경이 일치하지 않아서 너무 많은 시간을 썼습니다. 아직까지 원인은 잘 모르겠지만 같은 코드인데도 어떨땐 돌아가고 어떨땐 돌아가지 않았습니다ㅜ. 찾아보니 flaky(?) 테스트가 발생했는데 아직 원인은 잘 모르겠습니다.
• 테스트환경이 일치 하지 않아서(제 환경에서는 돌아가고 다른 사람 환경에서는 테스트가 터지는 이슈) 오류를 찾는 시간이 너무 길었습니다. 제 코드를 clone해서 각자 자기 개발 환경에서 테스트 해준 채영님, 유열님, 원표님, 영서님, 운서님 등 많은 분들께 감사드립니다.

AI 활용 경험 공유하기

Cursor AI를 사용했습니다. 주로 HTML파일안에 있는 컴포넌트를 분리하거나 다른 귀찮은 작업을 할때 많이 사용하였습니다. 또한 로직은 잘 작동하는데 테스트가 깨지거나 할 때 테스트 파일을 컨텍스트로 넣고 몇 번 테스트가 어느 줄에서 에러가 뜨는지 명확하게 알려준다음 원인을 찾았더니 생각보다 잘 찾아주었습니다. 하지만 Github Actions에서 같은 코드인데도 어떨땐 터지고, 어떨땐 돌아가는 그런 문제는 해결하지 못했습니다. (아마 근본적인 원인은 제 코드겠죠..?)

리뷰 받고 싶은 내용

Q1. 페이지별 이벤트, 상태 관리, cleanup 추상화를 어떻게 해야할까요? 현재는 Homepage.js나 ProductDetailPage.js에서 ** 각 페이지에서 이벤트 리스너, 상태 관리, cleanup을 직접 구현하고 있습니다. 그런데 페이지가 많아질수록 공통화할 부분, 추상화할 부분, 컴포넌트화할 부분이 많아지면서 어떤 기준으로 추상화하거나 모듈화하면 좋을지 고민하고 있습니다.

Q2. SPA에서 전역 이벤트는 어떤식으로 관리하면 좋을까요? App에서 globalClickHandler()함수가 앱의 전역 이벤트(?) 관리를 하고있는데 이렇게 되면

• 한 함수에서 너무 많은 책임을 가질 것 같고
• 실수로 이벤트를 등록하여 사이트 이펙트가 발생하거나 중복된 이벤트도 발생할 것 같다고 생각했습니다.
• 실제로도 이벤트를 중복 등록하여 테스트가 깨졌던 이슈도 있었습니다( 제 실수입니다..ㅠ)

SPA에서 전역 이벤트 관리와 페이지/컴포넌트별 이벤트 관리를 어떻게 적절히 분리하거나 추상화하면 좋은지, 또는 vanilla JS로 개발할 때 어느 수준까지 이런 구조를 가져가는 것이 적절한지 리뷰를 받고 싶습니다.