과제 체크포인트
배포 링크
https://dev4n4.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로 다시 구현한다.
- 이 과정에서 직접 가공하는 것은 최대한 지양한다.
과제 셀프회고
심화과제까지 다 완료하고 리팩토링까지 하는 것이 목표였는데 도달하지 못해서 너무 아쉽다. 그리고 마지막에 급하게 구현하느라 코드 퀄리티도 좋지 않아서 더더욱 우울..
뭔가 과제 자체를 수행하는 데 시간은 좀 투자한 것 같은데 물어보면서 하는 요령을 몰라서 초반에 시간을 많이 버렸던 것 같고, 막히면 바로바로 물어보면서 진행하니까 금방 해결되면서 쭉쭉 진행되기 시작한 것 같다! 다음 과제를 수행할 때는 BP를 목표로 하고 다시 열심히 해봐야겠다!
SPA를 JS로 직접 만들어 보니까 그동안 리액트 환경에서 개발하던 것이 얼마나 편리했는지 실감이 났다. 그리고 SPA의 원리나 구조가 좀 더 잘 와닿은 것 같다.
어쨋든 목표만큼 하진 못했지만 나름대로 욕심내서 열심히는 한 것 같다.
기술적 성장
SPA를 구현하기 위해 render, router, store로 역할을 쪼개서 만들었다. 그러면서 셋의 관계성과 구조, 역할을 공부하고 이해하게 되었다. 원래 SPA 라고 하면 "Single Page Application" 이라고 암기한 지식만 뱉을 수 있었는데 지금은 SPA에 대해 보다 깊게 이해하게 된 기분이다. SPA 구현을 하며 Observer 패턴에 대해서도 공부하고 처음으로 사용해 보게 되었다. 환경을 React에서 개발하는 것 처럼 만들고 싶었고 보다 직관적으로 읽기 쉬운 코드를 짜려고 노력하였다.
자랑하고 싶은 코드
render, router, store 의 구현이 가장 만족스럽다. 역할을 잘 나눈 것 같고, 코드가 직관적이고 깔끔하면서 어느 정도 React 처럼 동작하는 것 같다. 이 부분에 대해 초반에 어떻게 나아가야 할지 감을 못잡고 있었어서 학습 메이트님의 도움을 받아 진행하였다. 리팩토링이 필요한 부분에 대해 생각해본다면..
- store 부분을 좀 더 깔끔하게 다듬을 수 있지 않을지
- regex로 올바른 url인지를 검증하고 있는데 이보다 좋은 방법이 있을지?
그렇게 두 가지에 대해서 좀 더 고민해보고 싶다.
개선이 필요하다고 생각하는 코드
너무 많다.. 시간 분배를 잘못 했다 ㅠ 리액트에서 페이지를 개발할 때 이벤트 관리, 데이터 핸들링, state 같은건 해당하는 페이지 안에 전부 넣어서 구현하려고 했었는데 이번에도 그런 컨셉으로 작업을 하다가 막판에 심화 과제에 도전해보면서 시간에 쫓겨 그 부분 코드가 많이 복잡해지고 더러워진 것 같다. 관심사별로 분리도 잘 안된 것 같아서 아쉽다. 그리고 컴포넌트 파일을 담은 폴더의 구조도 개선하지 못해서 아쉽다는 생각이 든다. 초반에 일단 컴포넌트를 쪼개서 작업을 하기 위해 쪼갠 그대로 일단 하고 나중에 깔끔하게 리팩토링을 하고자 했는데 시간상 작업하지 못했다.. 또한 cart modal 이나 toast 같은 부분은 전역에서 관리해도 되는 부분이었을 것 같은데 급하게 작업하느라 그 부분에 대한 고민이나 수정을 못했다. 따라서 비슷한(거의 똑같은) 코드가 페이지마다 존재하게 되었다.. 고치지 못해서 아쉽고 슬펐다.
학습 효과 분석
SPA를 직접 구현해보는 게 처음에는 정말 막막하고 뭘 어떻게 해야할지 감도 안잡혔는데 이번 과제를 수행하고 나서 바닐라 JS와 SPA에 대한 이해도가 같이 올라간 것 같아서 기뻤다. 기초를 다지는 차원에서 바닐라 JS로 자잘한 프로젝트를 진행한다거나 하는 과제는 꽤 여러번 수행해 봤었는데, 그럴 때마다 구현은 했지만 이런 과제를 왜 하는지 이해를 못하고 진행했었다 (어차피 개발은 리액트 환경에서 할텐데 바닐라 JS로 개발을 수행해 보는 것이 실력 향상의 어떤 지점에서 도움이 된다고 하는지 이해가 안됐다.). 그러나 이번 과제를 진행해보며 바닐라 JS로 기존에는 그냥 마법같기만 했던 리액트를 어떻게 만들었을지 생각해보고 따라해보게 되면서 "JS에 대한 이해도가 높아지면 실력 향상에 도움이 된다." 라는 말이 실질적으로 와닿고 이해가 되어 좋고 뜻깊었다. 그동안 바닐라 JS로 수행해봤던 다른 과제들을 지금처럼 SPA 형식으로 다시 만들어봐도 좋을 것 같다는 생각이 들었다. 그리고 리액트로 개발을 수행하다 막힌 점이 있을 때 어떻게 풀어나가야 할 지 전략을 세우는 데에도 이번 과제에서의 경험이 도움이 될 것 같다.
과제 피드백
과제 주제 자체가 너무 좋았다. 처음에는 이걸 내가 어떻게 하지? 라는 생각이 들었었는데 이렇게 물어볼 사람이 많은 환경이라서 할 수 있는 과제 같고... SPA를 직접 만들어본다는 주제 자체가 너무 좋고 많은 공부가 되었고 유익했다! 혼자서 진행하라고 했으면 엄두가 안나서 시도도 못했을 것 같다..
AI 활용 경험 공유하기
ChatGPT, Cursor를 사용하는데 나는 간단한 자동완성, 공식 문서 번역, 변수명 추천 정도로만 AI를 사용해서 잘 사용하고 있지 않은 것 같다.. 이번 과제에서도 많이 활용하지 않고 작업을 했었어서 약간 비효율적인 작업을 했을 수도 있는 것 같다.. 다른 분들의 PR을 참고하면서 많이 배워가야 할 것 같다.
리뷰 받고 싶은 내용
- 지금 폴더 구조에 대한 체계적인 개선을 하지 못하고 개발을 진행했었는데, 여기서 개선된다면 어떤 구조로 정리 해보기를 추천하시나요?
- cart modal 이나 toast 같은 부분은 전역적으로 관리를 하고 싶었는데 그러려면 여기서 어떻게 작업해 보는 게 좋을까요? 어떤 파일에 넣으면서 시작해야 하나요?
- 장바구니 modal을 구현할 때 일부만 리렌더링을 시킬 수 없을 것 같아(비효율적이고 성능에 좋지 못할 것 같아서) 일단은 요소의 content를 변경하는 형태로 작업을 하여 UI를 갱신하였는데, 지금의 구조에서 화면의 일부만 랜더링이 될 수 있도록 하는 최적화 로직을 추가할 수 있을까요?