AngularJS 2는 올해 릴리징된 프론트엔드 도구 중 가장 쿨하고 섹시한 도구라고 독자는 믿고있습니다.
AngularJS 2를 실무환경에 적용함으로 얻는 이점.
AngularJS 2와 1의 차이점과 성능.
그리고 ReactJS와 AngularJS 2를 비교하여 퍼포먼스 데이터를 보여줍니다.
마지막으로 AngularJS 2 사용을 위한 번들러(Bundler) 그 중 Webpack, Systemjs, JSPM에 대해서도 안내합니다.
해당 자료는 XECon 2016에 발표되었습니다.
Angular2는 컴포넌트 중심의 개발 접근 방식에 대한 내용을 가집니다. 따라서 본 슬라이드도 컴포넌트 중심의 개발 접근 방식으로 Angular2를 바라보았습니다.
대략적인 내용은 다음과 같습니다.
- Angular2 History
- Angular2 핵심구성요소
- 컴포넌트 중심의 개발
- Angular2 주요개념
- Type Script에대한 설명
- 기타
필요하신 분에게 도움이 되었으면 좋겠습니다. 관련 코드는 다음 주소에 공유하였습니다.
https://github.com/DaeguDevGroup/angular2-bootstrap
- 내용이 업데이트되거나, 추가되면 설명에 이력을 남기겠습니다.
- 본 슬라이드에 오류가 있다면 코멘트 바랍니다.
*Change Log*
- 2016-05-14 : 슬라이드 첫 버전을 업로드
GDG DevFest 2017 Seoul 프론트엔드 모던 프레임워크 낱낱히 파헤치기Kenneth Ceyer
GDG DevFest 2017 Seoul
프론트엔드 모던 프레임워크 낱낱히 파헤치기 세션의 발표자료입니다.
이 발표자료에서는 여러분이 항상 궁금해 하신
프론트엔드 프레임워크의 삼총사
Angular, React, VueJS를 다차원적으로 깊이있게 비교하고 각각의 이점과 특화된 기능을 소개하고 있습니다.
이러한 프레임워크를 경험해보지 못한 분들을 위해 프레임워크 별로 특징부터 쉽게 접근하여 설명하기 때문에 경험 불문하고 가볍게 읽어 보실 수 있습니다.
[Angularjs 도입 선택 가이드]
본 문서는 네이버 개발자 블로그 hello world 를 통해서 공개되었습니다.
[문서개요]
이 문서는 AngularJS를 사용한 애플리케이션 개발을 계획하고 있거나 AngularJS 도입을 고려 중일 때 참고 할 만한 내용을 기술한다. AngularJS를 사용하는 방법을 다루지는 않는다.
이 문서의 모든 내용은 AngularJS 버전 1.3.x를 기준으로 작성되었다.
Angular2는 컴포넌트 중심의 개발 접근 방식에 대한 내용을 가집니다. 따라서 본 슬라이드도 컴포넌트 중심의 개발 접근 방식으로 Angular2를 바라보았습니다.
대략적인 내용은 다음과 같습니다.
- Angular2 History
- Angular2 핵심구성요소
- 컴포넌트 중심의 개발
- Angular2 주요개념
- Type Script에대한 설명
- 기타
필요하신 분에게 도움이 되었으면 좋겠습니다. 관련 코드는 다음 주소에 공유하였습니다.
https://github.com/DaeguDevGroup/angular2-bootstrap
- 내용이 업데이트되거나, 추가되면 설명에 이력을 남기겠습니다.
- 본 슬라이드에 오류가 있다면 코멘트 바랍니다.
*Change Log*
- 2016-05-14 : 슬라이드 첫 버전을 업로드
GDG DevFest 2017 Seoul 프론트엔드 모던 프레임워크 낱낱히 파헤치기Kenneth Ceyer
GDG DevFest 2017 Seoul
프론트엔드 모던 프레임워크 낱낱히 파헤치기 세션의 발표자료입니다.
이 발표자료에서는 여러분이 항상 궁금해 하신
프론트엔드 프레임워크의 삼총사
Angular, React, VueJS를 다차원적으로 깊이있게 비교하고 각각의 이점과 특화된 기능을 소개하고 있습니다.
이러한 프레임워크를 경험해보지 못한 분들을 위해 프레임워크 별로 특징부터 쉽게 접근하여 설명하기 때문에 경험 불문하고 가볍게 읽어 보실 수 있습니다.
[Angularjs 도입 선택 가이드]
본 문서는 네이버 개발자 블로그 hello world 를 통해서 공개되었습니다.
[문서개요]
이 문서는 AngularJS를 사용한 애플리케이션 개발을 계획하고 있거나 AngularJS 도입을 고려 중일 때 참고 할 만한 내용을 기술한다. AngularJS를 사용하는 방법을 다루지는 않는다.
이 문서의 모든 내용은 AngularJS 버전 1.3.x를 기준으로 작성되었다.
Angular 2는 HTML 5 웹 컴포넌트 기술을 포함합니다. 이 기술은 Angular 2 컴포넌트를 존재케한 기반기술입니다. 본 슬라이드는 이와 관련하여 2가지 흐름을 가지고 있습니다.
- 전반부는 웹 컴포넌트가 Angular 2 컴포넌트가 되기까지의 과정을 설명합니다.
- 후반부는 컴포넌트 트리 구조를 기반으로한 컴포넌트 상호작용에 대해 설명합니다.
필요하신 분에게 조금이라도 도움이 되었으면 좋겠습니다. 감사합니다.
CHANGE LOG
2016-06-27 : @input 데코레이터 설명교정
2016-06-26 : 쉐도우 돔 / 쉐도우 호스트관련 보다 정확한 문장으로 수정
2016-06-25 : 업로드
MEAN 스택을 사용한 IoT 개발 예제를 설명합니다.
* MEAN 스택 기본 내용 소개
* Node.js와 Express를 활용한 간단한 CRUD 서버 작성 방법(아주 단순하지만 (인증을 제외한 나머지) RESTful 서버의 기본 내용을 구현함)
* MongoDB와 Mongoose ODM를 사용한 영속적인 자료 저장 방법
* AngularJS를 사용한 아주 간단한 모니터링 도구 구현(하지만 의존성 주입, 양방향 자료 결합, 라우팅 활용 방법이 모두 들어 있음)
* 모든 예제는 bitbucket(git 호스팅 서비스)에 공개되어 있음
Polymer의 기술기반인 Web Componets를 구성하는 표준 스펙들인 Custom Elements, HTML Imports, HTML Templates 그리고 Shadow DOM을 간략히 살펴본다.
Polymer의 아키텍처 및 기본적인 사용방법 그리고 material design이 적용된 paper elements 등을 살펴본다.
Angular 2는 HTML 5 웹 컴포넌트 기술을 포함합니다. 이 기술은 Angular 2 컴포넌트를 존재케한 기반기술입니다. 본 슬라이드는 이와 관련하여 2가지 흐름을 가지고 있습니다.
- 전반부는 웹 컴포넌트가 Angular 2 컴포넌트가 되기까지의 과정을 설명합니다.
- 후반부는 컴포넌트 트리 구조를 기반으로한 컴포넌트 상호작용에 대해 설명합니다.
필요하신 분에게 조금이라도 도움이 되었으면 좋겠습니다. 감사합니다.
CHANGE LOG
2016-06-27 : @input 데코레이터 설명교정
2016-06-26 : 쉐도우 돔 / 쉐도우 호스트관련 보다 정확한 문장으로 수정
2016-06-25 : 업로드
MEAN 스택을 사용한 IoT 개발 예제를 설명합니다.
* MEAN 스택 기본 내용 소개
* Node.js와 Express를 활용한 간단한 CRUD 서버 작성 방법(아주 단순하지만 (인증을 제외한 나머지) RESTful 서버의 기본 내용을 구현함)
* MongoDB와 Mongoose ODM를 사용한 영속적인 자료 저장 방법
* AngularJS를 사용한 아주 간단한 모니터링 도구 구현(하지만 의존성 주입, 양방향 자료 결합, 라우팅 활용 방법이 모두 들어 있음)
* 모든 예제는 bitbucket(git 호스팅 서비스)에 공개되어 있음
Polymer의 기술기반인 Web Componets를 구성하는 표준 스펙들인 Custom Elements, HTML Imports, HTML Templates 그리고 Shadow DOM을 간략히 살펴본다.
Polymer의 아키텍처 및 기본적인 사용방법 그리고 material design이 적용된 paper elements 등을 살펴본다.
이미지 프로세싱 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일 일요일 점심에 여러분에게 앞서 말한 기능을 이용하여 여러분의 코드를 조금 더 효율적으로 짜실 수 있는 노하우를 공유드리고자 합니다.
19. // 변수 정의
var content = 'New Item';
var message = 'Hello World';
var newDomObj = document.createElement('a');
// DOM 삽입
newDomObj.href = '#';
newDomObj.innerHTML = content;
document.body.appendChild(newDomObj);
// 이벤트 바인딩
newDomObj.addEventListener('click', function (event) {
event.preventDefault();
alert(message);
});
Vanilla JS
20. var app = angular.module('app', [
])
.controller('MainCtrl', function ($scope) {
// 변수 정의
$scope.content = 'New Item';
$scope.message = 'Hello World';
// 이벤트 바인딩
$scope.onClick = function ($event) {
$event.preventDefault();
alert($scope.message);
};
});
AngularJS 1
31. $(function () {
// 동적 HTML 태그 정의.
var elem = $('<input type="text" placeholder="An Example" value="Example" />');
// 동적 태그를 Body 하위에 삽입.
elem.appendTo('body');
// HomeWorks INPUT 컴포넌트 정의.
elem.input();
});
jQuery
32. var app = angular.module('app', [])
.directive('input', function () {
return {
restrict: 'E',
priority: 3,
link: function (scope, elem, attrs) {
elem.input();
}
};
});
AngularJS 1
Input 키워드 감지
대상이 Element 타입인 것만 체크
탐색된 대상에 전용 함수 수행.
38. 검색 엔진 최적화 (SEO)
정의
검색 제공업체 (Naver, Google) 등에서
웹 서버 페이지들을 크롤링 하는 부분에 포커스
이슈
SPA 특성 상 정적 페이지를 남기지 않기 때문에
검색 엔진이 동적 자바스크립트를 인식하기 어려운 문제
39. 검색 엔진 최적화 (SEO)
AngularJS 1 버전의 Hashbang 해시뱅 (#!) 사용 시 SEO가 어려움.
HTML5의 <base>를 이용한 동적 URL의 경우,
서버 사이드 랜더링으로 정적 페이지를 별도로 추가하여 진행.
?_escaped_fragment 및 <meta name=“fragment” />는
2015. 10 Google에서 Officially Deprecated 항목.
41. AngularJS 2
타입 스크립트 (Typescript)와 AngularJS 2
AngularJS 1 vs AngularJS 2
번들러(Bundler)와 Webpack
42. AngularJS 2
2016년 5월 3일 AngularJS 2 RC 버전 발표.
2016년 11월 17일 2.2.1 Released.
AngularJS 2는 Typescript”도” 지원하는 컴포넌트 기반 프레임워크.
43. Typescript
Typescript는 AngularJS 2에서 지원하는 언어의 종류.
Microsoft사에서 2012년 발표된 Javascript 확장형 언어.
AngularJS 2에서는 Google과 Microsoft의 콜라보레이션.
Typescript는 이름에 맞게 타이핑 언어의 특성을 가짐.
45. Typescript
OOP 기반의 컴포넌트 작성에 대한 문제 해결.
런타임에서 발생하는 오류를 타입기반 특성으로 미연에 방지.
모듈의 다형성, 상속에 대한 요구사항 지원.
46. class Alpaca {
// Private member variables.
private message: string = 'boowoo~ boowoo!!';
// Alpaca class's constructor.
constructor() {
console.log(this.bark());
}
// Member function
bark(): string {
return this.message;
}
}
Typescript
47. AngularJS 2
타입 스크립트 (Typescript)와 AngularJS 2
AngularJS 1 vs AngularJS 2
번들러(Bundler)와 Webpack
48. AngularJS 2 AngularJS 1
Component 기반
HTML5 Base URL 사용
Typescript를 통한 OOP 지원
Renderer 지원
Javascript, Typescript, Dart 지원
Scope, Controller, Directive 기반
HTML5 Base URL 사용, 해시 뱅 사용
OOP 미지원, 대체 디자인 패턴 지원
jQuery lite 빌트-인
56. AngularJS 2
타입 스크립트 (Typescript)와 AngularJS 2
AngularJS 1 vs AngularJS 2
번들러(Bundler)와 Webpack
57. AngularJS 2와 번들러(Bundler)
AngularJS 2를 Typescript로 개발 할 경우,
컴포넌트 모듈 별 Javascript 를 분리하고
Import를 통해 호출하게 되는데,
이때, Import는 브라우저에서 지원하는 기능이 아니기 때문에
번들러(Bundler) 사용이 필수적.
58. 번들러(Bundler)의 배경
ECMA6, Typescript 도입으로 인해 요구사항이 더욱 높아짐.
모듈 단위로 js 파일을 분리하고,
Import 등으로 해당 컴포넌트/클래스를 불러오는 과정에서
번들러(Bundler)는 Import를 지원하지 않는 브라우저에 사용 됨.