항해플러스 프론트엔드 6기 기술블로그

[9팀 권지호] Chapter 1-1. 프레임워크 없이 SPA 만들기

Open

by tomatopickles4042025. 7. 6.

과제 체크포인트

배포 링크

https://tomatopickles404.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 동작원리, 라우터 설계, 상태 관리 등등 충분히 고민해보면서 작성해보고 싶었는데 이러다가는 과제 통과는 커녕 반도 완성을 못할 것 같았습니다. 평소에 제 생산성에 대한 고민을 많이 해왔던 터라, 또 같은 패턴을 반복하고 싶지 않았습니다. 서론이 길었지만, 결론은 완주(과제 통과)를 목표로 하고, "ai를 최대한 다루면서 ai가 짠 코드에 의문이 있다면 하나라도 그냥 넘어가지 않고 많이 물어보자" 를 경험하기로 했습니다. 어떻게든 만들어 내야된다는 집착(?)으로 ai로 점점 원하는 결과를 내는 정확도가 올라갔습니다. 활용능력 + 10..
자바스크립트 돌이켜보면 실무에서도 자바스크립트를 사용할 일은 거의 없었고 시간 내서 스스로 책을 보고 공부해야 겨우 까먹지 않는 정도였으며, 그렇게 알고 있던 이론은 체화되지 않았던 것이 느껴지는 한 주였습니다. 실제로 SPA 가 어떤 흐름을 가지고 동작하는지 만들어보면서 파편화 되어있는 이론들이 조립되는 것 같았습니다. (아주 조금) 회고를 작성하는 시점까지 코드맥락 일부가 파악 되고 있지 않은 부분들도 있어 리팩토링 하는 과정에서 더 많이 공부가 될 것 같습니다.
테스트 코드 저는 실무에서도 테스트 코드 경험은 없었고, 기본적인 문법 정도만 가지고 단위테스트랑 playwright를 작성해본 경험이 있습니다. 이번 과제에서 테스트 코드에 대해 생각해본 점이 많은데, 테스트 코드에 과제의 의도(어떤 구현과 흐름을 만들었으면 좋겠는지와 같은)를 드러내려고 하신 것 처럼 느꼈습니다. 그 전까지는 단순히 코드와 프로덕트의 안정성을 위한 도구라고 생각했었는데, 문서화의 개념으로 쓰일 수도 있겠구나 생각했습니다. 그래서 초반에 테스트 의도를 최대한 파악해서, 수정 없이 의도대로 구현하려고 했습니다. 그 다음에 테스트 코드가 깨지지 않는지 돌려가면서 리팩토링을 일부 하기도 했는데, 저는 개인적으로 이 과정이 가장 재밌었습니다!

++ 구현 과정에서 무한스크롤을 IntersectionObser API를 사용했습니다. 그래서 테스트를 위해 폴리필을 추가해 일부 변경했습니다!

자랑하고 싶은 코드

상태 관리 패턴 구현

스토어 패턴을 구현하고자 했습니다.

export const cartStore = {
  addToCart(product) {
    // 상태 업데이트
    this.state.items.push(product);
    // 로컬 스토리지 동기화
    this.saveToLocalStorage();
    // UI 자동 업데이트
    this.updateCartBadge();
    // 사용자 피드백
    toastService.show("장바구니에 추가되었습니다", "success");
  }
};

단방향 플로우와 상태 관리에 대한 개념을 이해하게 되었습니다.

EventBus 패턴

EventBus 패턴이라는 것을 알게 되었습니다.

class EventBus {
  on(event, callback) {
    this.events[event].push(callback);
    // 구독 해제 함수 반환 (메모리 누수 방지)
    return () => this.off(event, callback);
  }
  
  emit(event, data) {
    this.events[event].forEach((callback) => {
      try {
        callback(data);
      } catch (error) {
        console.error(`Error in event handler for ${event}:`, error);
      }
    });
  }
}

Pub/Sub 패턴에 대해 학습할 수 있었습니다.
Observer 패턴과 함께 이벤트 기반 아키텍처에 대해 알게 되었습니다.
구현에 여유가 되면 장바구니 업데이트에 적용하고 싶었으나, 아직 적용하지 못했습니다.

[적용해 볼 수 있는 부분]

장바구니 업데이트

cartStore.addToCart(product) {
  this.state.items.push(product);
  this.saveToLocalStorage();
  
// 이벤트 발행
  eventBus.emit('cart:updated', {
    items: this.state.items,
    totalCount: this.state.items.length
  });
}

// Header 컴포넌트
eventBus.on('cart:updated', (data) => {
  updateCartBadge(data.totalCount);
});

// CartModal 컴포넌트
eventBus.on('cart:updated', (data) => {
  refreshCartModal(data.items);
});

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

