SlideShare a Scribd company logo
가볍게 살펴보는
 박재성
http://netil.github.io/slides/angularjs/
ANGULARJS?
2009년 Miško Hevery과 Adam Abrons에 의해 개발된 MVC(또는 MVW) 프레임워크
SPA(Single Page Application) 형태의 웹 어플리케이션 개발에 적합
DOM 제어에 중점을 두지 않고 데이터 변화와 출력에 중점
PHILOSOPHY
1. 데이터 중심적
기존 방식은 먼저 대상 DOM 요소를 선택 한 후, 필요한 작업을 수행하는 형태
→ AngularJS는 데이터 자체에 초점을 맞추어 작업, 데이터의 출력은 자동으로 수행
2. 테스트 주도적
Dependency Injection을 통해 손쉽게 mock-up 객체로 전환
뷰와 분리된 컨트롤러내의 비즈니스 로직은 테스트 친화적
3. 선언적 HTML
커스텀 태그, 태그 속성 등을 통한 선언적 형태의 사용
간단 ANGULARJS 예제 #1
HTML Result Edit on
<html ng-app> <!-- (1) 하위 영역은 AnguarJS 어플리케이션으로 인식됨 -->
<head>
<title>AngularJS</title>
<!-- AngularJS 로딩 -->
<script type="text/javascript" src="https://code.angularjs.org/1.3.8/angular.min.js"></script>
</head>
<body>
<div>
<!-- (2) 데이터 바인딩을 위해 사용되는 지시자로, 값으로 지정한 'name'은 모델의 이름으로 사용 -->
<input type='text' ng-model='name' />
<!-- (3) 데이터의 출력을 위한 템플릿 표현 식으로, 이중 중괄호로 묶어 사용한다. 이곳에 사용된 모델명인 'name'은
ng-model='name'과 바인딩 되어 처리된다. -->
<h2>{{name}}</h2>
</div>
</body>
</html>
간단 ANGULARJS 예제 #2
HTML JS Result Edit on
<html ng-app="myApp">
<head>
<title>AngularJS</title>
<script type="text/javascript" src="https://code.angularjs.org/1.3.8/angular.min.js"></script>
</head>
<body>
<!--
컨트롤러는 모듈 내에 정의되며, HTML 요소와 묶이도록 구성된다.
컨트롤러에는 비즈니스 로직이 구현되며, 데이터와 이벤트 핸들러 함수 등이 포함된다.
-->
<div ng-controller="myControllerList">
<ul>
<li ng-repeat="fruit in fruits">
<span>{{fruit.name}}</span> / <span>{{fruit.qty}}</span>
</li>
</ul>
<button ng-click="setValue()">변경</button>
</div>
양방향 데이터 바인딩
(TWO-WAY DATA BINDING)
초기화 과정
1. DOMContentLoaded 이벤트에서 실행
2. AngularJS 영역 초기화 과정 :
문서 내에서 ng-app 지시자 확인
모듈 및 지시자와 연관된 모듈을 로딩
개발방법 비교:
DOM 제어 VS ANGULARJS
jQuery
Example
Source
jQuery is a fast, small, and feature­rich
JavaScript library. It makes things like
HTML document traversal and
manipulation, event handling,
animation, and Ajax much simpler with
an easy­to­use API that works across
a multitude of browsers. With a
combination of versatility and
extensibility, jQuery has changed the
way that millions of people write
JavaScript.
“
”
todos
2 items left All   Active   Completed
What needs to be done?»
sddd✔
ddd✔
개발방법 비교: DOM 제어
개발방법 비교: ANGULARJS
개발방법 비교:
DOM 제어 VS ANGULARJS
구분 종류 크기(byte) Total(byte)
DOM 제어(Jindo) HTML 1,164 4,951 (100%)
JavaScript 3,787
AngularJS HTML 2,059 3,161 (63.84%)
JavaScript 1,102
적용사례로 살펴본 학습 비용
구분 학습 시간/예측 개발 서비스 종류
사례1 6주 서비스 어드민
사례2 7일(2일 학습 + 5일 개발) 2개의 탭을 갖는 목록
사례3 JS 초급: 쉽게접근
JS 중/상급:
기존 방식의 익숙함으로
인한 시간필요
APM, 저작도구, 프로모션 페이지, etc.
사례4 2주 컨텐츠와 목록 포함하는 엔드 페이지
개발자들이 생각하는 장점
유지보수가 쉽다, 개발속도가 빠르다.
간편한 데이터 바인딩을 통해 뷰 업데이트가 쉽다.
코드 패턴이 동일해 개인간 차이에 따른 결과물의 차이가 적다, 코
드량이 감소한다.
SPA 개발에 최적화 되어 있다.
기능적인 분리가 명확해 협업이 쉽다.
고려사항: 성능 #1 TODOMVC BENCHMARK
Step Tests Run All
Backbone 1.1.2
Backbone/Adding100Items
Backbone/CompletingAllItems
Backbone/DeletingAllItems
Ember 1.8.1 + Handlebars 1.3.0
Ember/Adding100Items
Ember/CompletingAllItems
Ember/DeletingItems
Angular 1.2.27
Angular/Adding100Items
Angular/CompletingAllItems
Angular/DeletingAllItems
React 0.12.1
React/Adding100Items
React/CompletingAllItems
React/DeletingAllItems
Om 0.5.0 + React 0.9.0
Om/Adding100Items
Om/CompletingAllItems
Om/DeletingAllItems
http://dsuket.github.io/todomvc-perf-comparison/
고려사항: 성능 #2 초기 로딩&렌더링
http://www.filamentgroup.com/lab/mv-initial-load-times.html
고려사항: 성능 #3 데이터 처리
100개 목록 데이터가 HTML에 포함되어 처리되는 경우
리스트 0디지털타임스 오후 1:15
리스트 1디지털타임스 오후 1:15
리스트 2디지털타임스 오후 1:15
리스트 3디지털타임스 오후 1:15
리스트 4디지털타임스 오후 1:15
리스트 5디지털타임스 오후 1:15
리스트 6디지털타임스 오후 1:15
리스트 7디지털타임스 오후 1:15
리스트 8디지털타임스 오후 1:15
리스트 9디지털타임스 오후 1:15
금융 증권 부동산
홈 정치 경제 연예 사회 IT 생활 세계 포토
TV 언론사별
로딩 속도 : 750ms
리스트 0 디지털타임스 오후 1:15
리스트 1 디지털타임스 오후 1:15
리스트 2 디지털타임스 오후 1:15
리스트 3 디지털타임스 오후 1:15
리스트 4 디지털타임스 오후 1:15
리스트 5 디지털타임스 오후 1:15
리스트 6 디지털타임스 오후 1:15
리스트 7 디지털타임스 오후 1:15
리스트 8 디지털타임스 오후 1:15
리스트 9 디지털타임스 오후 1:15
금융 증권 부동산
홈 정치 경제 연예 사회 IT 생활 세계 포토
TV 언론사별
로딩 속도 : 942ms
일반적 방식  ← click to refresh →  AngularJS
고려사항: 성능 #4 데이터 바인딩
데이터 편차에 따른 처리 속도
리스트 0디지털타임스 오후 1:15
리스트 1디지털타임스 오후 1:15
리스트 2디지털타임스 오후 1:15
리스트 3디지털타임스 오후 1:15
리스트 4디지털타임스 오후 1:15
리스트 5디지털타임스 오후 1:15
리스트 6디지털타임스 오후 1:15
금융 증권 부동산
100 200 300 400 500 600 700 800 900
1000 1100 1200 1300 1400 1500 1600
1700 1800 1900 2000
로딩 속도 :
리스트 0 디지털타임스 오후 1:15
리스트 1 디지털타임스 오후 1:15
리스트 2 디지털타임스 오후 1:15
리스트 3 디지털타임스 오후 1:15
리스트 4 디지털타임스 오후 1:15
리스트 5 디지털타임스 오후 1:15
리스트 6 디지털타임스 오후 1:15
금융 증권 부동산
100 200 300 400 500 600 700 800 900
1000 1100 1200 1300 1400 1500 1600
1700 1800 1900 2000
로딩 속도 :
One-Way Data Binding vs. Two-Way Data Binding
고려사항: FOUC*
<body ng-app="myApp">
<div ng-controller="myControllerList">
<ul>
<li ng-repeat="fruit in fruits">
<span>{{fruit.name}}</span> / <span>{{fruit.qty}}</span>
</li>
</ul>
<button onclick="location.reload()">reload</button>
</div>
<script type="text/javascript" src="https://code.angularjs.org/1.3.8/angular.min.js"></script>
<script type="text/javascript">
angular.module("myApp",[])
    .controller("myControllerList", function($scope) {
        $scope.fruits = [
            { name: '메론', qty: 9 },
            { name: '망고', qty: 3 },
            { name: '바나나', qty: 1 }
        ];
    });
