어렸을 때 

할아버지를 보며

이런 생각을 많이 했습니다.

"나도 할아버지처럼 살아야겠다."

어려서 볼 때 할아버지는 내가 아는 사람 중 

가장 성공한 인생이었습니다. 젊은 시절에 지게를 지고 

산에서 돌을 캐다가 내다 팔고, 가축도 키워서 재산을 

모았습니다. 선대에서 아무 것도 물려 받지 않았지만

큰 산과 넓은 토지를 살 만큼 부자였습니다. 

늘 계획하고, 노트에 기록하는 습관을

멈추지 않았습니다. 

- 김병만의《꿈이 있는 거북이는 지치지 않습니다》중에서 - 

* 손자가 자기 할아버지를 가리켜

'가장 성공한 인생'이라 했으면 그것만으로도

할아버지는 성공한 인생입니다. "할아버지를 

닮고 싶다!" 보통의 언어가 아닙니다.

삶으로 물려받은 최고의 유산입니다.

모든 존경과 사랑과 꿈이 담긴

위대한 선언입니다.

.

목표를 달성하려고 노력할 때 많은 사람들이 단번에 꿈을 이룰

대(大)승리, 홈런, 마법의 해법을 찾는 것 같은 잘못을 저지른다.

대승리를 거두려면 반드시 그전에

작은 승리를 많이 거둬야 하는 법이다.

성공은 대개 어마어마한 행운이 아니라

단순하고 점진적인 성장에서 비롯된다.

- 앤드루 우드

거대한 만리장성이나 피라미드도 한 개의 돌에서 시작했고,

장대한 그랜드 캐넌도 작은 물줄기의

한 번의 굽이침에서 비롯되었으며,

위대한 사상이나 작품들도

한 줄의 문장과 하나의 표현으로부터 시작된 것입니다.

성공하는 사람은 실패하는 사람들이 어쩌다 하는 일을

꾸준히 하는 사람일 뿐입니다.

.

가장 많은 것들을 시도하고,

가장 많은 실수를 가장 빠르게 해본 자가

승리한다.

(whoever tries the most things and

makes the most mistakes the fastest wins.)

- 톰 피터스

“실패의 기쁨을 경험하라.

고통 없이는 아무것도 얻지 못한다.

모험이 없으면 보상도 없다.” 웨이 알린의 글입니다.

실패는 치명적인 것도 인생의 종말도 아닙니다.

실패는 오히려 성공의 발판이 됩니다.

.

남을 진정으로 사랑하는 경험은 

독립적인 인간이 되는 첫걸음이다. 

그것이 하나의 관문이라고 불리는 이유는 

이 관문을 통과하지 못하는 이들이 있기 때문이다. 

프로이트에게 사랑은 자신의 방향을 바꿀 수 있는 힘, 

자신의 계획과 취향과 삶을 멈출 수 있는 동기다. 

나만의 작은 세상을 나설 수 있게 하는 남, 

바로 그 사람이 연인이다. 

- 김서영의《프로이트의 편지》중에서 - 

* 연인은 

사랑의 경험을 통해서 깊어집니다.

한 사람을 진정으로 사랑해 본 경험을 통해

아픔도 알고 슬픔도 배우고 인생의 문을 열어갑니다.

그러면서 서로의 인생의 방향을 열어가는 사람, 연인!

모든 사람이 떠나도 그 연인 한 사람만 있으면

세상에 다시 나설 수 있습니다.   

문이 열립니다.

.

Becoming a Data Scientist – Curriculum via Metromap

http://nirvacana.com/thoughts/becoming-a-data-scientist/

데이터 과학, 기계 학습, 빅 데이터 분석,인지 컴퓨팅 .... 우리 모두는 기사, 기술 수요 정보 그래프 및이 주제에 대한 의견 (하품!) 으로 눈살을 찌푸렸다 . 한 가지는 확실합니다. 당신은 하룻밤 사이에 데이터 과학자가 될 수 없습니다. 그 여행은 확실히 도전적인 여행입니다. 그러나 어떻게 당신은 하나가되는 것에 가나 요? 어디서부터 시작해야할까요? 터널 끝에 언제 빛이 보이기 시작하니? 학습 로드맵은 무엇입니까? 알아야 할 도구와 기술은 무엇입니까? 목표 달성시기를 어떻게 알 수 있습니까?

