과제 체크포인트

배포 링크

https://taeyeong0814.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를 구현하는 것 준일 코치님께서 말씀하신 이번 과제에서 중요하게 생각하신 포인트는 아래와 같았습니다.

1. 렌더링 시스템을 직접 구현해보기
2. 이벤트 관리 시스템을 직접 구현해보기
3. 라우터를 직접 구현해보기

하지만 직접 구현을 시작해보니 생각 이상으로 나 자신이 렌더링 시스템에 대해 개념이 없고 특히 스토어와 결합하여 라우터를 설정한 뒤 더 어려움에 빠졌습니다. 그동안 필요한 라이브러리나 프레임워크를 어떻게 쓰는지만 검색하여 '이렇게 쓰는 것' 만 확인 후 코더처럼 사용했구나 생각이 들게 만드는 시간이었습니다.

알게 된 내용은 popstate 이벤트를 통해 SPA의 개념을 적용 시킬 수 있고 이 이벤트가 어떻게 동작 하는 지 알게 되었습니다. 더불어 디렉토리 구조를 어떻게 잡으면 좋을까? 생각을 하게 되는 시간이였습니다.

기술적 성장

상태 관리와 옵저버 패턴 이해

1. Store 간의 복잡한 의존성과 구독 관계를 알게 됨 (이해까지는 아직 못 함.)
2. 라우팅과 상태 관리의 상호작용으로 페이지 전환 시 발생하는 렌더링 최적화와 불필요한 API 호출 방지하는 방지하는 방법
3. 옵저버 패턴으로 구현 된 스토어와 라우터 간 발생하는 무한 루프와 중복 호출 문제 해결 경험

SPA 라우팅 시스템 구축

1. GitHub Pages 서브디렉토리 배포 환경을 고려한 경로 처리
2. 상세 페이지와 메인 페이지 간의 라우팅 최적화

자랑하고 싶은 코드

부끄럽습니다. 언젠간 꼭 자랑하고 싶은 코드가 있길.

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

bindBreadcrumbEvents 함수처럼 중복 이벤트 처리들이 있는데 이런 함수들을 공통으로 처리 할 수 있을 것 같은 생각이 들었습니다. 구조화 시킨다고 시켰지만 턱없이 부족한 구조화인 상황. 스토어의 개념을 모르는 상태로 AI의 의존해서 동작만 할 수 있도록 처리를 하였더니 스파게티 코드가 되었습니다.

1. 옵저버 패턴의 스토어
2. 1번에 따른 라우터 처리

학습 효과 분석

• 몰랐던 부분을 알게 되는 배움이 된 부분
  1. popstate 의 개념 테스트 진행 중 '3. 페이지당 상품 수 선택'에 대한 테스트를 수행하는 도중 describe 된 2개의 테스트 중 2번째 테스트를 진행 시 한번에 수행을 하면 실패를 하는 문제가 있었습니다. 하루가 넘게 고민을 했지만 해결을 못 한 상황이였는데 테스트 코드 상단에 goto 함수로 popstate 이벤트를 발생시키는 것을 확인 할 수 있었습니다. 그래서 popstate의 개념을 공부한 뒤 이를 초기화하는 코드가 테스트 코드에 존재하기 때문에 main.js 에서 아래와 같은 코드를 추가하여 다시 실행되도록 하니 테스트를 통과 하였습니다.

과제 피드백

1. 렌더링 시스템을 직접 구현해보기
2. 이벤트 관리 시스템을 직접 구현해보기
3. 라우터를 직접 구현해보기

의 개념을 위해 만들어진 과제라고 하니 이 부분에 집중하고 더 신경을 쓸 수 있었습니다. 하지만 과제의 양이 많은데 구조와 함께 시작을 하는 단계에서 접근하기가 너무 어렵게 느껴졌습니다. 테스트 코드에 대한 부분도 있지만 이 테스트 코드 통과 여부 문제보다는 이 조건에 맞춰서 구조와 코드를 작성하는 것이 어렵게 생각되고 실제로 어려워서 힘들었습니다. 이런 부분은 과제 시작 전 참고 문서나 차라리 사전 스터디를 이런 부분을 하는 것이 더 좋을 것 같습니다.

제 생각은 학교나 학원처럼 지도와 배움이 있는 방식으로 생각을 했지만 그런 시스템으로 프로그램을 진행하고자 하는 의미보다는 '코치'의 의미처럼 내 자신이 진행을 하면서 코치를 받는 것으로 접근 해야 더 많은 것을 얻을 수 있겠다. 생각 했습니다. 이번 주차에서는 라우터가 동작하는 원리, 스토어의 개념와 원리, 렌더링의 개념과 원리 즉 개념과 원리에 대해 알아야 이렇게 코딩을 할 수 있구나. 알게 되었습니다. 앞으로는 개념과 원리에 대해 접근을 꼭 해야겠습니다.

AI 활용 경험 공유하기

ChatGPT, GitHub Copilot을 사용하였습니다.

프롬프트는 최대한 기획문서를 작성하는 것과 같게 작성하는 것이 결과값이 높았습니다. 하지만 UI에 원하는 기능을 적용하는 정도에 어울렸습니다. 예를 들어, 상단 Header과 main, Footer 를 나누고 Header 에 쇼핑몰은 홈버튼 장바구니 버튼은 장바구니 모달을 띄워주어야 하고 각각 컴포넌트로 분리가 필요해. 와 같이 작성하니 도움이 많이 되었습니다.

AI가 일을 더 잘 하게 만든 방법은 만들었다기 보다 내가 어떤 코드를 작성 할 지 함수나 기타 등을 이용 할 지에 대해 이해가 있어야 AI가 더 일을 잘하게 할 수 있다 느꼈습니다.

리뷰 받고 싶은 내용

1. render.js 파일에 모든 이벤트들을 다 모아 두었는데, 이런 구조가 맞는 건지 궁금합니다.

2. 옵저버 패턴을 사용해 상태 관리 로직을 구현해 보았습니다. 하지만 옳은 방법인지 여부를 묻는 것 이전에 애초에 store는 어떤식으로 구조화하고 로직을 구현하는지 아주 기초적인 부분에 대한 설명 부탁 드립니다.

3. render.js 파일에 initRender 함수인데 초기 렌더링과 새로고침, 상세페이지 이동 등에 따라 처리되어야 하는 상황이 달라서 이런식으로 늘어지게 코드가 작성되었는데 이런 방법이 아닌 분리시키거나 하는 방법이 있을까요?

   

4. 이번 과제를 통해 코치님의 생각보다 더 기대치를 낮춰서 기초 중에 기초라고 생각하는 부분들에 대해 키워드나 참고 할 수 있는 문서 등을 알려 주실 수 있을까요? 아예 코드를 AI나 그 외 도움 없이 자신이 직접 구현 하지 못 한다면요