[4팀 이유진] Chapter 1-1. 프레임워크 없이 SPA 만들기

[Elli-Lee]

과제 체크포인트

배포 링크

https://elli-lee.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 프레임워크들이 어떤 역할을 해주고 있었는지, 어떤 원리로 돌아가는지 조금 더 깊게 이해하게 되었습니다.
이번 과제를 진행하면서 가장 어려웠던 점은 형편없는 스스로의 실력을 다시한번 깨닫고 견디는 일이었습니다.
엉망진창 코드임은 분명하지만, 그래도 주어진 시간동안 제 실력에서는 최선을 다했다는 점 만큼은 뿌듯합니다.
3주차 쯤 지나서 조금 더 실력이 오르면 그때 다시한번 해당 과제를 개인적으로 도전해보고 싶습니다.
클래스형으로 프론트엔드 코드를 작성해 본적이 없어서 이번에 도전을 못했는데 다음에 도전할 때는 클래스형으로도 작성해보고 싶습니다.

기술적 성장

이번 프로젝트를 통해 바닐라 JavaScript로 SPA를 구현하는 전체 과정을 경험할 수 있었습니다.
사실 SPA 프레임워크(혹은 라이브러리)의 동작 원리를 크게 생각하지 않고 편하게 사용만 했었습니다.
미숙하고 엉망진창이지만, 그래도 바닐라 자바스크립트로 SPA를 개발하려고 시도하는 과정에서 프레임워크들이 어떤 역할을 하고 있었는지,
또 어떤 문제들을 해결하고 있었는지 알 수 있었고, SPA의 동작 원리를 더 깊이 이해할 수 있게 되었습니다.

구체적으로는
상태 관리 시스템: createStore.js를 구현하여 상태 관리의 원리
라우터 시스템: 동적 라우팅을 지원하는 SPA 라우터를 직접 구현하여 클라이언트 사이드 라우팅 원리
이벤트 위임: 전역 이벤트 위임 방식으로 효율적인 이벤트 처리 시스템
비동기 처리: 무한 스크롤, API 호출 등 복잡한 비동기 로직 처리
에 대해 알 수 있었습니다.

자랑하고 싶은 코드

라우터, 스토어 등을 구현하면서 이게 맞는 방법인지 알 수가 없어서 사실 자랑 하고 싶을 만한 코드는 아니지만,
고민했던 부분을 해결했다는 점에서는 스스로 뿌듯함을 느낀 부분을 작성하였습니다.

---

createStore.js
export function createStore(initialState) {
let state = initialState;
let listeners = [];

return {
getState: () => state,
setState: (newState) => {
const prevState = state;
state = typeof newState === "function" ? newState(prevState) : { ...prevState, ...newState };
listeners.forEach((listener) => listener(state, prevState));
},
subscribe: (listener) => {
listeners.push(listener);
return () => {
listeners = listeners.filter((l) => l !== listener);
};
},
};
}

프레임워크/라이브러리에서 제공하는 상태관리와 그래도 비슷하게(?) 동작하는 것 같습니다.

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

우선 컴포넌트와 함수들을 단일책임원칙에 맞게 잘 분리해서 블록처럼 조립하는 형태의 깔끔한 SPA를 구현하고 싶었으나..
그걸 판단하고 적절한 위치에 옮기고 모듈화하기에는 아직 제 실력이 많이 부족합니다.
여기저기 흩어져 있고 섞여있는 로직들과 분리가 한참 덜 된 컴포넌트들의 개선이 필요합니다.

학습 효과 분석

React/Vue 없이도 SPA 구현 가능함을 체험했습니다.
이 과제를 진행하면서 vue나 react 오픈소스를 대략적으로라도 공부하면 좋겠다는 생각이 들었습니다.
또한 각 모듈이 담당하는 명확한 역할만을 수행하도록 분리하는것이 얼마나 어려운 것인지 알게되었습니다.
한번도 생각해보지 않았던 Vue, React의 반응형 상태 관리의 원리에 대해 이해할 수 있었습니다.

과제 피드백

하나씩 도전 과제를 해결해나가는 것이 정말 어렵긴 했지만 체크리스트를 하나씩 체크하며 구현해나가는 과정이 즐거웠습니다.
저의 실력 부족 이슈와 회사 업무로 인해 개인적으로는 시간이 조금 부족했던 점이 아쉽습니다.
과제를 잘 수행하지 못했음에도 엉망진창으로라도 구현하는 과정에서 SPA의 원리와 자바스크립트로 DOM을 조작하는 과정들에 대해서 알게되어 정말 의미있었습니다.
오랜만에 이렇게 몰입할 수 있는 경험을 하게 되어 체력적으로는 피곤했지만 뿌듯했습니다.

AI 활용 경험 공유하기

1. 아키텍처 설계 단계
   Claude와 함께 전체 구조 설계: 폴더 구조, 모듈 분리 방향성 논의
   상태 관리 패턴 선택: Redux vs 커스텀 Store 구현의 장단점 분석
   라우터 구현 방향성: History API 활용 방법 학습
2. 코드 구현 단계
   복잡한 로직 구현: 무한 스크롤, 동적 라우팅 등 핵심 기능 구현 지원
   디버깅 지원: 이벤트 위임 관련 버그 해결
   코드 리팩토링: 가독성 향상을 위한 함수 분리 및 네이밍 개선

AI로부터 어떤 순서로 진행해야 할지, 어떤 패턴으로 작성해야 할지 도움을 받아 그나마 여기까지 과제를 수행했습니다.
주도권을 AI에게 뺏기는 순간부터 이 코드에 대해 제가 직접 이해하고 수정하기 힘들다는 것을 많이 느꼈습니다.