</script>
</body>
메론 / 9
망고 / 3
바나나 / 1
reload
*FOUC(Flash Of Unstyled Content) - http://en.wikipedia.org/wiki/Flash_of_unstyled_content
고려사항: 이벤트 바인딩
양방향 데이터 바인딩을 위해 모델로 지정된 요소에
여래 개의 이벤트가 바인딩 된다.
Event log
DOMContentLoaded: 1
load: 1
고려사항: 호환성
Angular 2.0에선 1.x과 호환성 갖지 않음 (주요 문법의 변경과 폐
지)
ng-europe 2014: Angular 2.0 Core
도입 할까?,말까?
muchasmuchas
gracias.gracias.

More Related Content

What's hot

AngularJS In Production
AngularJS In ProductionAngularJS In Production
AngularJS In Production
MooYeol Lee
 
위플래닛 발표자료 Meteor_js
위플래닛 발표자료 Meteor_js위플래닛 발표자료 Meteor_js
위플래닛 발표자료 Meteor_js
WebFrameworks
 
역시 Redux
역시 Redux역시 Redux
역시 Redux
Leonardo YongUk Kim
 
Meteor를 통해서 개발하는 웹어플리케이션 서비스
Meteor를 통해서 개발하는 웹어플리케이션 서비스Meteor를 통해서 개발하는 웹어플리케이션 서비스
Meteor를 통해서 개발하는 웹어플리케이션 서비스
WebFrameworks
 
목적에 맞게 Angular, React, Vue
목적에 맞게 Angular, React, Vue목적에 맞게 Angular, React, Vue
목적에 맞게 Angular, React, Vue
Gunhee Lee
 
