• 프론트엔드를 하기 위해서 React 공부를 시작을 했다. 리액트란 무엇인가? 또 Redux, Webpack 등 생소한 용어들에 들었다.
• Redux란 Facebook의 Flux Architecture 라이브러리의 구현체이다. 웹어플리케이션의 상태를 관리한다.

Flux Architecture

• Facebook에서 MVC의 문제를 해결할 목적으로 고안된 아키텍처로 단방향 데이터 흐름을 활용해 뷰 컴포넌트를 구성하는 React를 보완하는 역할을 한다.

• Flux Application은 Dispatcher, Store, View로 구성이 된다. Flux에서 View는 스토어에서 데이터를 가.

• Flux아키텍처는 Dispatcher, Stores, Views(React컴포넌트)로 구성이 되어있다. Model-View-Controller와 혼동하면 안된다.
• Controller는 Flux어플리케이션의 최상위에서 Controller-views - views 관계로 존재를 하고 있다.
• controller-views는 stores에서 데이터를 가져와 그 데이터를 자식에게 보내는 역할을 한다.
• Flux는 MVC와 다르게 데이터가 단방향으로 흐른다.

• React는 one-way reactive data flow라고 설명이 되어있다. 리액트의 데이터 흐름은 단방향(Parent -> Child)이다.
• 데이터는 언제나 단방향흐름으로 항상 Dispatcher -> Store -> Model -> View -> Action -> Dispatcher로 반복이 된다.

Q. JS어플리케이션은 어떻게 구조화를 할까?

• 다양한 라이브러리들이 이 문제를 해결하려고 했다.
• ReactJS는 프레임워크가 아니라 라이브러리다.

Framework, Library차이

• Framework : 프레임워크는 틀이 있어서 안에 있는 부분을 우리가 채워넣으면 된다. 틀안에서 벗어나면 안된다.
• Library : 라이브러리는 필요한곳에 갔다 쓰면 된다. 다른 라이브러리와 충돌할일도 없다.

• React : Javascript Library for Building User Interface

• 리액트가 Angular를 대체할 수 있을까? NO, 오렌지와 사과를 비교하는것이랑 비슷하다. Angular는 프레임워크다. View Layer도 포함해서. 앵귤러와 리액트를 같이 쓸 수 있다. 앵귤러는 프레임워크이고, 리액트는 라이브러리.

React Library의 핵심

• Virtual DOM : 가상돔을 사용한다는것이다.

React장점

• 배우기 간단.
• Virtual DOM을 사용
• Angular, BackBone … 다른 프레임워크를 보면 controller, directive, template, model, view model등을 사용을 하는데, 리액트는 코드를 분리시키지 않고 Component를 사용한다.
• 뛰어난 Garbage Collection을 통해 메모리관리를 한다.
• 서버 & 클라이언트 랜더링 둘다 지원을 한다.
• 검색엔진최적화(SEO)를 위해 서버사이드 렌더링이 필요하다. 클라이언트 렌더링만하면 검색엔진봇이 사이트를 수집할때, 사이트의 정보가 아닌 비어있는 요소가 된다.
• 간편한 UI와 UI를 컴포넌트화 해서 재사용할 수 있다.
• 다른 프레임워크나 라이브러리와 혼용가능(Angular, BackBone, Jquery) => 개발이 완료된 서비스에도 적용이 가능하다!!

React단점

• view only : 데이터모델링, 라우팅, Ajax등의 기능이 없다. => 빠진부분은 다른 라이브러리를 통해 구현하면 된다.
• 배우기 쉬운것은 맞지만, 러닝커브가 높다.
• IE8이하 지원X

Today’s Qustion

Q. Flux Architecture란 무엇인가? Q. DOM이란 무엇인가?

오늘의 배운점

• 리액트라는것을 처음 접해봤는데, 개념 접근을 잘못한거같다.ㅜㅜ 처음부터 Flux패턴이나 Redux에 대해서 깊이 알기보다 다른 개념을 봤어야되는데. 찾고 찾다보니 너무 맞물려서… 내일은 진짜 개념을 찾아보아야겠다. 오늘의 질문에 Flux Architecture를 적었었는데, TIL쓰다보니 자연스레 적게되었다. 내일은 쉬운 개념과 튜토리얼들을 학습해봐야겠다.