과제 체크포인트

배포 링크

https://yangs1s.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를 원리를 알가면서 이해하는거에 초점이 맞춰지지 않고, 코드도 어느순간 내머리에서 만드는게 아니고 어떻게든 돌려보자는 식으로 변질이 된거 같아서 너무 아쉽고도 아쉬웠습니다. 테스트를 생각하고, 그 하나만 보고 코드를 고치고 이러다 보니까 어디서 또 안되고, 목표치를 어느정도 잡아놓으면서 했는데,그 목표치까지 도달하지 못했던거 같아서 아쉬었던거 같아요, 뭔가 배우고 알아가는게 있어야하는데 그런게 잘 안됐던거 뭔가 반성하게 됩니다. 남은 9주도 잘해보겠습니다.

기술적 성장

• 우선 베포라는걸 처름 해봐서 재밌었고, 테스트코드에 대해서 그래도 완벽하게 이해한건 아니지만 어떤식으로 디버깅을 해보고 뭐가 문제인지 파악하고 인식하는게 하다보니 적응도 되고 이 부분은 좀 많이 배운거 같습니다.
• spa에 대해서 겉핥기식으로 알아갔던거도 물론 당장 100프로 이해한건 아니지만 이 과제를 하기전과 한 후로는 조금 나아진거 같습니다.
• 디자인 패턴에 대해서도 공부하면서 각각의 패턴의 특징을 잘 파악해서 코드 설계를 하고싶다고 생각했습니다. 물론 이번 과제는 그런게 잘 안되서 아쉬웠지만...

자랑하고 싶은 코드

없습니다..ㅠㅠ 어디다 내놔도 부끄럽네요..

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

전체적으로 좀 다 필요하다고 봅니다. 그냥 너무 보기 어렵고 제가 봐도, ai를 통해서 정리를 하고 고쳤지만. 뭔가 내것이 아닌 느낌 이런게 강하게 듭니다. 전체적으로 다 부족하고 제 생각과 두뇌도 개선이 필요한거 같아요..

학습 효과 분석

컴퍼넌트를 만들때, 패턴에 대한 고민, 그걸 알아가는 과정 이해, 이런것들이 좀 많이 배움이 있었던거 같습니다.

과제 피드백

저는 모호하거나 애매한건 저도 정확하게 파악을 잘못해서 잘은 모르겠습니다. 어려웠던건 테스트통과가 정도 였던거 같습니다. 좋았던건 직장다닐떄 못해봤던것들이 너무 많은데 이번주 과제로만도 새롭게 경험해봤던게 많아서 좋았던거 같아요, 배포나 테스트같은거, 그리고 기본기나 실력이 매우 부족해서 저한텐 난이도 좀 있다고 생각했지만 그래도 뭔가 어떻게든 만들어가는 과정이 재밌던거 같아요.

AI 활용 경험 공유하기

저는 claude와 커서를 주로 이용했습니다. 처음 과제할때는 무언가 안되면 문제점을 얘기해보고 어떤걸 참고하고 어떤걸 보는게 좋을지 조언을 구했다가. 나중에가서는 조금 의탁하게 되는 뭔가 복잡하거나 뭔가 정리해달라고 할때도 많이 사용했습니다.

ai가 일을 더 잘하게 만든 방법은 그냥 잘하면 칭찬하고 못하면 뭐라하고 ㅎㅎ.. 뭔가 일을 더 잘하게 만드는건 잘 모르겠습니다. 사람마다 ai에게 주는 기대치마다 다르다고 생각합니다.

사실 제가 작성한 코드가 ai가 고쳐주면서.. 뭔가 내게 아니게 되버리는 뭔가 머릿속에 남지 않은거 같아서 반성합니다..

리뷰 받고 싶은 내용

1. store을 만들때 옵저버 패턴을 이용해서 만들었는데 store를 두가지로 나눠서 작업을했는데 보완할 내용이 있는지 구성은 잘한건지 잘모르겠습니다.
2. Home.js에서 기본과제 1-1 테스트 때문에 원래 Store을 썻다가 loading하는 부분만 모듈 스코프를 이용했는데.. 왜 store을 사용하면 테스트가 통과가 안되는지 알수가 있을까요..
3. infinitescroll.js) 무한스크롤을 구현할때, e2e테스트에서 추가상품대기 부분에서 20개씩 카드가 40개가 나오면 되는 부분에서 다음페이지로 추가로 api호출이 안됐습니다. 로컬환경에서는 잘되었는데, 테스트에서는 왜 안되는지 궁금합니다.