PHP Slim Framework with Angular
PHP Slim Framework with AngularPHP Slim Framework with Angular
PHP Slim Framework with Angular
JT Jintae Jung
 
AngularJS 2, version 1 and ReactJS
AngularJS 2, version 1 and ReactJSAngularJS 2, version 1 and ReactJS
AngularJS 2, version 1 and ReactJS
Kenneth Ceyer
 
React Native를 사용한
 초간단 커뮤니티 앱 제작
React Native를 사용한
 초간단 커뮤니티 앱 제작React Native를 사용한
 초간단 커뮤니티 앱 제작
React Native를 사용한
 초간단 커뮤니티 앱 제작
Taegon Kim
 
[리뷰] 풀스택 개발자를 위한 MEAM 스택 입문
[리뷰] 풀스택 개발자를 위한 MEAM 스택 입문[리뷰] 풀스택 개발자를 위한 MEAM 스택 입문
[리뷰] 풀스택 개발자를 위한 MEAM 스택 입문
종훈 박
 
최근 Javascript framework 조사
최근 Javascript framework 조사최근 Javascript framework 조사
최근 Javascript framework 조사
Kichul Jung
 
React를 이용하여 멀티플랫폼에서 개발하기
React를 이용하여 멀티플랫폼에서 개발하기React를 이용하여 멀티플랫폼에서 개발하기
React를 이용하여 멀티플랫폼에서 개발하기
WebFrameworks
 
Isomorphicspring Isomorphic - spring web seminar 2015
Isomorphicspring Isomorphic - spring web seminar 2015Isomorphicspring Isomorphic - spring web seminar 2015
Isomorphicspring Isomorphic - spring web seminar 2015
sung yong jung
 
iOS9 소개
iOS9 소개iOS9 소개
iOS9 소개
Jae Sung Park
 
Front end dev 2016 & beyond
Front end dev 2016 & beyondFront end dev 2016 & beyond
Front end dev 2016 & beyond
Jae Sung Park
 
Vue SSR vs Prerender
Vue SSR vs PrerenderVue SSR vs Prerender
Vue SSR vs Prerender
Changwan Jun
 
Angular Seminar [한빛미디어 리얼타임 세미나]
Angular Seminar [한빛미디어 리얼타임 세미나]Angular Seminar [한빛미디어 리얼타임 세미나]
Angular Seminar [한빛미디어 리얼타임 세미나]
Woojin Joe
 
하이브리드앱 성능 극복
하이브리드앱 성능 극복하이브리드앱 성능 극복
하이브리드앱 성능 극복
sung hwan Park
 
JavaScript 2014 프론트엔드 기술 리뷰
JavaScript 2014 프론트엔드 기술 리뷰JavaScript 2014 프론트엔드 기술 리뷰
JavaScript 2014 프론트엔드 기술 리뷰Kenu, GwangNam Heo
 
[D2 오픈세미나]3.web view hybridapp
[D2 오픈세미나]3.web view hybridapp[D2 오픈세미나]3.web view hybridapp
[D2 오픈세미나]3.web view hybridapp
NAVER D2
 
자바스크립트의 또다른 발전, Backbone.js
자바스크립트의 또다른 발전, Backbone.js자바스크립트의 또다른 발전, Backbone.js
자바스크립트의 또다른 발전, Backbone.js
JinKwon Lee
 

What's hot (20)

AngularJS In Production
AngularJS In ProductionAngularJS In Production
AngularJS In Production
 
위플래닛 발표자료 Meteor_js
위플래닛 발표자료 Meteor_js위플래닛 발표자료 Meteor_js
위플래닛 발표자료 Meteor_js
 
역시 Redux
역시 Redux역시 Redux
역시 Redux
 
Meteor를 통해서 개발하는 웹어플리케이션 서비스
Meteor를 통해서 개발하는 웹어플리케이션 서비스Meteor를 통해서 개발하는 웹어플리케이션 서비스
Meteor를 통해서 개발하는 웹어플리케이션 서비스
 
목적에 맞게 Angular, React, Vue
목적에 맞게 Angular, React, Vue목적에 맞게 Angular, React, Vue
목적에 맞게 Angular, React, Vue
 
PHP Slim Framework with Angular
PHP Slim Framework with AngularPHP Slim Framework with Angular
PHP Slim Framework with Angular
 
AngularJS 2, version 1 and ReactJS
AngularJS 2, version 1 and ReactJSAngularJS 2, version 1 and ReactJS
AngularJS 2, version 1 and ReactJS
 
React Native를 사용한
 초간단 커뮤니티 앱 제작
React Native를 사용한
 초간단 커뮤니티 앱 제작React Native를 사용한
 초간단 커뮤니티 앱 제작
React Native를 사용한
 초간단 커뮤니티 앱 제작
 
[리뷰] 풀스택 개발자를 위한 MEAM 스택 입문
[리뷰] 풀스택 개발자를 위한 MEAM 스택 입문[리뷰] 풀스택 개발자를 위한 MEAM 스택 입문
[리뷰] 풀스택 개발자를 위한 MEAM 스택 입문
 
최근 Javascript framework 조사
최근 Javascript framework 조사최근 Javascript framework 조사
최근 Javascript framework 조사
 