비판적 시각화가 데이터 과학에 얼마나 중요한지를 감안할 때, 아이러니 컬하게도 데이터 과학자가되기 위해 필요한 것의 실용적이지만 시각적 인 표현을 (몇 가지 제외하고) 찾을 수 없었습니다. 여기 교과 과정을 만드는 나의 겸손한 시도, 이것이 데이터 과학자의 여행 이 되는 데 사용할 수있는 학습 계획입니다 . 나는 지하철지도에서 영감을 얻었고 그것을 학습 경로를 묘사하는 데 사용했습니다. 전반적인 계획을 점진적으로 다음 영역 / 영역으로 구성했습니다.

1. 기초
2. 통계
3. 프로그램 작성
4. 기계 학습
5. 텍스트 마이닝 / 자연 언어 처리
6. 데이터 시각화
7. 빅 데이터
8. 데이터 처리
9. 데이터 Munging
10. 도구 상자

각 지역 / 도메인은 "지하철 선"으로 표현되며, 점진적으로 배우고 마스터해야하는 주제를 묘사하는 방송국이 있습니다. 아이디어는 당신이 최종 목적지에 도달 할 때까지 (또는) 다음 라인으로 전환 할 때까지 선을 선택하고 열차를 타고 모든 역 (토픽)을 통과하는 것입니다. 점차적으로 각 역 (선)을 1에서 10까지 표시하여 여행 순서를 표시합니다. 이를 개인 학습 계획으로 활용하여 가장 개발하기를 원하는 분야와 습득 기술을 파악할 수 있습니다. 이것은 결코 끝이 아닙니다. 그러나 단단한 출발. 의견과 건설적인 의견을 언제든지 남겨주세요.

1. Fundamentals
2. Statistics
3. Programming
4. Machine Learning
5. Text Mining / Natural Language Processing
6. Data Visualization
7. Big Data
8. Data Ingestion
9. Data Munging
10. Toolbox

.

좋은 기업문화의 5가지 특징

원격근무 개발자의 자기관리 - 우리는 모두 원격근무자다!

.

2017. 프론트엔드 트랜드

2017. 프론트엔드 트랜드

1. 2017 프론트엔드
 트렌드&인사이트 네이버 FE플랫폼 김태훈

2. about me 김태훈 NAVER FE플랫폼 SADI HTML5 초빙교수
 NHN NEXT WebUI Basic 겸임교수 Project Management Professional(PMP) 페이스북 프론트엔드개발그룹 운영 http://facebook.com/groups/webfrontend

3. ES.NEXT BABEL, WEBPACK WEB ASSEMBLY jQuery, React, Angular, Vue ... AMP, PWA ETC...

4. ES.NEXT 2015. 06 ECMAScript 6th Edtion / ES2015(ES6) 2016. 06 ECMAScript 7th Edtion / ES2016(ES7) // ES2017 - Array.prototype.includes ['a', 'b', 'c'].includes('a') //true ['a', 'b', 'c'].includes('d') //false // ES2017 - exponentiation operator (**) let squared = 3 ** 2 // 9 Math.pow(x, y) // 9 - produces the same result as maybe... 2017. 06 ECMAScript 8th Edtion / ES2017(ES8)

5. http://kangax.github.io/compat-table/es6/

6. ES.NEXT 데스크탑은 거의 대부분 ES6 지원 특히 Safari(데스크탑 및 iOS)는 100% IE/안드로이드 하위버전 지원율 낮음 트랜스파일러를 통해 하위 버전인 ES5로의 변환해서 사용

7. ES2015 let와 const를 통한 블럭 스코프 변수 선언 Arrow function을 통해 함수 표현의 단순화, this 바인딩 제어 rest parameter, spread parameter, default parameter 파라메터 핸들링 destructuring을 통한 데이터 추출 편의성 클래스는 sugar syntex 뿐이라는 논쟁이 있었지만 잘 받아들여짐 iterator, generator 등을 통한 값 생성의 효율성 증가 map, weakmap, set, weakset 등 새로운 컬렉션 비동기 처리를 위한 promise

8. ES MODULE 가장 주목받는 ES6 기능이지만 브라우저에서 지원하지 않음 TC39는 평가(evaluation) 시점에 모듈을 불러오는 새로운 import() 함수에 대한 표준을 논의 중 - Stage 3 import {foo} from "bar" import("baz").then((module)=>{/*…*/}).catch((err)=>{/**…*/})

9. ES.Next 해결해야 할 문제 브라우저에서 원할하게 모듈 로딩 비동기 처리 - promise, async/await 등 브라우저 구현 동시성과 병렬성 - TC 39에서 멀티쓰레딩에 대해 검토 중 구현된다면 멀티코어 프로세서 환경에서 성능 향상 기대 Immutable Native Objects 함수형 프로그래밍 혹은 최근 프레임워크에서 요구하는 불변객체에 대한 네이티브 구현