1. 이벤트 위임의 복잡성과 중복 처리

[이유]

eventService.js와 각 페이지별 setupEventListeners()에서 동일한 이벤트를 중복 처리하는 구조
가독성 저하 -> 단일 함수에 모든 이벤트 로직이 집중되어 유지보수 어려움이 있었습니다.

[개선 방안]

이벤트 핸들러를 모듈화하여 기능별로 이벤트 핸들러 분리
컴포넌트별 이벤트 관리 -> 각 컴포넌트가 자신의 이벤트만 관리
이벤트 버스 활용

export class CartEventHandler {
  static handleAddToCart(e) {
    if (!e.target.matches(".add-to-cart-btn")) return;
    
    e.preventDefault();
    const productId = e.target.dataset.productId;
    const product = this.extractProductData(e.target);
    cartStore.addToCart(product);
  }
  
  static extractProductData(button) {
    const productCard = button.closest(".product-card");
    return {
      productId: button.dataset.productId,
      title: productCard.querySelector("h3").textContent,
      brand: productCard.querySelector("p").textContent,
      image: productCard.querySelector("img").src,
      lprice: parseInt(productCard.querySelector(".text-lg").textContent.replace(/[^0-9]/g, "")),
    };
  }
}


export function setupProductGridEvents() {
  document.addEventListener("click", CartEventHandler.handleAddToCart);

상태 관리 분산과 일관성 부족

[이유]

상태 분산
컴포넌트 간 상태 동기화를 처리는 것에 어려움을 느꼈습니다.
이벤트 리스너의 관리가 제대로 되지 않는 것 같습니다.

[개선 방안]

단일 스토어 관리 방식
라이프 사이클을 관리해 컴포넌트 마운트/언마운트 표현

export class AppStore {
  constructor() {
    this.state = {
      products: [],
      cart: [],
      filters: {},
      loading: false,
      error: null
    };
    this.subscribers = new Set();
  }
  
  subscribe(callback) {
    this.subscribers.add(callback);
    return () => this.subscribers.delete(callback);
  }
  
  notify() {
    this.subscribers.forEach(callback => callback(this.state));
  }
  
  setState(newState) {
    this.state = { ...this.state, ...newState };
    this.notify();
  }
  
  addToCart(product) {
    const existingItem = this.state.cart.find(item => item.productId === product.productId);
    if (existingItem) {
      existingItem.quantity += 1;
    } else {
      this.state.cart.push({ ...product, quantity: 1 });
    }
    this.notify();
  }
}

// src/components/Component.js
export class Component {
  constructor(container, store) {
    this.container = container;
    this.store = store;
    this.unsubscribe = this.store.subscribe(this.render.bind(this));
  }
  
  destroy() {
    this.unsubscribe();
  }
  
  render(state) {
    // 컴포넌트별 렌더링 로직
  }
}

학습 효과 분석

자바스크립트로 렌더링을 하기 위해 DOM구조에 대해 공부하고, 싱글 페이지에서의 동작을 위해 라우팅에 대해 만들면서 고민해보고 새로고침 없이 어떻게 상태를 변경할지에 대한 고민을 하는 것 자체가 자바스크립트에 대한 깊은 공부를 하게 하는 것 같습니다.

과제 피드백

초반에 테스트 케이스에 대해 질문이 많아서 테스트가 실패되면 제 코드에서 먼저 문제를 찾는게 아니라, '이것도 언급된 테스트 케이스인가?' 라는 생각을 먼저 했던 것 같습니다 .ㅎㅎ

AI 활용 경험 공유하기

사용기술

claude code cli, gemini cli, cursor ai

주로 cursor ai를 활용하여 설계 및 병목을 해결했습니다. 이왕 이렇게 된 거 ai를 활용해서 최대한 빨리 만들어 보는 것으로 뱡향을 전환했고, 처음엔 갈아 엎어야 싶을 정도로 이상한 방향으로 흘러가서 결국엔 직접 생각해서 작성한 코드의 비율이 높았는데, 질문이 정확하면 원하는 결과물이 얻어지는 경험을 몇 번 하다보니 생산성이 높아짐을 체감했습니다. 창준님이 공유해주신 cursor rules을 적용하고 정확도가 많이 올라갔습니다. (샤라웃 투 창준님..)

프롬프트 작성하는 법을 물어보는 프롬프트를 작성해보라는 코치님의 조언이 기억에 많이 남아 적극 활용해보고자 했습니다. ㅎㅎ 제가 무엇을 알고 싶은지 먼저 정확하게 표현할 줄 알아야 답변의 정확도가 만족스럽게 나온다는 것을 느꼈습니다.

리뷰 받고 싶은 내용

라우팅 설계에 대해 코멘트 들어보고 싶습니다!

export function Router() {
  const routes = {};
  let notFoundComponent = "";

  const registerRoute = (path, component, initializer = null) => {
    routes[path] = { component, initializer };
  };

  const setNotFoundComponent = (component) => {
    notFoundComponent = component;
  };

  const navigateTo = (path) => {
    window.history.pushState(null, null, getFullPath(path));
    router();
  };

  // 동적 경로 매칭 함수
  const matchRoute = (path) => {
    // 정확한 매칭 먼저 시도
    if (routes[path]) {
      return { route: routes[path], params: {} };
    }

    // 동적 경로 매칭 시도
    for (const routePath in routes) {
      if (routePath.includes(":")) {
        const pattern = routePath.replace(/:[^/]+/g, "([^/]+)");
        const regex = new RegExp(`^${pattern}$`);
        const match = path.match(regex);

        if (match) {
          const params = {};
          const paramNames = routePath.match(/:[^/]+/g) || [];
          paramNames.forEach((paramName, index) => {
            const key = paramName.slice(1); // ':' 제거
            params[key] = match[index + 1];
          });

          return { route: routes[routePath], params };
        }
      }
    }

    return null;
  };

  const router = () => {
    const path = getAppPath(window.location.pathname);
    const match = matchRoute(path);

    if (match) {
      const { route, params } = match;

      // 전역 파라미터 설정 (컴포넌트에서 사용할 수 있도록)
      window.routeParams = params;

      document.getElementById("root").innerHTML = route.component();

      if (route.initializer) {
        route.initializer();
      }
    } else {
      // 404 처리
      if (notFoundComponent) {
        document.getElementById("root").innerHTML = notFoundComponent();
      }
    }
  };

  window.addEventListener("popstate", router);
  document.addEventListener("DOMContentLoaded", () => {
    document.body.addEventListener("click", (e) => {
      if (e.target.matches("[data-link]")) {
        e.preventDefault();
        navigateTo(e.target.href);
      }
    });
    router();
  });

  return {
    registerRoute,
    setNotFoundComponent,
    navigateTo,
    router,
  };
}


  
  
  항해플러스 프론트엔드 6기 기술블로그
  
  
  
  


);
        const match = path.match(regex);

        if (match) {
          const params = {};
          const paramNames = routePath.match(/:[^/]+/g) || [];
          paramNames.forEach((paramName, index) => {
            const key = paramName.slice(1); // ':' 제거
            params[key] = match[index + 1];
          });

          return { route: routes[routePath], params };
        }
      }
    }

    return null;
  };

  const router = () => {
    const path = getAppPath(window.location.pathname);
    const match = matchRoute(path);

    if (match) {
      const { route, params } = match;

      // 전역 파라미터 설정 (컴포넌트에서 사용할 수 있도록)
      window.routeParams = params;

      document.getElementById("root").innerHTML = route.component();

      if (route.initializer) {
        route.initializer();
      }
    } else {
      // 404 처리
      if (notFoundComponent) {
        document.getElementById("root").innerHTML = notFoundComponent();
      }
    }
  };

  window.addEventListener("popstate", router);
  document.addEventListener("DOMContentLoaded", () => {
    document.body.addEventListener("click", (e) => {
      if (e.target.matches("[data-link]")) {
        e.preventDefault();
        navigateTo(e.target.href);
      }
    });
    router();
  });

  return {
    registerRoute,
    setNotFoundComponent,
    navigateTo,
    router,
  };
}
">

[구현 의도]

SPA 환경에서 라우팅 기능을 직접 구현하기 위해, 팩토리 함수 패턴 기반의 커스텀Router를 설계했습니다.
내부 상태는 클로저를 통해 캡슐화하고, 필요한 메서드만 외부에 노출하여 커스텀 훅과 유사한 구조를 구현했습니다. 이는 React의 상태 관리 흐름과 유사한 설계를 통해 직관적인 유지보수와 확장성을 고려한 결정이었습니다.
인스턴스를 생성할 수 있는 구조이지만, 실제 사용에서는 싱글톤처럼 하나의 Router 인스턴스를 중심으로 사용했습니다.
pushState, popstate, DOMContentLoaded 이벤트를 바탕으로 SPA의 기본 라우팅 흐름을 구성하고, 전체 페이지 갱신 없이 url을 변경하여 해당 경로에 맞는 콘텐츠만 렌더링하도록 의도 했습니다.

[궁금한 점]

다른 분들은 어떻게 구현하셨을지, 혹은 코치님이 생각하시는 best practice가 무엇인지 궁금합니다.
SPA에 적절한 설계를 한 것인지 잘 모르겠습니다(?)