본문 바로가기
Front-end/React

#11, Create-React-App

by 예닌잉 2021. 1. 20.
728x90

 

Create-react-App 이란 ? 👋🏻

페이스북에서 만든 공식적인 React 웹 개발용 Boilerplate이다.

직접 모든 개발환경을 설정하지 않고, 페이스북이 지속적으로 업데이트를 해주기 때문에 많은 사람들이 사용하고 있다.

 

 

준비사항 🌿

1. Node.js

Webpack, Babel 같은 도구들이 자바스크립트 런타임인 Node.js를 기반으로 만들어져 있기에 해당 도구들을 사용하기 위해서 Node.js를 설치한다.

 

2. Yarn

npm ( 노드 패키지 매니저 ) 보다 조금 향상된 도구라고 생각하면 된다. npm은 위의 Node.js를 설치하게 될 때 같이 받게 되는 패키지 매니저 도구다. 프로젝트에서 사용되는 라이브러리를 설치 및 라이브러리 버전 관리를 하게 될 때 사용된다. 여기서 npm이 아닌 yarn을 사용하는 이유는 조금 더 빠른 속도, 더 나은 캐싱 시스템을 사용하기 위한 것이다.

 

3. 코드 에디터

본인은 주로 IntelliJ를 사용한다.

 

create-react-app 설치해보자 !

 

npx create-react-app start-react-app

npx란 ?

npm 패키지를 로컬에 글로벌로 설치하지 않고 일회성으로 실행 할 수 있게 해주는 도구이다.

npm 5.2.0버전 이후부터 기본적으로 제공된다. 

 

 

npx가 실행이 안되는 구버전의 경우 아래와 같이 한다.

npm install -g create-react-app
create-react-app start-react-app

성공적으로 설치가 완료되었다면 

cd start-react-app
yarn start

위와 같이 입력하면 리액트 프로젝트가 시작된다 !!

 

 

 

 

 

 

 

 

 

 

참고 velog.io/@wlsgh46/create-react-app%EC%9C%BC%EB%A1%9C-%EB%A6%AC%EC%95%A1%ED%8A%B8-%ED%94%84%EB%A1%9C%EC%A0%9D%ED%8A%B8-%EA%B0%9C%EB%B0%9C%ED%99%98%EA%B2%BD-%EA%B5%AC%EC%B6%95%ED%95%98%EA%B8%B0

반응형