과제 체크포인트

배포 링크

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

과제 셀프회고

저는 자바스크립트는 잘 모르고 리액트를 할 줄 아는 개발자였습니다.. 과제를 진행하면서 리액트에서는 생각없이 사용했던 router 부터 시작해서 mount, unmount, 상태 관리, 구독 등등 SPA를 구현하면서 기반이 되는 것들이 얼마나 중요한 개념인지 깨닫게 됐습니다. 어디서 본거, 많이 사용했던 거를 그냥 아무 철학없이 가져다 쓰다보니 근본없는 괴물이 탄생해서 살짝 슬픕기도 합니다.

기술적 성장

1. 라우팅 문제

   • 라우터를 직접 만들면서 새로고침 시 상태가 초기화되거나 뒤로가기/앞으로 가기가 정상적으로 동작하지 않는 문제를 겪었습니다. popstate 를 통해 URL 변화에 따라 컴포넌트를 다시 마운트해야 된다는 걸 알게됐습니다.

2. 전역 상태관리

   • 로컬 스토리지나 전역 스토어 상태 관리를 직접 구현하다보니 상태가 변경됐을 때 다른 컴포넌트에서 어떻게 감지할 것인지 고민했습니다. 과제에 참고자료를 참고하여 옵저버 패턴을 만들어 직접 상태 변경을 감지해 UI를 업데이트하는 플로우를 경험했습니다.

3. Mount/Unmount

• 컴포넌트가 mount/umount/ 될 때 cleanup이 제대로 안돼서 이벤트가 중복으로 적용 되거나 특히 테스트 환경에서 이전 테스트에서 사용했던 상태나 이벤트들이 계속 동작하거나 누적되는 버그가 있었습니다. mount/umount 를 명확하게 분리해서 꼭 unmount 시점에 해제되도록 관리해야된다는걸 한번 더 깨달았습니다.

사실 바닐라 자바스크립트로 구현해본 적이 없기 때문에 모든 것이 새로웠습니다.

자랑하고 싶은 코드

1. 프로젝트 시작 전 세팅 단계에서 commitlint를 활용하여 commit message rule을 일관성있게 지킬 수 있도록 설정했습니다.
2. 무한스크롤에서 DOM 탐지를 scroll 이벤트가 아닌 intersection observer 를 통하여 간단하게 성능 개선한 점이 만족스웠습니다.

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

전부 개선이 필요하다고 생각합니다만! 굳이 뽑자면

1. 함수 컴포넌트로 제작하려 했으나 구조를 어떻게 짜야될지 모르겠어서 클래스 컴포넌트로 구현했지만 사용하는 방식은 함수 컴포넌트 사용하듯이 한것 같아 이도저도 아닌 느낌이 듭니다.
2. 불필요한 리렌더링이 많이 일어나고 있다고 생각하여 router 나 base 가 되는 Compoment, Store, localStorage 로직들을 전부 개선이 필요하다고 생각합니다.
3. 라우터 로직이 너무 복잡하고 가독성이 안 좋다고 생각합니다.

학습 효과 분석

• 앞으로 리액트 같은 라이브러리나 프레임워크를 쓸 때도 실제로 어떻게 돌아가는지 파악하기 수월하고 더 깊이 파고들 수 있을 것 같습니다!
• 테스트와 같이 진행하면서 처음에는 익숙하지 않고 계속 에러가 생겨서 불편했지만 나중에는 코드를 고치고 나서 버그가 있는지 사이드이펙트가 생겼는지 확인할 필요없이 테스트를 돌리면 발견할 수 있어 편했습니다. 테스트의 중요성을 알게 됐습니다.

과제 피드백

• 테스트를 사용해본적이 없어 테스트에 대한 에러가 생겼을 때 지연 되는 부분이 많았고, 실제 테스트하는 의도가 어떤건지 파악이 힘들었던 내용도 있었습니다.
• 처리해야될 것들이 많아 깊게 파고들만큼의 고민을 할 시간이 부족했습니다.

AI 활용 경험 공유하기

사용한 AI 도구: ChatGPT

• Route를 초기에는 Class 기반으로 제작한걸 리액트의 react-router 처럼 사용하고 싶어 기존에 어떤 방식으로 사용했는지 알려주고 이미 작성 되어있는 Class 기반으로 만들다보니 더 정확하게 만들었던것 같습니다.
• GPT에서 프로젝트 폴더를 만들어서 많은 내용들을 기억할 수 있게 사용했습니다. 새로운 대화를 만들어도 어느정도 기억하고 있어 편리했습니다.

리뷰 받고 싶은 내용

• 리액트 같은 함수 컴포넌트를 만들고 싶었는데 각 컴포넌트 마다 상태 관리나 상태 변경 시 리렌더링, mount,unmount 하는 부분들을 어떻게 구현해야될지 몰라서 상속이 가능한 클래스 컴포넌트로 만들었는데 이러한 기능들을 함수 컴포넌트로 작성하려면 어떻게 해야되는지 감이 안 옵니다!