Front-End Framework 정리

1. 뷰(Vue)
- CDN 파일 로딩으로 사용, 쉬움
- 공식 라우터, 상태 관리 라이브러리 존재
- HTML파일에 마크업을 작성하는 것이 기본 설정
- 콧수염 괄호 {{ }} 로 데이터 바인딩
- Directive 라는 특별 HTML Attritbute를 이용하여 template 기능을 확장.
- data를 vue 인스턴스에서 접근해서 변경할 수 있다.
- template과 render function을 모두 사용.
- 빠른 렌더링과 더 작은 용량
- MVVM 패턴(ViewModel): 백엔드에서 넘어온 데이터를 model 에 담아 View로 넘어가는 중간 지점
- 컴포넌트 간의 직접적인 통신을 불가능하게 되어있음(하위->상위->하위 ; 이런식으로 통신해야함)
- 상태관리 라이브러리(Vuex) ;; inapp과 비슷하다고 생각됨...
- 여러 컴포넌트 간의 데이터 전달과 이벤트 통신을 한곳에서 관리하는 패턴
- state: 컴포넌트 간에 공유할 data
  - getters : 변경된 state값을 받아옴
  - mutations : state값을 변경하기 위한 메서드를 정의(setters라고 생각하면 쉬움)
- view: 데이터가 표현될 template
- actions: 사용자의 입력에 따라 반응할 methods
- 네비게이션 가드
- 뷰라우터로 특정 url에 접근할 때 해당 url의 접근을 막는 방법
- 사용자의 인증 정보가 없으면 특정 페이지에 접근하지 못하게 할때 사용하는 기술
- 전역가드 : 어플리케이션 전역에서 동작(beforeEach)
- 라우터 가드 : 특정 URL에서만 동작(beforeEnter)
- 컴포넌트 가드 : 라우터 컴포넌트 안에 정의하는 컴포넌트 가드(beforeRouteEnter, beforeRouteUpdate. beforeRouteLeave)
- v-model: Form요소 개발시 사용
- v-bind: 데이터 속성을 해당 HTML 요소에 연결할 때 사용
- v-on: 해당 HTML 요소의 이벤트를 뷰 인스턴스의 로직과 연결할 때 사용

--------------------------------

2. 리액트(React)
- Webpack 같은 모듈 번들러를 사용해서 프로젝트 구성해야함
- Component 라는 개념에 집중이 되어 있는 라이브러리
- 조합 : props와 state를 받아 html를 랜더
- props(불변)
  - 컴포넌트에 전달해주는 값
  - this.props를 통해 접근가능, 부모컴포넌트로부터 받은 데이터는 자식컴포넌트에서 프로퍼티로 사용가능
- state(가변)
  - 컴포넌트 내부적으로 들고 있는 값
- lifeCycle API
  - 컴포넌트 마운트/업데이트/언마운트 전후로 처리할 로직을 설정하거나 리렌더링을 막아줌.
- props, state가 바뀌면 컴포넌트는 리랜더링됨.
- 생태계가 넓고 사용하는곳이 많음
- 내장 기능(HTTP 클라이언트, 라우터, 심화적 상태 관리 etc)
- 페이스북에서 만듬(Virutal DOM: Model을 Mutate 하지말고 기존DOM을 날리고 새로 만든다는 관점)
- 플젝이 커질수록 빛을 발하고, 테스팅이 수월
- web과 native 앱 개발에 모두 사용 가능
- 상태관리 라이브러리(Redux, Mobx)
- 상태관리를 컴포넌트 바깥에서 하기 위해 사용
- 단방향 데이터 바인딩
- JSX
- 속성을 가진 트리 구조를 정의
- Javascript와 XML을 합침으로 탄생 - XML을 허용하기 위한 Javascript의 확장 문법
- 단순히 xml만 허용하는 것이 아닌, javascript의 변수나 프로퍼티의 값의 바인딩에 대한 추가적인 기능도 제공
- script/type="text/jsx"로 선언하거나, .jsx 파일을 include해야함.
- 주석사용 : {/* */}
- <Fragment></Fragment> 사용 : v16.2
- 기존 array 관련 메소드 사용
  - push, pop... : 사용 X
  - map, filter, concat : 사용 O
- 라우팅 : react-router, Next.js

