과제 체크포인트

배포 링크

기본과제

상품목록

상품 목록 로딩

• 페이지 접속 시 로딩 상태가 표시된다
• 데이터 로드 완료 후 상품 목록이 렌더링된다
• 로딩 실패 시 에러 상태가 표시된다
• 에러 발생 시 재시도 버튼이 제공된다

상품 목록 조회

• 각 상품의 기본 정보(이미지, 상품명, 가격)가 카드 형태로 표시된다

한 페이지에 보여질 상품 수 선택

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

과제 셀프회고

이번 과제는 나에게 너무 어려웠다..ㅜㅜ 우선 extenstions 가 실행되지 않고 에러가 뜨는데 원인을 알 수가 없어 너무 답답했고(해결 못함), Observer패턴 & store 상태관리 & Router 등에 대한 기본 개념들이 없었기 떄문에 상태관리를 위한 구조 분해 및 파일 관리가 너무 어려웠다. 물론 다른 사람의 PR을 보면서 이해하려고 했으나, 기본적인 개념이 부족하다 보니 다른 사람의 코드를 이해하는데 어려움이 있었다.

기본과제를 진행하기 위해서 다른 사람들에게 많은 도움을 받았다. 비록 모든 과제에 대해 일부분만 테스트 통과를 하였다. 나는 코드를 테스트 통과를 위해 어떻게든 구현을 했지만, 버그가 매우 많았고, 코드 관리는 전혀 되있지 않아 엉망진창이었다. 그래도 모든 과제를 통과할 시간이 부족했음에도, 최대한 하나라도 더 풀기 위해 학습메이트님의 도움을 받으며 기능 하나를 구현했다.

모든 과제를 통과하는게 내 목표였지만, 끝까지 포기하지 않은 내 모습에 칭찬을 한다. 다음 과제에서는 더 잘하면 되니까 너무 낙담하지 말고, 다른 사람과 비교하지 말자. 내 멘탈은 내 스스로가 챙기는거니까! 오히려 이런 실패와 좌절이 있어야 성공을 향해 더 성장하는 계기가 되지 않을까?

그래도 아직까진 더 잘하고 싶은 마음이 더 크니까, 더 열심히 해보자!!! (extenstion 안되는거 너무 해결하고 싶다!!! 나도 vscode/cursor 기능 및 익스텐션 다양하게 잘 사용하고싶단말이야!!!)

기술적 성장

성장..? 성장했다고 하고 싶다... 했겠지..? 이번에 새로운 개념을 많이 들었다. 자바스크립트에 대해 개념이 거의 없는 수준이란 것을 깨닫고 조금 암울했다. 그치만 계속 알아갈 수 있다는게 있다는 것에 감사하기. (더 많이 배우고 공부하면 되는거니까!!!)

개념은 간단한 설명으로만 이해...

• 라우터 개념 및 활용 (실제로 라우터를 추가(?) 적용(?) 하여 사용해 본 경험은 이번이 처음)
• state 와 store 개념 -> State 상태를 의미 -> Store 전역 상태 관리를 의미
• Observer / listener, subscribe 개념
• Promise 개념 -> 비동기 작업을 처리하기 위한 객체
• 폴더구조를 나누는 방법 (하지만 실용은 잘 하지 못함)

자랑하고 싶은 코드

아직까진 너무 엉망진창 코드라서 자랑할 수 있는 부분이 없다.

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

폴더 구조를 나누는 것 부터 고민이었다. 다른 사람들의 PR을 보면서 카피를 해왔지만 이해를 하지 못하는 부분이 많았고, 그때마다 구조화가 되지 않은 복잡한 코드가 되어가고 가독성 및 성능이 매우 떨어지는 코드가 되었다. 일단 기능이 돌아가야하게 만드는 것을 목적으로 하니, 코드는 점점 더 엉망이 되어갔다. 자바스크립트의 개념을 좀 알았다면, 구조화 시키는 작업은 좀 더 수월하지 않았을까..?

학습 효과 분석

• 내가 느낀 점 이번 과제를 진행하면서 첫 목표가 기본 과제를 통과하자 였는데, 점점 갈수록 과제를 따라가기 어려웠고 할 수 있는데까지만 해보자! 목표가 변경되었다. 물론 목표를 높게 잡고, 달성할 수 있도록 노력을 해야하는게 당연하지만.. 개념이 많이 부족했던 나는 어느 순간 타협점을 찾고 있었다. 하지만 후회는 없다. 나는 포기하지 않았고, 할 수 있는 것들은 해보자 라는 마음가짐으로 이번 과제를 끝까지 놓지 않았다. 다음 과제를 위해 더 나아갈 것이고, 이번 과제보다 더 많이 진도(?)를 나가서 통과하는것을 목표로 잡을 것이다.

