리액트 시작하기.

Create React App

Create React App은 React 애플리케이션을 쉽고 빠르게 생성할 수 있도록 도와주는 도구이다. 이 도구를 사용하면 별도의 설정없이 React 애플리케이션을 생성하고 개발할 수 있고, 프로젝트의 구조나 환경 설정 등을 자동으로 생성해주기 때문에 개발자가 초기 설정에 시간을 낭비하지 않고 바로 개발에 집중할 수 있다. Create React App은 편리한 개발 환경을 제공하여 React 개발을 보다 쉽고 빠르게 만들어준다.
 

1. Node.js 설치 및 npx 설치

가장 먼저 Node 14.0.0 혹은 상위 버전 및 npm 5.6 혹은 상위 버전이 필요하다. 하위 버전 혹은 설치가 되어있지 않다면 Node.js 사이트로 들어간 뒤, 설치를 해준다.( LTS로 설치 해 주어야 한다.)
https://nodejs.org/en

Node.js — Run JavaScript Everywhere

 
Node.js 설치 후,  원활한 실행을 위해 (저는 microsoft 이기 때문에 git bash로 했습니다.) git 을 다운 받은 후, git bash를 실행시켜준다.
 
설치 후 콘솔창에 node js의 버전을 확인해보는 명령어는 다음과 같다. 

node -v

 
설치가 정상적으로 이루어졌다면 다음과 같이 출력 될 것이다.

v20.12.0

 
다음으로 작업을 실행할 폴더로 이동시켜주는 명령어를 사용한다. 
desktop의 second-project 폴더에서 실행 해 줄것이기 때문에 다음과 같이 명령어를 입력했다.

cd desktop/second-project

 
참고로 이 전 폴더로 넘어가는 명령어는 다음과 같다.

cd ..

 
이후 npx를 설치 해 준다.  

npm install npx -g

 
참고로 명령어는 위와 같이 입력하되, install을 그냥 i로만 입력해도 된다.

npm i npx -g

 
설치가 정상적으로 이루어졌다면 다음과 같이 출력 될 것이다.

added 58 packages, and audited 563 packages in 21s

 
그 후 npx 가 설치되어있는지 버전확인 명령어와  다음 줄, 커맨드 실행 명령어는 다음과 같다.

npx -v  

npx

 

2. create-react-app 설치

 
이제 작업폴더에 들어와 npx를 설치 해 주었다. 이제 본격적으로 create-react-app을 설치 해 줄 차례이다.
 
cmd 창에 아래명령어로 create-react-app 을 설치한다.

npm install -g create-react-app

 
만약 위 명령어를 입력하고 에러가 뜬다면 아래 명령어를 입력한다.

sudo npm install create-react-app

 
아래 명령어를 입력해서 앱이 잘 설치되었는지 확인 해 준다.

create-react-app --version

 
설치한 create-react-app을 가지고 react 프로젝트를 생성해보고 실행해보자.
.(온점) 자리에는 내가 만들 프로젝트 이름을 넣을 수 있다.

npx create-react-app .

npm start

 
설치 완료 후 vscode로 폴더 안에 들어가 보면. node_modules 등의 파일들이 생긴다.
이때 package.json 파일로 들어가보면 

  "scripts": {

    "start": "react-scripts start",

    "build": "react-scripts build",

    "test": "react-scripts test",

    "eject": "react-scripts eject"

  },

와 같이 react를 실행 시킬 수 있는 script를 확인 할 수 있다.