MVVM 과 Grab Architecture
: MVVM 에 가기 위한 여행기
정승욱
Grab / 안드로이드 개발
약 8년 경력의 안드로이드 엔지니어로써 TDD, App Architecture, CI/CD 등 다양한 기술 공유 활동을 하였습니다. 현재는 싱가포르에서 동남아의 Car-Hailing 서비스, Grab Taxi에서 Geo Android Tech Leader로 일하고 있으며 Google Developer Experts Android Singapore로 활동하고 있습니다.
Polymer의 기술기반인 Web Componets를 구성하는 표준 스펙들인 Custom Elements, HTML Imports, HTML Templates 그리고 Shadow DOM을 간략히 살펴본다.
Polymer의 아키텍처 및 기본적인 사용방법 그리고 material design이 적용된 paper elements 등을 살펴본다.
MVVM 과 Grab Architecture
: MVVM 에 가기 위한 여행기
정승욱
Grab / 안드로이드 개발
약 8년 경력의 안드로이드 엔지니어로써 TDD, App Architecture, CI/CD 등 다양한 기술 공유 활동을 하였습니다. 현재는 싱가포르에서 동남아의 Car-Hailing 서비스, Grab Taxi에서 Geo Android Tech Leader로 일하고 있으며 Google Developer Experts Android Singapore로 활동하고 있습니다.
Polymer의 기술기반인 Web Componets를 구성하는 표준 스펙들인 Custom Elements, HTML Imports, HTML Templates 그리고 Shadow DOM을 간략히 살펴본다.
Polymer의 아키텍처 및 기본적인 사용방법 그리고 material design이 적용된 paper elements 등을 살펴본다.
Angular2는 컴포넌트 중심의 개발 접근 방식에 대한 내용을 가집니다. 따라서 본 슬라이드도 컴포넌트 중심의 개발 접근 방식으로 Angular2를 바라보았습니다.
대략적인 내용은 다음과 같습니다.
- Angular2 History
- Angular2 핵심구성요소
- 컴포넌트 중심의 개발
- Angular2 주요개념
- Type Script에대한 설명
- 기타
필요하신 분에게 도움이 되었으면 좋겠습니다. 관련 코드는 다음 주소에 공유하였습니다.
https://github.com/DaeguDevGroup/angular2-bootstrap
- 내용이 업데이트되거나, 추가되면 설명에 이력을 남기겠습니다.
- 본 슬라이드에 오류가 있다면 코멘트 바랍니다.
*Change Log*
- 2016-05-14 : 슬라이드 첫 버전을 업로드
Session 4 - 최효석 React Hooks 마법. 그리고 깔끔한 사용기
2019년 9월 6일 네이버 쇼핑 개발자 meet up 행사인 'SHOWROOM' 에 발표된 자료입니다.
보다 자세한 내용은 http://nshop-developer.github.io 을 참고해주세요.
(2019년 9월 30일 오후 오픈 예정)
GDG DevFest 2017 Seoul 프론트엔드 모던 프레임워크 낱낱히 파헤치기Kenneth Ceyer
GDG DevFest 2017 Seoul
프론트엔드 모던 프레임워크 낱낱히 파헤치기 세션의 발표자료입니다.
이 발표자료에서는 여러분이 항상 궁금해 하신
프론트엔드 프레임워크의 삼총사
Angular, React, VueJS를 다차원적으로 깊이있게 비교하고 각각의 이점과 특화된 기능을 소개하고 있습니다.
이러한 프레임워크를 경험해보지 못한 분들을 위해 프레임워크 별로 특징부터 쉽게 접근하여 설명하기 때문에 경험 불문하고 가볍게 읽어 보실 수 있습니다.
Angular2는 컴포넌트 중심의 개발 접근 방식에 대한 내용을 가집니다. 따라서 본 슬라이드도 컴포넌트 중심의 개발 접근 방식으로 Angular2를 바라보았습니다.
대략적인 내용은 다음과 같습니다.
- Angular2 History
- Angular2 핵심구성요소
- 컴포넌트 중심의 개발
- Angular2 주요개념
- Type Script에대한 설명
- 기타
필요하신 분에게 도움이 되었으면 좋겠습니다. 관련 코드는 다음 주소에 공유하였습니다.
https://github.com/DaeguDevGroup/angular2-bootstrap
- 내용이 업데이트되거나, 추가되면 설명에 이력을 남기겠습니다.
- 본 슬라이드에 오류가 있다면 코멘트 바랍니다.
*Change Log*
- 2016-05-14 : 슬라이드 첫 버전을 업로드
Session 4 - 최효석 React Hooks 마법. 그리고 깔끔한 사용기
2019년 9월 6일 네이버 쇼핑 개발자 meet up 행사인 'SHOWROOM' 에 발표된 자료입니다.
보다 자세한 내용은 http://nshop-developer.github.io 을 참고해주세요.
(2019년 9월 30일 오후 오픈 예정)
GDG DevFest 2017 Seoul 프론트엔드 모던 프레임워크 낱낱히 파헤치기Kenneth Ceyer
GDG DevFest 2017 Seoul
프론트엔드 모던 프레임워크 낱낱히 파헤치기 세션의 발표자료입니다.
이 발표자료에서는 여러분이 항상 궁금해 하신
프론트엔드 프레임워크의 삼총사
Angular, React, VueJS를 다차원적으로 깊이있게 비교하고 각각의 이점과 특화된 기능을 소개하고 있습니다.
이러한 프레임워크를 경험해보지 못한 분들을 위해 프레임워크 별로 특징부터 쉽게 접근하여 설명하기 때문에 경험 불문하고 가볍게 읽어 보실 수 있습니다.
Spring Framework & MyBatis_ 스프링프레임워크 & 마이바티스
☆ 무.료 강의자료 제공 中 ★
♡ 좋아요! 하고 더많은 자료 받아보세요 :) :) :) :) !!!!
[ 제 2장 ] _ Spring IoC & DI
[ 목 차 ]
2.5 Spring DI(Dependency Injection)
2.5.1 세터 주입(Setter Injection) – XML 기반
2.5.2 세터 주입(Setter Injection) – 어노테이션 기반
2.5.3 생성자 주입(Constructor Injection) – XML 기반
2.5.4 생성자 주입(Constructor Injection) – 어노테이션 기반
2.5.5 메소드 주입(Method Injection)
2.5.5.1 Method Injection(Method Replace)
2.5.5.2 Method Injection(Getter Injection)
2.5.6 Simple Value Injection
2.5.7 SpEL을 이용한 Value Injection(XML 방식)
2.5.8 SpEL을 이용한 Value Injection(어노테이션 방식)
2.5.9 ref 태그를 이용한 Value Injection
(ref local, ref bean, id, name의 차이)
2.5.10 스프링에서 XML 설정 파일의 분리
2.5.11 ApplicationContext의 분리(부모, 자식)
2.5.12 컬렉션 주입(Collection Injection), XML 방식
2.5.12 컬렉션 주입(Collection Injection), 어노테이션 방식
[#더많은자료, #꿀강의, #꿀강좌, #구로오라클학원 #탑크리에듀]
http://www.topcredu.co.kr/
이미지 프로세싱 in Python Open Source - PYCON KOREA 2020Kenneth Ceyer
파이썬의 이미지 프로세싱은 Computer Vision과 Deep Learning 연구자들과 개발자들이 많이 사용하고 있으며,
라이브러리 생태계는 지속적으로, 발전하고 있고 요구되고 있습니다.
하지만, 여전히 오픈 소스 생태계에서 제공되는 라이브러리들의 기능으로는 섬세한 이미지 편집을 지원하지 못합니다.
즉 앞으로도 꾸준히 파이썬 이미지 프로세싱 라이브러리의 생태계는 기여와 발전이 필요합니다.
저는 유연하고 자유로운 이미지 편집을 파이썬에서 수행하기 위해 Pillow와 Wand, OpenCV를 병행하여 사용하였으며,
때로는 지원하지 않는 기능이나 버그로 인해 오픈 소스 생태계의 코드를 직접 수정하고 기여한 적이 있습니다.
이를 위해서 이미지 프로세싱의 깊은 이해를 바탕으로, 이미지 프로세싱 코드를 직접 다루어야 했습니다.
오늘 여러분에게 제가 겪었던 경험과 시행착오들을 짧고 간결하게 정리하여 공유드리고자 합니다.
저의 경험을 양분으로 여러분에게 어떤 인사이트가 되었으면 좋겠습니다.
Let's look at the LP algorithm for finding the optimal solution with an example.
LP is a methodology for solving problems in the form of first-order functions with objective functions and constraints
AI 연구자를 위한 클린코드 - GDG DevFest Seoul 2019Kenneth Ceyer
올바른 코드 작성을 고민하는 연구자들을 위하여 - 클린코드는 여러분의 코드를 복잡한 패턴으로 구현하여 시간을 잡아먹는, 겉만 화려한 장식이 아닙니다. 모델을 구현하고, 또 그것을 테스트 할 때 이것이 정말 올바른 코드인지 궁금하셨나요? 이 세션에서는 연구 모델을 작성할 때 발견할 수 있는, 빈번한 코드 악취(Code smell)들과, 그것들을 어떻게 없앨 수 있을지에 대해서 알아봅니다. 코드에 영혼을 불어넣고, 그 어떤 코드라도 부끄럽지 않게 구현할 수 있는 연구자들이 되어봅시다!
gRPC와 goroutine 톺아보기 - GDG Golang Korea 2019Kenneth Ceyer
우리가 마법으로만 알고 사용하고 있었지만,
어느날 우연히 그 원리가 미칠듯이 궁금하진 않으셨나요?
가끔씩 몸에 좋다고 먹는 홍삼 진액이, 비싼돈 주고산 아카시아 꿀이
대체 어떻게 몸에 좋은 것인지 위키에 검색해보고 싶진 않으셨나요?
고 언어에는 고루틴(Goroutine)과 gRPC가 있습니다.
우리가 이 두가지의 테크닉을 사용하건 하지 않건 한번 쯤 좋다고 들어봤을 것입니다.
대체 이 마법과도 같은 기능이 어떤 원리로 구성되어 있을까요?
이 세션에서 우리는 다시 초심으로 돌아와
순수한 마음으로 이 두가지의 테크닉의 심연을 들여다봅시다.
그리고 다른 언어들은 이런 기능을 어떻게 대체하고 있을지 살펴봅시다.
Let's check the basic of "how to use Vim".
And there are tricks to use Vim easier by downloading the plugin.
These fundamental guide slides which be able to use Vim editor by just a few knowledge.
The `Right way` of testing and refactoring is so ambiguous to put in the real world, Especially, Business situation.
Let's look in deep the testing and refactoring at the perspective of a developer who works for a business situation.
데이터시각화를 바라보는 데이터 사이언티스트, 엔지니어, 마케터간의 관점들이 서로 다릅니다.
이 슬라이드에서는 엔지니어 관점에서 중요시 하는 키워드들, 설계 관점에서의 데이터시각화,
그리고 비즈니스인텔리전스(Business Intelligence)에 대해서 소개드리고 있습니다.
이 발표자료는 데이터 야놀자에서 소개되었습니다.
Dealing with Python Reactively - PyCon Korea 2017Kenneth Ceyer
More sample code is available at:
https://github.com/KennethanCeyer/pycon-kr-2017
When developing with Python
Do you have any memory overflows, or the order of the process is in the wrong order?
Reactive programming helps you easily define and recycle complex data flows from a new perspective.
The Generators and Coroutines are designed to light up a huge stream of data and handle it the way you want. Of course, the processing time does not increase!
We will share to you how to make your code more efficient by using about the mentioned features for lunch at the upcoming FICON Korea 2017, Sunday 13th.
더 많은 샘플코드는 아래 주소에서 보실 수 있습니다.
https://github.com/KennethanCeyer/pycon-kr-2017/blob/master/README-KR.md
파이썬으로 개발을 진행할 때
메모리가 넘쳐흐르거나 프로세스 진행 순서가 엉망인 경험 없으세요?
리액티브 프로그래밍은 복잡한 데이터 흐름을 새로운 관점에서 쉽게 정의하고 재활용 할 수 있도록 도와줍니다.
또한 제너레이터와 코루틴은 거대한 데이터 스트림을 가볍게 하이파이브하며 여러분이 원하는대로 처리해줄 수 있게 설계되어 있습니다. 물론 처리시간도 늘어나지 않으면서요!
다가오는 파이콘 한국 2017, 13일 일요일 점심에 여러분에게 앞서 말한 기능을 이용하여 여러분의 코드를 조금 더 효율적으로 짜실 수 있는 노하우를 공유드리고자 합니다.
AngularJS 2는 올해 릴리징된 프론트엔드 도구 중 가장 쿨하고 섹시한 도구라고 독자는 믿고있습니다.
AngularJS 2를 실무환경에 적용함으로 얻는 이점.
AngularJS 2와 1의 차이점과 성능.
그리고 ReactJS와 AngularJS 2를 비교하여 퍼포먼스 데이터를 보여줍니다.
마지막으로 AngularJS 2 사용을 위한 번들러(Bundler) 그 중 Webpack, Systemjs, JSPM에 대해서도 안내합니다.
해당 자료는 XECon 2016에 발표되었습니다.
14. Angular
완전하고 빠른 프레임워크
React
활발하고 오픈 되어 있으며 합리적인 프레임워크
VueJS
가볍고 친숙하며 장점만을 합쳐놓은 프레임워크
그러던 중 나타난 프레임워크들
그리고 프레임워크는 그 모든 것을 쉽게 만들어주었나니..
15. Angular
완전하고 빠른 프레임워크
React
활발하고 오픈 되어 있으며 합리적인 프레임워크
VueJS
가볍고 친숙하며 장점만을 합쳐놓은 프레임워크
그러던 중 나타난 프레임워크들
그리고 프레임워크는 그 모든 것을 쉽게 만들어주었나니..
16. Angular
완전하고 빠른 프레임워크 인기가 없음, 오버엔지니어링
React
활발하고 오픈 되어 있으며 합리적인 프레임워크 너무 힙함
VueJS
가볍고 친숙하며 장점만을 합쳐놓은 프레임워크 DOM 테스트하기 힘듦
그러던 중 나타난 프레임워크들
그리고 프레임워크는 그 모든 것을 쉽게 만들어주었나니..
17. Angular
모든 기능이 내장되어 있으며 성능이 훌륭하지만, 진입장벽이 가장 높음
React
에코시스템이 활발하게 움직이고 또 그것을 장려하지만
의존과 버전에 민감하고 라이브러리 자체의 기능만으로는 부족함
VueJS
프레임워크 자체가 가볍고 진입장벽이 낮으며 각 프레임워크의 장점을 흡수
다만 크기가 커질 수록 재활용성은 떨어지며, 테스트하기 어렵고 느림
이를 풀어 설명하자면
51. AOT 성능 변화
크기 (minified)
지연시간 (initial load)
메모리 (snapshot)
442KB
585ms
38.5MB
198KB
305ms
15.3MB
-55%
-48%
-60%
JIT AOT
JIT AOT
52. VirtualDOM
VirtualDOM (가상 DOM)
뷰 모델에서 발생하는 변경사항을 메모리에서 관리하는 논리적 DOM에서 먼저 감지 한 후
실제 DOM의 업데이트를 최소화하여 성능을 향상시키고 UX 측면에서 발생하는 문제를 줄임
미지원
지원
지원
VirtualDOMViewModel
Element A
Element B1
Element B2
Element B
Element A
Element B1
Element B2
Element B
header
.list-item
.list-item
.container
NativeDOM
(Real DOM)
diff patch
53. VirtualDOM
기존의 비싼 비용의 Native DOM 처리를 javascript 상의 diff 알고리즘을 통해
저렴한 비용으로 효율적인 처리가 가능해짐
MDN에 공개된 브라우저 Layout 처리
54. Angular의 최적화가 적용되지 않은 케이스에서는
VueJS가 성능이 빠를 것으로 예상됩니다.
(VueJS에서 제공하는 자료와 벤치마크 데이터 참조)
57. 마이크로 프로젝트에는 VueJS 권장
서버사이드 랜더링이 필요한 프로젝트에는 React
대규모의 프로젝트에는 Angular
58. 템플릿
{{interpolation}}
[1way data binding]
[(2way data binding)]
(1way data binding (event))
{{interpolation with pipe | pipeName}}
*ngFor *ngIf
[ngSwitch] [hidden] [innerHTML] [ngClass]
(click) (keypress) (blur) (input) (change)
…
React에서 공식적으로
제공하는 템플릿은 없습니다.
모든 것을
JSX 혹은 Javascript를 이용하여
표현합니다.
react-templates
라이브러리를 이용하면
다른 프레임워크와 유사하게
템플릿을 사용하실 수 있습니다.
v-directive-name:parameter
{{interpolation | filter}}
v-bind:id v-if v-html
v-for v-else v-else-if
v-show v-bind:class v-bind:style
v-on:event-name
v-bind:bind-target-name
{{interpolation}}
:store-name
v-model
61. Angular Change Detection & NgZone
NgZone의 몽키패칭된 이벤트로부터 변화를 감지하여 Change Detection Strategy에 맞게 변화를 전파
setTimeout, addEventListener,
requestAnimationFrame
NgZone
Monkey Patched
Tick
62. 1
React Reconciliation & React Fiber
React Reconciliation
React FibershouldComponentUpdate()
Dealing control by element types
(aka. Pair-wise diff)
2 3
Dealing control by key
(aka. List-wise diff)
Update DOM
render() 호출 시 VirtualDOM 생성 및 Dirty model을 감지하여 React Reconciliation 과정을 진행 후 React Fiber 혹은 DOM 변경
63. VueJS watcher & VirtualDOM
data 프로퍼티에서 Object.defineProperty()를 통해 Watcher가 변화를 감지 변화를 수신 시
render 함수에 의해 VirtualDOM에 따른 DOM 변경