반응형
반응형

AngularJS Fundamentals In 60-ish Minutes

 

 

http://angularjs.org

http://builtwith.angularjs.org

http://angular-ui.github.io

http://mgcrea.github.io/angular-strap

http://pluralsight.com

 

 

반응형
저작자표시

'프로그래밍 > Web' 카테고리의 다른 글

[javascript] javascript 문구 테스트 - SyntaxHighlighter를 이용  (0) 2014.11.04
[javascript] Walkway.js: Easily animate SVG elements  (0) 2014.11.03
[Mobile] Fabric: An easy way to build apps - twitter  (0) 2014.10.27
[javascript] http://d3js.org/  (0) 2014.10.22
[HTML] Reveal.js: Easy HTML presentations - 프레젠테이션,PPT, HTML  (0) 2014.10.20
반응형

http://html5experts.kr/archives/2039

 

최근 인기를 얻고 있는 JavaScript 라이브러리 정리

2013년부터 인기를 얻으면서 2014년에는 필수 지식으로 자리잡을 것같은 자바스크립트 라이브러리를 나름대로 순위를 정해서 정리해 보았습니다.

아마도 대부분의 웹개발자들은 이제 자바스크립트 라이브러리에 관심을 가지고 사용해보려고 하려는 경우가 많습니다. 그래서 순위에 대해서는는 검색 키워드를 기준으로 조사할 수 있는 구글 트랜드(모든 국가, 지난 12개월간, 모든 카테고리, 웹검색 기준)를 통해 라이브러리 인기를 장르별로 비교했습니다.

프레임웍

2013년에 주목받은 것은 MVC(Model-View-Controller)관련 프레임웍이라고 봅니다.

MVC관련 프레임웍

자바스크립트기반 MVC프레임웍은 다음 4가지로 이야기할 수 있습니다.

  1. AngularJS
  2. Backbone.js
  3. Ember.js
  4. Knockout.js (정확하게는 MVVM임)

js-framework1
AngularJS인기가 압도적으로 올라가고 있어 2014년에 JavaScript 프레임웍을 공부하려는 분들이 있다면 AngularJS를 시작하면 좋을 것 같습니다.

DOM 조작

HTML의 DOM(Document Object Model)작업을 할 수 있는 프레임웍을 생각해보면, 4가지가 생각납니다.

  1. jQuery
  2. Prototype JavaScript framework
  3. Zepto
  4. YUI Library

dom-framework

모든 사람이 예상하듯 jQuery의압도적인 지속에 경쟁할 후보조차 크게 보이지 않습니다.

모바일 프레임웍

아이폰/안드로이드기반 스마트폰에 웹사이트를 맞춰 만들 때 UI생성을 지원하는 프레임웍으로 아래 4가지가 있습니다.

  1. jQuery Mobile
  2. Sencha Touch 2
  3. Enyo
  4. jQT(이전: jQTouch)

mobile-framework

당연히 jQuery Mobile이 압도적입니다. 2014년에도 이 상황은 똑같을 것으로 예상됩니다. 그러나, jQuery Mobile 인기도 점차 하락세이기 때문에 모바일 프레임웍 수요 자체가 떨어지는 것으로 생각됩니다. 최근에는 프레임웍을 사용하지 않고 모바일 웹앱을 만드는 경우가 많아지기 때문입니다.

사용자 인터페이스 관련

템플릿 엔진

템플릿 엔진으로 사용되는 자바스크립트 라이브러리는 주로 3가지를 말할 수 있습니다. 단, Jade도 인기가 있지만 Node.js용으로 사용하기 때문에 여기서는 제외했습니다.

  1. Undersocre.js
  2. Handlebars.js
  3. mustache.js

templet-framework

Underscore.js가 가장 인기가 높은 것 같습니다. 템플릿 엔진쪽의 자바스크립트 라이브러리는 다양하지만, 알맞을 것을 선택할 때 질문에 답하여 선택을 좁힐 수 있는 사이트가 있어, 이를 참고하시면 좋을 것 같습니다.

웹그래픽 관련

그래픽 관련 자바스크립트 라이브러리는 WebGL을 통해 3D그래픽도 그릴 수 있는 것부터 2D기반 차트를 그릴 수 있는 다양한 것들이 존재합니다. 이번에는 그것들을 다 묶어서 정리해 보았습니다.

  1. three.js
  2. D3.js
  3. KineticJS
  4. EaselJS
  5. Processing.js

