Skip to content

Make Processing

조회 수 7763 추천 수 0 댓글 0
?

단축키

Prev이전 문서

Next다음 문서

+ - Up Down Comment Print Files
?

단축키

Prev이전 문서

Next다음 문서

+ - Up Down Comment Print Files

출처 : Extremely Agile :: 알아둬야 할 JavaScript 프로젝트들

url : http://www.buggymind.com/533


스크린샷 2014-01-07 오후 2.47.58.png

http://ayudawordpress.com/insertar-javascript-en-wordpress/



SEE ALSO: 2014년을 함께할 프로그래밍 언어는?


그래서 이번 글에서는 알아두면 생산성을 높일 수 있는 JavaScript 프로젝트들을 소개하려고 합니 다. (jQuery같은 정말 보편적으로 사용되는 프로젝트는 뺐습니다.) 이중에는 라이브러리도 있고, 완전한 프레임워크(framework)도 있습니다. 일별하신 다음에 용도에 맞게 가려 쓰시면 좋을 것 같구요. 제 취향에 따라 고른거라 공신력은 없습니다. 더 공신력 있는 자료를 원하시면 이 페이지 마지막에 있는 링크를 참고하세요.


사실 "JavaScript를 배워야하는 다섯 가지 이유들"이라는 글을 쓰려고 준비하면서 이런 저런 자료 들을 찾아 봤었는데, 인상적인 문구 하나를 발견하고 나서는 포기했습니다. 이런 글이었죠.

"어쨌든 결국에는 배워야 할 언어니까 배워야 한다." 


1. Angular.js


최근 가장 주목받고 있는 MVC 프레임워크죠. angularjs.org 가 웹사이트 주소입니다. 

웹 사이트 대문부터가 코드들로 가득한 것이 심상치 않은데요. 

일단 이 프레임워크를 사용하면 HTML과 Application 로직을 바인딩하기 위한 코드의 양이 엄청나게 줄어듭니다. 

View-Model 간 interaction을 처리하기 위해 우리는 그동안 정말 많은 삽질을 해야 했는데요. 그런 수고를 줄여주는 것이죠.

다만 Angular.js를 사용하려면 HTML 코드에 HTML이 아닌 코드들이 뒤섞이게 되는 문제가 있는 데요. 

Presentation이 Model과 완전히 분리되어야 한다는 원칙이 좀 손해를 보게 되는 것이죠. 

HTML 문서와 응용 로직 사이의 결합도가 증가하기 때문인데요. 

저는 개인적으로 이런 식의 프로 그래밍을 싫어합니다만 HTML 디자인을 담당하는 개발자나 도구가 Angular.js를 수용하게 되면 개선될 수도 있겠습니다.


2. Underscore.js


JavaScript 개발시 생산성을 높여주는 다양한 API를 포괄하는 라이브러리입니다. 

Python과 유사 한 Functional Programming을 할 수 있도록 도와줍니다. 그 이외에도 기능들이 많습니다. 

웹사이 트는 underscorejs.org 입니다.


3. D3.js


SVG를 활용한 이 엄청난 시각화 도구는 다양한 형태의 인포그래픽을 JSON 형태의 데이터를 사 용해 실시간으로 렌더링할 수 있도록 해 줍니다. 

그야말로 시각화의 끝판왕. 데이터를 보다 효과적으로 렌더링하는 목적을 달성하기 위해서는 반드시 배워야 하는 도구 중 하나. 

웹사이트는 d3js.org


4. Node.js


Node.js는 JavaScript라는 언어의 적용범위를 Front-end에서 Backend 서버 개발로까지 확장시켰 습니다. 

이 프로젝트 덕분에 JavaScript는 범용적 언어라는 지위를 획득하게 되었다고 봐도 과언이 아닌데요. 

