11.React 시작하기 - boiler-plate제작(frontend)

*리액트란?

* 간단히 말하면 Facebook에서 개발한 자바스크립트기반의 새로운 프론트엔드 라이브러리 이며 실제DOM과 가상DOM을 가지고 있는데 JSX문법을 이용하여 화면에 보여줄 view 부분을 코딩한다. 이러한 view 부분을 실제DOM에 담아놓는데 만약 변경사항이 있을 경우 가상DOM에 변경사항을 담아 실제DOM과 비교 후 다른부분만 실제DOM에 적용시켜주는 방식이다. 

1.리액트 설치하기(npm vs npx)

* npm: node package manager -> npm을 사용하게되면 locally 로 다운을 받게된다.(해당 프로젝트 폴더내 node_module에저장) 만약 npm install -g create-react-app 으로 실제 컴퓨터내부에있는 폴더 global 디렉토리에 다운을 받았다.(%AppData%/npm) 그러나 npx가 도입되면서 npx create-react-app을 하게되면 npm regisrty에서 다운로드없이 레지스트리에있는 파일들을 실행시켜주는 방식이다.

*장점:Disk 공간을 낭비하지않고 항상 최신버전을 사용가능

 

2. 리액트를 vs code터미널을 이용하여 설치

2-1. 프로젝트내에 client라는 폴더를 만들고 cd client 명령어로 해당 폴더로 이동 후 client폴더 내에 리액트 설치하기

2-2. 리액트 서버 작동하기

 

동영상강의