SlideShare uma empresa Scribd logo
1 de 68
Baixar para ler offline
배배틀틀그그라라운운드드로로부부터터 살살아아남남기기

2018.10.112018.10.11
박재성박재성
I'm...I'm...
MochaMochaLiveScriptLiveScriptES6ES6
ECMAScriptECMAScriptJScriptJScript
ES 3.1ES 3.1ActionScriptActionScript
ES2018ES2018ES.HarmonyES.Harmony
some friends...some friends...
VirtualDOMVirtualDOMSSRSSRTree-Tree-
ShakingShakingHMRHMR
Code-SplittingCode-SplittingTime-travelTime-travel
DebuggingDebugging
State-managementState-management0CJS0CJS
I'mI'm
JavaScriptJavaScript
 friends friends
JavaScriptJavaScript
OverviewOverview
The BirthThe Birth
1995년12월4일(Netscape2.0)1995년12월4일(Netscape2.0)
dotJS2017:ABriefHistoryofJavaScript
Auth0:ABriefHistoryofJavaScript
[참고][참고]Netscape보도자료Netscape보도자료
The purpose of BirthThe purpose of Birth

MarcAndreessenMarcAndreessen
당시웹은정적,DOM인터렉션을통해당시웹은정적,DOM인터렉션을통해
다이내믹한웹을만들고자하는비전다이내믹한웹을만들고자하는비전
Java와JavaApplets큰인기,비개발자에겐덩치가크고복잡
작고단순한작업을대상,비개발자(ex디자이너)도쉽게접근가능한언어필요
BrendanEich는Netscape에고용,BrendanEich는Netscape에고용,
파생언어인파생언어인 을브라우저용으로개발하는것을계약을브라우저용으로개발하는것을계약LispLisp SchemeScheme
JavaScript는Java의보조자역할JavaScript는Java의보조자역할
(C/C++andVisualBasic같은)(C/C++andVisualBasic같은)
새롭게 개발된 이유새롭게 개발된 이유
기존언어채택할수도있었지만,기존언어채택할수도있었지만,
'Java'스럽게보여야함과'Java'를돋보이게하는'Java'스럽게보여야함과'Java'를돋보이게하는
마케팅적측면(Netscape과Sun간의협정)압력마케팅적측면(Netscape과Sun간의협정)압력
Mocha→LiveScript→JavaScriptMocha→LiveScript→JavaScript
History of ReleaseHistory of Release
1996/11표준화작업시작1996/11표준화작업시작
상표권이슈로'Java'를사용하지못함
표준화진행을위해ECMA(EuropeanComputer
ManufacturersAssociation)선택→ECMAScript
표준을위한식별자'ECMA-262'부여
담당위원회는TC39: tobecome'standard'5stages
Standardization TimelineStandardization Timeline
Ver/Edition Date Description
1997.06 Netscape2.0
1998.08 ISO와ECMA간의표준불일치로인한버전
1999.12
ES4 - Dropped-대용량스케일vs심플함유지(MS/Yahoo)
8년간논의,결국합의도출실패
2009.12 -신규스펙들을통칭
2011.06
2015.06 movestoannualsreleaseES2015/ES6,ES2016/ES7,...
ES1
ES2
ES3
ES5(v3.1) ESHarmony
ES5.1
ES6
[참고][참고]StandardECMA-262StandardECMA-262
파생 버전파생 버전
(MS - IE 3.0 1996/08)(MS - IE 3.0 1996/08)JScriptJScript
MS의JS구현엔진-Java와의상표권문제충돌을회피하기위해MS의JS구현엔진-Java와의상표권문제충돌을회피하기위해

ActionScriptActionScript
®
Flash에서사용,ES4에기반
JSEngineTamarin
The key momentsThe key moments
(The Discovery)(The Discovery)

(2005.2)
XMLHttpRequest(addedfrom ,1999)
JesseJamesGarrett
IE5
 (2006.12)
byDouglasCrockford(replacedXML)
JSON
Server-side JavaScriptServer-side JavaScript
(2009.11)byRyanDahl
ModulesModules
 (2009)
ESM(2015.6)/ ( )/AMD RequireJS CommonJS
Package ManagersPackage Managers
(2010)/ (2012)
프레임워크의 등장프레임워크의 등장
1st Gen. (2005 ~ 2013)1st Gen. (2005 ~ 2013)
(2006), (2005), (2007),etc.jQuery Prototype MooTools
2nd Gen. (2013 ~ Present)2nd Gen. (2013 ~ Present)
(2009,Popularized2013),
(2013.5), (2014)
AngularJS
React Vue.js
시의적절하게등장한다양한생태계는시의적절하게등장한다양한생태계는
지속적성장을가능하게함지속적성장을가능하게함
Browser WarsBrowser Wars
    
(2008/9/2)이후,(2008/9/2)이후,
신규스펙들의구현및사용이빨라짐신규스펙들의구현및사용이빨라짐
Chrome의등장Chrome의등장
Evergreen BrowserEvergreen Browser
과거와달라진버전의중요성과거와달라진버전의중요성
[참고][참고] Wikipedia:BrowserwarsWikipedia:Browserwars
BrowserLogosBrowserLogos
JavaScript는JavaScript는
JavaScript가 아니다JavaScript가 아니다
Vanilla is not commonVanilla is not common
Vanilla개발은일반적이지않음
Framework+toolchains(transpiler,bundling)
실작업코드는브라우저에서직접적인실행어려움실작업코드는브라우저에서직접적인실행어려움
최종적결과물은transpile을통해JS로변환최종적결과물은transpile을통해JS로변환
오늘날의 JS 개발은?오늘날의 JS 개발은?
프레임워크 + 개발도구프레임워크 + 개발도구
대다수 '기능'들은대다수 '기능'들은
npm 패키지를 사용, '조립'npm 패키지를 사용, '조립'
개발 방식의 진화개발 방식의 진화
Library → FrameworkLibrary → Framework
직접적인DOM핸들링필요성감소
DOMAPInative지원향상(ex.CSSselector엔진불필요)
컴포넌트단위의기능에집중,DOM은프레임워크에맡김
→프레임워크에따라보다효율적인DOM(VirtualDOM등)
처리제공
[참고][참고]RemovingjQueryfromGitHub.comfrontendRemovingjQueryfromGitHub.comfrontend
Transpiling EraTranspiling Era
Fromnon/pure-JavaScriptcodeFromnon/pure-JavaScriptcode
Compiles/GeneratestoJavaScriptCompiles/GeneratestoJavaScript
   elmelm
 
