react 설치 및 세팅

구 웹브라우저

① 요청하면 → view(html) 화면통째로 받는다.
② view에서 → 요청을하면(자바스크립트) → ajax(부분변경)→응답(json)→그림그리기(자바스크립트)

---

페이스북

화면이 복잡하다. ②으로하면 그림그리는게 너무 복잡하다. 
부분변경하지말고, ajax 요청하면 응답을 데이터로안하고 서버쪽에서 html을 만들어서 통째로 받으면안되나?
응답이 json이 아니라 , text.html을 받는거다.

---

리액트

ajax→데이터변경감지(리액트엔진) →UI가 자동업데이트  

데이터변경감지(리엑트엔진:데몬프로세스)하려면 서버처럼 계속 돌아가야하는데, 서버가 필요하다.
서버(요청이들어오면 처리)가 NODE.JS(자바스크립트로 만들어진 서버)로 리엑트엔진을 돌린다.

VSCODE 터미널에서
node --version

npm , npx 설치
npm --version
npx --version

리엑트머신을 설치하자 설치 react 사이트에서 명령어확인
npx create-react-app my-app

npm과 npx 차이
npm → 라이브러리 다운 - 빌드 >로컬프로젝트3개 (로컬에 다 다운) , 프로젝트마다,글로벌하게 받을수있다, 기존에 글로벌한 버전있으면 삭제하고 새로설치해야한다.
npx →  라이브러리 다운- 빌드 > 로컬프로젝트3개(다운받은걸 재사용, 없으면 다운) >실행하고>삭제해준다.

cd my app
npm start 
3000포트에 nodejs 서버가 열린다.
컨트롤 c로 서버 끌수 있다.

---

VSCODE 확장프로그램

ESLint : 문법을 검사해준다. 디버깅해준다. (자바스크립느는 인터프리터언어..)
Prettier : 코드 예쁘게 정렬
Reactjs Code snippets : 리액트코드 자동완성
설치후 재시작

open folder에 my-app폴더로 열면 경로 기본으로 설정가능
src>App.js 에서
return안에 있는거 다 지운다.

file>preferece>setting>prettier 검색>필요한 속성체크
또는 좌측에 .prettierrc 파일을 새로만들어서 
{
  "sigleQuote":ture,
  "semi":true,
  "tebWidth":2,
  "trailingComma":"all",
  "printWidth":80
}
로 저장, file>preferece>setting>Text Editor >Formatting> Editor:Format on Save 체크