HoduSuper(오픈마켓 서비스) 팀 프로젝트: 메인 페이지 및 장바구니 구현, DOM 최적화

저는 최근 팀 프로젝트 HoduSuper를 진행하며 헤더/푸터, 메인 페이지, 장바구니 개발을 맡았습니다.
이번 글에서는 특히 장바구니 기능 구현에서 겪은 트러블슈팅, 배움, 협업 경험을 중심으로 정리합니다.

1. 프로젝트 배경

HoduSuper는 오픈 마켓 플랫폼으로, 사용자 편의성을 높이는 장바구니 기능이 핵심입니다.

하지만 동적인 상품 추가/삭제, 수량 변경, 체크박스 선택 등 다양한 UI 이벤트가 얽혀 있어 처음에는 기능 구조와 이벤트 흐름을 잡기가 어려웠습니다.

특히 DOM 접근과 이벤트 관리 부분에서 성능과 가독성 문제를 경험했습니다.

2. 트러블슈팅 ①: DOM 요소 캐싱

문제

웹페이지에서 자주 접근하는 DOM 요소에 매번 document.querySelector 호출 → 페이지 성능 부담
똑같은 코드 반복 → 코드 길이 증가, 가독성 저하

해결

페이지 로드 시 한 번만 선택하고 변수에 캐싱:

const dom = {
  cartContainer: document.querySelector(".cart-products-content"),
  orderSection: document.querySelector(".cart-order-content"),
  totalOrderBtn: document.querySelector(".total-order-btn"),
  totalPriceElem: document.querySelector(".total-price .order-price"),
  finalPriceElem: document.querySelector(".final-price .order-price"),
  allCheckBox: document.querySelector(".cart-list .check-box"),
  addToCartButtons: document.querySelectorAll(".add-to-cart-btn"),
};

3. 트러블슈팅 ②: 이벤트 위임

문제

장바구니 상품은 동적으로 추가/삭제
매번 새로 생성된 요소마다 이벤트 개별 등록 → 코드 길이 증가, 관리 어려움, 성능 저하 가능

해결

부모 요소에 이벤트 등록
이벤트 버블링 활용 → 동적 요소까지 자동 처리

function setupCartItemClickEvents() {
  dom.cartContainer.addEventListener("click", (e) => {
    const productEl = e.target.closest(".cart-product");
    if (!productEl) return;

    const itemId = productEl.dataset.id;

    if (e.target.closest(".check-box")) {
      handleItemCheckboxClick(itemId, e.target.closest(".check-box"));
    } else if (e.target.closest(".quantity-btn.decrease")) {
      handleQuantityDecrease(itemId);
    } else if (e.target.closest(".quantity-btn.increase")) {
      handleQuantityIncrease(itemId);
    } else if (e.target.closest(".close-btn")) {
      handleItemRemove(itemId);
    } else if (e.target.closest(".individual-order-btn")) {
      handleIndividualOrder(itemId);
    }
  });
}

4. 구현 중 어려웠던 점

처음에 기능 구조와 이벤트 흐름 방향 잡기 어려움 → AI의 도움으로 방향 잡기 시도
혼자 테스트 할때에는 괜찮았으나 다른 페이지와 연동 하면 많은 오류 발생 → 팀원분들과 함께 많은 오류를 수정함
직접 코딩을 하면 코드의 길이가 매우 길어지고 코드의 구조가 복잡해서 가독성이 떨어짐 → AI의 도움으로 Class 활용 상태 관리, DOM요소 캐싱 등으로 구현하여 코드의 가독성을 개선함
팀원 분들의 전문적인 용어나 워딩을 이해 못한 부분이 많음 → 부족한 부분을 채우기 위해 더 열심히 노력해야겠다고 다짐함

5. 협업과 배움

Git 협업 경험

브랜치 관리
Pull Request
충돌 해결
많은 커뮤니케이션 필요

코드 가독성 체감

변수 캐싱
이벤트 위임
함수 분리
Class 활용

주석 처리

AI 도움으로 코드 이해도 향상 → 코드 가독성 개선
명확하고 체계적인 주석 작성 연습 필요

6. 코드 구조 핵심

CartManager: 장바구니 상태 관리

class CartManager {
  constructor() { this.items = []; }
  setItems(items) { this.items = items; }
  getItems() { return this.items; }
  findById(id) { return this.items.find(i => i.id === Number(id)); }

  // 재고 체크
  checkStock(productId, newQuantity, currentQuantity = 0) { ... }

  // 상품 추가
  addItem(item) { ... }

  // 상품 삭제
  removeItem(id) { this.items = this.items.filter(i => i.id !== Number(id)); }

  // 수량/체크 상태 업데이트, 총 가격 계산 등
  updateItemQuantity(id, quantity) { ... }
  updateItemCheck(id, isChecked) { ... }
  getTotalPrice() { ... }
}

DOM 렌더링 & UI 업데이트

function renderCart() {
  if (cart.isEmpty()) renderEmptyCart();
  else renderCartItems();

  updateOrderSectionVisibility();
  updateTotalPriceUI();
  updateAllCheckboxUI();
}

7. 프로젝트를 진행하면서 얻은 교훈

작은 문제라도 팀원들과 소통을 통해 체계적으로 분석하고 분업하여 해결하는 과정 중요
코드 가독성, 구조화, 성능 최적화를 경험하게 되어 이해도가 올라감
팀 프로젝트를 통해 협업 능력과 Git 실무 경험 습득
아직 많이 부족하고 많은 실무에 적용 가능한 공부가 필요하다고 느낌

8. Oneul Code를 정리하며…

HoduSuper 오픈마켓 팀 프로젝트를 통해 DOM 최적화, 이벤트 관리 등 실질적인 기술은 물론, 팀원들과의 협업까지 많은 것을 배울 수 있었습니다.

프로젝트를 진행하며 팀원들과 잘 어우러져 부족한 부분은 서로 채워주고, 제가 아는 지식은 기꺼이 공유하는 소중한 경험을 했습니다.

앞으로도 팀 프로젝트를 통해 코드 품질과 가독성을 높이고, 협업 능력을 지속적으로 개선하며 개발자로서 계속 성장해 나가고 싶습니다.

Oneul Code - 03.Lessons Learned from a Collaborative Project