오래전부터JS로컴파일되는도구/언어들의시도는지속오래전부터JS로컴파일되는도구/언어들의시도는지속
(2014)(2014)
새로운syntax를즉시사용할수있게됨새로운syntax를즉시사용할수있게됨
ES6+코드를이전브라우저호환코드로컴파일ES6+코드를이전브라우저호환코드로컴파일
// ES6 arrow function code
var sum = (num1, num2) = num1 + num2;
// transpiled to ES5
var sum = function(num1, num2) {
return num1 + num2;
}
브라우저가새문법을지원하지않더라도사용가능.브라우저가새문법을지원하지않더라도사용가능.
브라우저native지원시,필요하지않은영역브라우저native지원시,필요하지않은영역
[참고][참고] (ES6→ES5)(2014/09),become'Babel'2015/02((ES6→ES5)(2014/09),become'Babel'2015/02( ))6to56to5 NotBorntoDieNotBorntoDie
SebastianMcKenzie:JavaScriptTransformation|JSConfUS2015SebastianMcKenzie:JavaScriptTransformation|JSConfUS2015
2018년 동향2018년 동향
2018년 동향2018년 동향
언어적 관점언어적 관점
[참고][참고]2018년과이후JavaScript의동향-JavaScript(ECMAScript)2018년과이후JavaScript의동향-JavaScript(ECMAScript)
버전 구분 중요성 감소버전 구분 중요성 감소
ES20xx/ESxES20xx/ESx
Annualrelease로인해해마다릴리스
새로운명세의릴리스까지너무오래소요
단일릴리스모델의한계
Transpiler(Babel)는최신스펙사용이슈해결
과거와같이버저닝에큰변화가아닌feature단위
는스펙을빠르게구현Evergreen브라우저
[참고][참고]JavaScript—WTFisES6,ES8,ES2017,ECMAScript…?JavaScript—WTFisES6,ES8,ES2017,ECMAScript…?
What's Coming?What's Coming?
ES2017/ES8
ES2018/ES9
RegExpimprovement
ES2019/ES10
catch파라미터생략가능
extendECMA-262syntaxintoasupersetofJSON
async/await
SharedMemoryandAtomics
Optionalcatchbinding
JSONSuperset
[참고][참고]TC39:FinishedProposalsTC39:FinishedProposals
프로그래밍언어(지금은C와C++)를컴파일해,프로그래밍언어(지금은C와C++)를컴파일해,
어느브라우저에서나빠르게실행되는어느브라우저에서나빠르게실행되는
바이너리(low-levellanguage)로바꾸는기술바이너리(low-levellanguage)로바꾸는기술
주요 브라우저 및 Node.js 모두 지원!주요 브라우저 및 Node.js 모두 지원!
[참고][참고]SupportonSupporton ,, ,, andand 

