과제 체크포인트

배포 링크

https://jheejindev.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를 직접 구현해보는 것이 핵심이었고, 개인적으로 바닐라 JS에 약하다고 느끼고 있었던 터라 걱정이 많았습니다.

특히 렌더링 시스템을 직접 구현해보는 것은 처음이었기 때문에 설계 단계부터 많은 고민이 필요했습니다.

React 같은 프레임워크에 의존해 개발을 해오면서 렌더링은 자연스럽게 이루어진다고 생각했는데, 상태의 변화에 따라 어떤 DOM을 업데이트해야 할지 결정하는 일은 생각보다 훨씬 복잡했습니다.

요소가 동적으로 바뀌는 경우 이벤트가 사라지는 문제도 겪고, 라우터 구현에서도 많은 문제가 있었지만, history.pushState와 popstate 이벤트를 활용해 SPA 특유의 페이지 전환 없이 URL을 바꾸는 구조를 구현하면서 어떻게 동작하는지 기본 개념을 익힐 수 있었습니다.

기술적 성장

렌더링 시스템을 처음으로 직접 구현해보며, 상태 변화에 따라 어떤 DOM을 어떻게 업데이트할지를 설계하고 조작하는 과정

history.pushState와 popstate를 직접 활용해 SPA 라우팅을 구현하면서, 브라우저가 단순히 URL을 바꾸는 것이 아니라 히스토리 스택을 관리하며 상태를 변경한다는 개념

자랑하고 싶은 코드

더 노력해보겠습니다

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

initializeHandlers 함수에서 모든 핸들러를 한꺼번에 실행하고 있어, 각각의 핸들러가 언제, 어떤 이벤트에 바인딩되는지 명확하지 않습니다. 이로 인해 핸들러 등록 시점과 역할 분리가 불분명해져 코드 가독성이 떨어집니다.

핸들러들이 모두 한 함수에 몰려 있어, 기능별로 필요한 핸들러만 선택적으로 초기화하기 어렵고, 특정 페이지나 상황에서 불필요한 핸들러도 등록되는 비효율이 발생할 수 있습니다.

학습 효과 분석

이번 과제를 통해 SPA의 기본 구성 요소인 렌더링, 이벤트 처리, 라우팅의 내부 동작 원리를 직접 경험하며 이해도가 크게 향상되었습니다.

특히 바닐라 자바스크립트로 상태 변화에 따른 UI 갱신과 URL 관리를 구현하면서, 프레임워크가 추상화해주는 부분을 구체적으로 체득할 수 있었습니다.

직접 구현해보니, 기능별로 책임을 분리하고 상태 관리를 체계화하는 것이 얼마나 중요한지 실감했고, 앞으로 더 좋은 코드 구조를 설계하는 데 필요한 감을 잡았습니다.

과제 피드백

과제 목표가 렌더링, 이벤트, 라우팅 세 가지 핵심 부분으로 명확하게 나누어져 있어 집중하기 좋았습니다.

다만, 전체적으로 과제 양이 많고 내용이 어려워 처음 접하는 입장에서 부담이 컸습니다.

특히 테스트 코드 수정이 여러 번 필요했고, 한 테스트가 다른 테스트에도 영향을 주는 문제가 발생해 혼란스러웠습니다. 이런 점에 대한 사전 안내나 테스트 격리 방법에 대한 가이드가 있으면 좋겠습니다.

AI 활용 경험 공유하기

이번 과제에서 ChatGPT(GPT-4)와 GitHub Copilot을 함께 활용했습니다.

예를 들어, history.pushState와 popstate의 동작 원리를 이해하기 어려웠을 때, ChatGPT에 구체적인 코드 예제와 함께 작동 방식을 질문하여 빠르게 개념을 잡을 수 있었습니다.

함수 구현이나 반복적인 코드 작성에서 도움을 받았습니다. 불필요한 중복 코드를 간단한 리팩토링으로 정리하는 데도 활용했습니다.

리뷰 받고 싶은 내용

현재 정규표현식을 활용한 라우팅 매칭 방식이 간단한 경로에는 적합하지만, 복잡한 동적 라우팅(예: 쿼리파라미터, 중첩 라우트 등)에도 확장 가능할지 궁금합니다.

window.onpopstate 이벤트 핸들러로 라우트 재실행을 구현했는데, 향후 복잡한 상태 관리가 필요할 때 더 좋은 설계 방안이나 패턴이 있을지 알고 싶습니다.

전반적으로 이 라우터 구조가 규모가 커졌을 때 유지보수나 기능 확장에 유리한지, 아니면 리팩토링이 필요할지 조언을 받고 싶습니다

initializeHandlers 함수가 render 이후 항상 호출되며 전역적으로 모든 이벤트 핸들러를 바인딩하는 구조입니다. 이 방식이 반복적인 렌더링과 함께 동작하면서 같은 DOM 요소에 이벤트가 중복 바인딩될 가능성이 있고 이로 인해 성능 저하나 예기치 않은 동작이 발생할 여지가 있을것 같은데 이벤트 중복을 방지하기 위해 매번 removeEventListener로 정리하거나, 이벤트 위임 방식을 고려해볼 수 있을 것 같은데, 현재 구조에서 더 나은 이벤트 관리 패턴이 있을지 피드백 받고 싶습니다.