-
Notifications
You must be signed in to change notification settings - Fork 5
FE Webpack 기반의 React & TypeScript 환경 세팅
yarn은 다운받은 패키지 데이터를 캐시(cache)에 저장하여, 중복된 데이터는 다운로드하지않고, 캐시에 저장된 파일을 활용함으로써 이론적으로 npm에 비해 패키지 설치속도가 매우 빠릅니다. 또한 여러개의 패키지를 설치할 때 병렬로 처리하기 때문에 performance와 speed가 증가 됩니다.
ts-loader는 babel-loader 보다 ts 컴파일러를 사용해 정확하게 타입을 검사합니다. 엄격한 타입 검사가 이루어져 상대적으로 트랜스 파일링이 느리다는 단점이 있음. 하지만 우리 팀은 엄격한 타입을 중요하다고 판단해 선택했습니다.
javascript의 빠르고 효율적인 테스팅 라이브러리인 jest를 선택했습니다. 이와 함께 react와 잘 호환되고 사용자 입장에서 다양한 테스트를 할 수 있는, RTL 을 선택하였습니다.
목 api를 사용할 수 있는 MSW(mock service worker)를 사용하기로 결정했습니다. 네트워크 요청을 모킹하여 프론트엔드 테스트 시 실제 서버와의 의존성을 제거하고, 보다 독립적인 테스트 환경을 만들수 있게 되었습니다.
컴포넌트를 문서 단위로 정리하고, 보다 더 효율적인 UI 작업을 위해 스토리북을 사용합니다.
협업하는 프론트엔드 크루들끼리 코드 스타일을 통일하고, 코드의 품질을 최대한 높이기 위해 prettier, eslint 을 사용합니다.
husky는 git hook을 자동으로 트리거하는 라이브러리입니다. husky를 사용해서 저희는 다음과 같은 행위를 자동화하기로 하였습니다.
pre-commit (커밋 바로 전)
- lint 명령어를 실행하여 eslint 실행을 강제합니다.
- prettier를 실행하여 prettier 를 검사합니다.
- stylelint 실행을 하여 css 순서를 정렬해줍니다.
- test 를 자동으로 실시해줍니다.
몇 명령어들은, 아직 테스트 등이 없어 주석 처리를 해놓은 상태입니다:)
- simple-import-sort 라는 eslint 플러그인을 사용하여 import 문을 정렬합니다. 하지만 이 명령어를 매번 쓰면 귀찮기 때문에, eslint-fix 를 사용하여 .vscode의 setting.json 을 사용해서 저장시 자동으로 import 문이 정렬되도록 해주었습니다.
webpack과 tsconfig에 절대 경로를 설정하여 import 문도 정리가 되도록 해주었습니다.