React를 이용하여 멀티플랫폼에서 개발하기
React를 이용하여 멀티플랫폼에서 개발하기React를 이용하여 멀티플랫폼에서 개발하기
React를 이용하여 멀티플랫폼에서 개발하기
 
Isomorphicspring Isomorphic - spring web seminar 2015
Isomorphicspring Isomorphic - spring web seminar 2015Isomorphicspring Isomorphic - spring web seminar 2015
Isomorphicspring Isomorphic - spring web seminar 2015
 
iOS9 소개
iOS9 소개iOS9 소개
iOS9 소개
 
Front end dev 2016 & beyond
Front end dev 2016 & beyondFront end dev 2016 & beyond
Front end dev 2016 & beyond
 
Vue SSR vs Prerender
Vue SSR vs PrerenderVue SSR vs Prerender
Vue SSR vs Prerender
 
Angular Seminar [한빛미디어 리얼타임 세미나]
Angular Seminar [한빛미디어 리얼타임 세미나]Angular Seminar [한빛미디어 리얼타임 세미나]
Angular Seminar [한빛미디어 리얼타임 세미나]
 
하이브리드앱 성능 극복
하이브리드앱 성능 극복하이브리드앱 성능 극복
하이브리드앱 성능 극복
 
JavaScript 2014 프론트엔드 기술 리뷰
JavaScript 2014 프론트엔드 기술 리뷰JavaScript 2014 프론트엔드 기술 리뷰
JavaScript 2014 프론트엔드 기술 리뷰
 
[D2 오픈세미나]3.web view hybridapp
[D2 오픈세미나]3.web view hybridapp[D2 오픈세미나]3.web view hybridapp
[D2 오픈세미나]3.web view hybridapp
 
자바스크립트의 또다른 발전, Backbone.js
자바스크립트의 또다른 발전, Backbone.js자바스크립트의 또다른 발전, Backbone.js
자바스크립트의 또다른 발전, Backbone.js
 

Viewers also liked

프론트엔드 웹앱 프레임웍 - Bootstrap, Backbone 그리고 AngularJS
프론트엔드 웹앱 프레임웍 - Bootstrap, Backbone 그리고 AngularJS프론트엔드 웹앱 프레임웍 - Bootstrap, Backbone 그리고 AngularJS
프론트엔드 웹앱 프레임웍 - Bootstrap, Backbone 그리고 AngularJS
동수 장
 
Yeoman
YeomanYeoman
Yeoman
ymtech
 
응답하라 반응형웹 - 4. angular
응답하라 반응형웹 - 4. angular응답하라 반응형웹 - 4. angular
응답하라 반응형웹 - 4. angular
redribbon1307
 
Angular 2 어디까지 왔을까
Angular 2 어디까지 왔을까Angular 2 어디까지 왔을까
Angular 2 어디까지 왔을까
장현 한
 
강력한 사용자인증 솔루션 Pinsafe
강력한 사용자인증 솔루션   Pinsafe강력한 사용자인증 솔루션   Pinsafe
강력한 사용자인증 솔루션 Pinsafe
YoungHan Kim
 
OAuth - GDG Korea Women 2014 첫 스터디
OAuth - GDG Korea Women 2014 첫 스터디OAuth - GDG Korea Women 2014 첫 스터디
OAuth - GDG Korea Women 2014 첫 스터디
Jua Alice Kim
 
빠른 프로토타이핑을 위한 웹앱 자동화 툴 - YEOMAN
빠른 프로토타이핑을 위한 웹앱 자동화 툴 - YEOMAN빠른 프로토타이핑을 위한 웹앱 자동화 툴 - YEOMAN
빠른 프로토타이핑을 위한 웹앱 자동화 툴 - YEOMAN
정호 전
 
막하는 스터디 네 번째 만남 AngularJs (20151108)
막하는 스터디 네 번째 만남 AngularJs (20151108)막하는 스터디 네 번째 만남 AngularJs (20151108)
막하는 스터디 네 번째 만남 AngularJs (20151108)
연웅 조
 
2016 ABCD 소개
2016 ABCD 소개2016 ABCD 소개
2016 ABCD 소개
성일 한
 
2016 W3C Conference #5 : UNIVERSAL RENDERING (React.JS 중심)
2016 W3C Conference #5 : UNIVERSAL RENDERING (React.JS 중심)2016 W3C Conference #5 : UNIVERSAL RENDERING (React.JS 중심)
2016 W3C Conference #5 : UNIVERSAL RENDERING (React.JS 중심)
양재동 코드랩
 
2016 W3C Conference #7 : Electron, 웹 기술로 담아내는 데스크톱 애플리케이션
2016 W3C Conference #7 : Electron, 웹 기술로 담아내는 데스크톱 애플리케이션2016 W3C Conference #7 : Electron, 웹 기술로 담아내는 데스크톱 애플리케이션
2016 W3C Conference #7 : Electron, 웹 기술로 담아내는 데스크톱 애플리케이션
양재동 코드랩
 
2016 W3C Conference #6 : ReactiveX + Meteor 종단간 암호화 구현 사례
2016 W3C Conference #6 : ReactiveX + Meteor 종단간 암호화 구현 사례2016 W3C Conference #6 : ReactiveX + Meteor 종단간 암호화 구현 사례
2016 W3C Conference #6 : ReactiveX + Meteor 종단간 암호화 구현 사례
양재동 코드랩
 