10. Babel is a JavaScript compiler. Use next generation JavaScript, today.

11. BABEL Babel은 자바스크립트를 위한
 다중 목적 컴파일러 Babel은 ES6로 작성한 자바스크립트 코드를
 ES6을 지원하지 않는 브라우저에서 동작하는 코드로 컴파일 source-to-source 컴파일 또는 트랜스파일 https://github.com/thejameskyle/babel-handbook

12. BABEL 빌드 과정에서 간단하게
 babel 트랜스파일 단계를 추가해 사용가능 react, vue 등 새로운 프레임워크들이 ES6 사용 자바스크립트 애플리케이션 개발할 때도 ES6의 새로운 스펙을 사용할 수 있음 브라우저가 ES6를 완벽히 지원하는 것은 현재 어려움 2016년말 2017년초 90~95% 정도될 것으로 예상 하위브라우져와의 호환성 문제 등등
 현실적으로 babel 같은 트랜스파일러 사용이 최선

13. webpack 번들링 - 프로젝트에서 사용하는 다양한 자원들을 묶고 파일들과의 상관관계를 정적으로 분석해 원하는 형태의 파일 출력 다양한 프레임워크에서 이미 기본적인 도구로 사용 ES6를 사용하는 경우 거의 필수

14. webpack 2017. 01. webpack 2(v2.2.0) 릴리즈 네이티브 ES6 import/export의 지원 ES6를 위한 Tree Shaking 지원 다양한 배포 전략에 따라 원하는 빌드의 구성이 가능 수많은 loader와 plugin을 통해 점점 더 성장 기존의 빌드 도구들은 전반적으로 webpack 전환 할 것

15. WEB ASSEMBLY 웹브라우저에서 돌릴 수 있는 새로운 형식의 코드 컴팩트한 바이너리 포맷을 제공하는 저수준 어셈블리 언어 C/C++ 등과 같은 언어로 작성하고 컴파일해 웹에서 실행 또한 자바스크립트와 나란히 돌아가면서 서로를 보완 2017년 상반기내 대다수의 브라우저들에서 프리뷰 지원 목표

16. WEB ASSEMBLY 빠르고, 효과적이고, 이식성이 좋을 것 여러종류의 플랫폼 위에서 거의 네이티브에 가까운 속도로 실행될 수 있음 읽기 쉽고 디버깅이 가능할 것 저수준 어셈블리 언어지만, 작성하고, 보고, 디버깅할 수는 있도록, 사람이 충분히 읽을 수 있는 수준의 텍스트 포맷을 갖고 있다 안전함을 유지할 것 샌드박싱된 실행환경에서 안전하게 돌아갈 수 있도록 설계되 브라우저의 동일한 출처(same-origin)와 권한정책을 강제 웹을 망가뜨리지 않을 것 다른 웹 기술과 마찰없이 사용되면서 하위호환성을 관리할 수 있도록 설계

17. WEB ASSEMBLY 3D 게임이나, 가상/증강현실, 영상처리, 이미지/비디오 편집 그 외 네이티브 성능을 필요로하는 여러 분야의 사례에서 현재의 웹은 성능상의 문제에 부딪힘 이런 문제를 웹어셈블리를 통해 해결하면서 자바스크립트를 보완 웹어셈블리 코드를 다운로드하고, 컴파일하고, 돌리는 일련의 과정을 자바스크립트로 제어 <script type='module'>같이 ES6 모듈처럼 사용

18. jQuery 2016. 06. 버전 3.0 발표 레거시 브라우저 지원을 위한 1.x와 2.x의 형태를 버리고 단일 버전 형태로 통합 AJAX 및 이펙트 등을 제거한 slim 버전도 출시해 기존 버전 대비 17~20kb 정도의 가벼운 용량을 제공

19. jQuery 브라우저의 표준 지원율 향상으로 VanillaJS 만으로도 충분히 개발 가능 최근의 프레임워크는 MV* 아키텍쳐로 DOM 조작을 하지 않음 프레임워크가 웹애플리케이션 개발에 적합하다면 jQuery는 웹페이지 개발에 있어서는 아직도 적합하고 경쟁력 있음(생태계 풍부) 많은 개발자가 jQuery의 사용은 트렌디하지 않게 보고 있는 것은 사실 과거와 같이 주도적이진 않으며 시간이 갈수록 서서히 영향력 감소

