[js] 추천 Javascript library 정리
by joe.lim from facebook
전직장(kt-nexr) front-end 팀장이자 동료였던 joe.lim이 알려준 요즘 추천하는 javascript library를 종류별로 심플하게 정리하셨다. facebook 댓글로 남긴 글을 브런치를 통해 좀 다듬어서 옮겨본다.
--> 좀더 많은것은 http://www.infoq.com/research/javascript-frameworks-2015 에서 찾아보시기 바라지만, 정리되지 않고 뒤죽박죽이라 처음 접하는 분들에게는 권장하지 않습니다.
# visualization library
d3
svg기반으로 visualization을 손쉽게 구현할 수 있도록 해주는 library입니다. 근데 raw한 toolkit이라 다 직접 구현해야 하는 단점과 노가다만 좀(?) 하면 자기 입맛에 맞는 시각화가 가능하다는 장점을 가지고 있습니다. 직접 만들기 귀찮은 경우 좀 찾아보면 d3기반으로 만들어진 가져다 쓰기 쉬운 라이브러리들이 제법 있습니다
https://gist.github.com/widged/6820559
http://mikemcdearmon.com/.../charting-libraries-using-d3
# Template Engine
handlebars
javascript template engine으로 mustache 문법에 기반하고 있고 , 필요시 커스텀 helper를 만들어서 확장도 가능하다는 점이 mustache engine과 다른점입니다. view template engine이기 때문에 backbone이나 다른 app framework과 같이 많이 쓰이고 java용 handlebars도 있습니다.
서버사이드와 클라이언트 사이드가 뷰를 공유하길 원한다면 검토해야할 라이브러입니다~
# Utility Library
underscore
ruby에서 영감받은 functional programming helper library로 컬렉션을 다루기 쉽게 해주는 다수의 메소드와 함수형 프로그래밍을 보다 쉽게 해주는 메소드를 제공합니다. 이에 영감받고 성능 및 편의성을 좀 더 개선한 lodash library도 많이 쓰입니다.(저는 lodash를 선호)
lodash의 경우 lazy evaluation및 pipeline을 지원합니다.
# Ui Library
jquery
너무 유명한 놈이라 skip할까 싶지만 그래도 언급을 해야겠죠.
브라우저의 document.querySelector api가 나오게한 장본인으로 손쉽게 특정 dom들을 접근해서 조작가능해주는 메소드와 ajax용 helper, effect helper를 제공하는 라이브러리로 최고의 강점은 엄청난 plugin 생태계!
jquery를 모르고서는 frontend 개발자라 할 수 없겠죠 ^^;
요새는 "YOU MIGHT NOT NEED JQUERY" 라는 얘기가 조금씩 나오고 있습니다.
http://youmightnotneedjquery.com/
http://youmightnotneedjqueryplugins.com/
react
최근에 화제가 되고 있는 facebook에서 만든 ui library입니다.
virtual dom을 기반으로 one way data flow를 가진 component 방식의 ui library인데 flux라는 패턴과 조합으로 많이 쓰이고 react native로 ios native개발까지 가능하는등 생태계가 폭발적으로 커지고 있습니다. 가히 요즘 대세(?)라 할 수 있죠.
--> virtual dom으로 인해 isomorphic application 구현이 쉬워졌고 다른 application framework이나 라이브러이에 많은 영감을 주어서 angular2나 ember2도 virtual dom 방식의 뷰를 도입했습니다.
knockout
mvvm 기반 library로 binding을 통해 ui와 객체값의 변환처리를 손쉽게 해주는 녀석인데 요새는 점점 인기가 없어지고 있습니다.
# Application Framework
angularjs
구글이 만든 frontend mvc 프레임웍으로 인지도나 악명(?), 인기면에서 No1,2를 자랑하는 녀석입니다.
첫인상은 웃다가 나중에 울게되는 녀석입니다. dirty check를 통한 two way binding지원, Dependency Injection, router, view template engine, directive를 통한 component 등 많은 장점이 있으나 SEO 문제나 가파른 학습곡선, 서버사이드 렌더링 메카니즘 부재 등 단점도 많이 가지고 있는 녀석입니다.
단점을 보완한 angular2가 올해말에 나올예정이고 angular1으로 만들어진 웹앱들이 너무나 많이 돌아가고 있어서인지 angular1과 angular2가 같이 돌아갈 수 있도록 하는 migration path도 계획되어 있습니다.
backbone
underscor와 coffescript를 만든 jeremy ashkenas가 만든 application library로 mvc골격을 제공하는 녀석인데 해주는 부분은 많지 않아서 코딩이 많이 들어가야 하지만 소스가 작고 구조가 간단해서 커스터마이징이 쉽고 문제발생시 해결이 쉽습니다.
필요에 따라서 react를 view로 해서 쓸 수도 있고 개발자 맘대로 주무르기 좋습니다(해주는게 거의 없기때문에 -_-)
boilerplate를 최소화해주고 어플리케이션 아키텍처를 제공해주는 backbone marionette도 많이 쓰입니다.
ember
angular와 같은 client side application framework 으로 router, model, handlebars를 사용한 two-way data binding, computed properties 등 많은 기반구조를 제공하고 있는데 학습곡선도 제법 있고 무거운 편입니다.
ember도 virtual dom을 도입한 ember2가 release되어있고 server side rendering 피처가 개발주입니다.
ExtJs
javascript application framework으로 gpl/commercial 두가지 라이센스로 존재하고 html이 아닌 javascript 코드로 ui부터 client mvc framework을 구현한 녀석입니다. 좀 무거운 편이고 제공되는 ui component가 다양합니다만 덩치가 꽤 큰 편이고 커스터마이징에 제약이 많은편입니다.
Cappucino
html과 css이 아닌 objective-J라는 언어로 브라우저 위에서 돌아가는 application을 만들수 있도록 하는 framework으로 상당히 이질적이 녀석입니다. obj-c를 좋아한다면 재미로 해보는 것은 나쁘지 않습니다만...
# Realtime Library
browser에서 bi directional communication을 지원하는건 web socket입니다만 IE9이하나 android 4.3이하의 stock browser에서는 이를 지원하지 않기 때문에 이를 emulation해주는 library로 가장 유명한게 socket.io 입니다. web socket 이 지원안되는 경우 flash web socket이나 long poll등의 테크닉을 이용해서 web socket을 흉내내주는 기능을 가지고 있습니다. socket.io는 프로토콜이 별도로 있어서 구현만 하면 다른 언어에서도 얼마든지 사용할 수 있어서 본가인 node.js 용 이외에도 netty용 socket.io등 다른 언어용이 다수 있습니다. 근래에는 p2p를 지원(webRTC기반)하는 socket.io p2p가 새로 나왔습니다.
socket.io 이외에도 sockjs도 많이 쓰이는 녀석중에 하나입니다(spring이 이 녀석을 지원하죠)
기타로 WAMP프토토콜(http://wamp.ws/)과 이의 js 구현체인 autobahnJS(http://autobahn.ws/js/) 등이 있습니다.
css preprocessor(sass, less, postcss) 나 build system(gulp, grunt), async(promise, generator, csp), FRP(reactiveX, bacon, most), Immutable.js, transpiler(coffeescript, clojurescript, typescript, es6, es7), package management(bower, browserify, webpack, jspm)등을 더 언급해야 하지만 이건 다음기회에 하죠 ^^;