이 플랫폼을 사용하면 웹 서버를 비롯한 다양한 형태의 서버를 아주 쉽게 만들 수 있을 뿐 아니라, 과거 독립적인 응용 프로그램에서나 가능했던 일들을 JavaScript로도 할 수 있게 됩니다. 

웹사이트는 nodejs.org


5. two.js


SVG, Canvas, WebGL을 사용해 2차원의 이미지를 그릴 수 있도록 해줍니다. 

현재는 도형만 그 릴 수 있습니다만 (텍스트나 이미지는 지원하지 않습니다.) 추후 더 확장될 것으로 예상됩니다만, 어쨌든 현재로는 그렇습니다. 

웹사이트를가 보면 굉장히 다양한 (그리고 흥미진진한) 예제들을 발견할 수 있는데요. 

어떤 것은 D3.js의 영역과 겹치고, 어떤 것은 아닙니다. 용도를 잘 구별해서 사용하는 것이 좋을 듯. 

웹사이트 주소는 http://jonobr1.github.io/two.js/ 입니다.


6. Zebra


데스크탑 응용 프로그램에서 흔히 발견할 수 있는 그리드, 탭, 메뉴, 폼 등등의 요소를 포함하는 응 용을 JavaScript로도 작성할 수 있도록 해 줍니다. 웹사이트는 https://github.com/barmalei/zebra 입니다.


7. Formula.js


엑셀이나 구글 스프레드시트에서 사용 가능한 함수들을 JavaScript에서도 사용할 수 있도록 해주는데요. 

이 웹 사이트에 가보면, 이 라이브러리에 포함되어 있는 함수가 여러분의 브라우저에서도 지원되는지 자동으로 테스트 해 주기 때문에 개발에 활용하기가 편합니다. 엑셀 매니아라면 환영 할 만한 라이브러리. 

웹사이트는 http://stoic.com/formula/ 입니다.


8. Chart.js


JavaScript로 차트를 그려야 한다면 피해갈 수 없는 라이브러리. 차트를 그리고 싶은 욕구가 샘솟

도록 만드는 예쁜 차트들을 제공함. 

웹사이트는 http://www.chartjs.org/ 


9. Parallel.js


JavaScript로 멀티코어 프로그래밍을 할 수 있도록 해주는 라이브러리. 

단 여러분의 브라우저가 WebWorker를 지원해야 함. 이 라이브러리를 사용하면 Map-Reduce 같은 프로그래밍 모델을 JavaScript 안에서 사용할 수 있게 됩니다. 단 물리적으로 분리된 시스템이 아니라, 여러 코어상에서죠.

웹 사이트는 http://adambom.github.io/parallel.js/


10. Meteor


웹-앱을 손쉽게 만들 수 있도록 도와주는 오픈 소스 프레임워크. 웹-앱 개발자라면 반드시 검토해

봐야 할 프레임워크 가운데 하나. 

https://www.meteor.com/ 


11. jQuery mobile


모바일 기기가 대세인 작금의 상황에 이 라이브러리를 빼먹고 넘어가면 섭섭할 듯. 

터치에 최적화 된 웹 프레임워크. jQuery == JavaScript 라고 생각하는 사람도 많은 상황이라, 현재 JavaScript 시장의 대세는 역시 jQuery. 

모바일에서도 무시할 수 없기 때문에 jQuery 이야기는 안하려고 했으 나 어쩔 수 없이 (Orz) 

웹사이트는 http://jquerymobile.com/


12. Grunt


JavaScript를 사용한 개발과정을 자동화하고 싶다면? 프로젝트 관리를 자동화 하고 싶다면? JavaScript 프로젝트에도 빌드 도구를 도입하고 싶다면? 그렇다면 현재 대안은 딱 하나 뿐입니다. Grunt 상에서 실행되는 어마어마한 양의 플러그인 수가 Grunt의 인기를 반증합니다. 

웹사이트는 http://gruntjs.com/


