[TIL] 0124

MonthSub Refactoring

1. export 시 한객체로 묶어서 내보낼 때의 문제점

import { css } from '@emotion/react';
import theme from './theme';

const fullScreen = css`
  position: relative;
  top: -3rem;
  width: 100vw;
  height: 30rem;
  margin-left: calc(-50vw + 50%);
  @media ${theme.device.tablet} {
    height: 43vw;
  }
  @media ${theme.device.mobile} {
    height: 43vw;
  }
`;

const invisibleScrollBar = css`
  -ms-overflow-style: none; /* IE and Edge */
  scrollbar-width: none; /* Firefox */
  &::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Opera*/
  }
`;

// const mixin = { fullScreen, invisibleScrollBar }; - 기존 방법
// export default mixin

export { fullScreen, invisibleScrollBar }; // - 이렇게 수정

문제점
모듈 관리가 mixin이라는 객체를 통해 되고 있다.
mixin 객체를 사용했기 때문에, mixin을 사용하는 모든 파일에서 mixin 객체를 import해서 프로퍼티로 접근하게되는데, 내부 객체가 다수일 경우 매번 전부 가져와지기 때문에 비효율적이다.

해결책
mixin객체로 한번 묶은 것을 벗겨내고 각 객체들을 개별적으로 export 하는 것.
이 상태에서 import를 하면 구조분해할당으로 필요한 mixin을 바로 import 할 수 있어
프로퍼티 접근을 하지 않아도 된다.

2. 상수 관리

• 변하지 않는 값들은 따로 관리해서 적용하는 게 좋다

TypeScript Project setting

• 루트 바로 밑의 config파일은 바벨 적용이 안되는 것 같다. es6문법썼다가 삽질하고 commons로 바꿈
• eslint(ts)는 require를 허용하지 않는다.
  • 근데 이상하게 module.exports는 허용한다
• 참고 링크

• prettier와 eslint 둘 다 적용 시 디폴트 포맷터를 pretter로 설정해야한다
  • pretter가 포매터이기 때문 (lint는 포맷터x)
  • 린트는 포맷터 + 린터인데 prettier와 충돌하기 때문에 충돌되는 룰들을 꺼준다.
  • 그 후에 prettier의 포맷룰을 eslint에 통합하는데, lint에러로 같이 나도록 하기 위함
    (안해주면 pritter관련 오류는 나지 않게 됨)
• 참고 링크