<div id="readability-page-1" class="page"><div>CRA(Create React App)는 프로젝트 초기 세팅 및 복잡한 과정을 해결해줍니다.
예를 들어, 아래와 같은 명령어로 타입스크립트 환경의 리액트 프로젝트를 만들 수 있습니다.
<pre><code>yarn create react-app my-app --template typescript</code></pre>
이렇게 프로젝트를 만들게 되면&nbsp;바벨이나 웹팩 같은 종속된 라이브러리나 설정이 보이지 않습니다.
숨겨진 종속성 및 설정을 확인하고 수정하기 위해서는 eject 명령어를 사용해야 하는데 이 방법은 단방향 프로세스로 한번 실행하면 다시 원상태로 복구할 수 없고 이후 직접 유지보수를 해야 합니다.
<h2 id="기존-설정을-유지하면서-새로-추가하고-싶은-설정만-추가하는-방법">기존 설정을 유지하면서 새로 추가하고 싶은 설정만 추가하는 방법</h2>
이 방법은 기존 설정들을 신경 쓰지 않고 원하는 설정만 적용할 수 있기 때문에 관리 및 유지 보수하기 좋습니다.
CRA로 프로젝트를 설치한 후 다음과 같은 패키지들 설치합니다.
<h3 id="install">Install</h3>
<a href="https://github.com/arackaf/customize-cra/blob/master/api.md">customize-cra</a> 
(eject 명령어를 사용하지 않고 webpack.config와 같은 설정 파일을 수정할 수&nbsp;있는 라이브러리입니다.)
<pre><code>yarn add customize-cra react-app-rewired --dev</code></pre>
<ul>
<li>아래와 같이&nbsp;config-overrides.js (package.json과 같은 레벨) 파일을 생성합니다.</li>
</ul>
<pre><code>const { override, addWebpackAlias } = require('customize-cra');
const path = require('path');

module.exports = override(
 addWebpackAlias({
 '@': path.resolve(__dirname, 'src'),
 })
);</code></pre>
<ul>
<li>package.json의 react-scripts -&gt; react-app-rewired로 변경합니다.</li>
</ul>
<pre><code> ...
 "scripts": {
 "start": "react-app-rewired start",
 "build": "react-app-rewired build",
 "test": "react-app-rewired test",
 "eject": "react-scripts eject"
 },
 ...</code></pre>
yarn start를 통해 실행해 보면 정상적으로 동작하는 것을 확인할 수 있습니다.</div></div>

760kry.log

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

CRA(Create React App) 웹팩 설정하기

댓글