JS에서 Enum-like한 상수 만들기.

class CONSTANTS {
  static BEST_ITEM_PAGE_SIZE = Object.freeze({
    PC: 4,
    TABLET: 2,
    MOBILE: 1,
  });
  static BUNDLE_SIZE = 5;
  static ITEM_PAGE_SIZE = Object.freeze({
    PC: 10,
    TABLET: 6,
    MOBILE: 4,
  });
  static SORT_ORDER = Object.freeze({
    RECENT: 'recent',
    // FAVORITE: 'favorite'
  });
  static SORT_ORDER_MSG = Object.freeze({
    [CONSTANTS.SORT_ORDER.RECENT]: '최신순',
    // [this.SORT_ORDER.FAVORITE]: '좋아요순'
  });
  static VIEWPORT = Object.freeze({
    PC: 'PC',
    TABLET: 'TABLET',
    MOBILE: 'MOBILE',
  });
  static BREAKPOINTS = Object.freeze({
    MOBILE: 743,
    TABLET: 1199,
  });
}

export default CONSTANTS;

 

기존에는 객체를 만들어서 사용했다.

const CONSTANTS = Object.freeze({
  BEST_ITEM_PAGE_SIZE: Object.freeze({
    PC: 4,
    TABLET: 2,
    MOBILE: 1,
  }),
  BUNDLE_SIZE: 5,
  ITEM_PAGE_SIZE: Object.freeze({
    PC: 10,
    TABLET: 6,
    MOBILE: 4,
  }),
  SORT_ORDER: Object.freeze({
    RECENT: 'recent',
    // FAVORITE: 'favorite'
  }),
  SORT_ORDER_MSG: Object.freeze({
    SORT_ORDER.RECENT: '최신순',
    // [this.SORT_ORDER.FAVORITE]: '좋아요순'
  }),
  VIEWPORT: Object.freeze({
    PC: 'PC',
    TABLET: 'TABLET',
    MOBILE: 'MOBILE',
  }),
  BREAKPOINTS: Object.freeze({
    MOBILE: 743,
    TABLET: 1199,
  }),
});

이랬더니 SORT_ORDER_MSG가 SORT_ORDER를 참조할 때, 정의되지 않은 변수를 참조하려고 해서 에러가 발생한다.

그래서 한참 고생했는데, class의 static property를 이용해 구현할 수 있다는걸 알게 됨.