React-boilerplate

나만의 react boilerplate 만들기 - (3) TypeScript로 전환

기존 JS -> TS로 환경설정을 변경했다. 패키지 주소: https://www.npmjs.com/package/fe-jhw-create-react-app 명령어: npx fe-jhw-create-react-app [project name] TS 설치 typescript 4.4.2버전을 설치했다. 최신버전인 4.9.4는 내 개발환경과 제대로 호환이 되지 않아 쓸 수 없었다. 그래서 현재 CRA가 사용하고 있는 4.4.2버전을 선택했다. webpack config 설정 fork-ts-checker-webpack-plugin 을 추가했다. 번들시에 타입검사를 별도의 프로세스에서 실행하여 빌드 성능을 향상시키는 플러그인이다. 기본적으로 tsconfig의 설정을 참조한다. tsconfig 설정 { "compil..

나만의 react boilerplate 만들기 - (2) npx, 배포

기존에는 개발환경을 구성하기 위해서 react-boilerplate 리포지토리를 클론하고 .git파일을 삭제해야 했다. 너무 번거로운 작업이라 CRA처럼 npx fe-jhw-create-react-app 명령어 1줄 입력으로 개발환경 구성이 가능하게 만들었다. 패키지 주소: https://www.npmjs.com/package/fe-jhw-create-react-app 명령어: npx fe-jhw-create-react-app [project name] 참고한 글: https://velog.io/@jjunyjjuny/React-TS-boilerplate-%EC%A0%9C%EC%9E%91%EA%B8%B0-%EB%B0%B0%ED%8F%AC-%EB%B0%8F-npx 왜 npx? npx를 사용하면 최신버전 패키..

나만의 react boilerplate 만들기 - (1) 환경 설정

React Boilerplate FE 개발환경에 대해서 공부해보고, CRA에서 불필요한 부분은 덜어내고, 필요한 부분(ex: webpack-bundle-analyzer, MSW)을 추가하여 리액트 개발환경을 설정해봤다. https://github.com/fe-jhw/react-boilerplate 특징 zero-install: 클론 후 패키지 설치 없이 바로 사용할 수 있다. mocking: MSW가 포함되어 api들을 mocking해 사용할 수 있다. behavior-driven-test: react-testing-library를 활용한 유저 행동 기반 UI 테스팅 환경이 구성되어 있다. bundle-analyze: webpack-bundle-analyzer를 활용해 빌드시 번들 분석 정보를 확인할 수..