데브원영

React에서 추천하는 데이터를 다루는 방법 redux의 시작은 view를 다루는 곳에다가 데이터까지 다루는 코드가 있는 것이 싫어서이다. 뷰는 결국, 이벤트나 데이터의 변경에 의해서 변경이 일어남. 자연스럽게 데이터에 의해서 React기반의 View부분이 다시 렌더링 될 수 있는 어떠한 장치가 있으면 좋겠다. Flux는 architecture 컨셉을 제공하는 역할을 하고, 실제 다양한 구현체가 등장했는데 대표적인 구현체가 Redux이다.(http://redux.js.org/) Redux의 원리데이터와 뷰간 직접호출을 할수도 있음.(그러나 데이터와 뷰 간의 결합도가 높다) 그림. 데이터와 뷰간 결합도가 높음 데이터와 뷰 간에 직접적인 호출을 하지 않고 이벤트가 일어났음을 알려주는 로직을 사용할 수 있음...

React-Redux를 통한 모델다루기 왜 Redux를 사용할까? Redux는 JavaScript 어플리케이션에서 data-state 와 UI-state 를 관리해주는 도구 React 개발 환경 CLI(Command Line Interface)로 빠르게 구성하기 1. 프로젝트 준비 front-end프로젝트는 framework를 쓰기 시작하면서 복잡하다. 특히 빌드해야 할 것들이 늘어나면서 환경구성과 프로젝트 디렉토리 구조를 정리하는 것이 어려움. boilerplate라고 기본환경을 제공하는 오픈소스가 꽤 있음. url : http://andrewhfarmer.com/starter-project/ 2. React 기반 기본 환경 만들기. React Create App을 쓰자. 깔고나면 매우 clean함. ..

React를 위한 추가적인 ES6 문법들React를 하기위한 ES6문법 : http://voidmainvoid.tistory.com/67 14. String enhancements123startsWith() endsWith() includes()cs 15. Array enhancements ‐ for/of1234567891011var arr = [1,2,3,undefined, null, ""]; Array.prototype.getIndex = function() {}; for ( let value of arr) { console.log(value); } //function까지 노출된다.for ( let value in arr) { console.log(arr[value]); }Colored by Colo..

React를 하기 전! ES6문법에 대해 알아야한다. ES6를 모르고 한다면 여러가지 ES6문법들이 React에 종속된 문법이라고 착각할 수도 있기 때문에 ES6문법에 대한 최소한의 이해는 필수적임. 주의점 아래 여러가지 기능들은 크롬이나 사파리에서 작동은 잘 되지만, but 제대로 지원이 되지 않을 수도 있으니 Babel(Babel.io)을 사용하여 변환하는 기능을 사용해야한다. ES2015 ES6 === ES2015 (ES2016, ES2017 ..) 개선된 Javascript 문법. ES6 Browser compatibility의 휼륭한 지원. ES6를 기반으로 한 JavaScript 생태계의 확산. 1. scope enhancements ‐ let ES6 에서는 let 키워드를 사용해서 변수를 사..