Create react app
Create React App
Set up a modern web app by running one command.
create-react-app.dev
GitHub - facebook/create-react-app: Set up a modern web app by running one command.
Set up a modern web app by running one command. Contribute to facebook/create-react-app development by creating an account on GitHub.
github.com
1. Creact React app란?
Creact React app은 react를 만든 페이스북이 제공하공하고 있는 CLI(커맨드 라인 인터페이스) 도구 이다.
이 도구를 사용하면 복잡한 초반세팅 없이 간단하게 React 프로젝트를 구성할 수 있다.
즉 webpack 이나 Babel과 같은 도구를 설치하거나 구성할 필요가 없다. 이 도구를 사용하면 미리 구성이되어있다.
2. 사용 방법
node 14 버전 이상 필수이다.
npx
npx create-react-app my-app
cd my-app
npm start
만약 타입스크립트를 적용시키고 싶다면 아래와 같이 하면 된다.
npx create-react-app my-app --template [template-name]
만약 기존 create react app 프로젝트에 타입스크립트를 적용시키고 싶다면 아래와 같이 하면 된다.
npm install --save typescript @types/node @types/react @types/react-dom @types/jest
그리고 파일이름을 타입스크립트로 변경해야한다. ex ) src/index.tsx
3. 문제점
현재 등록된 문제만 1500개가 넘는다.
또한 페이스북에서 create-react-app이 중단되었나 싶을정도로 관리를 안 하고 있다.
2021년 7월 6일 CRA의 공동개발자의 말로는 react 자체에 더 신경쓰고 있어서 유지보수 할 시간이 없다고 한다.
https://github.com/facebook/create-react-app/issues/11180#issuecomment-874748552
We need regualr CRA maintainer · Issue #11180 · facebook/create-react-app
I know recently, Maintainers of Create React App are working during their "FreeTime". Thanks all time @mrmckeb I think this is not healthy situation, that relying too mush volunteer work,...
github.com
또한 CRA는 백엔드나 데이터베이스를 다루지 않고 서버를 활용할 수 없기 때문에 최상의 성능을 제공하지는 않는다.
더 빠른 로딩 시간과 라우팅 및 서버측 로직과 같은 내장 기능을 찾고 있다면 다른 프레임워크를 사용하는 것이 좋다.
따라서 최소한의 툴체인으로 시작하려면 vite or parcel
완전한 기능을 갖춘 프레임워크로 구축하려면 Next.js or Gatsby or Remix or Razzle 를 추천한다.
4. 대안
1. CRA 와 함께 CRACO 를 사용할 수 있다.
GitHub - dilanx/craco: Create React App Configuration Override, an easy and comprehensible configuration layer for Create React
Create React App Configuration Override, an easy and comprehensible configuration layer for Create React App. - GitHub - dilanx/craco: Create React App Configuration Override, an easy and comprehen...
github.com
2. vite를 사용할 수 있다.
Vite
Next Generation Frontend Tooling
vitejs.dev
한글
Vite
Vite, 차세대 프런트엔드 개발 툴
vitejs-kr.github.io
Replace Create React App recommendation with Vite by t3dotgg · Pull Request #5487 · reactjs/reactjs.org
Create React App is not a great recommendation to be making, especially for newer developers. As an educator, I run into countless issues w/ new React devs running into unnecessary issues due to th...
github.com
3. react docs 참고
Start a New React Project
A JavaScript library for building user interfaces
beta.reactjs.org
5. 앞으로 Create React App의 방향
gaearon<create react app - 공동개발자>이 남긴 글
Replace Create React App recommendation with Vite by t3dotgg · Pull Request #5487 · reactjs/reactjs.org
Create React App is not a great recommendation to be making, especially for newer developers. As an educator, I run into countless issues w/ new React devs running into unnecessary issues due to th...
github.com
6. CRA을 vite로 마이그레이션 하기
create-react-app 기본 번들러에서 Vite로 마이그레이션하기
CRA(create-react-app)을 통해 부트스트래핑된 React 어플리케이션의 경우 번들링을 위해 기본 제공되는 react-scripts을 사용합니다. 이 react-scripts 라이브러리는 쉽고 간편하지만, 라이브러리 내부에서 사
blog.seiker.kr
'React-JS > 개념' 카테고리의 다른 글
[React] styled-compoents (1) | 2023.02.20 |
---|---|
[React] react / react-dom (0) | 2023.02.16 |
[React] Hook ( useState / useEffect ) (0) | 2023.02.11 |
[React] Function and Class Components (0) | 2023.02.11 |
[React - 개념] Props (0) | 2023.02.09 |