webgraphic-framework

three.js와 D3.js가 강세이지만, 라이브러리 용도에 따라 다르기 때문에 둘 중 하나를 선택하는 일은 적습니다. 빠르게 성장하는 것은 D3.js라고 생각합니다.

웹개발시 사용할 수 있는 JavaScript 관련 도구

자바스크립트 라이브러리는 아니지만 최근 자바스크립트 관련 도구로서 주목을 받고 있는 몇가지에 대해서 조사해보았습니다.

altJS – JavaScript대체 기술

JavaScript언어를 보다 효과적으로 작성할 수 있는 대체언어 또는 도구들에 대해서 나름대로 5가지로 정리해 보았습니다.

  1. CoffeeScript
  2. TypeScript
  3. Dart
  4. Haxe
  5. JSX

jstool

이 분야는 무엇이 좋다고 딱히 말하기 어렵습니다. 현재 가장 인기있는 것은 CoffeeScript이지만 TypeScript가 나온 이후, 인기가 하락하고 있습니다. 2013년 11에는 Dart가 정식버전이 나오면서 다시 인기가 올라가고 있습니다. 그래도 2013년도에서 가장 이슈가 된 것은 TypeScript인 것으로 파악됩니다. 또한 2014년도에는  TypeScript가 정식으로 출시되면 그 영향을 더 커질 것으로 생각됩니다.

CSS 메타언어(전처리기)

altJS이외에 아마도  CSS 전처리기에 대해서 궁금하실 분들이 있을 것 같아서 나름대로 정리해보았습니다.

  1. LESS
  2. Sass (Syntactically Awesome Style Sheets)
  3. Stylus

css

CSS 전처리기는 최근 빠르게 인기가 높아지고 있고 2014년도에도 계속 될 것입니다. 현재는 LESS가 인기가 좋지만 Sass도 빠르게 인기가 올라가고 있습니다.

JavaScript 테스트 도구

마지막으로 JavaScript 코드를 테스트하는데 사용할 수 있는 도구를 조사하였습니다.

  1. QUnit
  2. Jasmine
  3. Mocha (node.js용 대응)
  4. JsTestDriver

jstest

2013년도 초반에는 QUnit가 인기가 있었지만 최근에는 Jasmine이 대세인것 같습니다.

이렇게 조사한 내용을 토대로 앞으로 인기있거나 성장할 수 있는 자바스크립트 라이브러리는 아래와 같습니다.

  • AngularJS
  • jQuery
  • jQuery Mobile
  • Underscore.js
  • 3D.js
  • TypeScript 또는 Dart
  • LESS
  • Jasmine

다만, 이 자료의 기준은 구글 트랜드를 통해 조사한 내용으로 세밀한 기준이 있지는 않기 때문에 이 내용이 100% 맞다고 할 수 없습니다. 따라서 이 글의 내용은 어디까지나 하나의 참고 자료로 보시고 실제 프로젝트에서는 추가적으로 자료수집을 하거나, 직접 테스트해본후 결정하시기 바랍니다.

반응형
저작자표시

'프로그래밍 > Script' 카테고리의 다른 글

[javascript] 메세지 없이 브라우저를 닫고 싶을때. self.close() 외 2 방법  (0) 2014.05.19
Home » Tips » JavaScript » Simple floating div using jQuery  (0) 2014.05.09
[javascript] PourOver: Fast filtering and sorting of large collections  (0) 2014.04.29
jquery ui에서 datepicker 사용할 때, input 뒤에 달력 이미지 넣는 부분  (0) 2014.04.21
[jQuery] Twproject Gantt: JavaScript component for creating Gantts  (0) 2014.04.21
반응형

Angular-deckgrid: A masonry-like grid for Angular JS

deckgrid

Homepage: http://akoenig.github.io/angular-deckgrid/#/
GitHub: https://github.com/akoenig/angular-deckgrid

 

A lightweight masonry-like grid for AngularJS.

http://akoenig.github.io/angular-deckgrid

반응형
저작자표시

'프로그래밍 > Web' 카테고리의 다른 글