리액트 실습 - Virtual DOM을 이용하여 필요한 경우만 DOM을 조작 <!-- React Library --> <script src="https://fb.me/react-0.13.3.js"> </script> <!-- In-browser JSX transformer --> <script src="https://fb.me/JSXTransformer-0.13.3.js"> </script> <script type="text/jsx"> var HelloWorld = React.createClass({ render: function(){ return ( <p> 안녕, <input type="text" placeholder="이름을 입력해주세요"/>! 지금 시간은 {this.props.date.toTimeString()} 입니다 </p> ); } }); setInterval(function(){ React.render( <HelloWorld date={new Date()} />, document.getElementById('test') ); }, 500); </script>

--------------------------------

3. 앵귤러(Angular)
- 구글이 지원
- Webpack 같은 모듈 번들러를 사용해서 프로젝트 구성해야함
- 웹플젝에서 필요한 도구가 내장(라우터, HTTP 클라이언트 etc)
- TypeScript와 함께 사용.
- 양방향 데이터 바인딩
- 개발자가 자신의 용도에 맞게 HTML Tag를 제작하여 사용할 수 있게 함.(커스텀 태그를 지원)
- DOM 조작이 어려움



--------------------------------

4. 백본(Backbone)
- 자바스크립트 라이브러리에 의존(underscore, jquery 에 dependancy함)
- Model-Collection-View 3가지 요소를 구성하여 웹애플리케이션을 구현
- 경량 애플리케이션에 적합
- 진입장벽이 낮음
- 일부분에 사용할때 빛을 발휘함.
- SPA(Single Page Application)에 초점을 맞춘 프레임워크
- 별도의 백엔드 환경이 필요없이, RESTFUL API구현으로 가능.
- Event, Model, Collection, Router, History, Sync, View 등의 하위모듈로 구성
- Collection
- 일종의 목록 데이터. Array형태의 JSON객체집합을 받아서 구성. 루프를 돌며 지정된 Model 형태에 맞는 인스턴스 구성
- model의 집합. view와 연결되어, model에 변화가 생길 때 손쉽게 view(UI)를 갱신할 수 있음
- Model
- Model은 Collection에 포함되는 개별 단위의 Data 객체
- 어떻게 활용하느냐에 따라 Collection 없이 단독으로 불러와서 사용할 수도 있음
- View
- 애플리케이션을 시작할 때 new 생성자를 통해 Backbone.View 객체 인스턴스를 만듬.
- 데이터 변화에 대한 표현도 Backbone.View 객체를 통해 드러냄
- DOM Element를 Backbone.View 인스턴스로 감싸는 이점은 Backbone.Model과 연동을 통해 Model의 변화에 대해 View의 변화를 자동적으로 적용시킬 있다는 점
- Model을 연동시키지 않더라도 Backbone.View가 주는 편리한 Event, Method 관리 방식을 적용시킬 수 있음
- Event
- Model이나 Collection에 on 메소드를 이용해서 손쉽게 바인딩할 수 있으며 원하는 경우 off로 unbind


--------------------------------

5. 엠버(Ember)
- 방대한 라이브러리, 서포트 네트워크
- 장기적인 프로젝트에 적합





=================================
그외 필요한사항 정리 [임시]

1. 프로미스(Promise)
- 비동기 작업이 맞이할 미래의 완료 또는 실패와 그 결과 값을 나타냄.
- 3가지 상태를 보유
- pending(대기): 이행하거나 거부되지 않은 초기 상태
- fulfilled(이행): 연산이 성공적으로 완료됨
- rejected(거부): 연산이 실패함.
- 메소드
- catch : 에러처리시 사용, 끝에 사용!
- then : promise 객체의 fullfill/reject 인스턴스를 받아서 처리.
- finallly
- IE 지원x



2. 타입스크립트(TypeScript)
- 타입(제네릭)선언이 필요한 언어


3. 언더스코어(underscore.js)
- Collection이나 Array, Object와 같은 데이터 또는 데이터 집합체에 대한 Sort, Filter, Map 등의 연산에 특화되어 있는 라이브러리
- '_' 를 사용(jQuery가 $를 사용하는것과 같은 맥락)
-

4. require.js
- 자바스크립트 파일/모듈 로더
- https://d2.naver.com/helloworld/591319