React 와 Node
-
노드가 리액트보다 훨씬 큰 범위
-
리액트는 뷰단으로만 사용한다.
-
리액트의 의존성은 node를 통해 구성할 수 있다.
-
웹 브라우저에서가 아닌, 환경에서의 자바스크립트의 런타임이 필요하다.
node.js 설치 이후
npm -v
// 10.8.1
node -v
// v.20.16.0-
npm: Node Package Manager의 준말이다. -
node: 웹 브라우저가 아닌 어디에서든 JavaScript를 구동시키기 위해 필요한 런타임 환경
npm install -g create-react-app
// -g는 global하게 create-react-app을 사용할 수 있도록 설정하라는 뜻create-react-app(CRA) 란?- 리액트 개발을 할 수 있도록 프로젝트 구조/설정 등을 자동으로 세팅해주는 도구
webpack
폴더 구조
- public
- 템플릿 파일들
- src
- 정적 파일들
Node.js
- 서버 사이드
- 런타임 환경 제공
- JavaScript 런타임 환경 ( Java에서의 JRE 느낌 )
React
- 클라이언트 사이드
- UI를 구축하기 위한 라이브러리
- 컴포넌트 기반으로 복잡한 UI를 재사용할 수 있는 구조로 만듬.
- 컴포넌트?
- Reusable한 SW ToolKit
- 재사용 가능한 툴킷
- 복잡한 UI를 효율적으로 개발하기 위해 컴포넌트화 시켰다.
JSX ( JavaScript + XML )
-
- class로 구성하는 방식 ( class 형태의 컴포넌트 )
-
- 메서드로 구성하는 방식 ( function 형태의 컴포넌트 )
- React 16 버전부터는 이게 기본
-
컴포넌트를 만들 때, class-based vs function-based 로 나뉜다.
-
런타임 (node) 환경 위에 ( Java의 VM과 비슷 ), React를 올린다.
( Vue.js, Angular.js ~ 등의 라이브러리도 있지만, 우리는 React.js를 올린다. )
React와 MVVM 구조 ( Design Pattern )
-
View Model ( 비즈니스 로직을 다 녹여서 Design 까지 완성 ) => 뷰에다 보여주는 것, 이것이 MVVM
-
뷰 모델에서 해야하는 것?
- View => 디자인, 화면, 기능, 스크립트
- 컴포넌트를 뷰 단에 꽂아서 조립하면 되는 것이다.
- React Engine => View Model을 만드는 것이 목표
-
Function화 시켜서 꽂는다 ( webpack => 꾸러미 만드는 역할 )
Babel
- JSX => HTML보다 JavaScript에 가깝다.
- React DOM은 HTML Attribute 이름 대신, Camel-Case의 XML 요소를 사용한다.
- Babel => JSX 문법을 브라우저가 이해할 수 있는 JavaScript로 번역해주는 컴파일러
