과제 체크포인트

배포 링크

https://nemobim.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의 동작 방식을 바닐라 JavaScript로 직접 구현하면서 React가 해결하고자 하는 문제의 본질을 명확히 체감할 수 있었다...

자랑하고 싶은 코드

// src/components/Toast.js
export const Toast = (() => {
  let toastContainer = null;
  let activeToasts = new Map();

...생략
  
  return {
    success: (message) => showToast('success', message),
    error: (message) => showToast('error', message),
    info: (message) => showToast('info', message)
  };
})();

클로저로 만들어본건데 간단하게 쓸 수 있어요.

추가로 로직은 아니지만 UX 개선해 보았습니다...

• 검색어 결과값이 없을 시 입력한 검색어와 결과가 없습니다 표기: 사용자가 입력한 검색어를 명시적으로 보여주어 어떤 키워드로 검색했는지 확인할 수 있다.
• API 요청 중 에러 발생시 재시도 버튼 추가: 네트워크 오류나 서버 에러가 발생했을 때 사용자가 직접 재시도할 수 있는 버튼을 제공했다.

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

시간이 얼마 없어 먼저 구현하고 고쳐보자는 생각에 관심사 분리가 안된 코드들이 많습니다..정리하고싶다

• 전체적인 코드(현 시점에서는 흐름을 예측하기 어려움)
• 무한스크롤.. 프로덕트 리스트 로더 함수에서 분리하고 모듈화 필요해보임
• 중구난방의 이벤트리스너들 ex) 프로덕트 로더 안에 initializeProductCardEventListeners

학습 효과 분석

• 단순히 라이브러리를 사용하는 것과 실제로 구현하는 것 사이의 차이를 명확하게 경험했다.
• 리액트 넌 짱이야.....

과제 피드백

• 과제를 React 없이 Vanilla로 구현해야 한다는 점이 처음엔 익숙하지 않았지만 결과적으로 React가 왜 필요한지, 어떤 점이 추상화되는지를 이해하는데 도움이 됐다.
• 상품가격을 통화로 처리해야 된 다는 걸 테스트 코드 돌리고 알았습니다..(따로 적혀있지 않지만 명시해주시면 좋을거같습니다.)

AI 활용 경험 공유하기

• 사용한 도구: Cursor, ChatGPT
• 이번 주 대부분의 구현 과정을 AI와 짝 프로그래밍하듯 진행했습니다. 궁금한 부분에 대해 AI가 구조적, 단계적으로 설명해주면서 단순 구현이 아닌 문제 해결 흐름을 같이 고민하며 코드를 작성했습니다. 특히 SPA 구조를 처음 구현하면서 개념적으로 어려웠던 popstate, history, IntersectionObserver 등은 AI의 가이드 없이는 해결하기 어려웠을 것 같습니다. 단순히 완성된 코드를 받는 것이 아니라 "왜 이렇게 해야 하는가", "이 부분이 React의 어떤 개념과 대응되는가"를 지속적으로 질문하며 구조를 이해하려고 노력했습니다.
• 작성한 프롬프트 :

나는 프레임워크 없이 Vanilla JavaScript로 SPA를 구현하는 과제를 진행 중이야.

React를 배우기 전에 그 기반이 되는 "브라우저 환경에서 상태 기반 렌더링 구조"를 먼저 구현해보고 싶어.  
그 과정에서 브라우저 동작, 라우팅, 상태 동기화, 이벤트 처리 등 원리를 이해하는 것이 중요해.  

나는 다음 원칙을 기반으로 학습하고 싶어:

1. 기술 발전의 맥락을 이해하고 (브라우저/SPA/React 등)
2. 내부 동작 원리 기반으로 학습하고
3. 프레임워크 없이도 문제를 해결할 수 있는 기반을 갖추고 싶어.

이에 따라 설명이나 가이드는 가능한 **React가 해결하고 있는 문제를 Vanilla JS로 직접 구현하며 익히는 구조**로 알려줘.

내가 구현한 코드를 리뷰해줄 땐 다음 기준을 꼭 반영해줘:

- 전역 변수는 최대한 피하고, 클로저나 모듈화 방식으로 해결하고 싶어.
- 가능한 리액트처럼 동작하도록 구조를 만들고 싶어 (예: 상태 변경 → UI 반영 흐름).
- 재사용 가능한 유틸 함수/모듈로 나누는 방법을 알려줘.
- 바닐라 JS로 컴포넌트처럼 동작하는 구조를 만들고 싶어.

테스트 코드는 이미 작성되어 있어. 테스트 코드는 절대로 수정할 수 없어.

리뷰 받고 싶은 내용

클래스 vs 클로저 선택 기준

• 현재 프로젝트에서는 모달, 카테고리 캐시 등 상태를 갖는 로직이 있었는데 이를 클래스와 클로저 중 어떤 방식으로 구성해야 할지 고민이 많았습니다.. 하나의 모듈 안에서 여러 동작이 필요할 때 클래스와 클로저를 어떤 기준으로 선택하는 것이 좋을지 궁금합니다

// 클로저 방식
export const createCategoryCache = () => {
  let cachedData = null;
  return {
    get: () => cachedData,
    set: (data) => {
      cachedData = data;
    },
    has: () => cachedData !== null,
  };
};

// 클래스 방식 후보
class Modal {
  constructor() {
    this.modal = null;
  }
  open() { ... }
  close() { ... }
}

상태를 최대한 함수 내부에서 유지하고 싶은데, 구조적으로 가능한가요?

• 리액트와 최대한 비슷하게 만들어보고 싶어서 가급적이면 let 같이 컴포넌트 밖에 선언하여 전체에 양향을 줄 수 있는 코드를 최대한 지양하고 싶었는데.. 막상 짜보니 구현하기 어렵기도 하고 자꾸 에러가 나서 일단 포기했습니다. 이런 구조일때 외부 상태에 의존하지 않고도 한 함수 안에서 모든 로직을 처리하는 방식이 있을지 혹은 구조적 한계가 있다면 어느 정도로 타협하는 게 나은지도 궁금합니다.

//productLoader.js
// 무한 스크롤 상태 관리
let currentPage = 1;
let isLoading = false;
let hasMore = true;

바닐라로 작업할때는 수많은 이벤트 리스너를 어떤식으로 관리하는게 좋은가요?

한 화면에 여러 필터 기능(정렬, 검색, 카테고리 등)이 있는데 이벤트 리스너를 무작정 많이 붙이면 중복되거나 메모리 누수가 날 수 있다는 걱정이 들었습니다...

export const initializeFilterEventListeners = () => {
  document.removeEventListener("change", handleFilterChange);
  document.removeEventListener("keydown", handleSearchSubmit);
  document.removeEventListener("click", handleCategoryClick);
  document.addEventListener("change", handleFilterChange);
  document.addEventListener("keydown", handleSearchSubmit);
  document.addEventListener("click", handleCategoryClick);
};

이렇게 전역 리스너를 한 곳에 모아서 관리하는 방식이 괜찮은지 혹은 특정 DOM 요소 하위에서만 이벤트 위임하는 식으로 스코프를 좁혀야 하는지 고민이 됩니다.