IE 11 일경우 확인 하는 방법  (0) 2014.01.23
[Web] CodePlayer: Watch your code like a movie  (0) 2014.01.23
[Framework] Semantic UI: A language for sharing UI  (0) 2014.01.09
Web Developer Checklist: Everything you need to make your code its best  (0) 2014.01.06
[jQuery] 원하는 위치로 브라우저 스크롤  (0) 2014.01.03
반응형

/angular-invoicing

 

Create free and unlimited one off invoices using this little Invoicing app made with Angular JS

http://metaware.github.io/angular-invoicing/

 

Angular Invoicing

Use this extremely small and lightweight project built in Angular JS to build your one off Invoices. No monthly fees, No Subscriptions - No heavy duty features, Just simple invoices.

Usage

Use this project here: Angular Invoicing or clone it and customize it to your hearts content.

 

 

Simple Invoicing: Invoicing with AngularJS

simple invoicing

Homepage: http://metaware.github.io/angular-invoicing/
GitHub: https://github.com/metaware/angular-invoicing

 

 

반응형
저작자표시

'프로그래밍 > Web' 카테고리의 다른 글

Programr - http://www.programmr.com/  (0) 2013.12.11
[PHP] Yaf – Yet Another Framework: A fast PHP framework  (0) 2013.12.09
[PHP] Nette Framework 2.0: A PHP tool for web development  (0) 2013.12.06
[HTML5] Enables <video> and <audio> tags in all major browsers.  (0) 2013.12.05
NudgePad: Faster prototyping in your browser  (0) 2013.12.02
반응형

역활별 자바스크립트

 

 역활