이 이외에도 많사오니 아래의 링크를 참고하세요. 지금 GitHub에서 가장 인기있는 JavaScript 프 로젝트 100개의 리스트를 확인할 수 있습니다. 

(2013년 말 기준) 1위는 Grunt.


http://www.takipiblog.com/wp-content/uploads/2013/11/Javascript.jpg

http://www.takipiblog.com/2013/11/20/we-analyzed-30000-github-projects-here-are-the-top-100-libra ries-in-java-js-and-ruby/

http://www.buggymind.com/trackback/533


자유게시판

자유롭게 이용해주세요. 즐거운 커뮤니티~

List of Articles
번호 제목 글쓴이 날짜 조회 수
64 새해인사를 여기서 드릴줄은..^^ 2 file 봉구르 2014.01.24 6740
» Extremely Agile블로그 : 알아둬야 할 JavaScript 프로젝트들 file 순록 2014.01.07 7763
62 프로그래밍을 가르쳐야하는 이유~ smileblue 2013.12.16 6756
61 헐..홈페이지가 다 깨져 나오는군요 ㅡㅡ;; 2 smileblue 2013.12.11 6981
60 http://code.org/ 완전 심플하고 재밌게 개념이해할수있게 맨들었네요~ 1 봉구르 2013.12.11 6743
59 이번 겨울, 프로세싱 강의나 워크샵이 있는지요? 1 스스로 2013.12.05 6672
58 프로젝션맵핑에대해...궁금궁금 1 진뱀 2013.12.05 6700
57 아..이런..이런...벌써 12월이네요.. 2 봉구르 2013.12.03 6727
56 고해상도 작업물을 위한 하드웨어 궁금증.. 4 얌전한호랑이 2013.11.20 6823
55 오랜만이네요 2 마리오 2013.10.28 6624
54 AliceOn New Stream 2014 : 한국 신진 뉴미디어아티스트 공모 안내입니다. 2 omnivore 2013.10.22 6545
53 오랫만에 심심해서 자유롭게 자유게시판에 끄적거리는데... 2 봉구르 2013.10.06 6693
52 이 프로그램이 뭘까요? 2 file 봉구르 2013.09.11 7408
51 [워크숍 참가자 모집] Elliot Woods의 VVVV : Creative coding without code file 금천예술공장 2013.09.02 8117
50 아!! nemaf 지금 확인했네요...저는....ㅠ 2 file 봉구르 2013.08.31 6919
49 마지막에 급하게찍은 전시물(?)영상이에요~ 1 file 봉구르 2013.08.30 12947
48 오늘 전시오픈 상황이었습니다. 4 file 봉구르 2013.08.10 7841
47 쌤요~혹시 삼각형의 단상때 촬영분 혹시 아직 있으신가요? 4 봉구르 2013.08.09 6614
46 프로세싱 업데이트 될때가 되었는데..ㅎㅎㅎ smileblue 2013.08.09 6533
45 희안하고 별난 늬우스입니다. 2 봉구르 2013.08.09 6781
Board Pagination ‹ Prev 1 2 3 4 5 Next ›
/ 5

나눔글꼴 설치 안내


이 PC에는 나눔글꼴이 설치되어 있지 않습니다.

이 사이트를 나눔글꼴로 보기 위해서는
나눔글꼴을 설치해야 합니다.

설치 취소

Designed by sketchbooks.co.kr / sketchbook5 board skin

Sketchbook5, 스케치북5

Sketchbook5, 스케치북5

Sketchbook5, 스케치북5

Sketchbook5, 스케치북5

Copyright (c) 2012 Make Processing. All Right Reserved.

smileblue

sketchbook5, 스케치북5

sketchbook5, 스케치북5

나눔글꼴 설치 안내


이 PC에는 나눔글꼴이 설치되어 있지 않습니다.

이 사이트를 나눔글꼴로 보기 위해서는
나눔글꼴을 설치해야 합니다.

설치 취소