20. React 커뮤니티의 전폭적인 지원을 받으며 계속 발전 많은 베스트 프랙티스가 공유되고 있으며 react-router, Flux/Redux 등의 아키텍쳐와 함께 실질적인 프레임워크로 사용

21. React 페이스북은 React 스타터 킷인 'Create React App'의 개량된 버전을 직접 릴리즈 react-router도 공식 React 저장소로 머지하기 위한 논의 중 페이스북의 UI 컴포넌트 프레임워크가 나올 것으로 예상 Next.js - Dead simple Universal render & Routing for Node & React velocity-react - Animations for React

22. ngular2+ 수많은 베타 버전과 7개의 RC 버전 끝에 2016.09. Angular2.0 출시 TypeScript 기반, 모듈, 컴포넌트, Directive, DI 등 AngularJS의 컨셉을 유지하고 있지만 문법이 많이 다름 2017.03 버전3.0을 건너뛰고 4.0을 릴리즈 잦은 버전 변경과 변화가 개발자들에게 혼란을 가중

23. Angular2+ Zones.js, Change Detection 등을 통한 성능 향상 angular-cli로 개발 편의성 향상 RxJs를 통한 리액티브 프로그래밍

24. Angular2 vs React

25. ue.js MVVM(Model-View-ViewModel) 패턴으로 데이터 관리 및 액션 처리에 집중 Flux에서 영감을 받은 vuex 데이터 플로우 아키텍쳐 VirtualDOM 도입 Angular와 React의 장점들과 유사함 최근 급속하게 사용자층이 늘고 있음

26. AMP AMP가 제공하는 컴포넌트를 사용해 뛰어난 퍼포먼스의 페이지 개발 JS 필요없음. 커스텀엘리먼트를 사용하기 때문에 HTML 요소처럼 사용 가능 AMP로 만든 페이지와 리소스는 구글 CDN에 저장 구글 검색 결과에서 클릭시 딜레이없이 페이지를 보여줌

27. ... 35 more AMP Extended Component

28. /* AMP 확장 컴포넌트 - 캐러셀 */ <amp-carousel width=300 height=400> <amp-img src="my-img1.png" width=300 height=400></amp-img> <amp-img src="my-img2.png" width=300 height=400></amp-img> <amp-img src="my-img3.png" width=300 height=400></amp-img> </amp-carousel> AMP-CAROUSEL

29. /* AMP 확장 컴포넌트 - lightbox */ <amp-image-lightbox id="lightbox1" layout="nodisplay"> </amp-image-lightbox> AMP-IMAGE-LIGHTBOX

30. /* AMP 확장 컴포넌트 - 사이드바 */ <amp-sidebar id='sidebar' layout="nodisplay" side="right"> ... AMP-SIDEBAR

31. https://youtu.be/e6slMlFgdCQ

32. AMP 1년여 굉장히 성공적 86만여개 도메인에 17억개의 AMP 페이지 생성 매주 3500만개의 AMP가 생성 PWA를 결합하기위한 시도 컴포넌트 방식 혹은 iframe/shadow DOM <amp-bind> 데이터를 바인딩하기 위한 컴포넌트 지원 프로그램 패러다임을 얻고 플랫폼으로 발돋움 AMP NEXT

33. 개선된 Image gallery lightboxes, Parallax scrolling 추가 Thumblr, eBay 페이지 중 상당수 AMP로 전환 Yahoo Japen, Sogou, Baidu 검색엔진에 AMP 페이지 지원 https://ampstart.com/ AMP 개발을 위한 점프 포인트 https://ampbyexample.com/ Learn AMP by Example AMP NEXT

34. Progressive Web App 프로그래시브 Progressive 브라우저에 상관없이 모든 사용자에게 동작 반응성 Responsive 어떠한 폼 팩터에도 맞을 것 네트워크 연결과 독립적 Connectivity independent Service Worker를 통해 오프라인에서도 동작할 것 앱과 비슷한 동작 App-like-interactions 앱과 같은 네비게이션과 동작을 하기 위해 Shell 과 컨텐츠를 합친 어플리케이션 모델을 사용 최신버전 유지 Fresh Service Worker 를 통해 보이지는 않지만 언제나 최신 버전을 유지할 것

