AI Convergence

2013. 4. 9. 10:49 Git, GitHub/GitHub

[GitHub] Git Remote로 잘못 push 된 디렉토리 삭제하기

.gitignore 설정을 깜빡하고 설정하지 않은 상태에서 git remote(GitHub)로 push 하였을 경우 삭제하는 방법

1) 삭제하기

- webstorm의 .idea 디렉토리가 GitHub에 push가 되었음

- .idea 를 삭제하자

- 명령수행 3 단계계

$ ll

total 24

-rw-r--r-- 1 nulpulum staff 59 4 6 16:04 component.css

-rw-r--r-- 1 nulpulum staff 473 4 9 09:30 component.js

-rw-r--r-- 1 nulpulum staff 633 4 9 09:30 component.html

drwxr-xr-x 12 nulpulum staff 408 4 9 09:30 ..

drwxr-xr-x 6 nulpulum staff 204 4 9 09:30 .

drwxr-xr-x 12 nulpulum staff 408 4 9 09:56 .idea

$ git rm -r --cached .idea

rm 'angularjs/component/.idea/.name'

rm 'angularjs/component/.idea/component.iml'

rm 'angularjs/component/.idea/dictionaries/nulpulum.xml'

rm 'angularjs/component/.idea/encodings.xml'

rm 'angularjs/component/.idea/jsLibraryMappings.xml'

rm 'angularjs/component/.idea/misc.xml'

rm 'angularjs/component/.idea/modules.xml'

rm 'angularjs/component/.idea/scopes/scope_settings.xml'

rm 'angularjs/component/.idea/vcs.xml'

rm 'angularjs/component/.idea/workspace.xml'

$ git commit -m "remove webstorm .idea directory"

[master 80de3cc] remove webstorm .idea directory

10 files changed, 352 deletions(-)

delete mode 100644 angularjs/component/.idea/.name

delete mode 100644 angularjs/component/.idea/component.iml

delete mode 100644 angularjs/component/.idea/dictionaries/nulpulum.xml

delete mode 100644 angularjs/component/.idea/encodings.xml

delete mode 100644 angularjs/component/.idea/jsLibraryMappings.xml

delete mode 100644 angularjs/component/.idea/misc.xml

delete mode 100644 angularjs/component/.idea/modules.xml

delete mode 100644 angularjs/component/.idea/scopes/scope_settings.xml

delete mode 100644 angularjs/component/.idea/vcs.xml

delete mode 100644 angularjs/component/.idea/workspace.xml

$ git push origin master

Counting objects: 7, done.

Delta compression using up to 4 threads.

Compressing objects: 100% (4/4), done.

Writing objects: 100% (4/4), 472 bytes, done.

Total 4 (delta 2), reused 0 (delta 0)

To https://github.com/ysyun/prototyping.git

cc17d3a..80de3cc master -> master

- .idea 디렉토리가 삭제되었음

- git rm 옵션들

$ git rm -r --help

usage: git rm [options] [--] <file>...

-n, --dry-run dry run

-q, --quiet do not list removed files

--cached only remove from the index

-f, --force override the up-to-date check

-r allow recursive removal

--ignore-unmatch exit with a zero status even if nothing matched

<참조>

- 원문 : Remove directory from remote repositories

저작자표시 비영리 변경금지 (새창열림)

'Git, GitHub > GitHub' 카테고리의 다른 글

[GitHub] 자신의 홈페이지를 Github에 만들기 (0)	2013.09.07
[Git] Git 메뉴얼 및 레퍼런스 목록 (0)	2013.04.01
[GitHub] Fork, Pull Request 개념 (1)	2013.01.17
[GitHub] Wiki에 Sidebar, Header, Footer 넣기 (0)	2012.10.25

posted by Peter Note

2013. 4. 9. 09:56 AngularJS/Concept

[Directive Driven] 사용자 정의 컴포넌트 만들기

재사용성을 위하여 사용자 정의 컴포넌트는 어떻게 만들 수 있는지 알아보자. Markdown 컴포넌트를 만들어 본다

1) 코딩하기

- <markdown> 태그안에 들어가는 마크다운 포멧을 해석하여 주는 showdown library는 GitHub에서 다운로드 받는다

- 해당 내용을 showdown 라이브러리에서 해석할 수 있도록 컴포넌트를 만든다

