과제 체크포인트

배포 링크

https://ldhldh07.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에 대한 이해

바닐라 JS로 SPA를 최대한 구현하고자 했습니다. 그 과정에서 이전까지 알고 있던 SPA의 개념을 더 선명하게 만들 수 있었습니다. 동작을 더 자세히 알게 된 부분도 있습니다.

프로젝트 또한 SPA 구조가 될 수 있도록 고안했습니다.

• 단방향 데이터 흐름

SPA를 위한 구조에서 먼저 중요하게 여긴 부분은 상태관리입니다. 과제에 대한 감을 잡지 못했기에 보다 익숙한 구조를 사용했습니다. 데이터의 흐름을 단방향으로 구성했습니다. Action - Reducer - Store - View로 구성된 데이터 흐름을 통해 데이터의 복잡성을 관리하고자 했습니다. 양방향 바인딩에서 나올 수 있는 동시성에서의 Side Effect를 최소화했습니다. State의 무결성을 유지하여 예측 가능한 흐름을 만들고자 했습니다.

• store.js: 중앙 집중식 상태 관리 store 구현

• actions/: 각 도메인별 액션 정의 (cartActions, productActions, routeActions, toastActions)

• reducers/: 순수 함수로 상태 변화 로직 분리

• computed/: 파생 상태 계산후 캐싱 (CartComputed)

• 라우터

페이지의 상태 변화를 통한 페이지 렌더링이 핵심 기능인만큼 그러한 구조로 구현했습니다. 실제 window의 URL 라우팅이 서버 요청 없이 이뤄지는 구조는 아니지만, 그와 유사한 동작을 구현하고자 했습니다. 하나의 페이지로 사용자 경험을 끊기지 않게 유지했습니다.

구체적 구현 내용:

• routes.js: 라우트 정의 및 로딩 상태 관리
• controllers/: 각 페이지별 컨트롤러 패턴 적용
• pages/: 각 페이지 컴포넌트 분리 (productListPage, productDetailPage, notFoundPage)
• History API를 활용한 클라이언트 사이드 라우팅

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

Controller 코드의 경우 역할이 명확하지 못하고, 개발을 진행하면서 필요한 코드를 다소 난잡하게 작성해놓은 느낌을 받았습니다. 보다 책임을 명확히 하고 그에 맞는 코드를 명시성 있게 발전시킬 가능성이 있는 코드입니다. 특히 테스트 코드를 통과하기 위해 초기화나 컨트롤러 구독과 같은 기능들이 쓰여져 있는 코드는 정리의 필요성을 느낍니다.

controller를 통해 이벤트 리스너를 선언하고 렌더링을 하는 과정 관련하여 테스트 코드에서 많이 통과를 못했습니다. 그래서 이벤트 구독이 되지 않은 상태에서 화면 동작을 하여 테스트 코드를 실패하는 케이스들이 많았습니다. 일단은 렌더링을 단순히 지연시키는 것으로 해결을 했습니다. 실제로 멱등성이 확보되지 못한 상태이기 떄문에 관련 생애주기에 대한 명확한 로직으로의 보완이 필요하다 느꼈습니다.

학습 효과 분석

테스트 코드

테스트 코드가 이번 과제의 중요한 부분이었습니다. 실제 기본 구현에 소모한 시간보다 이미 구현된 기능을 테스트 환경에도 동작하게 만들어서 테스트를 통과하게끔 하는 시간이 더 길었습니다. 처음에는 생산성이 떨어지는게 아닌가 싶었습니다. 하지만 이 과정을 겪으면서 그만큼 테스트 코드의 동작을 구현하기 위해 작성된 코드의 동작을 하나하나 뜯어보면서 더 좋은 방식을 고민할 수 있었습니다. 테스트 코드 자체에서도 기초를 다질 수 있었습니다.

테스트 과정에서 겪었던 주요 이슈

• 첫 번째 테스트 실패 문제: computed 상태 초기화 타이밍 이슈
• 이벤트 리스너 등록 순서 문제: ProductListController 초기화 시점
• DOM 초기화로 인한 이벤트 리스너 제거 문제
• 테스트 간 상태 격리 문제

해결 과정:

• Store의 computed getter 수정으로 lazy initialization 구현
• 테스트 모드에서 Controller 초기화 순서 조정

과제 피드백

바닐라 자바스크립트라는 프론트엔드 개발의 기본기를 꾸준히 다져나가려는 생각은 오래 가지고 있었습니다. 하지만 실제로 많이 해보지 못했는데, 이번 기회에 사용한 점은 좋았습니다. 세분화된 동작들을 직접 조립해 나가야 했기에 코어 기능에 대한 이해도를 높일 수 있었습니다.

• 이벤트 위임(Event Delegation) 패턴 활용
• 모듈 시스템을 통한 코드 분리

AI 활용 경험 공유하기

Claude와 Cursor를 사용했습니다. AI는 세션을 적절하게 관리하는 것이 중요합니다. 그래서 진행사항 및 프로젝트의 방향성을 이야기하는 문서들을 docs 폴더에 저장했습니다. 이를 통해 세션을 높은 빈도로 비우면서도 docs의 문서들을 읽음으로써 대화의 연속성을 이어갈 수 있었습니다. 현재 진행상황이 어떤지 방향성이 어떤지 문서화하고 다듬었습니다. 그리고 세션을 갱신할때마다 ai가 이를 읽도록 했습니다.

AI코딩과 직접 코딩의 밸런스

AI를 이용한 코딩을 하면서 꾸준히 해오던 고민이, AI를 통해 생산성을 올리는 와중에 코딩 역량을 함께 기르는 그 균형감이었습니다. 과제를 통해 그에 대한 인사이트를 더할 수 있었습니다.

• 핵심 로직은 직접 설계하고 AI는 구현 디테일 지원
• 코드 리뷰 및 개선 방향 제안에 AI 활용

또한 agent로 한번 구현했던 로직은 ask로 물어보고 읽어본 후 직접 타이핑하기, 좀더 숙달된 이후에는 같은 로직을 바로 작성하기로 점진적으로 내것으로 만드려 했습니다.

멘토링 과정에서 질문 잘하는 법이 무엇인지에 대해서도 이야기를 나눴는데, AI도 똑같다 느꼈습니다. 그냥 무슨 이슈가 발생했으니 해결해달라고 이야기하는것은 토큰만 낭비하고 좋은 결과를 내지 못할 확률이 큽니다. 적어도 동작 흐름을 파악하고 어느 부분에서 에러가 발생하는지 확인한 후, 구체적으로 찝어서 이야기할 때 좋은 응답을 받을 수 있었습니다.

결론

이번 과제를 통해 바닐라 자바스크립트로 SPA를 구현하면서 프론트엔드 개발의 기본기를 다질 수 있었습니다. 특히 테스트 코드를 통과시키는 과정에서 코드의 동작 원리를 더 깊이 이해할 수 있었고, 상태 관리와 라우팅 등 핵심 개념들을 실제로 구현해보며 학습할 수 있었습니다. AI를 적절히 활용하여 생산성을 높이면서도 직접 코딩을 통해 역량을 기르는 균형감을 찾아가는 과정 또한 의미 있었습니다.

리뷰 받고 싶은 부분

main.js에서 렌더링을 하는 생애주기간 데이터 및 이벤트 핸들러 구독 셋업과 클린업 처리 흐름이 정리가 안되어 그 때 그 때 돌아가게끔 되어있어서 관련하여 리뷰받고자 합니다. spa에 적합한 구조인지 이야기를 나눠보고 싶습니다.