React 초기 세팅 방법들과 장단점

React 초기 설정 방법

• create-react-app
• create-react-app eject
• create-react-app + react-app-rewired
• npm init
• (추천) vite
• ...

등 다양한 방법으로 React app을 setup 할 수 있다.

각각의 장단점이 있기 때문에, 상황에 맞는 선택을 하면된다.
가장

create-react-app

검색해보면 create-react-app(cra)에 대한 내용이 대다수이다.
cra는 정말 다양한 개발환경을 만족하기 위해 포함되어있는 모듈들이 정말 많다.
또한 쉽게 공부 또는 개발을 돕기 위한 기본 설정들이 잘 되어 있다.
하지만, 그만큼 설정을 변경하기가 힘들고 무겁다는 것이 단점이다.

🔎 create-react-app 으로 typescript 적용하여 프로젝트 만들기

npx create-react-app app-name --template typescript

create-react-app eject

cra로 생성한 프로젝트를 수정하다보면 eject를 해야할 상황이 온다.
(webpack 설정을 바꾼다던지..)
eject를 하면 숨겨져있던 파일들이 많이 나오게 되는데 위에서 설명한 것과 같이
다양한 환경을 대응하기 위해서 설정되어있는 코드들이 정말 많다.
이해하기 힘든 부분도 있고,
필요한 부분을 찾아서 수정하는것은 익숙하지 않으면 쉬운일은 아니다.

🔎 create-react-app로 만든 프로젝트 eject하기

yarn create react-app app-name --template typescript
cd app-name

// creact-react-app eject 명령어 ( package.json scripts에 이미 설정되어 있다. )
npm eject

create-react-app + react-app-rewired

eject의 단점은,
다시 돌아갈 수 없고 앞으로의 설정들을 스스로 해결해나가야한다는 단점아닌 단점이 있다.
이런 문제를 해결하기 위해 react-app-rewired라는 모듈이 있는데,
eject하지 않고 설정파일들을 덮어씌워준다.
변경하고싶은 부분만 rewired를 통해 변경할 수도 있다.

🔎 react-app-rewired 설치

yarn add -D react-app-rewired

🔎 root directory에 config-override.js 생성

touch config-override.js

🔎 config-override.js 내용 채우기

module.exports = function override(config, env) {
	// override config
	return config;
}

🔎 package.json에서 scripts 수정해주기

{
	scripts: {
    	- "start": "react-scripts start", // 기존
        + "start": "react-app-rewired start", // 변경
        // ... eject제외하고 하위 동일
    }
}

npm init

Tool의 도움을 받지않고 react, react-dom에서 시작하여
webpack/rollup, babel, typescript...
등 모든것을 내 입맛에 맞는 것들을 설치하는 방법이 있다.

npm init 으로 시작하는 tyepscript react setting

vite로 react app 프로젝트 만들기

vite에 대한 상세한 설명은 공식문서를 확인하는 것이 더 좋을 것 같다.
https://vitejs-kr.github.io/guide/

간단하게 알아보는 vite

vite는 vue를 위해 만들어진 도구였는데, 아래를 지원한다.

• vanilla, vue, react, preact, lit, svelte

vite는 (프랑스발음 비트) 개발환경에서는 브라우저를 번들러로 활용한다고 이야기할만큼
ESModule자체를 렌더링한다는 특징이 있다.
배포시에는 rollup(default)으로 bundling한다고 한다.

🔎 vite로 react-app 만들기

cra와 비슷하게 react app 초기세팅을 해준다.
cra와 다른점은 가벼운 설정들을 해주는 것이고
설정들을 입맛에 맞게 변경할 수 있는 장점이 있다.

어느정도 react 환경에 익숙해져있다면
vite를 추천한다.

yarn create vite app-name --template react-ts