[Angularjs 도입 선택 가이드]
본 문서는 네이버 개발자 블로그 hello world 를 통해서 공개되었습니다.
[문서개요]
이 문서는 AngularJS를 사용한 애플리케이션 개발을 계획하고 있거나 AngularJS 도입을 고려 중일 때 참고 할 만한 내용을 기술한다. AngularJS를 사용하는 방법을 다루지는 않는다.
이 문서의 모든 내용은 AngularJS 버전 1.3.x를 기준으로 작성되었다.
1. 자바빈
[1995년] JAVA 탄생, 애플릿의강력함에매력
[1996년12월] Sun MicroSystems에서 자바빈1.0 명세발표, (자바를 위한 소프트웨어 콤포넌트 모델을 정의) 자바빈즈는 너무 단순했고, 개발자는 엔터프라이즈 개발자들은 좀 더 나은 것을 원함. 정교한 애플리케이션은 트랜잭션 지원, 보안, 분산컴퓨팅같은 서비스가 필요한데 반해 자바빈즈는 너무 단순함
[1998년3월] EJB 1.0 발표. EJB는엔터프라이즈급의 서비스를 제공하고 자바 콤포넌트의 사상을 서버측으로 확장했지만 원래의 자바빈즈가 가지고 있던 단순함은 잃어버림. 성공한 많은 애플리케이션이 EJB를 기반으로 구축되었음에도 EJB는본래 의도와 달리 엔터프라이즈 애플리케이션 개발을 단순화하지는 못함. 모든버전의EJB 명세에는“EJB는엔터프라이즈 애플리케이션의 작성을 쉽게 해준다” 라고 되어있다. EJB의 선언적 프로그래밍 모델이 트랜잭션, 보안과 같은 개발의 기반 구조의 여러 측면을 단순화했지만 배치설명자(Deployment Descriptor), 홈 인터페
이스, 원격인터페이스 등과 같은 과도한 코드를 기술하도록 함으로써 복잡성을 가중시켰고 시
간이 지날수록 개발자들은 환멸을 느꼈으며 결국 EJB 명성은 쇠퇴하기 시작했다.
안드로이드 웹뷰의 모든것
이형욱
NAVER / Whale Core
웨일 브라우저 TL로 웨일 브라우저 개발 및 관련 기술을 연구하고 있습니다. 웹엔진 (WebKit, Blink) 오픈소스 활동을 하고 있으며, 현재 브라우저 렌더링 성능 및 메모리 최적화에 관심이 있습니다.
[Angularjs 도입 선택 가이드]
본 문서는 네이버 개발자 블로그 hello world 를 통해서 공개되었습니다.
[문서개요]
이 문서는 AngularJS를 사용한 애플리케이션 개발을 계획하고 있거나 AngularJS 도입을 고려 중일 때 참고 할 만한 내용을 기술한다. AngularJS를 사용하는 방법을 다루지는 않는다.
이 문서의 모든 내용은 AngularJS 버전 1.3.x를 기준으로 작성되었다.
1. 자바빈
[1995년] JAVA 탄생, 애플릿의강력함에매력
[1996년12월] Sun MicroSystems에서 자바빈1.0 명세발표, (자바를 위한 소프트웨어 콤포넌트 모델을 정의) 자바빈즈는 너무 단순했고, 개발자는 엔터프라이즈 개발자들은 좀 더 나은 것을 원함. 정교한 애플리케이션은 트랜잭션 지원, 보안, 분산컴퓨팅같은 서비스가 필요한데 반해 자바빈즈는 너무 단순함
[1998년3월] EJB 1.0 발표. EJB는엔터프라이즈급의 서비스를 제공하고 자바 콤포넌트의 사상을 서버측으로 확장했지만 원래의 자바빈즈가 가지고 있던 단순함은 잃어버림. 성공한 많은 애플리케이션이 EJB를 기반으로 구축되었음에도 EJB는본래 의도와 달리 엔터프라이즈 애플리케이션 개발을 단순화하지는 못함. 모든버전의EJB 명세에는“EJB는엔터프라이즈 애플리케이션의 작성을 쉽게 해준다” 라고 되어있다. EJB의 선언적 프로그래밍 모델이 트랜잭션, 보안과 같은 개발의 기반 구조의 여러 측면을 단순화했지만 배치설명자(Deployment Descriptor), 홈 인터페
이스, 원격인터페이스 등과 같은 과도한 코드를 기술하도록 함으로써 복잡성을 가중시켰고 시
간이 지날수록 개발자들은 환멸을 느꼈으며 결국 EJB 명성은 쇠퇴하기 시작했다.
안드로이드 웹뷰의 모든것
이형욱
NAVER / Whale Core
웨일 브라우저 TL로 웨일 브라우저 개발 및 관련 기술을 연구하고 있습니다. 웹엔진 (WebKit, Blink) 오픈소스 활동을 하고 있으며, 현재 브라우저 렌더링 성능 및 메모리 최적화에 관심이 있습니다.
SK텔레콤 개발자센터 T developers의 개발자 포럼
T API Day 1st, ICT노믹스 시대를 향한 T API 활용
------------------------------------------------------------------------------
Session 1. SKT의 API 오픈 전략 및 T API 소개
WebRTC 기술 및 활용 | 최진호 매니저 (SK텔레콤)
------------------------------------------------------------------------------
브라우저에 별도 프로그램 설치 없이도 화상회의나 영상대화 서비스를 플러그인 없이 구현해 줄 WebRTC 기술을 개발중인 최진호 매니저는 SKT의 WebRTC 브랜드 PlayRTC를 소개하고, 누구나 쉽고, 빠르고, WebRTC 개발환경을 안정적으로 구현할 수 있음을 발표하였습니다.
------------------------------------------------------------------------------
https://developers.sktelecom.com/
A talk on the React.js library, covering the two key principles of react: reusable components and statelessness in your UI. Also covers some internals of the virtual DOM.
Helsinki.fi:n -verkkosivu-uudistus on ollut Suomessa yksi viime vuosien suurimmista. Úudistus kasvatti yliopiston digitaalista vaikuttavuutta ja kehitti projektitoimintaa ketterämmäksi. Lisätietoja hankkeesta ja projektitoiminnasta @HelsinkiUniUX ja #HelsinkiUniAgile.
An introduction to React, the javascript framework from Facebook. Talk done at Fullstack.JS, a London Meetup.
http://www.meetup.com/Fullstack-js-London/events/221009614/
2016 is going to be the year of Virtual DOM. React.js one of the most popular implementation of Virtual DOM. But this time we won't focus on React.js. We will be focusing on what is the concept of Virtual DOM, what's the benefits, and how to use it without React.js. All of those concepts will help you understand this newest DOM manipulation technique and better work with any Virtual DOM implementations such React.js.
From Back to Front: Rails To React FamilyKhor SoonHin
ReactJS, Flux, RelayJS, GraphQL, challenges the way we think & code front-end. This presentation explains what they are, how they work together, and how to get them to work on Rails.
In React/Flux, every time a user interaction triggers a change in a piece of data, the entire set of data for all the pieces of UI flows uni-directionally from the top-level UI to its subcomponents. This strategy helps debugging tremendously since by examining data at a single point we can reason about what when wrong.
RelayJS/GraphQL abstracts the difficult parts of fetching data and caching for UIs into a framework enabling us to simply declare data that we need without having to write AJAX or deal with asynchronous code. This allows us to reduced the server-side to a single API endpoint capable of handling the GraphQL DSL.
Workshop sobre React Native realizado pela Vizir Software Studio (http://www.vizir.com.br) para Natura.
OVERVIEW
Desenvolvimento nativo
Desenvolvimento híbrido
Frameworks disponíveis
Ionic
NativeScript
Xamarin
React Native
REACT & REACT NATIVE
Componentes
React Components
Lifecycle
Tudo pode ser Javascript
JSX
CSS em JSON
Virtual DOM
Benefícios
Futuro
REACT NATIVE
Componentes & APIs
Comunidade
Utilizando bibliotecas nativas
Comportamentos específicos de cada plataforma
Ferramentas
Code Push
RNPM
BOAS PRÁTICAS
Fluxo de dados da aplicação
Testando seus componentes
Como estruturamos as aplicações
GITHUB SAMPLE APP
https://github.com/Vizir/ReactNativeWorkshop
AngularJS 2는 올해 릴리징된 프론트엔드 도구 중 가장 쿨하고 섹시한 도구라고 독자는 믿고있습니다.
AngularJS 2를 실무환경에 적용함으로 얻는 이점.
AngularJS 2와 1의 차이점과 성능.
그리고 ReactJS와 AngularJS 2를 비교하여 퍼포먼스 데이터를 보여줍니다.
마지막으로 AngularJS 2 사용을 위한 번들러(Bundler) 그 중 Webpack, Systemjs, JSPM에 대해서도 안내합니다.
해당 자료는 XECon 2016에 발표되었습니다.
Create App Easier With SVC Pattern - DroidKnights 2019 @SeoulBansook Nam
Suggest a new pattern "How to divide your Activity & Fragment".
Shows "Lotto - App" sample.
Youtube: https://www.youtube.com/watch?v=_-yZPjf9HLo
Hope it would help to understand Andoird Architecture Pattern.
6. 6
02
2 MVC패턴과 React 차이
React 특징
VIEW
CONTROLLER
MODEL
• 예시) 쇼핑몰에서 장바구니에 상품 넣기
7. 7
02
2 MVC패턴과 React 차이
React 특징
• 예시) 쇼핑몰에서 장바구니에 상품 넣기
VIEW
CONTROLLER
MODEL
View에만 초점을 맞췄습니다
MC를 원한다면
Angular 같은 MVC프레임워크와
함께 쓸 수 있습니다
UI 구현하기 좋습니다
8. 8
03 React 의 장/단점
1 React의 장/단점
장점 단점
- Virtual DOM을 JS로 구현해서 UI Component의
속도가 엄청 빠릅니다.
- Component의 재사용과 복잡한 UI 컴포넌트
조합이 가능
- Uni-direction(단방향) 방식하에 데이터가 변경되면
관련된 모든 UI 컴포넌트가 변경됩니다.
11. 11
01
Virtual DOM
1 Virtual DOM 정의
• ReactElement / ReactElement Factory
• ReactNode
• ReactComponent / ReactComponent Class
var MyComponent = React.createClass({
render: function() {
…
return (
…
);
});
var component = new MyComponent();
위와 같이 생성자를 직접 호출할 필요가 없습니다.
React가 알아서 호출해줍니다.
주의
23. 23
01
1 ComponentLifecycle
Component Lifecycle
• componentWillMount() : 컴포넌트 생성 전
• componentDidMount() : 컴포넌트 생성 후
• componentWillReceiveProps() : 새로운 props 받기 전
• shouldComponentUpdate() : 컴포넌트 업데이트 여부
• componentWillUpdate() : 컴포넌트 업데이트 전
• componentDidUpdate() : 컴포넌트 업데이트 후
• componentWillUnmount() : 컴포넌트 소멸 전
2013년 6월
ReactJS(JS를 빼고 React라고 부르기도 한다)는 JSX라는 자바스크립트의 확장 문법을 통해 XHP와 유사한 기능을 제공하고 있습니다.
- 단방향데이터흐름
이해하기 쉽다(데이터의 흐름이 일방 통행이라 이해하기가 쉽다. 상위 컴포넌트 -> 하위 컴포넌트)
하위 컴포넌트의 변화는 이벤트를 통해 감지한다.(상위 컴포넌트는 하위 컴포넌트에 이벤트를 추가해 이벤트 감지)
React는 UI구현에 특화된 Framework입니다.
솔직히 코드는 많이 길어졌지만 훨씬 알아보기 쉬워졌습니다.
- ReactElement
ReactElement객체는 React.createElement를 통해 만들 수 있습니다.
var root = React.createElement('div');
DOM에 새로운 트리를 렌더링하기 위해서는 ReactElement를 만들고 DOM Element (HTMLElement 또는 SVGElement)와 함께 React.render에 넘깁니다. ReactElement를 DOM Element와 혼동해서는 안됩니다. ReactElement는 DOM Element의 가상 표현입니다. 즉 가상 DOM입니다.
React.render(root, document.getElementById('example'));
DOM 엘리먼트에 프로퍼티를 추가하려면 두번째 인자로 프로퍼티 객체를, 세번째 인자로 자식을 넘깁니다.
var child = React.createElement('li', null, 'Text Content');
var root = React.createElement('ul', { className: 'my-list' }, child);
React.render(root, document.getElementById('example'));
- ReactNode
ReactNode는 다음 중 하나가 될 수 있습니다
이들은 자식을 표현하기 위해 다른 ReactElement의 프로퍼티에 사용됩니다. 사실상 이들이 ReactElement의 트리를 형성합니다.
- ReactComponent
ReactElement만 가지고도 React를 사용할 수는 있지만, React의 장점을 제대로 활용하려면 ReactComponent를 사용하여 상태를 가진 캡슐화된 객체를 만들기를 원할 것입니다.
ReactComponent 클래스는 그냥 JavaScript 클래스 (또는 "생성자 함수")입니다.
var MyComponent = React.createClass({
render: function() {
...
}
});
이 생성자가 호출될 때 최소한 render 메소드를 가진 객체를 리턴해야 합니다. 이 리턴된 객체를 ReactComponent라고 부릅니다.
var component = new MyComponent(props); // 절대 하지 마세요
테스트 목적이 아니라면 절대 이 생성자를 직접 호출하지 마십시오. React가 알아서 호출해줍니다.
대신 ReactComponent 클래스를 createElement에 넘겨 ReactElement를 받을 수 있습니다.
var element = React.createElement(MyComponent);
React의 경우는 setState가 호출되면 그 컴포넌트와 하위 컴포넌트가 다시 랜더링되는 대상이 됩니다. 이 말을 듣게 되면 매번 광범위하게 DOM이 갱신된다고 느껴지지만 React에서는 VirtualDOM이라고 하는 형태로 메모리상에 DOM의 상태를 유지하고 있고 전/후 상태를 비교하여 달라진 부분만 실제 DOM에 반영합니다. CSS도 마찬가지로 객체 형식으로 지정해 변경된 style만 갱신합니다.
HTML은 태그가 제대로 닫히지 않아도 에러가 발생하지 않지만 JSX는 태그를 닫지 않은 경우 에러가 발생하므로 문법 문제를 쉽게 알아차릴 수 있습니다.
- JSX 사용의미
JSX를 사용하면 HTML 문법과 비슷한 느낌으로 작성할 수 있어 비엔지니어도 이해하기 쉽다는 장점이 있습니다. 개인적인 성향 차이가 있다고는 하지만 개인적으로 React.DOM.div(null, ‘hello’) 보다 <div>hello</div>와 같은 방식이 더 좋다고 생각합니다. 또, 버전 0.12는 버전 0.11에 비해 React.createClass의 동작 방식(인터페이스)이 바뀌었지만(이것에 관한 내용은 다음 절에서 소개하겠습니다.) JSX를 사용하고 있는 경우엔 코드를 그대로 사용 가능합니다. 즉, JSX에 대한 지원이 조금 더 좋습니다. JSX를 사용했을 때의 이 점은 이 정도로 생각하고 있으므로 자바스크립트로 작성하고 싶은 사람은 굳이 JSX를 사용하지 않아도 괜찮을 것 같습니다. JSX 이외로 커피스크립트 환경을 고려해 만들어진 react-kup도 있습니다.
- JSX를 사용하지 않을 경우
return React.DOM.div({className: 'container', 'Hello ' + this.props.name);
React.render(React.createFactory(Hello)({name: 'React'}), document.getElementById("app"));
- createClass
React.createClass()는 컴포넌트를 작성할 때 사용하는 함수입니다.
- setState
유저의 액션이나 Ajax 요청 등으로 값이 동적으로 변화하는 경우는 State를 사용합니다. 특정 this.state.xxx을 갱신할 때는 this.state를 사용해 갱신하는 것이 아니라 반드시 this.setState를 사용해 갱신합니다.
절대로 this.state를 직접 변경하지 않는 것이 좋습니다. 그 뒤에 setState()를 호출하면 그동안 변경했던 것이 교체될 수 있습니다. this.state는 변경 불가능한 것으로 생각하시는 것이 좋습니다.
setState()를 호출해도 this.state가 곧바로 변경되지 않고 대기 중인 state transition이 만들어집니다. 이 메소드를 호출한 직후 this.state에 접근하면 바뀌기 전의 값을 리턴할 가능성이 있습니다.
setState에 대한 호출이 동기적으로 처리된다는 보장이 없으며, 성능 향상을 위해 배치 처리될 수 있습니다.
setState()는 shouldComponentUpdate()에 조건부 렌더링 로직이 구현되어 있지 않다면 항상 재렌더링을 발생시킵니다. 변경 가능한 객체를 사용하고 있고 조건부 렌더링 로직을 shouldComponentUpdate()에 구현할 수 없는 경우라면 새로운 state가 이전 state와 달라지는 경우에만 setState()를 호출하여 불필요한 재렌더링을 피할 수 있습니다.
- I/F(인터페이스)로써의 Prop
Prop은 외부에서 전달한 값이지 그 컴포넌트가 자체적으로 관리하는 값이 아니므로 내부에서 변경하면 안 됩니다.. 즉, Prop은 불변하며 외부와 I/F로써 작용합니다. 컴포넌트가 관리할 필요가 있는 값은 State로 정의해야 합니다. State는 Prop다음에 설명드리겠습니다.
setProps()은 기존의 Prop과 새로운 Prop을 합칩니다.(merge) 그리고 각각 두 번째 인수에 콜백 함수를 지정할 수 있습니다.
getInitialState()을 이용해 state의 초기값을 반환하고 데이터 변경이 있는 경우 this.setState()로 갱신합니다. 상태가 갱신되면 컴포넌트가 rerender 되어 UI가 갱신됩니다. 이때, 자식 컴포넌트도 함께 rerender 됩니다. setState()의 두 번째에 인수에는 setProps() 처럼 콜백 함수를 지정할 수 있습니다. state의 값을 프로퍼티로 접근해 직접 변경하면 안 되고 반드시 setState()를 사용해 갱신해야 합니다. 이는 setState()가 호출되어야 rerender 되기 때문입니다. this.state 값 자체도 Immutable 하다라고 생각하는 것이 좋습니다. 만약, this.state.list라는 배열이 있고 list에 요소를 추가하고 싶은 경우도 push()하고 setState()하는 것이 아니라 this.setState({list: this.state.list.concat([value]})로 새로운 값(배열)을 지정하는 것이 좋습니다. 이 방법이 shouldComponentUpdate()로 성능 최적화 할 때와 undo의 구현 시에 좀 더 유용합니다.
- State는 최소화
Prop만 가지고 있는 Immutable한 컴포넌트가 조작하거나 이해하기 쉬우므로, 기본적으로는 Prop을 고려하고, State를 가진 컴포넌트는 최소화 하는 게 좋습니다. 최상위 컴포넌트만 State를 갖게 하고, 하위 컴포넌트는 전부 Prop만을 가지는 Immutable한 컴포넌트로 구성하여 어떤 변경이 있을 때 최상위 컴포넌트에서 setState()하여 rerender 하는 설계도 가능합니다.
State의 초기값을 Prop에서 전달해야 하는 경우의 예시입니다. prop과 state는 컴포넌트에서 데이터와 상태를 관리하는 데 중요한 속성입니다.
자주 사용하는 메서드는 componenetDidMount()나 componentWillUnmount() 입니다. componentDidMount()에서 이벤트를 등록하고 componentWillUnmount()에서 이벤트를 해제하는 패턴을 많이 사용합니다.
- componentWillMount()
컴포넌트가 DOM 트리에 추가되기 전 한 번만 호출됩니다. Server-side rendering 시에도 호출되므로 어느 쪽에서도 동작할 수 있는 코드를 작성해야합니다. DOM을 컨트롤 하는 브라우저에서만 동작하는 로직을 작성하면 안됩니다. Node.js 환경에서는 DOM이 없으므로 에러가 발생하게 됩니다.
- componentDidMount()
컴포넌트가 DOM 트리에 추가된 상태에 호출됩니다. DOM과 관련된 초기화를 하고 싶을 때 편리하게 사용할 수 있습니다. componentWillMount()와 다른 게 Server-side rendering 시에 호출되지 않습니다.
DOM을 다루는 처리 외에, Ajax 요청이나 setInterval 등의 Server-side rendering 시에는 불필요한 초기화 처리는 이 메서드를 통해 진행합니다.
- shouldComponentUpdate()
이 메서드는 다른 메서드 Lifecycle 메서드와 달리 true나 false를 반환할 필요가 있습니다. 컴포넌트가 rerender 하기 전에 호출되며, 만약 false를 반환하면 VirtualDOM 비교를 하지 않고 rerender도 하지 않습니다. 즉, 독자적으로 Prop이나 State 비교 처리를 구현하는 것으로 불필요한 계산을 하지 않을 수 있습니다. 보통 성능 향상을 목적으로 사용합니다. 이 메서드가 반환하는 기본값은 true 이므로 재정의 하지 않으면 항상 rerender 합니다. 강제적으로 rerender 하고자 할땐 forceUpdate()를 사용합니다. forceUpdate()가 호출되는 경우엔 shouldComponentUpdate()는 호출되지 않습니다.
- componentWillUnmount()
컴포넌트가 DOM에서 삭제될 때 호출됩니다. 이벤트 해제 같은 clean-up 처리 시 할 때 사용합니다. componentDidMount()에서 등록한 Timer의 처리나 DOM의 이벤트 등은 여기에서 해제해야 합니다.
DEWS 숫자텍스트박스를 구현해보았는데 그 때, spinnerButton을 구현한게 생각나 React를 이용하여 spinnerButton을 구현해보았습니다.