adds-bug 님의 상세페이지 ＞ [7팀 박의근] Chapter 1-1. 프레임워크 없이 SPA 만들기

[7팀 박의근] Chapter 1-1. 프레임워크 없이 SPA 만들기

by adds-bug2025. 7. 10.

과제 체크포인트

배포 링크

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

과제 셀프회고

  • 시간을 더 많이 확보해야 했다. 더 많은 요구 사항을 다룰 수 있었다면 더 많은 것이 남았을 거라는 생각이 든다.
  • 과제의 난이도가 매우 높았다. 그래도 6개월 정도 js, ts, vue.js 등을 활용해서 어드민 페이지, 대시보드 페이지를 생성/관리 하다가 시작한거여서 아주 바보가 되진 않을거라고 생각했는데, 그냥 바보가 됐다.
  • 과제에 '팀'으로서 접근하지 못한 것이 아쉽다. 저녁 스터디 참석률이 저조했다. 다음 과제부터는 좀 더 적극적으로 스터디를 활용해야겠다는 생각을 했다.

기술적 성장

  • history.pushState() 메서드 확인

자랑하고 싶은 코드

  • ...다음 주차에는 가득 채워보기

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

  • ...가득 채워보기 다음 주차에는. 기필코.

AI 활용 경험 공유하기

  • 이번 과제에 접근 했던 방식을 돌아보면, 아래와 같았습니다.
    1. 요구사항 확인
    2. 과제 코드 확인
    3. ChatGPT에 과제 코드 입력하여 해석 요청
    4. ChatGPT에 요구사항 입력하여 해결 요청
    5. 요구사항이 해결된 코드의 동작 원리 학습
  • AI를 활용하지 않으면 문제 해결이 막막한 것이 과연 정상적인 상황일지.. 궁금합니다.
  • AI의 도움을 일부 받는 것이 아니라, 전적으로 AI에게 의지하는 이 상황이 뭔가.. 찜찜하면서도 일종의 현타가 옵니다.

리뷰 받고 싶은 내용

  1. Vitest 설치 후 진행한 TESTING 에서 product.list.test.js 부분을 보면, 전체를 한 번에 테스트 진행할 경우 [1. 상품 목록 로딩]을 제외한 나머지는 모두 실패인 반면, 각 과제를 개별적으로 테스트할 경우 일부 테스트가 성공으로 변경되는 현상이 있었습니다. 그 원인을 추적하고자 했으나 알아내지 못했습니다. 관련하여 제가 확인해야 할 키워드 등을 얻고 싶습니다.

  2. 실제 웹앱에서는 정상적으로 동작하지만, 테스트는 통과하지 못한 경우에는 어떤 방식으로 접근해야 하나요? 예를 들어, [3. 페이지당 상품 수 선택]에서 '선택 변경 시 즉시 목록에 반영된다'는 요구사항의 경우, 웹앱에서 정상적으로 동작합니다. 그러나 테스트는 통과하지 못하는 상황인데요. 이런 경우, 웹앱에서 일어나고 있는 동작이 '온전하지 못하다'고 판단해야 하나요? 혹은, 테스트 코드가 잘못 작성된 건 아닌가? 하고 의심해봐야 할까요?

과제 피드백

안녕하세요 박의근님, 수고하셨습니다. 이번 과제는 프레임워크 없이 순수 JavaScript로 복잡한 SPA를 구현하면서, 프레임워크가 해결해주는 문제들을 직접 경험해보는 것이 목표였습니다. 이를 통해 DOM 조작, 상태 관리, 라우팅 등의 핵심 개념을 깊이 있게 이해하셨기를 바랬습니다.

아쉽지만 현재 공유해준 코드만으로는 피드백을 할 수 있는 완성도나 채점을 할 수 있는 수준이 아닌것 같아서 불합격을 드립니다. 혹시 PR을 잘못 올린거라면 알려주세요.

Q) Vitest에서 전체/개별 테스트 시 결과가 다른 이유는 무엇인가요?

=> 이는 테스트 간 상태 공유 문제일 가능성이 높습니다. 사실 개별테스트와 전역 테스트마다 독립된 상태를 만들어서 독립성을 만들어야 하는 데 상태에 의존하는 형태로 코딩을 하게 되면 초기 설정에서 테스트를 하는 동안 상태값이 변하게 되고 이에 의존해서 테스트 코드를 만들면 반드시 순서대로 테스트를 해야만 정상동작하는 경우가 생길 수 있습니다.

Q) 웹앱은 정상 동작하나 테스트가 실패하는 경우 어떻게 접근해야 하나요?

=> 테스트는 특정 DOM 구조와 타이밍을 기대합니다. FE는 특정 결과를 눈으로 보이도록 하게 하기 위해서 다양한 방법과 시간차가 존재하는데 테스트 코드는 오로지 데이터의 구조와 값의 유무로만 판단하기에 정상적인 결과라도 테스트의 정상유무를 테스트하는 방법에 따라 실패가 될 수 도 있습니다.

=> 만약 본인의 결과가 문제가 없다면 테스트 코드를 그에 맞게 변경해야하는게 맞습니다. 그러나 테스트 코드가 진실의 원천이 되어야 한다면 테스트 코드에 맞게 코드를 수정을 하는 것이 맞지요. 지금 어느 코드를 기준으로 작성해야할지 또한 개발자가 결정을 해야하는 부분입니다.

ps. AI를 활용하지 않으면 문제 해결이 막막한 것이 과연 정상적인 상황일지.. 궁금합니다.

=> 네 당연합니다. AI가 없던 시절에는 코딩을 할때 어떻게 해야하는지 하루종일 검색해가며 되는 방법을 찾았던 시절이 있었고 검색 엔지니 없던 시절에는 책과 레퍼런스를 보면서 하루종일 사람들이랑 논의하면서 왜 이럴까 고민을 하다가 답을 찾아내는게 개발자의 역할입니다.

=> 설령 AI가 답을 알려주더라도 그 답이 맞는지 안 맞는지, 그 답이 우리의 경우에 맞는 답인 건지, 이걸 어떻게 적용해야하는지 고민하는 것 또한 개발자의 역할입니다.

=> 막연한 상황에서 목표를 정하고 길을 찾고 답을 찾아내 문제를 해결하는 과정을 즐겨주세요!

수고하셨습니다. 2주차도 화이팅입니다! :)