2016 W3C Conference #2 : VANILA JS로 개발하기
2016 W3C Conference #2 : VANILA JS로 개발하기2016 W3C Conference #2 : VANILA JS로 개발하기
2016 W3C Conference #2 : VANILA JS로 개발하기
양재동 코드랩
 
크로스플랫폼으로 다시 태어난 ASP.NET Core
크로스플랫폼으로 다시 태어난 ASP.NET Core크로스플랫폼으로 다시 태어난 ASP.NET Core
크로스플랫폼으로 다시 태어난 ASP.NET Core
SangHoon Han
 
Multi mechanize
Multi mechanizeMulti mechanize
Multi mechanize
SungMin OH
 
시시콜콜 및 OPEN API 설명
시시콜콜 및 OPEN API 설명시시콜콜 및 OPEN API 설명
시시콜콜 및 OPEN API 설명
건우 이
 
구성도 샘플1
구성도 샘플1구성도 샘플1
구성도 샘플1doojung7
 
Laravel 로 배우는 서버사이드 #5
Laravel 로 배우는 서버사이드 #5Laravel 로 배우는 서버사이드 #5
Laravel 로 배우는 서버사이드 #5
성일 한
 
GeoTools와 GeoServer를 이용한 KOPSS Open API의 구현
GeoTools와 GeoServer를 이용한 KOPSS Open API의 구현GeoTools와 GeoServer를 이용한 KOPSS Open API의 구현
GeoTools와 GeoServer를 이용한 KOPSS Open API의 구현
MinPa Lee
 
Yeoman(모던웹 개발을 위한 관리도구)설치사용가이드
Yeoman(모던웹 개발을 위한 관리도구)설치사용가이드Yeoman(모던웹 개발을 위한 관리도구)설치사용가이드
Yeoman(모던웹 개발을 위한 관리도구)설치사용가이드
수정 김
 

Viewers also liked (20)

프론트엔드 웹앱 프레임웍 - Bootstrap, Backbone 그리고 AngularJS
프론트엔드 웹앱 프레임웍 - Bootstrap, Backbone 그리고 AngularJS프론트엔드 웹앱 프레임웍 - Bootstrap, Backbone 그리고 AngularJS
프론트엔드 웹앱 프레임웍 - Bootstrap, Backbone 그리고 AngularJS
 
Yeoman
YeomanYeoman
Yeoman
 
응답하라 반응형웹 - 4. angular
응답하라 반응형웹 - 4. angular응답하라 반응형웹 - 4. angular
응답하라 반응형웹 - 4. angular
 
Angular 2 어디까지 왔을까
Angular 2 어디까지 왔을까Angular 2 어디까지 왔을까
Angular 2 어디까지 왔을까
 
강력한 사용자인증 솔루션 Pinsafe
강력한 사용자인증 솔루션   Pinsafe강력한 사용자인증 솔루션   Pinsafe
강력한 사용자인증 솔루션 Pinsafe
 
OAuth - GDG Korea Women 2014 첫 스터디
OAuth - GDG Korea Women 2014 첫 스터디OAuth - GDG Korea Women 2014 첫 스터디
OAuth - GDG Korea Women 2014 첫 스터디
 
빠른 프로토타이핑을 위한 웹앱 자동화 툴 - YEOMAN
빠른 프로토타이핑을 위한 웹앱 자동화 툴 - YEOMAN빠른 프로토타이핑을 위한 웹앱 자동화 툴 - YEOMAN
빠른 프로토타이핑을 위한 웹앱 자동화 툴 - YEOMAN
 
막하는 스터디 네 번째 만남 AngularJs (20151108)
막하는 스터디 네 번째 만남 AngularJs (20151108)막하는 스터디 네 번째 만남 AngularJs (20151108)
막하는 스터디 네 번째 만남 AngularJs (20151108)
 
2016 ABCD 소개
2016 ABCD 소개2016 ABCD 소개
2016 ABCD 소개
 
2016 W3C Conference #5 : UNIVERSAL RENDERING (React.JS 중심)
2016 W3C Conference #5 : UNIVERSAL RENDERING (React.JS 중심)2016 W3C Conference #5 : UNIVERSAL RENDERING (React.JS 중심)
2016 W3C Conference #5 : UNIVERSAL RENDERING (React.JS 중심)
 
2016 W3C Conference #7 : Electron, 웹 기술로 담아내는 데스크톱 애플리케이션
2016 W3C Conference #7 : Electron, 웹 기술로 담아내는 데스크톱 애플리케이션2016 W3C Conference #7 : Electron, 웹 기술로 담아내는 데스크톱 애플리케이션
2016 W3C Conference #7 : Electron, 웹 기술로 담아내는 데스크톱 애플리케이션
 
2016 W3C Conference #6 : ReactiveX + Meteor 종단간 암호화 구현 사례
2016 W3C Conference #6 : ReactiveX + Meteor 종단간 암호화 구현 사례2016 W3C Conference #6 : ReactiveX + Meteor 종단간 암호화 구현 사례
2016 W3C Conference #6 : ReactiveX + Meteor 종단간 암호화 구현 사례
 
2016 W3C Conference #2 : VANILA JS로 개발하기
2016 W3C Conference #2 : VANILA JS로 개발하기2016 W3C Conference #2 : VANILA JS로 개발하기
2016 W3C Conference #2 : VANILA JS로 개발하기
 
