CRA을 이용한 React 앱 설치

React 앱을 설치하기 앞서 Node.js, npm의 버전을 확인해야 한다.

React 공식 홈페이지 CRA(create-react-app)을 보면 Node 14.0.0 혹은 상위 버전 및 npm 5.6 혹은 상위 버전이 필요하다고 나와있다.
Node.js, npm이 설치가 되어있지 않다면 Node.js에 가서 설치해야한다.
npm은 Node package manager의 줄임말로 Node를 설치하면 자동으로 설치가 된다.

터미널에서 node -v, npm -v을 입력하여 버전을 확인한다.

PS C:\WEB\front-end> node -v
v16.14.0
PS C:\WEB\front-end> npm -v
8.3.1

본격적으로 React 앱 설치

• 필요한 터미널(terminal) 명령어
  • pwd : 현재 작업 위치
  • ls : 현재 위치 안의 파일 출력
  • cd : 작업 디렉토리를 바꾸는 명령어

Step.01

터미널 명령어를 이용하여 원하는 디렉토리로 가서 npx create-react-app '새로운폴더'을 입력하여 React 앱을 다운로드 한다.

PS C:\WEB\front-end> pwd

Path
----
C:\WEB\front-end

PS C:\WEB\front-end> ls

    Directory: C:\WEB\front-end

Mode                 LastWriteTime         Length Name
----                 -------------         ------ ----
d-----         5/19/2022   4:06 AM                react

PS C:\WEB\front-end> cd react
PS C:\WEB\front-end\react> npm create-react-app '새로운폴더'

Step.02

다운로드가 완료되면 Happy hacking!이라는 문구가 뜬다.
그 상태에서 터미널 명령어를 이용하여 만들었던 '새로운폴더'로 이동한 후 npm start를 입력한다.

PS C:\WEB\front-end\react> ls

    Directory: C:\WEB\front-end\react

Mode                 LastWriteTime         Length Name
d-----         6/15/2022   1:30 AM                '새로운폴더'

PS C:\WEB\front-end\react> cd '새로운폴더'
PS C:\WEB\front-end\react\'새로운폴더'> npm start

입력한 후 성공했다는 아래 문구와

Compiled successfully!

You can now view my-app in the browser.

  Local:            http://localhost:3000        
  On Your Network:  http://192.168.45.178:3000   

Note that the development build is not optimized.
To create a production build, use npm run build. 

webpack compiled successfully

이런 화면이 뜬다면 성공이다.

++

새로 만든 '새로운폴더'를 보면 위 이미지처럼 구성이 되어있다.

public : index.html에 React Element을 렌더링
src : React component를 만들 때 필요한 것들

사용자 컴포넌트 생성 시 src에 component폴더 추가 후 컴포넌트 js 파일 생성