- 사전준비

+ 소스복제 : git clone https://github.com/ysyun/prototyping

+ 모듈소스 : cd prototyping/angularjs/component

- component.html 소스코드

+ ng-app 태그를 통하여 어떤 모듈을 사용할지 지정

+ showdown 로컬에 다운로드

+ component.js 안에 myApp안에 사용할 markdown directive 를 정의한다

<!doctype html>
<html lang="en" ng-app="myApp">
<head>
	<meta charset="UTF-8">
	<title>AngularJS Hello World using Directives</title>
	<script src="http://code.angularjs.org/1.1.4/angular.min.js"></script>
	<script src="../../underscore/underscore-min.js"></script>
        <script src="../../showdown/compressed/showdown.js"></script>
	<script src="component.js"></script>
	<link href="../../bootstrap/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<markdown>
[[MobiCon]](http://mobicon.tistory.com/)

This is Test
============
    'function() { console.log('hi youngsik'); }
</markdown>


</body>
</html>

- component.js 소스코드

+ angular.module 정의

+ ng-app=myApp 에 대한 모듈이며, 의존관계 없음

+ new Showdown.converter()를 통하여 마크다운 포멧 해석기 생성

+ 'E' : DOM Element 지정, A-attribute, C-class, M-comment (참조)

angular.module('myApp', [])
    .directive('markdown', function() {
        var converter = new Showdown.converter();
        return {
            restrict : 'E',
            link : function (scope, element, attrs) {
                var htmlDiv = converter.makeHtml(element.text());
                console.log(htmlDiv);
                element.html(htmlDiv);
            },
//            template: '<textarea rows="10" cols="10"></textarea>'
        }
    })

** 소스 : https://github.com/ysyun/prototyping/tree/master/angularjs/component

2) 동영상

- component-1

- component-2

<참조>

- 원문 : http://blog.angularjs.org/2012/05/custom-components-part-1.html

http://blog.angularjs.org/2012/05/custom-components-part-2.html

저작자표시 비영리 변경금지 (새창열림)

'AngularJS > Concept' 카테고리의 다른 글

[AngularJS] 개발자 가이드 - 03. HTML 컴파일러 (0)	2013.04.10
[AngularJS] 개발자 가이드 - 02. 시작하기 (0)	2013.04.10
[AngularJS] 개발자 가이드 - 01. 개요 (0)	2013.04.10
[SPA] Bootstrap과 Node.js 이용해 만들기 (1) (0)	2013.01.24
[SPA] 기본개념 잡기 (0)	2013.01.11

posted by Peter Note

2013. 4. 5. 16:27 AngularJS/Prototyping

[AngularJS] Twitter Search 만들기

AngularJS를 가지고 Twitter Search 기능을 프로토타입핑한다. Angular에서는 jsonp를 어떻게 다루는지 살펴보자

1) Twitter 검색

- 검색어를 넣고 트위터로 jsonp 검색을 하고 결과를 출력한다

- angularJS와 angularJS resource 를 사용한다

+ 서버사이드 데이터를 RESTful하게 가져오기 위한 방법을 제공한다

+ API : http://docs.angularjs.org/api/ngResource.$resource (1.1.4 소스)

- 사전준비

+ 소스복제 : git clone https://github.com/ysyun/prototyping

+ 트윗소스 : cd prototyping/angularjs/twitter

- twitter.html 소스

+ <html ng-app="Twitter"> 를 반드시 추가한다. 설정하지 않으면 하기 에러발생. twitter.js에서 모듈명으로 사용

+ twitter.js angular controller 파일을 별도로 코딩한다

+ <div ng-controller="TwitterCtrl" 추가

+ <input ng-model="searchTerm" 프로퍼티 추가하여 controller 내의 doSearch function 안에서 검색 파라미터로 사용한다

+ <button ng-click="doSearch()" 추가하여 검색하기 버튼 클릭하면 호출될 function지정

+ <tr ng-repeat 추가 : angular $resource를 통한 jsonp 호출 결과를 리스팅한다

<!doctype html>

<html lang="en" ng-app="Twitter">
<head>
	<meta charset="UTF-8">
	<title>AngularJS Hello World Twitter</title>
	<script src="http://code.angularjs.org/1.1.4/angular.min.js"></script>
	<script src="http://code.angularjs.org/1.1.4/angular-resource.min.js"></script>

	<script src="twitter.js"></script>
	<link href="../../bootstrap/css/bootstrap.min.css" rel="stylesheet">

