create-react-app 크리에이트 리액트 앱 [처음 만난 리액트 #8]

2강. 리액트 시작하기

[무료] 처음 만난 리액트(React) - 인프런 | 강의

 

리액트 없이 html, css, JavaScript 만으로 웹사이트를 만들 수 있지만, 리액트를 적용했을 떄 다양한 장점이 있기 때문에 리액트를 사용하는 것!

 

1. 실습으로 html 만을 사용해서 간단한 웹사이트를 만들어보고, css를 사용해서 스타일을 입히기

2. 완성된 웹사이트에 리액트를 적용해보고, 리액트 앱을 생성해주는 크리에이트 리액트 앱에 대해 알아보기

---

create-react-app (CRA)

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

 

Node.js v14.0.0 이상

npm v6.14.0 이상

VS Code

create-react-app을 실행하기 위해서는, 개발 환경을 설정할 때 설치한 Node.js와 npm이 필요

 

npx - execute npm pakage binaries

create-react-app은 npx 명령어를 통해 실행할 수 있음

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

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

 

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

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

---

1. npx create-react-app 명령어 실행

 

 

VS Code 터미널에서 npx create-react-app 명령어를 실행 

프로젝트 이름으로 my-app 사용

 

명령어를 실행했을 때 create-react-app을 설치해야 한다고 물어보면, y를 입력해 계속 진행

필요한 패키지를 자동으로 설치하고 화면과 같이 리액트 웹 애플리케이션이 생성됨

 

2. 애플리케이션 실행 

 

 

cd 명령어를 사용해서 우리가 생성한 my-app 프로젝트 폴더 안으로 들어가고, npm start 명령을 통해 리액트 애플리케이션을 실행 

 

 

명령어를 실행하고 조금 기다리면 자동으로 브라우저가 열리면서 local host 3000번 포트로 접속

* local host : 현재 내가 사용하고 있는 컴퓨터를 의미 

 

---

애플리케이션을 실행 명령어

  

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

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

 

● cd my-app에서 cd는 change directory의 약자로, 현재 커맨드라인 도구가 위치한 경로를 변경하는 역할

mac의 finder나 windows의 탐색기에 비유하자면 폴더를 더블클릭해서 안으로 들어가거나 뒤로가기를 눌러서 폴더를 빠져나오는 역할

● npm start는 실제로 애플리케이션을 실행시키는 명령어 

 

 

---

▼ create-react-app 참고 링크 

Create a New React App – React