35. 안전 Safe TLS (Service Worker 의 요구사항)를 통해 스누핑을 방지할 것 검색 가능 Discoverable W3C Manifest 를 도입하여 "어플리케이션"으로써 인식되고
 검색 엔진에 의해 등록 가능할 것 재방문 Re-engageable OS의 UI를 활용하여 사용자를 다시 방문하게 ex) Push 알림 설치 가능 Installable 앱 스토어가 아니라 브라우저 기반으로 홈화면에 아이콘 추가 연결 가능 Linkable 설치조차도 귀찮다면 앱 설치 없이도 사용 가능하고 공유하기 편할 것 소셜 네트워크에서도 URL의 힘은 강력하다. Progressive Web App

36. Progressive Web App - Service Worker

37. Progressive Web App - Service Worker

38. 가트너그룹은 2019년까지 브랜드의 20%가 모바일 앱을 포기 할 것으로 예상 모바일 사용자는 상위 3개의 앱만 사용하여 80%의 시간을 보냄 Progressive Web App을 모바일 디바이스에서 지원하고 사용자에게 앱과 같은 브라우징 경험을 제공한다면 많은 기업이 앱에 대한 투자 비용을 감소할 것 https://www.washingtonpost.com/ https://www.flipkart.com/ Progressive Web App Next

39. 2016.10. 페이스북에서 새롭게 발표한 npm 클라이언트 기존 npm 레지스트리를 사용. npm의 모든 패키지들 그대로 사용 병렬처리를 통해 npm 보다 향상된 처리 성능 기존의 npm 설정 파일인 package.json을 통해 yarn 설정파일인 yarn.lock 파일을 손쉽게 생성 $ yarn yarn install v0.16.1 info No lockfile found. [1/4] Resolving packages... ... success Saved lockfile. Done in 34.60s.

40. Functional Programming React/Redux가 많이 사용되면서 statless한 애플리케이션에 대한 장점 부각 모든 입력과 출력이 선언적으로 표현되는 순수함수를 통해 사이드 이펙트 감소 이를 기반으로한 Functional Reactive Programming이 추진력을 얻을 듯(RxJs) Angular2+는 이벤트, XHR 처리에 RxJs 사용

41. 자바스크립트의 뉴 프론티어 chatbot 많은 개발자들이 자바스크립트를 사용해 chatbot을 개발 단순한 Slack 봇에서 부터 복잡한 커머스 트랜잭션 봇까지 IoT IoT 영역에서도 자바스크립트의 도입을 쉽게 볼수 있다. 

삼성은 2015년 IoT 자바스크립트 엔진 JerryScript를 발표 가상현실 웹의 가상현실 기술은 WebVR을 통해 표준화 진행 자바스크립트 API를 통해 가상현실 기기에서 감지되는 위치와 움직임등에 대한 정보 획득 구글은 크롬팀이 리딩해 가상현실 경험을 개발할 수 있는 A-Frame 프레임워크를 개발 중 MS는 HoloLens에서 사용할 수 있는 앱 개발을 위해 HoloJS 프레임워크를 2016.12. 공개

42. NAVER egjs 2.0 http://naver.github.io/egjs/ 네이버의 노하우가 축적된 모던 웹 라이브러리, 오픈소스(PR환영!) UI인터렉션, 이펙트, 유틸리티 등으로 구성, 네이버의 여러 서비스에서 사용 flicking, visible, infiniteGrid 등등 컴포넌트 제공, 빠른 성능과 안정성 제공 2017년 상빈기 2.0 출시 예정 jQuery 의존성을 버리고 각 컴포넌트가 독립적인 모듈로 운영 360도 이미지 뷰어 컴포넌트 추가 예정

43. 프론트엔드 개발가이드 Front-End Developer Handbook 2017 https://www.gitbook.com/book/frontendmasters/front-end-handbook-2017/

44. References 

http://www.telerik.com/whitepapers/kendo-ui/the-future-of-javascript-2017-and-beyond http://developer.telerik.com/topics/web-development/javascripts-journey-2016/ 

https://mobiforge.com/research-analysis/13-statistics-on-mobile-web-performance-in-2017 https://mobiforge.com/news-comment/ampconf-amp-is-a-performance-framework-thats-growing-up https://www.oreilly.com/ideas/5-web-trends-for-2017 

http://d2.naver.com/helloworld/2809766 

https://youtu.be/e6slMlFgdCQ 

https://www.ampproject.org/amp-conf-2017/ 

https://developers.google.com/web/progressive-web-apps/ https://www.gitbook.com/book/frontendmasters/front-end-handbook-2017/ https://v8project.blogspot.kr/2016/10/webassembly-browser-preview.html 

https://unsplash.com/

45. #thank you Atwood's Law Any application that can be written in JavaScript, will eventually be written in JavaScript.

.