나만의 react boilerplate 만들기 - (4) 개선

TS 버전업

TS 버전을 기존 4.4.2 -> 5.2.2로 올렸다.
버전업시에 기존 yarn berry 3.3.0과 호환이 되지 않아 yarn berry도 3.6.3으로 올렸다.
다른 의존성도 해당 버전에 맞게 업데이트했다.

TS 5.0 이상은 데코레이터, 파라미터 const 타입, Enum을 Union 타입과 호환 등 여러가지 변화가 있다. 이 참에 해당 기능들을 좀 활용해보면 좋을 것 같다.

dev:msw 명령어 추가

개발시에 msw 구동이 필요할 때와 아닐 때(api 찌를 백엔드가 있는 경우)가 있다. 그런 경우에 활용하기 위해 기존 dev 명령어를 dev(msw X), dev:msw (msw O)로 나누었다.
.env로 msw 구동 여부``를 환경여부를 주입해서 코드상에서 활용하도록 했다.

/// index.tsx
if (process.env['USE_MSW'] === 'true') {
  const { worker } = require('./mocks/browser')
  console.log('msw worker start!')
  worker.start()
}

이렇게 했을 때 msw가 트리쉐이킹 되지 않고 빌드시 번들에 포함되는 문제가 있었다.

/// index.tsx
if (process.env.NODE_ENV === 'development' && process.env['USE_MSW'] === 'true') {
  const { worker } = require('./mocks/browser')
  console.log('msw worker start!')
  worker.start()
}

이렇게 변경해서 번들에 포함되지 않도록 했다.

github actions, workflow 추가

• slack-notify.yml: slack과 연동하여 알림을 보낼 때 쓰는 action
• deploy.yml: 특정 브랜치에 push 시 자동 배포하는 workflow
• lighthouse.yml: lhci 활용하여 push 시 lighthouse 검사, PR시 댓글로 lighthouse 검사결과를 보여주도록 하는 workflow
• test-every-push.yml: 매 push마다 test, lint, tsc 수행하는 workflow
  위의 action, workflow들을 추가했다.

commit 전 lint-staged 작동 추가

husky를 활용하여 commit 전에 lint-staged하여 실패시 commit을 못하도록 하게 했다.

빌드, 개발서버 구동 시간 개선

기존에 transpiler로 babel-loader, minimizer로 terser를 사용했었다.
Go로 만들어져 훨씬 빠른 빌드 속도와 minimize속도를 갖춘 esbuild-loader, esbuild plugin으로 바꿨다.
바꾼후에 빌드 시간 (5892 ms -> 3477ms), 개발서버 구동 시간 (348ms -> 284ms) 으로 속도가 많이 빨라졌다.

빌드시 gzip 압축 추가

빌드한 결과물을 gzip으로 압축하도록 webpack에 webpack-compression-plugin을 추가했다.
gzip으로 압축하고 이를 제공함으로써 FCP와 네트워크 부하를 줄이고, 사용자 경험을 향상시켰다.

dist 디렉토리 build로 명칭 변경

dist는 distributable로 상용에 배포하는 디렉토리라는 뜻이라고 한다. 해당 디렉토리를 바로 상용에 배포하는 것이 아니기 때문에 좀더 적합한 명칭인 build로 변경했다.