ChromeChrome FFFF SafariSafari EdgeEdge
Node.jsv8support!Node.jsv8support!
Webpackv4:WASMexampleWebpackv4:WASMexample
정적 타입 시스템정적 타입 시스템
JavaScript의부족한영역(loosetyping)을채워줌JavaScript의부족한영역(loosetyping)을채워줌
버그감소( 연구결과)
효율적코드작성(CodeAssist)-
asLanguages: , ,
asTools:
15%감소
TSdefinition(.d.ts)
TypeScript ReasonML PureScript
Flow
TypeScript의지속적인영향력확대TypeScript의지속적인영향력확대
Angular,Vue.js,Polymer,...Angular,Vue.js,Polymer,...
2018년 동향2018년 동향
라이브러리/프레임워크라이브러리/프레임워크
[참고][참고]2018년과이후JavaScript의동향-라이브러리와프레임워크2018년과이후JavaScript의동향-라이브러리와프레임워크
ReactReact
2017라이선스이슈2017라이선스이슈(( →→ ))
FeaturesFeatures
:Childnode추가개선
: 이슈해결(이전API는16.x까지만동작)
Upcoming 
→TimeSlicing(컴퓨터성능UX),Suspense(네트워크성능UX)
인큐베이션졸업, (2018.10.1)
(v16.3):componentWillMount,
componentWillReceivePropscomponentWillUpdate
BSD+PatentsBSD+Patents Re-licensedtoMITRe-licensedtoMIT
ImprovedFragments
NewContextAPI propdrilling
RenderingImprovements
create-react-app v2release
NewComponentLifecycle
v17에서제거예정
[참고][참고]Reactv16.0Reactv16.0
Vue.jsVue.js
Impressive2017-
Ecosystemisgrowing- ,
네이티브앱개발-네이티브앱개발-
FeaturesFeatures
v3: -Zeroconfiguration(2018/8/13)
→app,liborwebcomponent(wc/wc-async)
40KGitHubStars
Nuxt.js Vuetify
NativeScript-VueNativeScript-Vue
dropIEsupport
vue-cli BuildTargets
Vue.js 3.0Vue.js 3.0 (likely 2019)(likely 2019)
Transpile필요없는native클래스기반컴포넌트
3.x코드베이스는TypeScript로작성예정
Proxy-basedobserver:v2.0의Object.defineProperty기반제한제거
Lazyobservationbydefault:startupdataoberserve오버헤드제거
Tree-shaking친화적:빌트인컴포넌트디렉티브런타임헬퍼온디멘드임포트
newVirtualDOMimplementation
2.0보다100%이상빠른성능향상
별도빌드버전을통한IE11지원
[참고][참고]EvanYou-EvanYou- (2018/9/30)(2018/9/30)PlansfortheNextIterationofVue.jsPlansfortheNextIterationofVue.js
AngularAngular
:새로운렌더러,작고빠른컴파일(v6에포함되지않음)
:Angular컴포넌트→CustomElement
AngularLabs(안정성유지,신규연구결과균형조절및전달)
Schematics:코드를변환,생성하는도구
ComponentDevKit:다양한확장도구
ABC(Angular+Bazel+Closure):Angular애플리케이션빌드도구
v7.0은
IvyRenderer
AngularElements
2018/10내로정식릴리스예정
[참고][참고] 
IvyRenderer:IvyRenderer:
Version6ofAngularNowAvailableVersion6ofAngularNowAvailable
ng-conf:Day1Keynote-BradGreen,MiškoHevery,KaraEricksonng-conf:Day1Keynote-BradGreen,MiškoHevery,KaraErickson
Web ComponentsWeb Components
Allmajorbrowserssupport
→Edgew/Polyfill,  indevelopment
HTMLimports→ESM전환
ShadowDOM CustomElements
PolymerPolymer
Factory메서드통한요소정의→표준ES6클래스/커스텀엘리먼트활용
:커스텀엘리먼트생성하는기본클래스에서활용되는라이브러리
DOM렌더링집중likeJSX→표준기술이므로빌드과정필요없음
lit-html
Angular(AngularElement),Vue.js→웹컴포넌트로컴파일가능Angular(AngularElement),Vue.js→웹컴포넌트로컴파일가능
2018년 동향2018년 동향
브라우저 밖의 영역브라우저 밖의 영역
[참고][참고]2018년과이후JavaScript의동향-브라우저밖의JavaScript2018년과이후JavaScript의동향-브라우저밖의JavaScript
2017년,2억5천만다운로드
다양한영역의기업들사용증가
주로Back-end영역의사용
런타임엔진과Node.js간의추상화레이어
→ReplacingNAN(NativeAbstractionsforNode.js)
실험적
N-API(Node.jsAPI)
Node-ChakraCore
WebAssemblyandNode.JS
[참고][참고]10ThingsIRegretAboutNode.js-RyanDahl-JSConfEU201810ThingsIRegretAboutNode.js-RyanDahl-JSConfEU2018
패키지 관리자:패키지 관리자:
DonotuseBowerDonotuseBower
전세계가장큰레지스트리로성장(2018/10기준,80만개)
repo변경: →
GitHubissue→ 포럼전환(2018/7)
( , )
npx,packagerunner
https://github.com/npm/npm https://github.com/npm/cli
npm.community
npm의사고들 Linux파일시스템권한변경 eslint-scope
패키지 관리자:패키지 관리자:
에서사용에서사용50만개프로젝트50만개프로젝트
:다중패키지의monorepo구조에서의효율적패키지관리
:의존성서브패키지의버전관리

workspaces
resolution
얼만큼 사용되나?얼만큼 사용되나? (yarn을 통한 패키지 다운로드)(yarn을 통한 패키지 다운로드)
2018.9월:6,483,949다운로드발생
→전체npm다운로드의0.03%
[참고][참고]https://stats.yarnpkg.com/https://stats.yarnpkg.com/
npm vs yarnnpm vs yarn
초기yarn의장점(속도)점점퇴색초기yarn의장점(속도)점점퇴색
[참고][참고]https://github.com/thomaschaaf/npm-vs-yarnhttps://github.com/thomaschaaf/npm-vs-yarn
번들러/빌드 도구번들러/빌드 도구
 (2018/02)(2018/02)v4v4
향상된빌드시간:60~98%감소
(0CJS)
→development|production|none
splitcli:
modeproperty
webpack-cli
생태계는메이저업데이트에생태계는메이저업데이트에
준비되지않았을수있다.준비되지않았을수있다.
0CJS0CJS
Zero Configuration JSZero Configuration JS
ConfigurationHeadache
 
과같은도구는무설정번들링지향과같은도구는무설정번들링지향ParcelParcel
모바일 애플리케이션모바일 애플리케이션
webview를래핑하는형태의hybrid-app은죽어감
JStoNative형태의네이티브개발이자리잡은상태
Angularfriendly
:UI컴포넌트(차트,캘린더,등)무료제공
를통한Vue.js지원
AR및TV플랫폼지원확산
NativeScriptUI
NativeScript-Vue
[참고][참고]RoadmapReleaseNotesRoadmapReleaseNotes
React NativeReact Native
React인기에더불어인기상승
발표(July24,2017)발표(July24,2017)
→→ (September21,2018)(September21,2018)
다양한생태계/도구체인-ex.
create-react-native-appcreate-react-native-app
hasbeenmergedwithExpoCLIhasbeenmergedwithExpoCLI
TV플랫폼(Android/Apple)지원TV플랫폼(Android/Apple)지원
Expo
웹앱을빠르게데스크톱앱으로전환시장점
데스크톱 애플리케이션데스크톱 애플리케이션
모두Chromium기반모두Chromium기반

