과제 체크포인트

배포 링크

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

과제 셀프회고

기술적 성장

이번 과제의 목표는 프레임워크 없이 순수 바닐라 JavaScript만으로 SPA를 직접 구현하는 것이었습니다. 리액트나 다른 프레임워크가 내부적으로 제공해주는 기능들을 손으로 직접 구현해보면서, 그 동작 원리를 몸으로 체득할 수 있는 좋은 기회였습니다. 더불어 리액트의 소중함을 많이 느꼈습니다ㅎㅎ

1. 라우팅과 상태 관리 기존에는 라우팅이나 전역 상태 관리를 리액트에 의존해 사용했지만, 이번 과제에서는 window.location, history.pushState, popstate 이벤트 등을 직접 다루면서 클라이언트 사이드 라우팅의 동작 방식을 명확히 이해하게 되었습니다. 또한 전역 state 객체와 렌더 함수 간의 연결을 통해 최소한의 상태 관리 시스템도 구현해볼 수 있었습니다.

2. 렌더링 방식의 한계와 DOM 제어 경험 React처럼 virtual DOM을 사용하는 환경과 달리, 실제 DOM을 직접 제어하며 innerHTML 방식으로 렌더링을 반복하다 보니 성능적인 한계를 체감할 수 있었습니다. 이는 향후 프레임워크를 사용할 때 더 효율적인 리렌더링 구조가 왜 필요한지에 대한 인사이트를 제공해주었습니다.

3. 컴포넌트화와 모듈 설계에 대한 고민 시간이 촉박해서 제대로 분리하지는 못했지만, 렌더링 로직과 이벤트 바인딩, 상태 변경 등이 하나의 파일(main.js)에 집중되면서 유지보수성과 확장성의 문제점을 몸소 느꼈습니다. 이 경험을 바탕으로 차후에는 state.js, events.js, render.js처럼 기능별로 분리하고, 옵저버나 싱글톤 패턴을 도입해보는 방향도 고민 중입니다.

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

전반적으로 많은 개선이 필요하다고 생각되는데요, 특히 시간이 더 있었다면 main.js를 분리했을것같습니다. 지금은 라우팅, 상태관리, API호출, 이벤트 바인딩 등이 모두 한 파일에 섞여있어서 실제 서비스처럼 기능이 많아질 경우를 고려할 때, 이런 구조가 확장성과 유지보수 측면에서 안좋다고 생각합니다.

예를들어

• state.js / events.js / render.js / router.js / main.js 이런식으로 역할별로 분리를 할것같습니다.

이 부분은 과제 마감 이후 따로 진행해볼 계획입니다!

과제 피드백

테스트 코드가 작성이 되어있어서 코어 functionality가 뭔지 정확히 알수있는 부분이 좋았습니다! 예전에 드림코딩 엘리님 영상에서 현업에서 코딩을 할때 테스트코드 먼저 작성후에 구현한다는 언급을 하셨던것같은데 코치님이나 다른분들도 이렇게 하는지 궁금하네요..! 저는 제가 쓴 코드에 맞춰서 테스트 코드 작성하는 편인데 이렇게 테스트 코드 -> 기능 구현의 평소와는 뒤집힌(?) 경험해봐서 좋았습니다ㅎㅎ

AI 활용 경험 공유하기

• 사용한 AI도구 - Cursor
  • 항해플러스 조인할 때 다짐했던 "AI를 최소한으로 사용하자"는 각오는... 첫 주차 과제에서 처참히 무너졌습니다 😭
  • 과제의 복잡도와 구현 범위가 예상보다 컸기 때문에, AI의 도움을 받아 빠르게 기능을 구현하고 문제를 해결할 수 있었습니다. 다만 너무 많은 부분을 AI도움을 받았기때문에 다시 과제를 돌아보고 리뷰하면서 내것으로 만드는 과정을 거쳐야할것같습니다.
• AI 가 일을 더 잘 하게 만든 방법
  • AI는 무조건 구체적인 프롬프트를 주는게 좋은것같습니다. 또한 무작정 "이 페이지 구현해줘" 보다는 정확한 디렉션을 주는게 내가 원하는 결과를 얻을수 있는것같습니다. AI가 완벽하지 않다는걸 항상 인지하면서 조금이라도 의심할만한 부분이 보이면 무조건 한번더 물어보는 편입니다.

리뷰 받고 싶은 내용

• 이번 과제를 진행하면서 main.js에 라우팅, 상태 관리, API 호출, 이벤트 바인딩 등 많은 역할이 집중되어 있는 구조가 확장성과 유지보수 측면에서 문제가 될 수 있다고 느꼈습니다. 실제로는 이 부분을 router.js, state.js, events.js, render.js 등으로 분리하는 것이 더 좋을 것 같은데, 현재 구조에서 어떤 방식으로 리팩토링하면 좋을지 폴더/ 파일 구조 설계 관점에서 피드백 받고 싶습니다.
• cart.js의 경우 Cursor가 클래스 기반으로 싱글톤 패턴을 사용해 구현해주었고, 구조적으로도 상태 관리와 재사용 측면에서 꽤 깔끔하게 작성된 것 같습니다. 사실 평소에는 클래스를 잘 사용하지 않아서 생소했는데, 코드를 보면서 오히려 이렇게 구성하는 게 명확하고 관리하기 편하다는 인상을 받았습니다. 그런데 실제 현업이나 실무 상황에서 장바구니와 같은 모듈은 이렇게 클래스 기반으로 작성하는 게 일반적으로 권장되는 방식인지, 혹은 함수 기반으로 상태를 분리해서 관리하는 방식이 더 나은지 궁금합니다.