[React] CRA 커스터마이징

1. CRA(create-react-app)

2. CRA 커스터마이징 방법

2.1. eject

2.2. create-app-rewired, customize-cra

---

1. CRA(create-react-app)

[그림 1] create react app

CRA(create-react-app)는 리액트 프로젝트를 처음 실행할 때 필요한 여러가지 라이브러리나 웹팩의 설정 없이 간편하게 프로젝트를 시작할 수 있게 해준다.

 

CRA 장점

• 단 하나의 one build dependency를 가지게 되므로 리액트 프로젝트를 구성할 때 필요한 Webpack, Babel, ESLint 등 간의 연결에 대해서 신경쓰지 않아도 된다.
• Webpack, Babel, ESLint는 처음 프로젝트를 구성할 때 반드시 설정이 필요한 패키지인데, CRA는 프로젝트에 필요한 필수적인 설정(Configuration)을 대신 해준다.
• CRA는 Autoprefixer를 지원한다. 즉, 일반적인 CSS 코드를 생성하면 자동으로 -webkit-, -ms- 등을 적용해준다.

 

CRA 사용 방법

$ npx create-react-app project-name  # javascript react
$ npx create-react-app project-name --template typescript  # typescript react

CRA 사용 방법은 간단하다. project-name 대신 사용하고 싶은 디렉토리 명을 적으면 된다. 

 

TypeScript 언어로 리액트를 사용하고 싶다면 뒤에 --template type typescript를 적은 다음 명령어를 실행한다.

 

 

2. CRA 커스터마이징 방법

앞서 살펴본 CRA의 내용에 의하면, CRA가 프로젝트에 필요한 필수 설정들을 대신 해준다. 하지만, 기본 설정을 입맛에 맞춰서 바꾸어 사용하고 싶을 경우에는 따로 커스터마이징을 해야 한다. 

 

CRA 커스터마이징 방법에는 크게 2가지가 있다. 바로 eject를 이용하는 것과 create-app-wired, customize-cra를 이용하는 것이다.

 

 

2.1. eject

$ npm run eject

 

위의 명령어를 실행하면 숨겨져 있던 모든 설정들(Webpack, Babel 등)과 패키지들이 가지는 의존성을 볼 수 있게 된다.

 

주의할 점은, 한 번 eject를 수행하게 되면 이전 상태로 돌아갈 수 없다는 것이다.

[그림 2] npm run eject 실행

npm run eject를 실행하면 진짜로 eject 할 것인지 물어보는데 y를 입력하면 된다.

 

[그림 3] eject 후 package.json

eject가 완료되면 package.json에 숨겨져 있던 패키지들이 모두 나타나는 것을 볼 수 있다.

 

또한, config와 scripts 디렉토리에 설정에 관련된 파일들이 나타난다.

 

이제 파일 내용을 변경하여 자유롭게 커스티마이징할 수 있다.

 

하지만, 개발을 진행하면서 컴포넌트, 테스트 등 많은 작업을 해야 하는데 Webpack, Babel 설정 등을 계속 신경써야 한다는 불편함이 있다. 작업 도중 패키지를 설치하거나 삭제할 때 항상 다른 패키지들과의 의존성을 고려해야 한다는 점도 감수해야 한다.

 

 

2.2. create-app-rewired, customize-cra

커스터마이징을 할 내용이 별로 없다면, 굳이 eject를 쓰지 않고도 진행할 수 있다.

$ npm i create-app-rewired customize-cra

먼저 create-app-rewired와 customize-cra를 설치한다.

 

예시로, https에 관련된 설정을 추가하고자 한다.

$ npm i https-browserify

 

https-browserify 설치가 완료되면 프로젝트에 config-overrides.js 파일을 생성하여 아래와 같이 작성한다.

/* config-overrides.js */

const { override } = require('customize-cra');

module.exports = override((config) => {
    config.resolve = {
        fallback: {
            ...config.resolve.fallback,
            https: require.resolve('https-browserify'),
        },
    };
    return config;
});

customize-cra의 override를 사용하여 커스터마이징을 진행하고자 한다. override는 쉽게 비유하자면 덮어쓰기라고 볼 수 있다.

 

[그림 4] package.json script 수정

마지막으로 package.json 파일에 react-scripts 대신 react-app-rewired를 추가하면 커스터마이징이 완료된다.