과제 체크포인트
배포 링크
https://adds9810.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로 다시 구현한다.
- 이 과정에서 직접 가공하는 것은 최대한 지양한다.
과제 셀프회고
이번 과제를 통해 웹 개발의 중요한 흐름을 깨달을 수 있었습니다. 하드코딩이나 프레임워크로 퍼블리싱만 하던 것에서 벗어나, 실제로 동작하는 웹 애플리케이션을 처음부터 끝까지 구현해보면서 개발의 전체적인 과정을 이해하게 되었습니다. 특히 클래스 기반 컴포넌트 설계, 상태 관리, 라우팅 시스템 등 이전에는 개념적으로만 알던 것들을 직접 구현해보면서 기능 구현 방법을 익혔습니다. AI와 구글링의 도움으로 어려운 기능들도 하나씩 해결해나가면서 문제 해결 능력이 향상되었습니다. 다른 사람들의 코드를 보면서는 오히려 자신감이 더 떨어졌지만, 이는 개발하는 하나의 과정을 이해하고 앞으로 어떻게 생각하고 접근해야 할지에 대해 깊이 생각해보게 된 계기가 되었습니다. 각자 다른 방식으로 같은 문제를 해결하는 것을 보면서 "정답은 하나가 아니다"라는 것을 깨달았고, 내가 가진 장단점을 객관적으로 파악할 수 있었습니다. 하지만 테스트 통과에 급급해서 클린코드 구현을 소홀히 한 점이 아쉬웠습니다. 기능 구현에만 집중하다 보니 코드 중복이나 성능 최적화 같은 부분을 놓친 것 같습니다. 그래도 어려운 부분이 있을 때마다 여기저기 도움을 받을 수 있고, 다른 수강생들의 코드도 볼 수 있으며, 실시간 소통으로 문제를 보완해가는 과정은 정말 좋았습니다. 특히 테스트 코드를 통과시키기 위해 노력하면서 말로만 듣던 테스트가 실제로 내 코드를 검증하는 과정을 경험할 수 있어서 신기했습니다. 비록 기한 내 모든 테스트 통과는 못했지만, 이번 경험을 통해 개발에 대한 이해와 문제 해결 능력을 키울 수 있었다 생각합니다.
기술적 성장
- 아키텍처 설계 경험: 필터 상태를 URL과 동기화해야 하는 요구사항이 생기면서, 페이지 간에도 공유되는 전역 상태 구조가 필요하다고 느꼈습니다. 처음에는 함수형 구조를 고민했지만, 렌더링과 이벤트 분리, UI 조작 타이밍이 헷갈려서 객체 방식으로 전환했고, 이후 클래스 방식으로 통일했습니다. 이 과정에서 상태 관리의 복잡성을 깊이 체감할 수 있었습니다.
- 클래스 기반 프로그래밍 학습: 처음으로 클래스를 사용해서 컴포넌트를 만들어봤습니다.
class Header
,class Cart
처럼 각 기능을 독립적인 클래스로 분리해서 코드를 정리하는 방법을 배웠습니다. 특히constructor
,render()
같은 메서드들을 사용하면서 객체지향 프로그래밍의 기본 개념을 이해하게 되었습니다. - 상태 관리 패턴 구현:
cartStore
에서 옵저버 패턴을 사용해서 데이터가 바뀔 때마다 화면이 자동으로 업데이트되도록 만들었습니다.subscribe
,notify
메서드를 직접 구현해보면서 Vue나 React가 내부적으로 어떻게 동작하는지 이해하게 되었습니다. - SPA 라우팅 시스템: 페이지 새로고침 없이 화면을 바꿀 수 있는 라우터를 직접 만들어봤습니다.
popstate
이벤트와pushState
를 사용해서 실제 웹사이트처럼 동작하도록 구현한 것이 신기했습니다. - 테스트 코드 통과 경험: 말로만 듣던 테스트 코드를 실제로 통과시키면서
vitest
와@testing-library
가 어떻게 동작하는지 이해하게 되었습니다. 내가 작성한 코드가 테스트 요구사항에 맞게 동작하는지 검증하는 과정이 신기하고 유익했습니다. - 기한 내 완성 경험: 처음에는 "이걸 다 만들 수 있을까?" 싶었는데, AI와 구글링의 도움으로 어떻게든 기한 안에 완성할 수 있다는 것을 알게 되었습니다. 어려운 기능들도 하나씩 차근차근 해결해나가면서 "모르는 것도 찾아보고 시도해보면 된다"는 것을 깨달았습니다.
- 다양한 해결 방법 인식: 다른 사람들의 코드를 보면서 같은 문제를 해결하는 방법이 여러 가지 있다는 것을 알게 되었습니다. 이는 개발에서 "정답은 하나가 아니다"라는 중요한 마인드셋을 갖게 해주었습니다.
자랑하고 싶은 코드
- 장바구니 상태 관리:
cartStore
에서 장바구니에 상품을 추가하거나 삭제할 때마다 헤더의 숫자가 실시간으로 바뀌고, localStorage에 저장해서 새로고침해도 데이터가 유지되도록 만든 부분이 가장 만족스럽습니다. 옵저버 패턴을 활용해서 깔끔하게 상태 변화를 처리할 수 있었습니다. - 무한 스크롤 구현:
Home.js
에서 스크롤이 페이지 하단에 도달하면 자동으로 더 많은 상품을 불러오는 기능을 구현했습니다.debounce
함수를 사용해서 성능을 최적화하고, 로딩 상태를 표시해서 사용자 경험을 개선한 것이 좋았습니다. - 모달 컴포넌트:
Cart.js
에서 장바구니 모달을 만들 때 ESC 키, 배경 클릭, X 버튼 등 다양한 방법으로 닫을 수 있게 구현했습니다. 이벤트 리스너를 체계적으로 관리하고, 모달 상태에 따라 DOM을 동적으로 제어하는 부분이 복잡했지만 잘 작동해서 뿌듯했습니다.
개선이 필요하다고 생각하는 코드
- 이벤트 리스너 관리:
Cart.js
의bindEventListeners()
메서드에서 10개 이상의 이벤트 리스너를 개별적으로 추가하는 부분이 복잡합니다. 각 버튼마다 별도로 이벤트를 추가하는 것보다 이벤트 위임(Event Delegation)을 사용하면 더 간단하고 효율적일 것 같습니다. - 상태 업데이트 로직:
store.js
에서increaseQuantity
,decreaseQuantity
같은 메서드들이 비슷한 패턴으로 배열을 조작하고 있습니다. 이런 중복된 로직을 하나의 공통 함수로 합치면 코드가 더 깔끔해질 것 같습니다. - 컴포넌트 간 의존성:
Home.js
와Cart.js
에서cartStore
에 직접 의존하고 있어서 테스트하기 어렵고 재사용성이 떨어집니다. 의존성 주입이나 인터페이스를 사용해서 컴포넌트 간 결합도를 낮출 필요가 있습니다. - 클린코드 부족: 통과에 급급하다 보니 코드 중복이나 성능 최적화 같은 부분을 소홀히 했습니다. 특히 긴 메서드나 복잡한 조건문을 더 작은 함수로 분리하고, 의미 있는 변수명을 사용하는 등 클린코드 원칙을 적용할 필요가 있습니다.
학습 효과 분석
- 가장 큰 배움: 클래스를 사용해서 코드를 구조화하는 방법을 알게 되었습니다. 처음에는 클래스가 어려워서 막막했는데, 실제로 사용해보니 코드를 정리하고 재사용하기 편리하다는 것을 깨달았습니다. 특히
this
키워드와 메서드 호출 방식을 이해하게 되었습니다. - 추가 학습 필요: 이벤트 위임과 같은 고급 DOM 조작 기법을 더 배우고 싶습니다. 현재는 각 요소마다 개별적으로 이벤트를 추가하는데, 더 효율적인 방법이 있을 것 같습니다. 또한 성능 최적화 방법과 클린코드 작성법도 더 알고 싶습니다.
- 실무 적용 가능성: 클래스 기반 컴포넌트 설계와 상태 관리 패턴은 실제 프로젝트에서도 바로 적용할 수 있을 것 같습니다. 특히 옵저버 패턴은 다른 프로젝트에서도 재사용 가능하고, AI 도구 활용 경험과 테스트 코드 통과 경험도 실무에서 유용할 것 같습니다. 다만 뒷걸음 치다 쥐잡은 느낌으로 구현해 아직 완전히 익숙하지는 않지만, 참고할 수 있는 경험이 되었고, 특히 cartStore의 상태 관리 구조나 모달 컴포넌트 구현 방식은 비슷한 상황에서 다시 돌아볼 거 같습니다.
- 기한 관리 능력: 처음에는 기능이 너무 많아서 포기할 뻔했는데, 통과기준에 따라 우선순위를 정하고 하나씩 차근차근 해결해나가면서 기한 내에 완성할 수 있다는 것을 알게 되었습니다. 이제는 "어떻게든 해결할 수 있다"는 마음가짐으로 임할 수 있게 되었습니다.
- 개발 마인드셋 변화: 다른 사람들의 코드를 보면서 자신감이 떨어졌지만, 이는 오히려 개발에 대한 겸손한 자세와 지속적인 학습의 중요성을 깨닫게 해주었습니다. 각자 다른 방식으로 문제를 해결하는 것을 보면서 "정답은 하나가 아니다"라는 것을 이해하게 되었습니다.
과제 피드백
- 과제에서 어려웠던 부분: 클래스를 처음 사용하다 보니
this
바인딩이나 메서드 호출 방식에서 많이 헷갈렸습니다. 특히 이벤트 리스너에서this
가 가리키는 객체가 바뀌는 문제를 해결하는 데 시간이 오래 걸렸습니다. - 과제에서 좋았던 부분: 실제로 작동하는 쇼핑몰을 처음부터 끝까지 만들어볼 수 있어서 좋았습니다. 장바구니, 라우팅, 무한 스크롤 등 실무에서 사용되는 기능들을 직접 구현해보면서 웹 개발의 전체적인 흐름을 이해할 수 있었습니다. 특히 테스트 코드를 통과시키기 위해 노력하면서 말로만 듣던 테스트가 실제로 내 코드를 검증하는 과정을 경험할 수 있어서 신기했습니다. 다른 수강생들과의 실시간 소통으로 문제를 해결해가는 과정도 정말 좋았습니다.
AI 활용 경험 공유하기
- 구체적인 문제 상황을 설명하기
- 원하는 결과물을 명확히 제시하려고 노력(은 했지만 잘 안 된거 같다...)
- 에러 메시지나 로그를 함께 공유하기
- 단계별로 작은 요청으로 나누어 하기
- 내가 작성한 코드와 비교하기: AI가 제안한 코드는 대체로 더 깔끔하고 체계적이었습니다. 특히 중복 코드 제거나 이벤트 처리 최적화에서 AI의 제안이 효율적이었습니다. 내가 혼자 했다면 더 많은 중복 코드와 비효율적인 로직이 있었을 것 같습니다. AI의 도움으로 코드 품질이 향상되었고, 테스트 과정에서도 최적화 방법을 배울 수 있었습니다.
리뷰 받고 싶은 내용
- 컴포넌트 간 의존성 분리: 현재
Home.js
와Cart.js
에서cartStore
에 직접 의존하고 있어서 테스트하기 어렵고 재사용성이 떨어집니다. 컴포넌트들이 서로 너무 밀접하게 연결되어 있어서 나중에 수정하기 어려울 것 같습니다. 컴포넌트들을 더 독립적으로 만들 수 있는 방법이 있을까요? 예를 들어 Cart 컴포넌트를 다른 프로젝트에서도 사용할 수 있도록 만들려면 어떻게 해야 할지 궁금합니다. - 이벤트 리스너 중복 제거:
Cart.js
의bindEventListeners()
메서드에서 10개 이상의 이벤트 리스너를 개별적으로 추가하고 있는데, 이벤트 위임을 사용해서 더 효율적으로 관리하는 방법이 있을까요? 특히data-product-id
속성을 활용한 이벤트 위임 패턴을 적용하면 코드가 더 간단해질 것 같은데, 막상 하려니 떠오르지 않았습니다. 어떤 방식으로 구현하는 것이 좋을지 조언해 주시면 좋겠습니다. - 상태 업데이트 로직 최적화:
store.js
에서increaseQuantity
,decreaseQuantity
,toggleItemSelection
등의 메서드들이 비슷한 패턴으로 배열을 조작하고 있습니다. 이런 중복된 로직을 하나의 공통 함수(예:updateItem
)로 합쳐서 코드를 더 간결하게 만들 수 있을까요? 그리고 배열을 매번 새로 만드는 것보다 불변성을 유지하면서 성능을 개선하는 방법이 있는지 궁금합니다. - 함수명과 변수명 개선: AI의 피드백으로는
Cart.js
의templateContent()
,itemCountText()
같은 함수명들이 직관성이 떨어지다고 예를 들어templateContent()
를renderCartContent()
로 바꾸는 것을 제안하는데 어떻게 생각하시는지 궁금합니다. 그리고 어떤 함수와 변수를 더 명확하게 이름 지을 수 있는 방법에 대해 조언받을 수 있을까요?