새로운 Recat Project 만들기

먼저 리액트를 실행하기전에 해야할 것으로 node와 npm설치가 있다.

1. node, npm 설치

npm을 설치하기 위해서는 nodeJS를 설치해야 한다.
npm이란 Node Package Manager의 약자로 node.js에서 사용하는 모듈들을 패키지로 만들어 npm을 통하여 관리하고 배포하고 있다.

14.17.3 LTS 버전과 16.5.0 버전이 있는데 보이는 바와같이 하나는 안정적이고 하나는 현재 최신버전으로, 둘줄에 아무거나 설치해도 상관없다.

node 설치 후에는 위와 같이 터미널에 node -v , npm -v 를 입력하게 되면 정상적으로 설치가 되있다면 아래 사진과 같이 버전이 출력될 것이다.

2. "npx create-react-app 만들고자 하는 폴더"

터미널 창에 npx create-react-app 만들고자 하는 폴더 위 그림에서는 자기 자신 폴더를 지정하기 위해서 .을 이용했다.

설치가 완료되면 Happy hacking! 라는 문구가 뜨며 완료를 알려주게 된다.

이제 VS Code 터미널로 넘어와서

3. "npm start"

위 명령어 npm start를 실행하고 나면 다음과 같이 브라우저http://localhost:3000/ 이 열리고, 돌아가는 리액트 아이콘이 보일 것이다. 자동으로 페이지가 열리지 않는다면 브라우저에 주소를 직접 입력하여 들어가면된다

접속 종료는 VS Code 터미널창에서 ctrl + c를 누르면 접속 종료된다.