세밀한제어기능제공세밀한제어기능제공
→→ 같은프로젝트등장같은프로젝트등장Windows95Windows95
NW.jsNW.js
와와 지원추가로드디어기본사용환경갖춤지원추가로드디어기본사용환경갖춤SafariSafari EdgeEdge
isServiceWorkerready?
본격적인분위기는아직무르익지않았지만,본격적인분위기는아직무르익지않았지만,
계속해서사용증가할것으로예측계속해서사용증가할것으로예측
다양한도구의등장다양한도구의등장
, , ,Workbox HNPWA PWAStarterKit pwa-helpers
WebXR Device APIWebXR Device API
WebVRrefactoring필요성제기
WebVRAPI→WebXRDeviceAPI
:웹에서몰입환경구현위한신기술모음ImmersiveWeb
아직성숙단계는아니기때문에,아직성숙단계는아니기때문에,
가능성을확인하는형태로의접근가능성을확인하는형태로의접근
[참고][참고] //WelcometotheimmersivewebWelcometotheimmersiveweb WebXRSamplesWebXRSamples
JavaScript는JavaScript는
어디로 가고 있나?어디로 가고 있나?
흐릿해지는 경계흐릿해지는 경계
(Backend/Frontend)(Backend/Frontend)
FE와BE구분없이,하나의코드셋으로모든곳에서실행FE와BE구분없이,하나의코드셋으로모든곳에서실행
UniversalJavaScriptUniversalJavaScript
   
  
[참고][참고]Node.js는Back-end에서주로사용Node.js는Back-end에서주로사용
Node.js:2017UserSurveyExecutiveSummaryNode.js:2017UserSurveyExecutiveSummary
Intent to mergeIntent to merge
Node.js + JS FoundationNode.js + JS Foundation
JS의역할과다양한환경으로의확장에따른환경변화JS의역할과다양한환경으로의확장에따른환경변화
지속적이고견실한성장을위한지속적이고견실한성장을위한
생태계협업의필요성이어느때보다도중요생태계협업의필요성이어느때보다도중요

[참고][참고] (2018.10.4)(2018.10.4)Node.jsFoundationandJSFoundationAnnounceIntenttoCreateJointOrganizationNode.jsFoundationandJSFoundationAnnounceIntenttoCreateJointOrganization
JavaScript로부터JavaScript로부터
생존하기생존하기
JavaScript FatigueJavaScript Fatigue
많은가이드들은몇가지만설치/설정하면많은가이드들은몇가지만설치/설정하면
쉽다(쉽다( )...고말한다.)...고말한다.outoftheboxoutofthebox
수많은플러그인과설정등을접하다보면수많은플러그인과설정등을접하다보면
쉬운거 맞어?쉬운거 맞어?
우리는우리는
무엇을알아야할까?
얼만큼알아야할까?
How to stay:How to stay: Up-to-date?Up-to-date?
1) Trends1) Trends
:새로운/떠오르는프로젝트확인
:최신소식업데이트

GitHubTrending
FETechMailings
2) Browsers Update2) Browsers Update
// // //ChromeChrome WebKitWebKit MSEdgeMSEdge FirefoxFirefox
Keep eyes onKeep eyes on
다른사람들은어떻게생각하나?다른사람들은어떻게생각하나?

StateOfJS
StackOverflowAnnualDeveloperSurvey
Medium'sjavascriptposts
[참고][참고] FrontendRoadmapFrontendRoadmap
FrontendPathCoursesforLearningFrontEndFrontendPathCoursesforLearningFrontEnd
컨퍼런스컨퍼런스
많은컨퍼런스들이행사종료후,세션비디오를공개많은컨퍼런스들이행사종료후,세션비디오를공개
스케줄을살펴보는것만으로도스케줄을살펴보는것만으로도
현재의흐름을파악할수있다.현재의흐름을파악할수있다.
JSConf
Fluent
dotJS
JSKongress
NetflixJavaScriptTalks
[참고][참고]https://github.com/frontendfront/front-end-conferenceshttps://github.com/frontendfront/front-end-conferences
무엇이 옳은 선택인가?무엇이 옳은 선택인가?
매몰비용 오류의 함정매몰비용 오류의 함정
특정도구에투자한노력이많아지면,나의선택(도구)이합리적이특정도구에투자한노력이많아지면,나의선택(도구)이합리적이
었다는것을자신이나다른사람들에게설득하기위해노력었다는것을자신이나다른사람들에게설득하기위해노력
AngularJS등장→모든것을AngularJS로!AngularJS등장→모든것을AngularJS로!
현재는?현재는?
React,ReactandReactReact,ReactandReact
MagpieMagpie DeveloperDeveloper
syndromesyndrome
대체로개발자들은대체로개발자들은
기존에문제없이사용하던기술들을뒤로하고,기존에문제없이사용하던기술들을뒤로하고,
'새롭고'새롭고 반짝'반짝'
이는것들에너무쉽게관심을빼앗긴다.이는것들에너무쉽게관심을빼앗긴다.
[참고][참고] 
Magpielogofrom,Magpielogofrom,
TheMagpieDeveloperTheMagpieDeveloper
MagpieBrewingCo.MagpieBrewingCo.
무엇을 사용하던간에무엇을 사용하던간에
결국 JavaScript 아닌가?결국 JavaScript 아닌가?
Transpiling:결국실행되는JS코드생성필요Transpiling:결국실행되는JS코드생성필요

