과제 체크포인트

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

과제 셀프회고

항해 플러스를 시작할 때, 이렇게까지 어려울 줄은 정말 몰랐습니다. 솔직히 과제를 진행하는 동안에는 '패스'가 가장 큰 목표였기 때문에, 시간에 쫓겨 코드를 깊이 있게 고민하지 못한 부분이 많았습니다. 리팩토링을 천천히 진행하면서, 어떤 코드가 어디에 어떻게 쓰여야 하는지 다시 돌아보고 정리하는 시간이 꼭 필요하다는 걸 느꼈습니다.

이번 과제를 통해 제 실력이 많이 부족하다는 걸 체감했고, 다른 분들이 워낙 잘 하셔서 심적으로 위축되고 지칠 때도 많았습니다. 하지만 그럴 때마다 팀원분들이 적극적으로 도와주시고 응원해주셔서 끝까지 포기하지 않고 마칠 수 있었습니다.

또한, 로컬 환경과 배포 환경에서의 URL 설정 문제로 정말 눈이 빠질 뻔했는데요 😂 이 과정을 통해, 앞으로는 두 환경 모두에서 잘 작동할 수 있는 코드 구조를 고민해야겠다는 생각이 들었습니다.

기술적 성장

이번 과제를 통해 attachEvent와 같은 이벤트 등록 방식에 대해 새롭게 알게 되었습니다. 그동안 실무에서는 주로 button onclick="" 형태로만 이벤트를 연결했기 때문에, addEventListener 같은 방식에 익숙하지 않았는데, 이번 기회를 통해 이벤트를 좀 더 구조적으로 관리할 수 있는 방법을 배울 수 있었습니다.

또한 렌더링의 시점과 방식에 대해 고민해보게 되었고, DOM이 언제 그려지는지, 이벤트는 어느 시점에 등록되어야 하는지 등을 실습을 통해 체감하며 학습할 수 있었습니다.

자랑하고 싶은 코드

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

무한 스크롤 부분에서 스크롤이 내려올 때 다시 그 스크롤의 위치를 기억하고 render을 진행하게 되는데 이 방법 말고 다른 방법이 있을까요? 무한 스크롤은 구현이 되지만 다시 render을 하는 점에서 너무 무겁게 느껴지고 ui 상에서 매끄럽게 이어지지 않습니다.

이 부분에 대해 다시 코드를 짜보려 했는데 시간이 부족해서 못 해봤습니다 ㅜㅜ

학습 효과 분석

이번 과제를 하면서 처음으로 GitHub Copilot을 사용해 보았습니다. 사실 그동안 AI에 너무 의존하게 되는 건 아닐까 걱정도 있었지만, 막상 사용해보니 "AI는 정말 최고다..."라는 생각이 들었습니다.

특히 반복적인 코드나 익숙하지 않은 문법을 빠르게 작성할 수 있어서 작업 속도가 확실히 빨라졌습니다. 다만, AI가 제시하는 코드를 무조건 사용하는 것이 아니라, "이 코드가 왜 이렇게 동작하는지 이해하고 사용해야 한다"는 점도 중요하다는 걸 느꼈습니다.

앞으로도 AI를 보조 도구로 적극 활용하되, 주체적으로 이해하고 판단하는 개발자가 되기 위해 노력해야겠다고 다짐하게 되었습니다.

그리고 실무에서는 테스트 코드를 작성하지 않고, 로컬에서 직접 실행해보며 에러를 찾거나, 배포 후 피드백을 받아 수정하는 방식으로 개발해왔습니다. 하지만 이번 과제에서 테스트 코드를 먼저 작성하고 개발을 진행해보니, 사전에 더 많은 예외를 고려하게 되었고, 에러 발생 빈도도 줄일 수 있다는 점에서 큰 장점을 느꼈습니다. 앞으로는 테스트 코드 작성의 중요성을 더 크게 인식하고 적극적으로 활용해야겠다는 생각이 들었습니다.

랜더에 대한 이해와 파악이 필요할 것 같습니다.

과제 피드백

AI 활용 경험 공유하기

리뷰 받고 싶은 내용