React.js basic manual

create react app tool chain

lshjju 2025. 6. 20. 11:47

 

 

https://create-react-app.dev/



Create React App (CRA)이란?


Create React App은 React 애플리케이션을 쉽고 빠르게 만들 수 있도록 도와주는 **공식적인 도구 모음(툴체인)**입니다. 

 



왜 필요한가요?


React 프로젝트를 처음 시작할 때, 개발 환경을 설정하는 것은 생각보다 복잡하고 시간이 많이 소요될 수 있습니다. 

예를 들어, JavaScript 코드를 브라우저가 이해할 수 있도록 변환해주는 Babel, 여러 파일을 하나로 묶어주는 Webpack, 코드 품질을 검사하는 ESLint 등 다양한 도구들을 직접 설정해야 합니다.

Create React App은 이러한 복잡한 설정들을 미리 다 해두어서, 개발자가 직접 설정할 필요 없이 바로 React 코드 작성에 집중할 수 있도록 해줍니다. 

 



주요 특징 및 역할


빠른 시작: 단 하나의 명령어로 React 개발 환경을 즉시 구축할 수 있습니다.


설정 불필요: 


Create react app tool chain install


방법 1: 현재 디렉토리에 생성 - 본 프로젝트는 이 방법을 추천 합니다.

현재 폴더에 바로 React 앱을 설치하려면:

로컬 터미널에 아래 코드를 입력합니다.

npx create-react-app .

 

(.은 현재 디렉토리를 의미합니다) 

설치가 완료될 때까지 기다립니다.

설치 과정에서 필요한 모든 패키지와 의존성이 자동으로 설치됩니다.


에러가 난다면?

 

이 부분에서 에러가 많이 납니다.

거의 에러 페스티벌이라고 할 수 있지요.

에러 대처방법 몇가지를 아래 포스팅에 정리해 두었습니다.

 

에러가 안 났다면 축하 합니다.

 

https://lshjju.tistory.com/675

 

CRA 리액트 프로젝트 생성할 때 자주 생기는 에러 페스티벌

Error case처음 리액트 설치하는 경우 다양한 에러가 자주 일어납니다.가장 많이 일어나는 에러케이스를 아래에 정리했으니 참고 바랍니다.ERROR I npx create-react-app . errornpx : 이 시스템에서 스크립트

lshjju.tistory.com

 

 




방법 2: npx 사용

프로젝트와 CRA 를 동시에 실행하는 방법 입니다. 

디렉토리를 미리 만들지 않고 프로젝트 생성과 동시에 만듭니다.

터미널에 아래 코드 입력 합니다.

npx create-react-app 프로젝트이름

 

예: npx create-react-app my-app