‐DouglasCrockford‐DouglasCrockford
TSaddssweetness,butataprice.TSaddssweetness,butataprice.
[참고][참고] JavaScriptvs.TypeScriptvs.ReasonMLJavaScriptvs.TypeScriptvs.ReasonML
HereiswhyyoumightNOTwanttouseTypeScriptHereiswhyyoumightNOTwanttouseTypeScript
지속적 복잡도 증가지속적 복잡도 증가
이미필수적인도구들도넘쳐나는상황에서이미필수적인도구들도넘쳐나는상황에서
무언가를하나추가할때마다비례하는도구들의증가무언가를하나추가할때마다비례하는도구들의증가
xxx-loader-xxx,xxx-plugin-xxx,...xxx-loader-xxx,xxx-plugin-xxx,...
2018/09기준,플러그인수:2018/09기준,플러그인수:
webpack
plugin: 개
loader 개
babel 개
3,319
3,502
3,142
최신 업데이트최신 업데이트
항상 정답인가?항상 정답인가?
도구들의업데이트에따라코드수정이필요한모순적상황도구들의업데이트에따라코드수정이필요한모순적상황
이러한작업은때에따라많은리소스수반이러한작업은때에따라많은리소스수반
메이저업데이트후,수많은플러그인들은메이저업데이트후,수많은플러그인들은
대비되지않거나대체제가없기도대비되지않거나대체제가없기도
[참고][참고]Babel7:Babel7: 
Webpack4:Webpack4:
MajorBreakingChangesMajorBreakingChanges
Breakingchangesforplugins/loadersBreakingchangesforplugins/loaders
Webpack's caseWebpack's case
webpack-dev-server:'maintenacemode'로전환발표webpack-dev-server:'maintenacemode'로전환발표
이제,다시개발진행한다고함이제,다시개발진행한다고함
webpack-dev-server→webpack-servewebpack-dev-server→webpack-serve
→다시webpack-dev-server→다시webpack-dev-server
도동일→도동일→ (nowdeprecated)(nowdeprecated)webpack-cliwebpack-cli webpack-commandwebpack-command
Whydeprecatedwebpack-command?Whydeprecatedwebpack-command?
webpack-cliisverystableandhavemorefeatureswebpack-cliisverystableandhavemorefeatures
[참고][참고] RemoveobsoletemaintenancenoteRemoveobsoletemaintenancenote
Clarifyrelationshipwithwebpack-serveClarifyrelationshipwithwebpack-serve
각자의 사정은 모두 다르다.각자의 사정은 모두 다르다.
'무엇'이 정답이라 할수 없다.'무엇'이 정답이라 할수 없다.
과거jQuery,AngularJS가답처럼여겨졌지만,과거jQuery,AngularJS가답처럼여겨졌지만,
지금React가대세적인흐름의상태에서지금React가대세적인흐름의상태에서
Angular가정답이라고할수있을까?Angular가정답이라고할수있을까?
그때는맞고,지금은틀리다.그때는맞고,지금은틀리다.
모든 것을 다 알아야 할까?모든 것을 다 알아야 할까?
누군가는'특정'영역에보다관심을쏟을수있고,누군가는'특정'영역에보다관심을쏟을수있고,
더'많이'알고있을수도있다.더'많이'알고있을수도있다.
그것이모범적인'답변'일까?그것이모범적인'답변'일까?
모든 것을 알수 있을까?모든 것을 알수 있을까?
LinusTorvalds가모든Linux의모든생태계의변화들을,LinusTorvalds가모든Linux의모든생태계의변화들을,
BrendanEich가모든JS생태계의변화들을BrendanEich가모든JS생태계의변화들을
알고 있을거라고알고 있을거라고
생각하시나요?생각하시나요?
우리의 자세는?우리의 자세는?
EverythingisamazingEverythingisamazing
andnobodyishappyandnobodyishappy
Expert로써모든플랫폼의모든것을알아야한다는생각
모든것을배우는것이해결책인가?
단순하게현재작업에필요한것,또는끌리는것에집중
[참고][참고]
WhyI’mThankfulforJSFatigueWhyI’mThankfulforJSFatigue
AStudyPlanToCureJavaScriptFatigueAStudyPlanToCureJavaScriptFatigue
결국은 적당한 밸런스결국은 적당한 밸런스
너무많은것을알려고하지않아도된다.너무많은것을알려고하지않아도된다.
그러나,적당한'호기심'은가져야하며,'지속적'인꾸준함은필요그러나,적당한'호기심'은가져야하며,'지속적'인꾸준함은필요
세상은 할게 너무 많다.세상은 할게 너무 많다.
영화도봐야하고,음악도들어야하고
게임,연애,여행...
JavaScriptJavaScript
is a Journey!is a Journey!
이겼닭! 오늘 저녁은 치킨이닭!이겼닭! 오늘 저녁은 치킨이닭!
Winner winner chicken dinner!Winner winner chicken dinner!
고맙습니다.고맙습니다.고맙습니다.고맙습니다.고맙습니다.고맙습니다.고맙습니다.고맙습니다.고맙습니다.고맙습니다.고맙습니다.고맙습니다.고맙습니다.고맙습니다.고맙습니다.고맙습니다.고맙습니다.고맙습니다.고맙습니다.고맙습니다.고맙습니다.고맙습니다.고맙습니다.고맙습니다.고맙습니다.고맙습니다.고맙습니다.고맙습니다.고맙습니다.고맙습니다.고맙습니다.고맙습니다.고맙습니다.고맙습니다.고맙습니다.고맙습니다.고맙습니다.고맙습니다.고맙습니다.고맙습니다.고맙습니다.고맙습니다.고맙습니다.고맙습니다.고맙습니다.고맙습니다.고맙습니다.고맙습니다.고맙습니다.고맙습니다.고맙습니다.고맙습니다.고맙습니다.고맙습니다.고맙습니다.고맙습니다.고맙습니다.고맙습니다.고맙습니다.고맙습니다.고맙습니다.고맙습니다.고맙습니다.고맙습니다.고맙습니다.고맙습니다.고맙습니다.고맙습니다.고맙습니다.고맙습니다.고맙습니다.고맙습니다.고맙습니다.고맙습니다.고맙습니다.고맙습니다.고맙습니다.고맙습니다.고맙습니다.고맙습니다.고맙습니다.고맙습니다.고맙습니다.고맙습니다.고맙습니다.고맙습니다.고맙습니다.고맙습니다.고맙습니다.고맙습니다.고맙습니다.고맙습니다.고맙습니다.고맙습니다.고맙습니다.고맙습니다.고맙습니다.고맙습니다.고맙습니다.고맙습니다.고맙습니다.고맙습니다.
ank You.hank You.hank You.hank You.hank You.hank You.hank You.hank You.hank You.hank You.hank You.hank You.hank You.hank You.hank You.hank You.hank You.hank You.hank You.hank You.hank You.hank You.hank You.hank You.hank You.hank You.hank You.hank You.hank You.hank You.Thank You.Thank You.Thank You.Thank You.Thank You.Thank You.Thank You.Thank You.Thank You.Thank You.Thank You.Thank You.Thank You.Thank You.Thank You.Thank You.Thank You.Thank You.Thank You.Thank You.Thank You.Thank You.Thank You.Thank You.Thank You.Thank You.Thank You.Thank You.Thank You.Thank You.Thank You.Thank You.Thank You.Thank You.Thank You.Thank You.Thank You.Thank You.Thank You.Thank You.Thank You.Thank You.Thank You.Thank You.Thank You.Thank You.Thank You.Thank You.Thank You.Thank You.Thank You.Thank You.Thank You.Thank You.Thank You.Thank You.Thank You.Thank You.Thank You.Thank You.Thank You.Thank You.Thank You.Thank You.Thank You.Thank You.Thank You.Thank You.Thank You.Thank You.Thank You.Thank You.
iiiiiiiiiiiiraciasraciasraciasraciasraciasraciasraciasraciasraciasraciasraciasGraciasGraciasGraciasGraciasGraciasGraciasGraciasGraciasGraciasGraciasGraciasGraciasGraciasGracias.Gracias.Gracias.Gracias.Gracias.Gracias.Gracias.Gracias.Gracias.Gracias.Gracias.Gracias.Gracias.Gracias.Gracias.Gracias.Gracias.Gracias.Gracias.Gracias.Gracias.Gracias.Gracias.Gracias.Gracias.Gracias.Gracias.Gracias.Gracias.Gracias.Gracias.Gracias.Gracias.Gracias.Gracias.Gracias.Gracias.Gracias.Gracias.Gracias.Gracias.Gracias.Gracias.Gracias.Gracias.Gracias.Gracias.Gracias.Gracias.Gracias.Gracias.Gracias.Gracias.Gracias.Gracias.Gracias.Gracias.Gracias.Gracias.Gracias.Gracias.Gracias.

