[エレガントな技術路線#6]抽象画がいいかどうかを判断する

なぜ抽象を適用するのか

ビデオを格納するSaved Video List領域

検索されたビデオを表示するSearch Video List領域

抽象的なビデオリストUI

import SkeletonListComponent from './SkeletonListComponent';

class VideoListComponent {
  $videoList;

  parentElement = null;

  componentType = null;

  videoComponents = [];

  lazyLoadThrottleTimeout = null;

  skeletonListComponent = null;

  constructor(parentElement, type) {
    this.parentElement = parentElement;
    this.componentType = type;

    this.#mount();
    this.#initDOM();
    this.#bindEventHandler();
  }

  renderSkeletonVideoList(isWaitingResponse) {
    if (isWaitingResponse) {
      this.skeletonListComponent = new SkeletonListComponent(this.$videoList);
      return;
    }
    this.skeletonListComponent?.unmount();
  }

  unmount() {
    // 화면에서 사라질 때의 메소드
    this.$videoList.innerHTML = '';
  }

  #mount() {
    // 화면에서 처음 나타날 때의 메소드
    const template = this.#generateTemplate();
    this.parentElement.insertAdjacentHTML('beforeend', template);
  }

  #initDOM() {
    // UI 내부에서 사용되는 DOM Element를 멤버화하는 메소드
    this.$videoList = this.parentElement.querySelector('.video-list');
  }

  #generateTemplate() {
    // 제일 처음 렌더링 되는 템플릿을 만들어내는 메소드
    return `<ul class="video-list"></ul>`;
  }

  #bindEventHandler() {
    // 사용되는 이벤트 핸들러를 바인딩하는 메소드
    this.$videoList.addEventListener('scroll', this.#onScrollInVideoContainer);
  }

  #onScrollInVideoContainer = () => {
    // 이미지의 레이지 로드를 수행하는 스크롤 이벤트 핸들러 메소드
    if (this.lazyLoadThrottleTimeout) {
      clearTimeout(this.lazyLoadThrottleTimeout);
    }
    this.lazyLoadThrottleTimeout = setTimeout(() => {
      this.videoComponents.forEach((videoComponent) => {
        const { bottom } = this.$videoList.getBoundingClientRect();
        videoComponent.loadImg(bottom);
      });
    }, 100);
  };
}
export default VideoListComponent;

// SearchVideoListComponent.js 
import VideoListComponent from '.';
import { VIDEO_COMPONENT_TYPE } from '../../constants/components';
import { CUSTOM_EVENT_KEY } from '../../constants/events';
import { dispatch } from '../../modules/eventFactory';
import { isFirstSearchByKeyword } from '../../utils/validation';
import SearchVideoComponent from '../VideoComponent/SearchVideoComponent';

class SearchVideoListComponent extends VideoListComponent {
  #searchVideoObserver = null;

  constructor(parentElement, type = VIDEO_COMPONENT_TYPE.SEARCH) {
    super(parentElement, type);

    this.$videoList.addEventListener('click', this.#onClickVideoList);
    this.#searchVideoObserver = new IntersectionObserver(this.#observeEntries, {
      root: null,
      rootMargin: '0px',
      threshold: 0.3,
    });
  }

  render({ videoList, prevVideoListLength }) {
    if (isFirstSearchByKeyword(prevVideoListLength)) {
      this.videoComponents = [];
      this.$videoList.innerHTML = '';
    }

    this.$videoList.classList.remove('hide');
    this.videoComponents = this.#generateVideoComponents(videoList, prevVideoListLength);
  }

  #observeEntries(entries, observer) {
    entries.forEach((entry) => {
      if (entry.isIntersecting) {
        observer.unobserve(entry.target);
        dispatch(CUSTOM_EVENT_KEY.LOAD_NEW_VIDEO_LIST);
      }
    });
  }

  #onClickVideoList = (e) => {
    const {
      target: { className },
    } = e;
    const { dataset } = e.target.closest('.video-item');

    if (className.includes('video-item__save-button')) {
      dispatch(CUSTOM_EVENT_KEY.CLICK_SAVE_BUTTON, {
        detail: {
          saveVideoId: dataset.videoId,
        },
      });
    }
  };

  #generateVideoComponents(videoList, prevVideoListLength) {
    return [
      ...this.videoComponents,
      ...videoList.slice(prevVideoListLength).map(
        (video, idx, arr) =>
          new SearchVideoComponent(this.$videoList, {
            video,
            observer: idx === arr.length - 1 ? this.#searchVideoObserver : null,
            notLazyLoad: prevVideoListLength === 0,
          })
      ),
    ];
  }
}
export default SearchVideoListComponent;

