React 개발 환경 설정하기

0. chrome 에 'react developer tools' 확장 프로그램 추가해라.

                      'redux devtools' 도 추가해라.  

  - Hook을 실시간으로 볼수 있다.

 

 

 

1. nodejs 설치하기

https://nodejs.org/en/

Node.js

 

 

2. 설치 진행 - 아래 글 참조

https://offbyone.tistory.com/441

Node.js 설치하기

 

3. 설치확인

node -v

 

4. Visual Studio Code 플러그인 설치

1) Nodejs Snippets

2) Reactjs code snippets

 

 

yarn 설치하기 (관리자 권한으로)

npm install --global yarn

 

프로젝트를 만들기위한 create-react-app 도구 설치하기

yarn global add create-react-app  -----> 이건 안된다. 사용하지 마라.

npm install -g create-react-app 

 

프로젝트 생성

create-react-app hello

또는 npx create-react-app hello

 

실행(특별히 지정하지 않으면 edge 에서 구동됨)

cd hello

npm start 또는 yarn start

 

소스 복사시에는 node_modules 디렉토리를 지우고 해라.

그리고 설치하는 곳에서 

npm install 

하면 다시 라이브러리를 다운받는다.

 

 

 

 

 

참고) 문법이 어려우면, 모던스크립트튜토리얼 사이트 글을 읽어라.

https://ko.javascript.info/

모던 JavaScript 튜토리얼

 

JavaScript 의 느린 속도를 극복하기 위하여,

Virutal DOM 과 실제의 DOM을 비교하여, 차이가 발생하면 Virtual DOM 의 내용을 실제 DOM 에 반영한다.

 

JQuery 를 거의 사용하지 않지만...(사용하지 않는게 좋다)