Mais conteúdo relacionado

Semelhante a [DEVIEW 2018] JavaScript 배틀그라운드로부터 살아남기

Web devmobile 8회열린세미나
Web devmobile 8회열린세미나Web devmobile 8회열린세미나
Web devmobile 8회열린세미나Pumsuk Cho
 
웹 소프트웨어 시대의 새로운 롤(role) 모델, 자바스크립트
웹 소프트웨어 시대의 새로운 롤(role) 모델, 자바스크립트웹 소프트웨어 시대의 새로운 롤(role) 모델, 자바스크립트
웹 소프트웨어 시대의 새로운 롤(role) 모델, 자바스크립트Rhio Kim
 
TensorFlow.js & Applied AI at the Coca-Cola Company
TensorFlow.js & Applied AI at the Coca-Cola CompanyTensorFlow.js & Applied AI at the Coca-Cola Company
TensorFlow.js & Applied AI at the Coca-Cola CompanyModulabs
 
Start IoT with JavaScript - 1.기초
Start IoT with JavaScript - 1.기초Start IoT with JavaScript - 1.기초
Start IoT with JavaScript - 1.기초Park Jonggun
 
ARTIK 710 IoT class 02
ARTIK 710 IoT class 02ARTIK 710 IoT class 02
ARTIK 710 IoT class 02정출 김
 
[Main Session] 미래의 Java 미리보기 - 앰버와 발할라 프로젝트를 중심으로
[Main Session] 미래의 Java 미리보기 - 앰버와 발할라 프로젝트를 중심으로[Main Session] 미래의 Java 미리보기 - 앰버와 발할라 프로젝트를 중심으로
[Main Session] 미래의 Java 미리보기 - 앰버와 발할라 프로젝트를 중심으로Oracle Korea
 
Front end dev 2016 & beyond
Front end dev 2016 & beyondFront end dev 2016 & beyond
Front end dev 2016 & beyondJae Sung Park
 
Javascript everywhere - Node.js | Devon 2012
Javascript everywhere - Node.js | Devon 2012Javascript everywhere - Node.js | Devon 2012
Javascript everywhere - Node.js | Devon 2012Daum DNA
 
Web assembly 맛보기
Web assembly 맛보기Web assembly 맛보기
Web assembly 맛보기GyeongSeok Seo
 
Let'Swift 2023 Swift Macro, 어디다 쓰죠?
Let'Swift 2023 Swift Macro, 어디다 쓰죠?Let'Swift 2023 Swift Macro, 어디다 쓰죠?
Let'Swift 2023 Swift Macro, 어디다 쓰죠?williciousk
 
Isomorphicspring Isomorphic - spring web seminar 2015
Isomorphicspring Isomorphic - spring web seminar 2015Isomorphicspring Isomorphic - spring web seminar 2015
Isomorphicspring Isomorphic - spring web seminar 2015sung yong jung
 
21.10.25 ASTERA Study
21.10.25 ASTERA Study21.10.25 ASTERA Study
21.10.25 ASTERA StudyJihun Jeon
 
[NDC17] Unreal.js - 자바스크립트로 쉽고 빠른 UE4 개발하기
[NDC17] Unreal.js - 자바스크립트로 쉽고 빠른 UE4 개발하기[NDC17] Unreal.js - 자바스크립트로 쉽고 빠른 UE4 개발하기
[NDC17] Unreal.js - 자바스크립트로 쉽고 빠른 UE4 개발하기현철 조
 
개발자의 컴퓨터
개발자의 컴퓨터개발자의 컴퓨터
개발자의 컴퓨터jaehyok Song
 
