CRA(Create React App)는 프로젝트 초기 세팅 및 복잡한 과정을 해결해줍니다.
예를 들어, 아래와 같은 명령어로 타입스크립트 환경의 리액트 프로젝트를 만들 수 있습니다.
1
yarn create react-app my-app --template typescript
이렇게 프로젝트를 만들게 되면 바벨이나 웹팩 같은 종속된 라이브러리나 설정이 보이지 않습니다.
숨겨진 종속성 및 설정을 확인하고 수정하기 위해서는 eject 명령어를 사용해야 하는데 이 방법은 단방향 프로세스로 한번 실행하면 다시 원상 태로 복구할 수 없고 이후 직접 유지보수를 해야 합니다.
기존 설정을 유지하면서 새로 추가하고 싶은 설정만 추가하는 방법
이 방법은 기존 설정들을 신경 쓰지 않고 원하는 설정만 적용할 수 있기 때문에 관리 및 유지 보수하기 좋습니다.
CRA로 프로젝트를 설치한 후 다음과 같은 패키지들 설치합니다.
Install
customize-cra
(eject 명령어를 사용하지 않고 webpack.config와 같은 설정 파일을 수정할 수 있는 라이브러리입니다.)
1
yarn add customize-cra react-app-rewired --dev
- 아래와 같이 config-overrides.js (package.json과 같은 레벨) 파일을 생성합니다.
1
2
3
4
5
6
7
8
const { override, addWebpackAlias } = require('customize-cra');
const path = require('path');
module.exports = override(
addWebpackAlias({
'@': path.resolve(__dirname, 'src'),
})
);
- package.json의 react-scripts -> react-app-rewired로 변경합니다.
1
2
3
4
5
6
7
8
...
"scripts": {
"start": "react-app-rewired start",
"build": "react-app-rewired build",
"test": "react-app-rewired test",
"eject": "react-scripts eject"
},
...
yarn start를 통해 실행해 보면 정상적으로 동작하는 것을 확인할 수 있습니다.