</head>
<body>

<div ng-controller="TwitterCtrl">
	<form class="form-horizontal">
		<input type="text" ng-model="searchTerm">
		<button class="btn" ng-click="doSearch()">
			<i class="icon-search"></i>Search
		</button>
	</form>

	<table class="table table-striped">
		<tr ng-repeat="tweet in twitterResults.results">
			<td>{{tweet.text}}</td>
		</tr>
	</table>
</div>

</body>
</html>

- twitter.js 소스

+ angular.module : twitter.html에서 <html ng-app="Twitter" 명칭을 넣어줌. $resource를 사용하기 위하여 ngResource 의존

+ $scope.twitter.get() 호출하게 되면 jsonp 방식으로 호출하여 결과값을 가져온다

angular.module('Twitter', ['ngResource']);

function TwitterCtrl($scope, $resource){
	$scope.twitter = $resource('http://search.twitter.com/:action', 
		{action:'search.json', q:'angularjs', callback:'JSON_CALLBACK'},
		{get:{method:'JSONP'}});

	// $scope.twitterResults = $scope.twitter.get(function(){ alert(' hi dowon jsonp '); });

	$scope.doSearch = function () {
		$scope.twitterResults = $scope.twitter.get({q:$scope.searchTerm});
	}

}

2) 동영상

- 소스 : https://github.com/ysyun/prototyping/tree/master/angularjs/twitter

저작자표시 비영리 변경금지 (새창열림)

'AngularJS > Prototyping' 카테고리의 다른 글

[AngularJS] iCheck JQuery Plugin 을 AngularJS와 통합하기 (0)	2013.08.20
[AngularJS] Todo 목록 만들기 (0)	2013.04.05
[AngularJS] Hello World 만들기 (0)	2013.04.04

posted by Peter Note

2013. 4. 5. 14:36 AngularJS/Prototyping

[AngularJS] Todo 목록 만들기

Backbone 으로 todo 목록을 처음 만들어 보았을 때 이해와 타입핑을 하는데 많은 시간을 소비하였다. Angular를 접하면서 Todo 목록 만들기가 얼마나 쉽고 빠르게 몇분만에 개발되는지 감상해 보자. 직접 해보았는데 20분정도 소요된것 같다. 그간 배운 빅데이터는 이와 같은 쉬운 웹앱기술로 통합되어 스마트 기기에 표현될 수 있겠다.

1) 할일 목록 만들기

- 사전준비

+ 소스복제 : git clone https://github.com/ysyun/prototyping

+ 투두소스 : cd prototyping/angularjs/todo

- 할일 목록을 등록하고 완료체크를 하고 완료된 것은 삭제하는 기능을 갖는다

- Bootstrap, Underscore를 이용하고, Angular Controller를 별도 .js로 분리한다

- todo.html

+ <html ng-app> 추가

+ <script> : angular.js, underscore.js, todo.js, bootstrap.css 파일을 연결한다

+ <div ng-controller> 추가 : controller function은 todo.js안에 구현

+ getTotalTodos() : controller function 안에 구현 - 목록이 변경되면 자동 호출되어 바인딩됨

+ <li ng-repeat> 추가 : todos 목록 배열을 열거한다

+ <form> 의 <input ng-model="formTodoText"> 속성을 정의하고 controller function에서 사용토록 한다

+ <button ng-click="clearCompleted()" 추가 : controller function에서 구현한다

<!doctype html>
<html lang="en" ng-app>
<head>
	<meta charset="UTF-8">
	<title>AngularJS Hello World using Directives</title>
	<script src="http://code.angularjs.org/1.1.4/angular.min.js"></script>
	<script src="../../underscore/underscore-min.js"></script>
	<script src="todo.js"></script>
	<link href="../../bootstrap/css/bootstrap.min.css" rel="stylesheet">
	<link rel="stylesheet" type="text/css" href="todo.css">
</head>
<body>