크로스플랫폼으로 다시 태어난 ASP.NET Core
크로스플랫폼으로 다시 태어난 ASP.NET Core크로스플랫폼으로 다시 태어난 ASP.NET Core
크로스플랫폼으로 다시 태어난 ASP.NET Core
 
Multi mechanize
Multi mechanizeMulti mechanize
Multi mechanize
 
시시콜콜 및 OPEN API 설명
시시콜콜 및 OPEN API 설명시시콜콜 및 OPEN API 설명
시시콜콜 및 OPEN API 설명
 
구성도 샘플1
구성도 샘플1구성도 샘플1
구성도 샘플1
 
Laravel 로 배우는 서버사이드 #5
Laravel 로 배우는 서버사이드 #5Laravel 로 배우는 서버사이드 #5
Laravel 로 배우는 서버사이드 #5
 
GeoTools와 GeoServer를 이용한 KOPSS Open API의 구현
GeoTools와 GeoServer를 이용한 KOPSS Open API의 구현GeoTools와 GeoServer를 이용한 KOPSS Open API의 구현
GeoTools와 GeoServer를 이용한 KOPSS Open API의 구현
 
Yeoman(모던웹 개발을 위한 관리도구)설치사용가이드
Yeoman(모던웹 개발을 위한 관리도구)설치사용가이드Yeoman(모던웹 개발을 위한 관리도구)설치사용가이드
Yeoman(모던웹 개발을 위한 관리도구)설치사용가이드
 

Similar to 가볍게 살펴보는 AngularJS

2020년 9월 5일 개발 이야기 정리
2020년 9월 5일 개발 이야기 정리2020년 9월 5일 개발 이야기 정리
2020년 9월 5일 개발 이야기 정리
Jay Park
 
The comprehensive guide for optimizing the performance of mobile HTML5 Web ap...
The comprehensive guide for optimizing the performance of mobile HTML5 Web ap...The comprehensive guide for optimizing the performance of mobile HTML5 Web ap...
The comprehensive guide for optimizing the performance of mobile HTML5 Web ap...
Sang Seok Lim
 
서버학개론(백엔드 서버 개발자를 위한)
서버학개론(백엔드 서버 개발자를 위한)서버학개론(백엔드 서버 개발자를 위한)
서버학개론(백엔드 서버 개발자를 위한)
수보 김
 
웹:앱 기술 동향
웹:앱 기술 동향웹:앱 기술 동향
웹:앱 기술 동향
ssuser0e53c8
 
(주)엑슨투 회사소개서 2018년 01월
(주)엑슨투 회사소개서 2018년 01월(주)엑슨투 회사소개서 2018년 01월
(주)엑슨투 회사소개서 2018년 01월
Sang Jin LEE
 
01.모바일 프레임워크 이론
01.모바일 프레임워크 이론01.모바일 프레임워크 이론
01.모바일 프레임워크 이론
Hankyo
 
클라우드 네이티브 IT를 위한 4가지 요소와 상관관계 - DevOps, CI/CD, Container, 그리고 MSA
클라우드 네이티브 IT를 위한 4가지 요소와 상관관계 - DevOps, CI/CD, Container, 그리고 MSA클라우드 네이티브 IT를 위한 4가지 요소와 상관관계 - DevOps, CI/CD, Container, 그리고 MSA
클라우드 네이티브 IT를 위한 4가지 요소와 상관관계 - DevOps, CI/CD, Container, 그리고 MSA
VMware Tanzu Korea
 
스마트 디바이스 최근 개발 이슈와 트렌드
스마트 디바이스 최근 개발 이슈와 트렌드스마트 디바이스 최근 개발 이슈와 트렌드
스마트 디바이스 최근 개발 이슈와 트렌드
Kenu, GwangNam Heo
 
MEAN Stack 기반 모바일 서비스 개발 overview
MEAN Stack 기반 모바일 서비스 개발 overviewMEAN Stack 기반 모바일 서비스 개발 overview
MEAN Stack 기반 모바일 서비스 개발 overview
민태 김
 
HTML5 관점에서 2015년 웹 앱 개발 동향과 사례 및 2016년 발전 방향 저...
HTML5 관점에서 2015년 웹 앱 개발 동향과 사례 및 2016년 발전 방향 저...HTML5 관점에서 2015년 웹 앱 개발 동향과 사례 및 2016년 발전 방향 저...
HTML5 관점에서 2015년 웹 앱 개발 동향과 사례 및 2016년 발전 방향 저...
Sang Seok Lim
 
꿀밋업1탄_왜_마이크로서비스인가
꿀밋업1탄_왜_마이크로서비스인가꿀밋업1탄_왜_마이크로서비스인가
꿀밋업1탄_왜_마이크로서비스인가
VMware Tanzu Korea
 
메가존 Hype Up with Megazone 세미나#1 클라우드로 전환하는 길이 보인다!
메가존 Hype Up with Megazone 세미나#1 클라우드로 전환하는 길이 보인다!  메가존 Hype Up with Megazone 세미나#1 클라우드로 전환하는 길이 보인다!
메가존 Hype Up with Megazone 세미나#1 클라우드로 전환하는 길이 보인다!
메가존 Megazone Corp.
 