Windows Debugging Technique #3
Windows Debugging Technique #3Windows Debugging Technique #3
Windows Debugging Technique #3Wooseok Seo
 
Itcookbook Asp Chapter2
Itcookbook Asp Chapter2Itcookbook Asp Chapter2
Itcookbook Asp Chapter2xyzlee
 

Semelhante a [DEVIEW 2018] JavaScript 배틀그라운드로부터 살아남기 (20)

Web devmobile 8회열린세미나
Web devmobile 8회열린세미나Web devmobile 8회열린세미나
Web devmobile 8회열린세미나
 
웹 소프트웨어 시대의 새로운 롤(role) 모델, 자바스크립트
웹 소프트웨어 시대의 새로운 롤(role) 모델, 자바스크립트웹 소프트웨어 시대의 새로운 롤(role) 모델, 자바스크립트
웹 소프트웨어 시대의 새로운 롤(role) 모델, 자바스크립트
 
TensorFlow.js & Applied AI at the Coca-Cola Company
TensorFlow.js & Applied AI at the Coca-Cola CompanyTensorFlow.js & Applied AI at the Coca-Cola Company
TensorFlow.js & Applied AI at the Coca-Cola Company
 
Start IoT with JavaScript - 1.기초
Start IoT with JavaScript - 1.기초Start IoT with JavaScript - 1.기초
Start IoT with JavaScript - 1.기초
 
ARTIK 710 IoT class 02
ARTIK 710 IoT class 02ARTIK 710 IoT class 02
ARTIK 710 IoT class 02
 
[Main Session] 미래의 Java 미리보기 - 앰버와 발할라 프로젝트를 중심으로
[Main Session] 미래의 Java 미리보기 - 앰버와 발할라 프로젝트를 중심으로[Main Session] 미래의 Java 미리보기 - 앰버와 발할라 프로젝트를 중심으로
[Main Session] 미래의 Java 미리보기 - 앰버와 발할라 프로젝트를 중심으로
 
Java.next
Java.nextJava.next
Java.next
 
Front end dev 2016 & beyond
Front end dev 2016 & beyondFront end dev 2016 & beyond
Front end dev 2016 & beyond
 
Javascript everywhere - Node.js | Devon 2012
Javascript everywhere - Node.js | Devon 2012Javascript everywhere - Node.js | Devon 2012
Javascript everywhere - Node.js | Devon 2012
 
Web assembly 맛보기
Web assembly 맛보기Web assembly 맛보기
Web assembly 맛보기
 
Spring Boot 1
Spring Boot 1Spring Boot 1
Spring Boot 1
 
Let'Swift 2023 Swift Macro, 어디다 쓰죠?
Let'Swift 2023 Swift Macro, 어디다 쓰죠?Let'Swift 2023 Swift Macro, 어디다 쓰죠?
Let'Swift 2023 Swift Macro, 어디다 쓰죠?
 
Isomorphicspring Isomorphic - spring web seminar 2015
Isomorphicspring Isomorphic - spring web seminar 2015Isomorphicspring Isomorphic - spring web seminar 2015
Isomorphicspring Isomorphic - spring web seminar 2015
 
21.10.25 ASTERA Study
21.10.25 ASTERA Study21.10.25 ASTERA Study
21.10.25 ASTERA Study
 
[NDC17] Unreal.js - 자바스크립트로 쉽고 빠른 UE4 개발하기
[NDC17] Unreal.js - 자바스크립트로 쉽고 빠른 UE4 개발하기[NDC17] Unreal.js - 자바스크립트로 쉽고 빠른 UE4 개발하기
[NDC17] Unreal.js - 자바스크립트로 쉽고 빠른 UE4 개발하기
 
Pp3 devweb
Pp3 devwebPp3 devweb
Pp3 devweb
 
개발자의 컴퓨터
개발자의 컴퓨터개발자의 컴퓨터
개발자의 컴퓨터
 
Html5 performance
Html5 performanceHtml5 performance
Html5 performance
 
Windows Debugging Technique #3
Windows Debugging Technique #3Windows Debugging Technique #3
Windows Debugging Technique #3
 
Itcookbook Asp Chapter2
Itcookbook Asp Chapter2Itcookbook Asp Chapter2
Itcookbook Asp Chapter2
 

Mais de Jae Sung Park

[SOSCON 2018] 오픈소스 개발: Behind the scenes
[SOSCON 2018] 오픈소스 개발: Behind the scenes[SOSCON 2018] 오픈소스 개발: Behind the scenes
[SOSCON 2018] 오픈소스 개발: Behind the scenesJae Sung Park
 
[SOSCON 2017] 네이버의 FE 오픈소스: jindo에서 billboard.js까지
[SOSCON 2017] 네이버의 FE 오픈소스: jindo에서 billboard.js까지[SOSCON 2017] 네이버의 FE 오픈소스: jindo에서 billboard.js까지
[SOSCON 2017] 네이버의 FE 오픈소스: jindo에서 billboard.js까지Jae Sung Park
 
[DEVIEW 2017] 14일만에 GitHub 스타 1K 받은 차트 오픈소스 개발기
[DEVIEW 2017] 14일만에 GitHub 스타 1K 받은 차트 오픈소스 개발기[DEVIEW 2017] 14일만에 GitHub 스타 1K 받은 차트 오픈소스 개발기
[DEVIEW 2017] 14일만에 GitHub 스타 1K 받은 차트 오픈소스 개발기Jae Sung Park
 
[DEVIEW 2016] 네이버의 모던 웹 라이브러리 - egjs
[DEVIEW 2016] 네이버의 모던 웹 라이브러리 - egjs[DEVIEW 2016] 네이버의 모던 웹 라이브러리 - egjs
[DEVIEW 2016] 네이버의 모던 웹 라이브러리 - egjsJae Sung Park
 