• 이번 과제를 하면서 느꼈던 제일 중요한 것!!

• • 모르면 계속 질문을 하자!! 처음엔 어떻게 해야할지 몰라 다른 사람의 PR만 보고 했었는데, 점점 갈수록 이해하기 어려운 내용들이 많았고, 혼자 해보려하니 도저히 진도가 나가지 않았다. 이거에 대해서 혼자 해보려고 하니 더욱 더뎌졌고, 결국 주변사람들에게 도움을 청하며 진행했다. 주변 사람들에게 물어보면서 하니, 어떻게든 기능 구현이 되가며 또한 내가 몰랐던 개념도 알게 되었다. (물론 이걸 적용할 시간은 부족.. 코드가 이미 개판이었기 때문에) 나는 이걸 늦게 알고 질문을 한게 아쉬웠다. 미리 일찍 물어보고 진행했더라면 기본과제는 다 끝낼 수 있었을텐데 (?)

• 추가 학습이 필요한 영역

• 라우터 학습 (어떤 원리로 돌아가며, 어떻게 라우터 구조를 잡아야하는지)
• store 전역 상태를 관리하는 방법 (subscribe , notify 사용해보기)
• 관심사 분리 작업 (기능과 UI 분리)
• 렌더링 원리 (SPA) [이벤트가 일어나면 상태 값이 변하는데 UI가 그대로인데, 이때 렌더링을 해주어 UI 를 변경해주기]

과제 피드백

과제에서 좋았던 부분

• 요구사항이 명확해서 기능 구현하는데에 편했습니다.
• css등을 신경 쓰지 않고 오로지 기능 구현하는데에만 집중할 수 있어 좋았습니다.

AI 활용 경험 공유하기

사용한 AI 도구 : ChatGPT, Cursor

AI를 활용해 코드를 작성해달라고 요청했지만, 원하는 결과물이 제대로 나오지 않았다. 이는 제가 원하는 바를 명확하게 설명하지 못한 탓도 있었던 것 같다. 또한, 어떤 방식으로 코드를 작성해야 할지 몰라 AI에게 store 상태 관리 코드를 요청했는데, 제공된 코드에서는 get과 set 메서드만 사용할 수 있었고 subscribe 개념을 이해하지 못해 제대로 활용하지 못했다. AI가 작성한 코드가 좋은 코드인지 잘못된 코드인지 구분하지 못한 채 무작정 사용하는 태도도 바람직하지 않았다고 느꼈다.

리뷰 받고 싶은 내용

제일 처음 과제를 받아봤을 때, 컴포넌트를 분리하고 라우터 설정 등 어떻게 해야할지 감이 잘 안잡히다 보니 많이 헤매게 되었습니다. 메인,제품상세에 대해 페이지 분리를 하고 싶었는데, main.js안에서 모든 기능을 넣다보니 state 관리하기도 힘들고, 코드 내용이 너무 지저분해져서 구조를 아예 잘 못 잡은거 같아서요. Q. 지금 폴더 구조에 대한 체계적인 개선을 하지 못하고 개발을 진행했었는데, 여기서 개선된다면 어떤 구조로 정리 해보기를 추천하시나요? Q. 위와 관련한 질문인데, 어떤 개념을 공부하면 좋을지 피드백 부탁드립니다. Q. main.js 함수에서 이벤트에 대한 핸들러 함수를 만들었는데, 렌더링이 된 후 이벤트 위임하는 코드를 넣어줬습니다. (cursor이용) 보통은 렌더링이 된 후, 이벤트를 위임시키는 함수를 적용하는게 맞는 것인지 궁금합니다. (아직까지 AI가 짜주는 코드가 좋은 코드인지 아닌지 구분하는게 어렵습니다.)

• 추가내용...

• 제 컴퓨터에서만 extension 이 실행되지 않아 이번 과제에서 불편함을 느꼈습니다.
• 시간적 여유가 되신다면 같이 봐주시면 좋을거 같습니다 ㅠㅠ (vitest, prettier 등등 안되고있습니다.)