polyglot application development in the cloud
polyglot application development in the cloudpolyglot application development in the cloud
polyglot application development in the cloud
Mee Nam Lee
 
[124] 하이브리드 앱 개발기 김한솔
[124] 하이브리드 앱 개발기 김한솔[124] 하이브리드 앱 개발기 김한솔
[124] 하이브리드 앱 개발기 김한솔
NAVER D2
 
Droid knights 2019 - (Large-scale App을 위한) Android Architecture 총정리
Droid knights 2019 - (Large-scale App을 위한) Android Architecture 총정리Droid knights 2019 - (Large-scale App을 위한) Android Architecture 총정리
Droid knights 2019 - (Large-scale App을 위한) Android Architecture 총정리
Sa-ryong Kang
 
Daum APIs: A to Z - API Meetup 2014
Daum APIs: A to Z  - API Meetup 2014Daum APIs: A to Z  - API Meetup 2014
Daum APIs: A to Z - API Meetup 2014Channy Yun
 
피플펀드 웹서비스 성능개선기(+초기 스타트업의 개발방법론) 20171220
피플펀드 웹서비스 성능개선기(+초기 스타트업의 개발방법론) 20171220피플펀드 웹서비스 성능개선기(+초기 스타트업의 개발방법론) 20171220
피플펀드 웹서비스 성능개선기(+초기 스타트업의 개발방법론) 20171220
Seomgi Han
 
What is application builder
What is application builderWhat is application builder
What is application builder
KyungHo Joo
 
Angularjs, ionic, cordova 기반 syrup store app 개발 사례 공유
Angularjs, ionic, cordova 기반 syrup store app 개발 사례 공유Angularjs, ionic, cordova 기반 syrup store app 개발 사례 공유
Angularjs, ionic, cordova 기반 syrup store app 개발 사례 공유
Sang Seok Lim
 
Pivotal CF Short-20150109
Pivotal CF Short-20150109Pivotal CF Short-20150109
Pivotal CF Short-20150109
Hakchin Kim
 

Similar to 가볍게 살펴보는 AngularJS (20)

2020년 9월 5일 개발 이야기 정리
2020년 9월 5일 개발 이야기 정리2020년 9월 5일 개발 이야기 정리
2020년 9월 5일 개발 이야기 정리
 
The comprehensive guide for optimizing the performance of mobile HTML5 Web ap...
The comprehensive guide for optimizing the performance of mobile HTML5 Web ap...The comprehensive guide for optimizing the performance of mobile HTML5 Web ap...
The comprehensive guide for optimizing the performance of mobile HTML5 Web ap...
 
서버학개론(백엔드 서버 개발자를 위한)
서버학개론(백엔드 서버 개발자를 위한)서버학개론(백엔드 서버 개발자를 위한)
서버학개론(백엔드 서버 개발자를 위한)
 
웹:앱 기술 동향
웹:앱 기술 동향웹:앱 기술 동향
웹:앱 기술 동향
 
(주)엑슨투 회사소개서 2018년 01월
(주)엑슨투 회사소개서 2018년 01월(주)엑슨투 회사소개서 2018년 01월
(주)엑슨투 회사소개서 2018년 01월
 
01.모바일 프레임워크 이론
01.모바일 프레임워크 이론01.모바일 프레임워크 이론
01.모바일 프레임워크 이론
 
클라우드 네이티브 IT를 위한 4가지 요소와 상관관계 - DevOps, CI/CD, Container, 그리고 MSA
클라우드 네이티브 IT를 위한 4가지 요소와 상관관계 - DevOps, CI/CD, Container, 그리고 MSA클라우드 네이티브 IT를 위한 4가지 요소와 상관관계 - DevOps, CI/CD, Container, 그리고 MSA
클라우드 네이티브 IT를 위한 4가지 요소와 상관관계 - DevOps, CI/CD, Container, 그리고 MSA
 
스마트 디바이스 최근 개발 이슈와 트렌드
스마트 디바이스 최근 개발 이슈와 트렌드스마트 디바이스 최근 개발 이슈와 트렌드
스마트 디바이스 최근 개발 이슈와 트렌드
 
MEAN Stack 기반 모바일 서비스 개발 overview
MEAN Stack 기반 모바일 서비스 개발 overviewMEAN Stack 기반 모바일 서비스 개발 overview
MEAN Stack 기반 모바일 서비스 개발 overview
 
HTML5 관점에서 2015년 웹 앱 개발 동향과 사례 및 2016년 발전 방향 저...
HTML5 관점에서 2015년 웹 앱 개발 동향과 사례 및 2016년 발전 방향 저...HTML5 관점에서 2015년 웹 앱 개발 동향과 사례 및 2016년 발전 방향 저...
HTML5 관점에서 2015년 웹 앱 개발 동향과 사례 및 2016년 발전 방향 저...
 
꿀밋업1탄_왜_마이크로서비스인가
꿀밋업1탄_왜_마이크로서비스인가꿀밋업1탄_왜_마이크로서비스인가
꿀밋업1탄_왜_마이크로서비스인가
 
메가존 Hype Up with Megazone 세미나#1 클라우드로 전환하는 길이 보인다!
메가존 Hype Up with Megazone 세미나#1 클라우드로 전환하는 길이 보인다!  메가존 Hype Up with Megazone 세미나#1 클라우드로 전환하는 길이 보인다!
메가존 Hype Up with Megazone 세미나#1 클라우드로 전환하는 길이 보인다!
 
