Why javaScript?

JavaScript와 나,
4년째 썸타는 이야기
2015.02.15
NHN Technology Services, 김훈민
Why JavaScript?

= {
이름 : 김훈민
소속 : NHN Technology Services 프론트엔드개발팀,
프로젝트 : [
네이버 포토갤러리 모바일,
NTS 사내 웹 메신저,
네이버 HTML5 동영상 플레이어,
NHN NEXT MOOC 플랫폼
],
기타 활동 : [
개인 블로그(http://huns.me),
Facebook 프론트엔드개발그룹 운영,
WebApplications.kr 스탭
]
};
I am…

뜻밖에 JavaScript
그럴려고 했던 것은 아니었으나
어쩌다보니

“Foursquare + 포인트 관리 = 위치기반 소셜 포인트 관리 플랫폼”
MobiPoint

전직원 3명인 스타트업.
DataBase(MS-SQL),
Server(Java),
Client(HTML, CSS, JavaScript)
그 무엇 하나 내 것 아닌 것이 없었던 그 시절…
그렇게 나는 람보가 되어야 했다.
Full-Stack 람보가 되다

JavaScript 그까이거 대충 그냥
jQuery만 있으면 되는 거 아님?

경영 사정 악화로 퇴사 후 이직하게 되고…
더이상 님 월급 못 줌!

한 때 한국 남자들을 공포에 몰아넣었던,
악마의 앱, 오빠 믿지를 만든 플라스크 모바일에 합류.
오빠 믿지?

소셜 이미지, 텍스트 큐레이션 플랫폼
뭔지 잘 모르시겠다면
그냥 Pinterest.com이라고 생각해주세요.
Plog

JavaScript 코드를 bookmark에 등록한다.
bookmark를 실행한다.
이미지를 추출한다.
사용자에게 보여준다.
퍼간다.
끝.
…이면 얼마나 좋겠냐만은…
Bookmarklet 개발하는 방법

그 후로 나는 조금 진지해졌다.
내가 아는 JavaScript는
아무 것도 아니었던 것이었던 것이었다.

모바일 웹
하이브리드 앱
…등등
우앙 님들아 이거면 다 만들 수 있음!!
HTML5 시대가 올지어다

HTML5 + JavaScript를 공부해서 게임을 만들어보자!
1차 JavaScript OOP
2차 자바스크립트 코딩 기법과 핵심 패턴
3차 AJAX
4차 Node.js
5차 JavaScript Game Engine
전격 스터디 결성

…그렇게 우리는 게임이 아닌 커플만을 남기고 역사 속으로 사라졌다.
전격 스터디 해체

Web Push를 구현하기 너무나 힘들었던 그 시절,
Node.js의 Socket.io는 황홀함 그 자체
하지만 Node.js는 향기를 남기고…

JavaScript OOP, 프론트엔드 MVC 학습,
ECMAScript 스펙 분석 등등
괜찮은 회사에요 하하!
NTS, 프론트엔드개발팀 합류

네이버 포토 갤러리 모바일,
NTS 사내 웹 메신저,
HTML5 동영상 플레이어,
NHN NEXT MOOC
2년간 AJAX UI 개발 업무 진행
본격적으로 밥 벌어먹기

써봤더니 이랬어요
제가 4년간 JavaScript 개발을 하면서
느낀점은…

복잡도 제어를 위해
이것도 필요하고, 저것도 필요하고.
화려해진 UI만큼 나는 늙어간다.
UI 복잡도 증가는 곧 코드 복잡도 증가

웹이 문서였던 시절,
단순한 UI를 조작하기 위해 만들어진 언어.
UI는 점점 복잡해지고 요구사항 수준은 높아지는데
네이티브 지원은 미약하고 표준 스펙은 제자리 걸음이니
어허 통재라,
이것이 난세로구나.
난세로구나

때는 바야흐로 춘추전국시대…

jQueryHTML JavaScriptCSS GruntBackbone.js Karma
JasmineSCSS
NPM Bower

공부…
공부…
학생 때 이렇게 공부했으면 서울대 갔겠지.
하루가 다르게 쏟아지는
새로운 프레임워크, 라이브러리의 홍수

인터프리터 언어,
동적 타입,
이벤트 처리 콜백 중첩 문제 등등
언어가 가지고 있는 본질적 한계는 여전히 남아있고…
그래서 행복해졌습니까?

웹 기술로 모든 문제를 해결할 수 있을 것 같았던
그런 시절이 있었드랬지…
크로스 브라우징,
단말기 파편화,
성능 한계,
부족한 API
…
서로 다른 UX/UI는 또 어쩌란 말인가.
One Source, Multi Platform…?

내가 기가 막힌 웹 메신저를 만들었는데
브라우저 닫으면 안 되!
응…?
될 것 같이 안 되는 될 것 같은 너

누구나 쉽게 사용할 수 있지만,
잘 쓰기는 어렵다.
뭐든 할 수 있을 것 같지만,
해보면 잘 안 된다.
다 있을 것 같지만,
정작 필요한 것은 없다.
이제는 말할 수 있다

So, why?
좋고 나쁘고는 중요하지 않아
중요한 건 매력이지

Server와 Client를 하나의 언어로 만들다.
동형(Isomorphic) JavaScript

NPM(Node Packaged Modules)
빌드/태스크 자동화,
커맨드라인 실행 스크립트
등등
Node.js만 있다면 어디든 OK…!
NPM이 불러온 르네상스

한계를 극복하려는 다양한 도전이 현재 진행중!
닝겐의 노력은 끝이 없고

ES2015,
atscript,
typescript
언어의 한계를 뛰어 넘자!

ECMAScript 6의 새로운 이름
피처는 이미 확정, 올해(2015) 공개 예정
let + const,
Template String,
Class,
Promise,
Generator,
Modules,
Proxies,
Tail Calls
…
기존에 별도 라이브러리나 프레임워크를 이용해서
관용적으로 코딩해 온 스타일을 언어 수준에서 제공
ES2015

class Hello { 
 
constructor(name) { 
this.name = name; 
} 
 
hello() { 
return 'Hello ' + this.name + '!'; 
} 
 
static sayHelloAll() { 
return 'Hello everyone!'; 
} 
 
}
Classes in ES6
function Hello(name) { 
this.name = name; 
} 
 
Hello.prototype.hello = function hello() { 
return 'Hello ' + this.name + '!'; 
}; 
 
Hello.sayHelloAll = function () { 
return 'Hello everyone!'; 
};

구글이 만들고 있는 JavaScript 확장 언어
JavaScript가 가진 언어로서의 한계를 보완하는 것이 목표
AtScript
@Component() 
class MyApp { 
server:Server; 
@Bind('name') name:string; 
@Event('foo') fooFn:Function; 
 
@Inject() 
constructor(@parent server:Server) {} 
 
greet():string {} 
}
function MyApp() {} 
 
MyApp.properties = { 
'server': { is: Server }, 
'name': { is:string, 
annotate: [new Bind('name']}, 
'fooFn': { is:Function, 
annotate:[new Event('foo')]} 
} 
 
MyApp.annotate = [ 
new Component(), 
new Inject() 
]; 
 
MyApp.parameters = [ 
{is:Server, annotate:[parent]} 
]; 
 
MyApp.prototype.greet = function() {} 
MyApp.prototype.greet.returns = string;

MicroSoft가 만든 오픈소스 JavaScript 슈퍼셋
TypeScript로 작성한 코드를 JavaScript로 컴파일
TypeScript
class Point { 
x: number; 
y: number; 
constructor(x: number, y: number) { 
this.x = x; 
this.y = y; 
} 
getDist() { 
return Math.sqrt(this.x * this.x + 
this.y * this.y); 
} 
} 
var p = new Point(3,4); 
var dist = p.getDst(); 
alert(Hypotenuse is: + dist);

WebComponent,
Polymer,
React
재사용성 + 간편함

HTML5 기술을 이용, 재사용하기 편한 웹 컴포넌트 개발 전략
WebComponent
Custom Elements HTML Imports Templates Shadow DOM
WebComponent

!-- Import element -- 
link rel=import href=google-map.html 
 
!-- Use element -- 
google-map lat=37.790 long=-122.390/google-map

WebComponent 개발을 더 쉽게, 더 편하게!
매터리얼 디자인 적용을 위한 컴포넌트 세트 제공
Polymer

Facebook이 오픈 소스로 공개한 UI 개발 라이브러리
JSX 지원, 간단한 인터페이스, 빠른 UI 렌더링 성능
React.js
var Timer = React.createClass({ 
getInitialState: function() { 
return {secondsElapsed: 0}; 
}, 
tick: function() { 
this.setState({secondsElapsed: this.state.secondsElapsed + 1}); 
}, 
…생략…
 
render: function() { 
return ( 
divSeconds Elapsed: {this.state.secondsElapsed}/div 
); 
} 
}); 
 
React.render(Timer /, mountNode);

큰 문제를 작은 단위로 나눈다.
작게 나눈 문제를 각개 격파한다.
각개 격파한 결과를 조합한다.
Composition

React Native,
ServiceWorker API
계속 되는 네이티브 따라잡기

Facebook이 곧 공개할 또 하나의 야심작
React.js를 이용해서 JavaScript 코드로 네이티브 앱 UI 구현
“Learn Once, Write Everywhere”
React Native

오프라인 환경 지원 API
“나 이제 브라우저 닫아놔도 메신저 알림 받을 수 있어!”
ServiceWorker API
Client
ServiceWorker
Server

Not yet, but…
내일 당장, 또는 조금 먼 미래
언젠가는 터질거야 너의 그 포텐

네트워크에 연결한 사물을 이용해 축적한 데이터에서
유의미한 정보를 얻어내 가치를 창출하는 것이 목적
가벼운 서버,
데이터 시각화 기술
IOT(Internet Of Things)

http://www.slideshare.net/rlaxogns/ss-41386800

웹 기반 그래픽 라이브러리
JavaScript로 인터랙티브한 3D 그래픽 구현 가능
WebGL

더 쉬운 WebGL을 위하여…!
three.js

http://www.credit-agricole.fr/campagnes/epargne/

You can do What you want
with JavaScript
부족하지만 매력이 많은 친구입니다.
당신의 생각을 확장하면 더 많은 걸 볼 수 있습니다.

Why javaScript?

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (20)

En vedette

En vedette (20)

Similaire à Why javaScript?

Similaire à Why javaScript? (20)

Why javaScript?