발렌타인 웨비너 7회 - React를 이용한 웹 앱 개발 살펴보기
52 likes4,343 views
이번달 발렌타인 웹비너 발표자는 안드로이드 개발자 커뮤니티 리더이신 김용욱님 입니다. 다루게 될 내용들 React Hot Module Loader Webpack Flux React Native
발렌타인 웨비너 7회 - React를 이용한 웹 앱 개발 살펴보기
- 4. React
- 5. JSXTransformer에서 Babel로 • JSXTransformer는 폐기됩니다. • https://facebook.github.io/react/blog/2015/07/03/ react-v0.14-beta-1.html • 대신에 브라우저 버전의 Babel을 사용하세요. • Babel has a built-in JSX transpiler. • https://babeljs.io/docs/usage/browser/
- 6. • npm install babel-core • <script src=“JSXTransformer.js”> 대신 <script src=“browser.js”>을 쓰세요. • type=“text/jsx"대신 type=“text/babel”을 쓰세요.
- 7. Hello
- 9. Composition
- 10. Prop Validation
- 12. Default Prop
- 13. Mixins
- 14. 폼 • 폼 컴포넌트는 사용자 상호작용을 통해 영향을 받는 몇 가지 props를 지원합니다. • value: <input>, <textarea> 컴포넌트에서 사용가능. • checked: checkbox, radio타입의 <input> 컴포넌트에서 사용가능. • selected: <option> 컴포넌트에서 사용가능. • HTML에서는 <textarea> 태그의 값을 설정할 때 <textarea> 태그의 자식이 사용되지만, React에서는 value 를 사용해야 합니다. • 폼 컴포넌트는 onChange prop의 콜백을 설정하여 변경을 감시(listening)할 수 있습니다. onChange prop는 브라우저에 관계없이 다음과 같은 사용자 상호작용에 반응합니다. • <input>, <textarea>의 value 변경. • <input>의 checked state 변경. • <option>의 selected state 변경.
- 16. findDOMNode와 refs
- 17. ES6 class 오토 바인딩과 믹스인이 안되는 단점은 있음.
- 19. React.Component + Auto Binding
- 20. ES6 + Manual bind
- 21. ES7
- 22. =>
- 23. Animation
- 24. 생명주기 • Mounting • getInitialState() • componentWillMount() • componentDidMount() • Updating • componentWillReceiveProps(object nextProps) • shouldComponentUpdate(object nextProps, object nextState) • componentWillUpdate(object nextProps, object nextState) • componentDidUpdate(object prevProps, object prevState) • Unmounting • componentWillUnmount()
- 29. 개발도구 • React Devtools • https://github.com/facebook/react-devtools • https://chrome.google.com/webstore/detail/react- developer-tools/fmkadmapgofadopljbjfkapdkoienihi • https://addons.mozilla.org/en-US/firefox/addon/react- devtools/ • 프로파일러 - http://reactkr.github.io/react/docs/perf-ko- KR.html
- 31. 왜 Virtual DOM인가요? • 비교조정에 대한 글: https://facebook.github.io/react/ docs/reconciliation-ko-KR.html • 개발자가 기고한 글: http://calendar.perfplanet.com/ 2013/diff/
- 33. 우린 Redux로 갑니다. Flux + Elm + 향상된 DX http://staltz.com/ unidirectional-user-interface- architectures.html
- 34. Redux demo • http://rackt.github.io/redux/docs/introduction/ Examples.html#counter • reducers와 actions을 살펴봄. (훨씬 심플하죠?)
- 35. Hot module replacement demo • https://robots.thoughtbot.com/setting-up-webpack- for-react-and-hot-module-replacement
- 36. React route demo • http://jmfurlott.com/tutorial-setting-up-a-single- page-react-web-app-with-react-router-and- webpack/
- 37. React isomorphic demo • http://jmfurlott.com/tutorial-setting-up-a-simple- isomorphic-react-app/
- 39. React Native demo • https://facebook.github.io/react-native/
- 41. react.careers
- 42. react.rocks
- 43. 참고 • React 한글 버전 문서: http://reactkr.github.io/react/docs/getting-started- ko-KR.html • Flux 한글 버전 문서: http://haruair.github.io/flux/docs/ overview.html#content • 페이스북 그룹 React Korea와 Reactist