polyglot application development in the cloud
polyglot application development in the cloudpolyglot application development in the cloud
polyglot application development in the cloud
 
[124] 하이브리드 앱 개발기 김한솔
[124] 하이브리드 앱 개발기 김한솔[124] 하이브리드 앱 개발기 김한솔
[124] 하이브리드 앱 개발기 김한솔
 
Droid knights 2019 - (Large-scale App을 위한) Android Architecture 총정리
Droid knights 2019 - (Large-scale App을 위한) Android Architecture 총정리Droid knights 2019 - (Large-scale App을 위한) Android Architecture 총정리
Droid knights 2019 - (Large-scale App을 위한) Android Architecture 총정리
 
Daum APIs: A to Z - API Meetup 2014
Daum APIs: A to Z  - API Meetup 2014Daum APIs: A to Z  - API Meetup 2014
Daum APIs: A to Z - API Meetup 2014
 
피플펀드 웹서비스 성능개선기(+초기 스타트업의 개발방법론) 20171220
피플펀드 웹서비스 성능개선기(+초기 스타트업의 개발방법론) 20171220피플펀드 웹서비스 성능개선기(+초기 스타트업의 개발방법론) 20171220
피플펀드 웹서비스 성능개선기(+초기 스타트업의 개발방법론) 20171220
 
What is application builder
What is application builderWhat is application builder
What is application builder
 
Angularjs, ionic, cordova 기반 syrup store app 개발 사례 공유
Angularjs, ionic, cordova 기반 syrup store app 개발 사례 공유Angularjs, ionic, cordova 기반 syrup store app 개발 사례 공유
Angularjs, ionic, cordova 기반 syrup store app 개발 사례 공유
 
Pivotal CF Short-20150109
Pivotal CF Short-20150109Pivotal CF Short-20150109
Pivotal CF Short-20150109
 

More from Jae Sung Park

[SOSCON 2018] 오픈소스 개발: Behind the scenes
[SOSCON 2018] 오픈소스 개발: Behind the scenes[SOSCON 2018] 오픈소스 개발: Behind the scenes
[SOSCON 2018] 오픈소스 개발: Behind the scenes
Jae Sung Park
 
[DEVIEW 2018] JavaScript 배틀그라운드로부터 살아남기
[DEVIEW 2018] JavaScript 배틀그라운드로부터 살아남기[DEVIEW 2018] JavaScript 배틀그라운드로부터 살아남기
[DEVIEW 2018] JavaScript 배틀그라운드로부터 살아남기
Jae 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] 네이버의 모던 웹 라이브러리 - egjs
Jae Sung Park
 
현실적 PWA
현실적 PWA현실적 PWA
현실적 PWA
Jae Sung Park
 
How jQuery event works
How jQuery event worksHow jQuery event works
How jQuery event works
Jae Sung Park
 
Web Components & Polymer
Web Components & PolymerWeb Components & Polymer
Web Components & PolymerJae Sung Park
 
모바일 웹 디버깅
모바일 웹 디버깅모바일 웹 디버깅
모바일 웹 디버깅
Jae Sung Park
 
혁신적인 웹컴포넌트 라이브러리 - Polymer
혁신적인 웹컴포넌트 라이브러리 - Polymer혁신적인 웹컴포넌트 라이브러리 - Polymer
혁신적인 웹컴포넌트 라이브러리 - Polymer
Jae Sung Park
 
CSS Functions
CSS FunctionsCSS Functions
CSS Functions
Jae Sung Park
 
우리가 몰랐던 크롬 개발자 도구
우리가 몰랐던 크롬 개발자 도구우리가 몰랐던 크롬 개발자 도구
우리가 몰랐던 크롬 개발자 도구
Jae Sung Park
 
What's new in IE11
What's new in IE11What's new in IE11
What's new in IE11
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 Ruble
Jae 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 API
Jae Sung Park
 
Jindo Plugin for Aptana Studio 3
Jindo Plugin for Aptana Studio 3Jindo Plugin for Aptana Studio 3
Jindo Plugin for Aptana Studio 3Jae Sung Park
 
Web Application SG
Web Application SGWeb Application SG
Web Application SG
Jae Sung Park
 

More from Jae Sung Park (20)

[SOSCON 2018] 오픈소스 개발: Behind the scenes
[SOSCON 2018] 오픈소스 개발: Behind the scenes[SOSCON 2018] 오픈소스 개발: Behind the scenes
[SOSCON 2018] 오픈소스 개발: Behind the scenes
 
[DEVIEW 2018] JavaScript 배틀그라운드로부터 살아남기
[DEVIEW 2018] JavaScript 배틀그라운드로부터 살아남기[DEVIEW 2018] JavaScript 배틀그라운드로부터 살아남기
[DEVIEW 2018] JavaScript 배틀그라운드로부터 살아남기
 
[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
 
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
 
Jindo Plugin for Aptana Studio 3
Jindo Plugin for Aptana Studio 3Jindo Plugin for Aptana Studio 3
Jindo Plugin for Aptana Studio 3
 
Web Application SG
Web Application SGWeb Application SG
Web Application SG
 

가볍게 살펴보는 AngularJS