📖 TIL - 스파게티 코드를 정리하는 법: 바닐라 JS 모듈화 전략 🍝

📌 문제 설명

바닐라 JS로 진행하는 프로젝트에서 코드의 구조화와 모듈화가 필요한 상황이였다.
기본적인 영화 리스트와 상세 모달을 보여주는 웹페이지인지라 app.js와 api.js로만 구성하여 프로젝트를 진행하였는데.. 모듈화와 구조화도 다루어보면 좋을 듯하여 디렉토리 구조를 설계하는 전략을 짜보았다.

기존 상태

• main.js와 api.js로만 분리된 단순한 구조
• 컴포넌트별 책임과 역할이 명확하지 않음
• 코드 재사용과 유지보수의 어려움

일반적으로 많이 사용하는 디렉토리 명

src/
├── assets/        # 이미지, 폰트, 스타일 등 정적 리소스
├── components/    # UI 컴포넌트들을 모아둔 디렉토리
├── constants/     # 상수 값들을 모아둔 디렉토리
├── contexts/      # Context API 관련 파일 (React)
├── hooks/         # 커스텀 훅 (React)
├── layouts/       # 페이지 레이아웃 컴포넌트
├── lib/           # 써드파티 라이브러리 설정
├── mocks/         # 테스트용 목업 데이터
├── modules/       # 도메인별 로직 모음
├── pages/         # 페이지 단위 컴포넌트
├── services/      # 외부 서비스(API) 통신 관련 디렉토리
├── store/         # 상태 관리 (Redux, Vuex 등)
├── styles/        # 스타일 관련 파일
├── types/         # 타입 정의 (TypeScript)
├── utils/         # 유틸리티 함수들을 모아둔 디렉토리
└── main.js        # 앱의 진입점

각 디렉토리의 주요 역할:

• assets/: 이미지, 폰트, 비디오 등 정적 파일들을 보관
• components/: 재사용 가능한 UI 컴포넌트들을 보관
• constants/: 앱에서 사용되는 상수값들을 정의
• contexts/: React의 Context API 관련 파일들을 보관
• hooks/: React의 커스텀 훅들을 보관
• layouts/: 공통 레이아웃 컴포넌트들을 보관
• lib/: 외부 라이브러리 설정 파일들을 보관
• mocks/: 개발/테스트용 더미 데이터를 보관
• modules/: 특정 도메인과 관련된 모든 파일들을 보관
• pages/: 라우트에 대응되는 페이지 컴포넌트들을 보관
• services/: API 통신 관련 로직을 보관
• store/: 상태 관리(Redux 등) 관련 파일들을 보관
• styles/: 글로벌 스타일, 테마 등 스타일 관련 파일을 보관
• types/: TypeScript 타입 정의 파일들을 보관
• utils/: 재사용 가능한 유틸리티 함수들을 보관
• main.js: 앱의 진입점

💡 해결 방법

디렉토리 구조 설계

src/
├── assets/        # 정적 리소스
├── components/    # UI 컴포넌트
├── constants/     # 상수값
├── services/      # API 통신
├── utils/         # 유틸리티 함수
└── main.js        # 진입점

🔍 코드 설명

1. 상수값 관리 (constants)

// src/constants/config.js
export const BASE_IMAGE_URL = "https://image.tmdb.org/t/p/w500";

2. 유틸리티 함수 (utils)

// src/utils/storage.js
export const getFromStorage = (key) => JSON.parse(localStorage.getItem(key));
export const setToStorage = (key, value) => 
    localStorage.setItem(key, JSON.stringify(value));

// src/utils/throttle.js
export const throttle = (func, delay) => {
  let timer;
  return (...args) => {
    clearTimeout(timer);
    timer = setTimeout(() => func.apply(this, args), delay);
  };
};

3. 컴포넌트 설계 (components)

// src/components/MovieList.js
export class MovieList {
  constructor(selector) {
    this.$element = document.querySelector(selector);
  }
  
  render(data) {
    // 영화 목록 렌더링 로직
  }
}

// src/components/Loading.js
export class Loading {
  constructor(selector) {
    this.$element = document.querySelector(selector);
  }
  
  toggle(show) {
    this.$element.style.display = show ? "block" : "none";
  }
}

✨ 새롭게 배운 점

1. 모듈화의 이점

• 코드의 재사용성 향상
• 유지보수 용이성
• 테스트 용이성
• 책임과 역할의 명확한 분리

2. 워크플로우 설계

1. 초기화 단계

   • App 클래스에서 컴포넌트 초기화
   • 이벤트 리스너 바인딩
   • 초기 데이터 로드

2. 데이터 흐름

   • API 요청 처리 (services)
   • 데이터 렌더링 (components)
   • 로컬 스토리지 관리 (utils)

3. 사용자 인터랙션

   • 이벤트 처리
   • 상태 관리
   • UI 업데이트

🚀 이런 점이 효율적이에요

• 관심사의 분리로 코드 관리 용이
• 모듈별 독립적인 개발과 테스트 가능
• 재사용 가능한 컴포넌트 구조
• 확장성 있는 아키텍처 설계

⭐️ 참고 자료

• Vanilla JS SPA - SPA 구조 예시