API 연동과 DOM 조작으로 구현하는 동적 상품 카드 인터페이스

Context

정적인 HTML 구조의 반복적 작성 방식은 유지보수 효율성을 저하시키는 요인. 데이터 변경 시마다 모든 HTML 요소를 수동으로 수정해야 하는 구조적 한계 존재.

Technical Solution

• fetch API 기반의 비동기 통신으로 외부 서버에서 상품 데이터를 실시간으로 로드하는 구조
• JavaScript DOM Method를 활용하여 API 응답 데이터에 따라 상품 카드를 자동 생성하는 동적 렌더링 방식
• 배열 인덱스 제어 로직을 통한 상품 이미지 슬라이더의 순환 참조 구현
• 클로저 기반의 상태 관리를 통해 개별 상품 카드별 장바구니 수량 카운터 독립적 운영
• CSS Grid Layout을 적용하여 화면 크기에 따라 유동적으로 대응하는 반응형 레이아웃 설계

Key Takeaway

데이터 소스와 UI 표현 층을 분리함으로써 데이터 변경이 UI에 즉각 반영되는 동적 웹 애플리케이션의 기본 설계 원칙 확인.