[노드/리액트 기초] #15~17. React JS, Create-React-App, NPM vs NPX

**본 포스팅은 유튜브&인프런 John Ahn님의 노드 리액트 기초 강의를 참고하여 작성하였습니다.**

 

 

리액트

프레임워크가 아니라 라이브러리이다.
(참고: https://canoe726.tistory.com/23)

컴포넌트(element)로 이뤄져서 재사용성이 뛰어나다.
묘듈화한 파일을 여러 곳에서 사용할 수 있다.

리액트는 virtual DOM을 만들어서 관리하기 때문에 훨씬 빠르게 한 부분만을 변경할 수 있다.
(참고: https://velog.io/@gwak2837/React-Virtual-DOM-%EC%9D%B4%ED%95%B4%ED%95%98%EA%B8%B0)

 

---

 

Create-React-App

원래는 Babel, Webpack 등을 설정해줘야 하지만
이제는 create-react-app으로 리액트 앱을 바로 시작할 수 있다.

참고로 Babel은 최신 자바스크립트 문법을 구형 브라우저에서도 돌 수 있게 변환시켜주고,
Webpack은 복잡한 모듈들을 묶어주어(bundle) 간편하게 만들어주는 역할을 한다.

 

---

 

NPM (Node Package Manager)

Node.js로 만들어진 모듈울 관리해주는 tool이다.
registry라는 라이브러리 저장소 역할을 한다.

npm install 한 것들은 package.json에 정의되어있다.
어플을 킬때 npm run start, 빌드할 때 npm run build 사용하기도 한다.

-g 라는 flag를 쓰지않으면 local로 다운받아지며 node_modules로 들어가게 된다.
npm install -g 하면 global로 다운받아진다.
즉, 프로젝트 안에서만이아니라 컴퓨터 안에 다운된다. 

 

NPX (Node Package Runner)

npm registry에 올라가있는 패키지를 쉽게 설치하고 실행할 수 있도록 도와주는 CLI 도구이다.
npx를 이용하면 create-react-app을 굳이 다운로드 받지 않고도 사용할 수 있다.
(참고: https://webruden.tistory.com/275)