How jQuery event works
How jQuery event worksHow jQuery event works
How jQuery event worksJae Sung Park
 
현실적 Angular js
현실적 Angular js현실적 Angular js
현실적 Angular jsJae Sung Park
 
가볍게 살펴보는 AngularJS
가볍게 살펴보는 AngularJS가볍게 살펴보는 AngularJS
가볍게 살펴보는 AngularJSJae Sung Park
 
Web Components & Polymer
Web Components & PolymerWeb Components & Polymer
Web Components & PolymerJae Sung Park
 
모바일 웹 디버깅
모바일 웹 디버깅모바일 웹 디버깅
모바일 웹 디버깅Jae Sung Park
 
혁신적인 웹컴포넌트 라이브러리 - Polymer
혁신적인 웹컴포넌트 라이브러리 - Polymer혁신적인 웹컴포넌트 라이브러리 - Polymer
혁신적인 웹컴포넌트 라이브러리 - PolymerJae Sung Park
 
우리가 몰랐던 크롬 개발자 도구
우리가 몰랐던 크롬 개발자 도구우리가 몰랐던 크롬 개발자 도구
우리가 몰랐던 크롬 개발자 도구Jae Sung Park
 
스마트 TV 앱 개발 맛보기
스마트 TV 앱 개발 맛보기스마트 TV 앱 개발 맛보기
스마트 TV 앱 개발 맛보기Jae Sung Park
 
How to create Aptana Ruble
How to create Aptana RubleHow to create Aptana Ruble
How to create Aptana RubleJae Sung Park
 
도구를 활용한 더 나은 웹 개발: Yeoman
도구를 활용한 더 나은 웹 개발: Yeoman도구를 활용한 더 나은 웹 개발: Yeoman
도구를 활용한 더 나은 웹 개발: YeomanJae Sung Park
 
Developing game audio with the Web Audio API
Developing game audio with the Web Audio APIDeveloping game audio with the Web Audio API
Developing game audio with the Web Audio APIJae Sung Park
 

Mais de Jae Sung Park (20)

[SOSCON 2018] 오픈소스 개발: Behind the scenes
[SOSCON 2018] 오픈소스 개발: Behind the scenes[SOSCON 2018] 오픈소스 개발: Behind the scenes
[SOSCON 2018] 오픈소스 개발: Behind the scenes
 
[SOSCON 2017] 네이버의 FE 오픈소스: jindo에서 billboard.js까지
[SOSCON 2017] 네이버의 FE 오픈소스: jindo에서 billboard.js까지[SOSCON 2017] 네이버의 FE 오픈소스: jindo에서 billboard.js까지
[SOSCON 2017] 네이버의 FE 오픈소스: jindo에서 billboard.js까지
 
[DEVIEW 2017] 14일만에 GitHub 스타 1K 받은 차트 오픈소스 개발기
[DEVIEW 2017] 14일만에 GitHub 스타 1K 받은 차트 오픈소스 개발기[DEVIEW 2017] 14일만에 GitHub 스타 1K 받은 차트 오픈소스 개발기
[DEVIEW 2017] 14일만에 GitHub 스타 1K 받은 차트 오픈소스 개발기
 
[DEVIEW 2016] 네이버의 모던 웹 라이브러리 - egjs
[DEVIEW 2016] 네이버의 모던 웹 라이브러리 - egjs[DEVIEW 2016] 네이버의 모던 웹 라이브러리 - egjs
[DEVIEW 2016] 네이버의 모던 웹 라이브러리 - egjs
 
현실적 PWA
현실적 PWA현실적 PWA
현실적 PWA
 
How jQuery event works
How jQuery event worksHow jQuery event works
How jQuery event works
 
iOS9 소개
iOS9 소개iOS9 소개
iOS9 소개
 
현실적 Angular js
현실적 Angular js현실적 Angular js
현실적 Angular js
 
가볍게 살펴보는 AngularJS
가볍게 살펴보는 AngularJS가볍게 살펴보는 AngularJS
가볍게 살펴보는 AngularJS
 
Web Components & Polymer
Web Components & PolymerWeb Components & Polymer
Web Components & Polymer
 
모바일 웹 디버깅
모바일 웹 디버깅모바일 웹 디버깅
모바일 웹 디버깅
 
혁신적인 웹컴포넌트 라이브러리 - Polymer
혁신적인 웹컴포넌트 라이브러리 - Polymer혁신적인 웹컴포넌트 라이브러리 - Polymer
혁신적인 웹컴포넌트 라이브러리 - Polymer
 
CSS Functions
CSS FunctionsCSS Functions
CSS Functions
 
우리가 몰랐던 크롬 개발자 도구
우리가 몰랐던 크롬 개발자 도구우리가 몰랐던 크롬 개발자 도구
우리가 몰랐던 크롬 개발자 도구
 
What's new in IE11
What's new in IE11What's new in IE11
What's new in IE11
 
스마트 TV 앱 개발 맛보기
스마트 TV 앱 개발 맛보기스마트 TV 앱 개발 맛보기
스마트 TV 앱 개발 맛보기
 
How to create Aptana Ruble
How to create Aptana RubleHow to create Aptana Ruble
How to create Aptana Ruble
 
Web Audio API
Web Audio APIWeb Audio API
Web Audio API
 
도구를 활용한 더 나은 웹 개발: Yeoman
도구를 활용한 더 나은 웹 개발: Yeoman도구를 활용한 더 나은 웹 개발: Yeoman
도구를 활용한 더 나은 웹 개발: Yeoman
 
Developing game audio with the Web Audio API
Developing game audio with the Web Audio APIDeveloping game audio with the Web Audio API
Developing game audio with the Web Audio API
 

[DEVIEW 2018] JavaScript 배틀그라운드로부터 살아남기