REACT_node.js 다운 및 npm/yarn

- node.js 다운 : https://nodejs.org/en/download/prebuilt-installer

리액트 개발 환경 준비

 

자바스크립트 패키지 관리 도구에는 NPM과 YARN이 있다

 

- NPM : Node Package Manager의 약자로 node.js 와 react.js에서 사용하는 대부분의 패키지를 설치 할 수 있다

NPM은 node.js와 함께 설치된다

 

- yarn : 페이스북에서 만든 패키지 도구로 npm에 비해 캐싱, 보안, 신뢰성 등이 개선됐다.

 

- 설치단계 : node.js 다운로드 > node.js 설치 > node.js 및 npm 설치 확인 (cmd창) >

드라이브에 react 프로젝트 워크스페이스로 사용할 폴더 생성 >  (cmd창)  yarn 설치 >  (cmd창)  create-react-app 설치 >

 (cmd창)  react 서버실행

 

$ create-react-app 설치

npm install -g create-react-app 명령어  (cmd창)  로 create-react-app 설치  (cmd창)

설치 후 create-react-app client 명령어로 'client' 라는 프로젝트 생성  (cmd창)

프로젝트 생성한 후 client 경로를 보면 package.json, node_modules등의 파일과 폴더가 생성된 것을 확인

 

$ react 서버실행

client 경로에서 yarn start 명령어로 react 서버를 실행

chrom 웹 브라우저에서 http://localhost:3000 url 열면 react 화면이 나옴

 

생성한 REACT14 폴더 안 src 폴더의 index.js 파일을 열어 <React.strictMode>,

</React strictMode> 태그 삭제

 

strict 모드는 애플리케이션 내의 잠재적 문제를 알아내기 위한 도구로 나중에 배울 생명주기 함수를 여러 번 실행하는 원인이 되므로 사용하지 않음

> 삭제 후에 <app/> 입력

 

$예제 파일 실행 방법

react 경로에서 [npm install] 명령어를 실행, 같은 경로에서 [npm start] 또는 [yarn start] 명령어로 react 서버를 구동해서 chrom 브라우저에서 리액트 화면 나와야지 실습가능