<div ng-controller="TodoCtrl">
	<h2>Total count : {{getTotalTodos()}}</h2>
	<ul class="unstyled">
		<li ng-repeat="todo in todos">
			<input type="checkbox" ng-model="todo.done">
			<span class="done-{{todo.done}}">{{todo.text}}</span>
		</li>
	</ul>
	<form class="form-horizontal">
		<input type="text" ng-model="formTodoText" ng-model-instant>
		<button class="btn" ng-click="addTodo()">
                         <i class="icon-plus"></i>Add
                </button>
	</form>

	<button class="btn-large" ng-click="clearCompleted()">
             <i class="icon-trash"></i>Clear Completed
        </button>
</div>

</body>
</html>

+ 브라우져에 출력되는 DOM Element 소스

- todo.css

.done-true{
	text-decoration: line-through;
	color: grey;
}

- todo.js

+ todos : 목록 배열

+ function들 정의

function TodoCtrl($scope) {

	$scope.totalTodos = 4;

        // 가상 데이터를 만든다 
	$scope.todos = [
		{text:'Learn you', done:false}, 
		{text:'build SPA', done:false}
	];

        // html에서 전체 건수를 return 해 준다 
	$scope.getTotalTodos = function() {
		return $scope.todos.length;
	}

        // Underscore.js 를 이용하여 done=false 인 것만 배열로 뽑아낸다 
	$scope.clearCompleted = function() {
		$scope.todos = _.filter($scope.todos, function(todo){
			return !todo.done;
		});
	}

        // todos 배열에 html에서 입력한 값을 넣어준다 
	$scope.addTodo = function() {
		$scope.todos.push({text:$scope.formTodoText, done:false});
		$scope.formTodoText = '';
	}
}

2) TodoList 만들기 동영상

- 소스 : https://github.com/ysyun/prototyping/tree/master/angularjs/todo

저작자표시 비영리 변경금지 (새창열림)

'AngularJS > Prototyping' 카테고리의 다른 글

[AngularJS] iCheck JQuery Plugin 을 AngularJS와 통합하기 (0)	2013.08.20
[AngularJS] Twitter Search 만들기 (0)	2013.04.05
[AngularJS] Hello World 만들기 (0)	2013.04.04

posted by Peter Note

2013. 4. 4. 17:59 AngularJS/Prototyping

AngularJS의 세계에 빠져보자. BackboneJS 를 통하여 자유로운 영혼의 Client Side MV* framework 맛 보았다면 이제 AngularJS를 통하여 좀 더 절제되고 Fast Creating 가능한 방법에 대해 고민해 볼 때가 된 것 같다. 커뮤니티를 통하여 성숙하고 있고, 좋은 문서와 구글이라는 든든한 백그라운드까지 갖추고 있어서 무한한 성장 가능성을 가지고 있는 프레임워크라고 본다

1) Hello World

- 구글 CDN 참조

- 소스

<!doctype html>
<html lang="en" ng-app>
<head>
	<meta charset="UTF-8">
	<title>AngularJS Hello World</title>
</head>
<body>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.5/angular.min.js"></script>

<script>
	function DowonController($scope) {

		$scope.DowonProperty = "YoungSik";
	}
</script>

<div ng-controller="DowonController">

<input type="text" ng-model="DowonProperty" ng-model-instant/>
Hello World 

{{DowonProperty}}

</div>

</body>

</html>

- 코딩 순서

+ angularJS CDN script 태그 추가

+ <html ng-app> 추가

+ <div ng-controller> 추가

+ controller function 구현 : $scope에 속성추가/설정

+ ng-model 추가

+ {{ property }} 클라이언트 템플릿 추가

+ 수행 : WOW!!!

- 이해하기

+ ng-app를 선언한 DOM 하위는 angular를 통하여 제어가 가능하다.

+ ng-model을 HTML안에서 선언하면 controller function에서 프로퍼티를 사용할 수 있다

+ controller function에서 프로퍼티를 선언하면 HTML안에서 사용할 수 있다

+ 결국 Angular.js 는 양방향 Live Stream(Dynamic) binding을 가능하게 해준다

2) 동영상

- 소스 : https://github.com/ysyun/prototyping/blob/master/angularjs/hellworld.html

<참조>

- 동강 모음 http://johnlindquist.com/

- 페이스북 공개그룹 : https://www.facebook.com/groups/frontiner/permalink/525021784200620/