// SavedVideoListComponent.js
import VideoListComponent from '.';
import { VIDEO_COMPONENT_TYPE } from '../../constants/components';
import { CUSTOM_EVENT_KEY } from '../../constants/events';
import { dispatch } from '../../modules/eventFactory';
import SavedVideoComponent from '../VideoComponent/SavedVideoComponent';

class SavedVideoListComponent extends VideoListComponent {
  constructor(parentElement, type) {
    super(parentElement, type);
    this.$videoList.addEventListener('click', this.#onClickVideoList);
  }

  render({ videoList: savedVideoList }, watchedVideoIdList) {
    this.$videoList.innerHTML = '';

    const { watchVideoList, watchedVideoList } = this.#parseWatchAndWahtchedVideo(
      savedVideoList,
      watchedVideoIdList
    );
    this.videoComponents = this.#generateVideoComponents(
      this.componentType === VIDEO_COMPONENT_TYPE.WATCH ? watchVideoList : watchedVideoList
    );
  }

  #onClickVideoList = (e) => {
    const {
      target: { className },
    } = e;
    const { dataset } = e.target.closest('.video-item');

    if (className.includes('video-item__delete-button')) {
      dispatch(CUSTOM_EVENT_KEY.CLICK_SAVED_DELETE_BUTTON, {
        detail: {
          savedVideoId: dataset.videoId,
        },
      });
    }
    if (className.includes('video-item__check-button')) {
      dispatch(CUSTOM_EVENT_KEY.CLICK_SAVED_CHECK_BUTTON, {
        detail: {
          savedVideoId: dataset.videoId,
          element: e.target,
        },
      });
    }
  };

  #generateVideoComponents(savedVideoList) {
    return savedVideoList.map(
      (savedVideo, idx) =>
        new SavedVideoComponent(this.$videoList, {
          video: savedVideo,
          notLazyLoad: idx < 10,
          type: this.componentType,
        })
    );
  }

  #parseWatchAndWahtchedVideo(savedVideoList, watchedVideoIdList) {
    return savedVideoList.reduce(
      (prev, savedVideo) => {
        const { videoId } = savedVideo.getVideoInfo();
        const isWatched = watchedVideoIdList.includes(videoId);

        return {
          ...prev,
          watchVideoList: isWatched ? prev.watchVideoList : [...prev.watchVideoList, savedVideo],
          watchedVideoList: isWatched
            ? [...prev.watchedVideoList, savedVideo]
            : prev.watchedVideoList,
        };
      },
      {
        watchVideoList: [],
        watchedVideoList: [],
      }
    );
  }
}
export default SavedVideoListComponent;

だから抽象化したらどうですか?

만약 새로운 Video List UI가 생긴다면 `VideoListComponent`를 확장 후 추가적인 로직만을 추가해주면 되니깐요

각자 클래스에서만 가지고 있으면 되니깐요

하나의 클래스 파일이 무거워지는 것은 가독성을 떨어뜨리는 일인것 같아요. 또 유지보수에도 많은 `side effect`가 따라오지 않을까 싶네요.

공통 로직은 추상화된 클래스에 있을테니 이 부분을 수정하면되고, 확장된 UI에서 변경사항이 발생해야한다면 그 부분만 수정하면 되니 유지보수에는 유리할 것 같아요 ! 

내가 만약 이 코드를 처음보는 입장이라면 이해하기 힘들었을지도 모르겠다. 

(이를 쉽게 납득하기 위한 구조도가 있지 않은 이상...

또 확장되는 UI가 더 많다면, 이 모든 UI들의 공통 로직을 뽑아내기에 이해하기 더 힘들었겠지..)

처음부터 추상화를 해두고 개발한 것이 아닌, 하나의 파일을 공통로직과 각자의 로직을 분리하여

공통 로직만을 추상화한 경우여서 추상화의 기준이 코드에서 안보이는 느낌?

では、いつ抽象化を考えると思いますか?

抽象的な欠点をつける