[1] React 개요
(1) Framework
완벽한 개발환경이 구축된 모형(MVC이 완벽)
초보자에게 유리합니다.
장점)
이미 구축되어 있는 상태기 때문에, 내용을 넣어주기만하면 되기 때문에 개발이 편리합니다.
단점)
내 마음대로 고쳐쓰기가 쉽지 않습니다. 잘 모르면 정해진 형식 내에서만 사용하게 됩니다.
(2) React
View 를 위한 library 입니다.
: View 부분만 존재하는 라이브러리 이며, 초보자가 다루기엔 어려움이 있습니다.
React의 특징
- 페이스북에서 리엑트 라이브러리 발표 <-> 구글에서는 앵글러를 내놨죠
- UI 상태 자동 관리 – 화면의 맨 마지막 상태만 관리
- 속도 빠른 DOM 조작(가상 DOM을 사용)
- 결합이 용이한 UI를 지원하는 API
: [포넌트끼리의 결합(중첩)이 가능합니다]- 자바스크립트로 정의하는 비주얼
: [es6문법을 주로 사용하고 typescript를 잘 사용하지 않습니다.]- MVC 구조에서의 ‘V’- 비주얼한 요소와 그 상태를 최신으로 유지하는데 중점을
둔 뷰레이어에서 작동합니다(실시간으로 변경이 가능합니다.)- 라이브러리 이기 때문에 eclipse 에서도 사용이 가능합니다. / 혹은 제공되는 개발 서버를 이용하여 독립적으로도 코딩이 가능합니다.
( VScode와 Eclipse 둘 다 써보겠습니다.)
(3) babel & webpack & webpack-dev-server
: 리액트를 설치하면서 같이 설치가 되는 의존적인 라이브러리입니다.
1) babel
ECMAScript6를 지원하지 않은 환경에서 ECMAScript syntax를 사용가능하게 설정해줍니다.
: es6을 지원해주지 않은 브라우저가 리액트를 사용해주기위해 만들어진 라이브러리
2) webpack > 프론트엔드를 한다면 굉장히 중요한 녀석입니다.
간단하게 말하자면, 모듈 번들러입니다.
: import가 가능하도록하며, 자바스크립트파일들을 하나로 합치게 합니다.앵글러 : ~.ts->~.js(앵귤러)->ng serve --open(서버가동)
리액트 : ~.js(리액트)->yarn start
: (자바스크립트파일들을 모아서 메모리에 올려서 실행)
3) webpack-dev-server
webpack에서 지원하는 간단한 개발서버입니다.
Hot-loader를 통해서 코드가 수정될때마다 자동으로 리로드 되게 할 수 있습니다.
※ npm, yarn, visualstudiocode가 설치되어 있다는 전제로 진행합니다.
[2] 환경 구축
(1) npm init - package.json
: 버전, 라이브러리 관리를 위한 json 파일입니다.
cmd 창을 열고 'react_test' 라는 폴더를 만든 후, npm init 명령어를 실행합니다.
(2) 필요한 라이브러리(디펜던시) 설치
npm install (-g) jquery
: 전역으로 설치하게 되면, package.json에 기록되지 않습니다.
type package.json
: 해당 파일의 내용을 볼 수 있습니다.
(3) install yarn / create-react-app
yarn
: facebook에서 만든 의존성 관리 javascript 패키지 매니저
create-react-app
:하나의 명령어로 react web app 을 set up 할 수 있게 하는 패키지
npm install -g yarn
npm install -g create-react-app
이제 리액트를 활용하기 위한 기본적인 설정이 끝났습니다.