라이브러리 명 

 모듈화 지원

 - Backbone.js 

 비동기 로드 지원

 - RequireJS

 MVC(Model - View - Controller)

 - AngularJS

 - knockoutJS

 End-to-End framework

 - Meteor(http://www.meteor.com) on Node.js

 - Derby(http://derbyjs.com) on Node.js

 

- 자바스크립트 MVC는 서버 사이드에서처럼 브라우저 단에서도 데이터와 뷰, 로직 처리를 분리해 개발 및 확장, 유지보수성을 높이고 최저 품질을 높이기 위한 방법을 지원하자는 취지에서 개발됨.

 

- End-to-End 프레임워크는 Node.js 진영에서 지원되는 프레임워크로 서버에서 브라우저까지 모두 자바스크립트로 개발 할 수 있도록 돼 있다. 서버에 설치부터 필요함.

 

- AngularJS, KnockoutJS는 Data Binding을 지원한다. Data Binding이란 자바스크립트의 객체 값으로 HTML의 태그와 양방향 통신을 해서 일치시켜 주는 작업을 지원하는 것을 말한다. 별도 HTML태그를 컨트롤 할 필요없이 자바스크립트 객체값만 변경시키면 UI는 저절로 변경이 된다. 그렇다고 아무것도 안하는 것은 아니다.

 

* 라이브러리를 익혀 나가는 순서.

1. Backbone으로 모듈화 및 기본적인 MVC 의 개념을 익힌다.

2. RequireJS로 비동기적으로 js를 불러와 네트워크 트래픽을 분산시키는 기법을 익힌다.

3. Backbone + Require 또는  AngularJS + RequireJS(KnockoutJS + RequireJS) 의 조합으로 MVC르 ㄹ좀더 심화시킨다. (AngularJS는 구글에서, KnockoutJS는 MS에서 지원하고 있다. )

 

angular , require backbone 

 

.

반응형
저작자표시

'프로그래밍 > Web' 카테고리의 다른 글

StackEdit: An online editor with Markdown Extra support  (0) 2013.09.26
구글지도 마커 쉽게 만들기  (0) 2013.09.26
Favico.js: Animate your favicon - http://lab.ejci.net/favico.js/  (0) 2013.09.16
ASP 날짜, 시간 - date(), Now(), time()  (0) 2013.09.16
Perimeter.js: Detect mouse breaches of an invisible perimeter  (0) 2013.09.16
반응형

[마소] 2013.07 Angular.JS - 서비스들과 의존성 주입

 

AngularJS의 서비스는 특정 기능을 담당하는 객체들을 서비스라고 한다.

공통된 특정 작업을 수행하는 싱글톤(singleton) 객체다.

singleton은 인스턴스가 단 1개만 존재하는 것을 보증하는 디자인 패턴이다.

예를 들어 기본 서비스로 제공하는 $http service  는 브라우저의 낮은 레벨에 해당하는 XMLHttpRequest 객체의 기능을 제공한다.

 

Angular services are singletons that carry out specific tasks common to web apps, such as the$http service that provides low level access to the browser'sXMLHttpRequest object.

 

To use an Angular service, you identify it as a dependency for the dependent (a controller, or another service) that depends on the service. Angular's dependency injection subsystem takes care of the rest. The Angular injector subsystem is in charge of service instantiation, resolution of dependencies, and provision of dependencies to factory functions as requested.

 

service

  • $anchorScroll  HTML5 spec에 지정된 규칙과 location hash의 현재 값에 따라 관련 요소의 
                               스크롤 처리를 한다.
  • $cacheFactory 캐시화할 객체를 관리한다.
  • $compile         HTML문자열이나 DOM의 템플릿을 스코프에 연결하도록 컴파일한다.
  • $controller       콘트롤러를 인스턴스화 한다.
  • $document       JQuery(lite)로 감싼 window.document 이다.
  • $exceptionHandler  angularJS에서 감지되는 모든 예외가 위임된다.
  • $filter                     정보 표현에 대한 formatting 처리를 한다.
  • $http                     XMLHttpReqeust 또는 JSONP에 대한 기능을 제공한다.
  • $httpBackend    테스트하는 경우 $http에 대한 대체처리가 된다. 직접 호출은 불가하다.
  • $interpolate     $compile의 처리와 같이 데이터 바인딩의 처리를 컴파일한다.
  • $locale        다국어 규칙을 제공한다.
  • $location     window.location 보다 발전된 기능을 제공한다. (HTML5 처리 등)
  • $log            로깅을 처리한다.
  • $parse        AngularJS 표현식으로 변환한다.
  • $q              Kris Kowal's Q(promise/deferred)와 동일한 기능을 제공한다.
  • $rootElement  AngularJS APP의 루트 요소를 얻는다.
  • $rootScope    AngularJS APP의 루트 스코프를 얻는다.
  • $route           URL을 감시해 해당 경로의 컨트롤러와 뷰를 mapping한다.
  • $routeParams  URL상의 파라미터를 관리한다.
  • $templateCache HTML templete을 cache한다.
  • $timeout     window.setTimeout과 같은 기능을 하지만 $exceptionHadler와 연동 처리된다.
  • $window   전역 변수 오염의 방지와 테스트를 위해 브라우저의 window와
                         동일한 기능을 하는 객체를 제공한다.

    •  

     

     

    * 의존성 주입 (Dependency Injection)
    의존성 주입 적용으로 얻을 수 있는 이점

    - 종속성의 설정을 컴파일 시에서 실행 시로 조정해 모듈 간의 결합도를 낮출 수 있다.

    - 여러 곳에서 사용 중인 모듈을 소스 코드의 수정없이 사용할 수 있어 재사용율이 높다.

    - 모의 객체 등을 이용한 단위 테스트 시 편의성을 높여준다.

     

    의존성 주입 패턴

    - 생산자 주입 : 필요한 의존성을 모두 포함하는 클래스의 생성자를 만들고, 그 생성자를 통해 의존성을 주입한다.(new 연산자를 통한 생성)

    - 세터(setter)를 통한 주입 : 의존성을 입력받는 세터 메소드를 만들어 의존성을 중비한다.

    - 인터페이스를 통한 주입 : 의존성을 주입하는 함수가 포함된 인터페이스를 작성하고, 이를 구현하도록 함으로써 실행 시 의존성을 주입한다.

     

     

     

     

     

    반응형
    저작자표시

    '프로그래밍 > Script' 카테고리의 다른 글

    [CSS] Pickadate.js — Responsive date & time picker  (0) 2013.07.25
    [jQuery] jQuery 참고 사이트  (0) 2013.07.24
    [jQuery] 20 Most Popular Responsive jQuery Plugins  (0) 2013.07.24
    [jQuery] jQuery Plugins with Backbone – Articles List Shedding the Light Onto Sweet Couple  (0) 2013.07.22
    [javascript] 모바일웹에서 새 창 닫기  (0) 2013.07.18

    + Recent posts

    티스토리툴바