[React.js] 처음 만난 리액트 2-2 (실습) create-react-app

Contents

앞에서는 기존에 있는 웹사이트에 react를 적용하는 방법에 대해 배워보았다

하지만 새로운 웹사이트를 만들 때에는 굳이 그렇게 할 필요가 없다

처음부터 react가 적용되어 있는 상태로 개발을 시작하면 되기 때문

그래서 react로 웹사이트를 개발할 때에는 주로 create-react-app을 사용

create-react-app : react로 웹애플리케이션을 개발하는 데 필요한 모든 설정이 되어 있는 상태. 프로젝트를 생성해주는 도구

 

(실습) create-react-app

필요한 것

• Node.js v14.0.0 이상
• npm v6.14.0 이상
• VS Code

create-react-app은 npx 명령어를 이용하여 실행

npx : npm package를 설치한 이후에 곧바로 실행(execute) 까지 해주는 명령어

package를 정해진 위치에 설치하고 또 찾아서 실행하려면 번거롭기 때문에 간편하게 한번에 처리하기 위해 사용

새로운 react application을 만들기 위해서는 아래와 같이 입력

# 사용법
$ npx create-react-app <your-project-name>

# 실제 사용 예제
$ npx create-react-app my-app

 

위와 같이 my-app이라는 프로젝트 생성이 완료되면 아래처럼 application을 실행할 수 있는 명령어들을 친절하게 안내해 줌

 

해당 명령어들을 따로 살펴보자

 

# 경로 변경 (change directory)
$ cd my-app

# 애플리케이션 실행
$ npm start

 

 

VSCode의 terminal창에서 위와 같이 입력하면 자동으로 브라우저가 열리면서 localhost:3000 포트로 접속됨

 

localhost : 현재 내가 사용하고 있는 컴퓨터

현재 react application이 local 개발 환경에서 실행된 것

 

 

create-react-app에 대하여 더 자세한 내용이 궁금하다면..

Start a New React Project – React