AngularJS Hello World
http://www.youtube.com/watch?v=uFTFsKmkQnQ&list=PL1w1q3fL4pmgqpzb-XhG7Clgi67d_OHXz

AngularJS - Getting Started - Google+
https://plus.google.com/communities/115368820700870330756/stream/f1fab692-830e-4341-b010-d0078e18719f

1. Devoxx 2012: AngularJS
http://www.youtube.com/watch?v=4EVBg1pNdtc&list=PL1w1q3fL4pmgqpzb-XhG7Clgi67d_OHXz

2. Mastering AngularJS - 1. Introduction
http://www.youtube.com/watch?v=DfstuptCfUo&list=PL1w1q3fL4pmgqpzb-XhG7Clgi67d_OHXz

3. Mastering AngularJS - 2. Using Directives .....감동의 도가니탕
http://www.youtube.com/watch?v=2SZQslQOgNg&list=PL1w1q3fL4pmgqpzb-XhG7Clgi67d_OHXz

4. AngularJS Tutorial .....감동의 도가니탕
http://www.youtube.com/watch?v=WuiHuZq_cg4&list=PL1w1q3fL4pmgqpzb-XhG7Clgi67d_OHXz

5. AngularJS Twitter Search
http://www.youtube.com/watch?v=IRelx4-ISbs&list=PL1w1q3fL4pmgqpzb-XhG7Clgi67d_OHXz

6. AngularJS - Directive Tutorial
http://www.youtube.com/watch?v=Yg-R1gchccg&list=PL1w1q3fL4pmgqpzb-XhG7Clgi67d_OHXz

7. AngularJS - Custom Components - Part 1
http://www.youtube.com/watch?v=A6wq16Ow5Ec&list=PL1w1q3fL4pmgqpzb-XhG7Clgi67d_OHXz

8. AngularJS - Custom Components - Part 2
http://www.youtube.com/watch?v=nKJDHnXaKTY&list=PL1w1q3fL4pmgqpzb-XhG7Clgi67d_OHXz

9. AngularJS - Communicating Between Controllers
http://www.youtube.com/watch?v=1OALSkJGsRw&list=PL1w1q3fL4pmgqpzb-XhG7Clgi67d_OHXz

10. AngularJS and DOM Manipulation
http://www.youtube.com/watch?v=bk-CC61zMZk&list=PL1w1q3fL4pmgqpzb-XhG7Clgi67d_OHXz

11. AngularJS - Handy Tricks With Developer Tools ...어려워 나중에
http://www.youtube.com/watch?v=4TM6wG9UW7s&list=PL1w1q3fL4pmgqpzb-XhG7Clgi67d_OHXz

12. AngularJS Routing ...............................................................내일은 여기서부터
http://www.youtube.com/watch?v=5uhZCc0j9RY&list=PL1w1q3fL4pmgqpzb-XhG7Clgi67d_OHXz

13. AngularJS - Behave like Gmail using Routes with Resolve
http://www.youtube.com/watch?v=P6KITGRQujQ&list=PL1w1q3fL4pmgqpzb-XhG7Clgi67d_OHXz

14. AngularJS + Chosen Plugin = Awesome
http://www.youtube.com/watch?v=8ozyXwLzFYs&list=PL1w1q3fL4pmgqpzb-XhG7Clgi67d_OHXz

저작자표시 비영리 변경금지 (새창열림)

'AngularJS > Prototyping' 카테고리의 다른 글

[AngularJS] iCheck JQuery Plugin 을 AngularJS와 통합하기 (0)	2013.08.20
[AngularJS] Twitter Search 만들기 (0)	2013.04.05
[AngularJS] Todo 목록 만들기 (0)	2013.04.05

posted by Peter Note

AI Convergence

Publication

Tag

Category

Recent Post

[GitHub] Git Remote로 잘못 push 된 디렉토리 삭제하기

'Git, GitHub > GitHub' 카테고리의 다른 글

[Directive Driven] 사용자 정의 컴포넌트 만들기

'AngularJS > Concept' 카테고리의 다른 글

[AngularJS] Twitter Search 만들기

'AngularJS > Prototyping' 카테고리의 다른 글

[AngularJS] Todo 목록 만들기

'AngularJS > Prototyping' 카테고리의 다른 글

[AngularJS] Hello World 만들기

'AngularJS > Prototyping' 카테고리의 다른 글

티스토리툴바