[ React ] CRA - 리액트 프로젝트를 만들어보자.

작성자 개발 환경

✅ VScode

✅ Mac or Windows

 

 

🛠️ 리액트 프로젝트 생성 (CRA)

CRA는 Create-React-App의 약자로 리액트 프로젝트를 생성하는 것을 말한다.

 

리액트 프로젝트를 생성하기 위해 명령 프롬프트(CMD) 혹은 >_ Terminal  을 열어준다.

 

그 다음 다음 명령어를 실행한다.

 

$ npx create-react-app <path> <options>

 

<path>

<path>에 .을 넣으면 현재 경로에 리액트 프로젝트가 생성되고,
<path>에 문자를 작성하면 해당 문자를 폴더명으로 하는 폴더를 생성하여 그 안에 프로젝트를 생성한다.

<options>

<options>는 해당 프로젝트의 옵션을 부가한다.
--template typescript를 작성하면 타입스크립트의 프로젝트가 생성된다.

아무것도 작성하지 않을 시 default로 JavaScript 프로젝트를 생성한다.

 

작성자는 TypeScript로 개발하기 위해 --template typescript를 작성하였다.

 

그 다음 해당 폴더를 VScode에서 열어주면 다음과 같다.

 

 

⌨️ ShortCut

단축키를 외우는 건 생산성에 엄청난 영향을 준다.

 

프로젝트 생성 후, 내가 자주 사용하는 단축키는 다음과 같다.

Keys	기능
Ctrl + b	편집창 좌측 Explorer를 열고 닫습니다.
Ctrl + j	편집창 하단 콘솔 영역을 열고 닫습니다.
Ctrl + Shift + `	하단 콘솔 영역에 새로운 쉘을 추가합니다.

 

 

🏃🏻‍♀️ Run

Explorer에서 package.json을 열어보면

 "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },

 

기본적으로 상단 코드가 작성되어 있는데

 

 

"scripts"의 내용은 터미널에서 npm run <scripts.key> 명령어를 통해 실행할 수 있다.

 

"start"는 기본적으로 npm start를 지원하며 명령어를 입력하여 첫 프로젝트를 실행해보자.

 

$ npm start

$ npm run start

 

둘 중 하나를 입력하여 프로젝트를 실행한다.

 

 

URL 창에 localhost:<PORT>를 통해 이미지와 같은 화면이 나타나면 성공이다.