분류 전체보기

신념을 갖지 않는 한 남에게 신념을 줄 수는 없다. - 아놀드 - 2013.06.14
TDD, BDD 2013.06.13
Angular.JS 의 구조와 특징 2013.06.13
Text editor -텍스트에디터 : Brackets 2013.06.13
Text editor - 텍스트 에디터 : Sublime with TrailingSpaces 2013.06.13
내 안의 폭군, 내 안의 천사 2013.06.13

신념을 갖지 않는 한 남에게 신념을 줄 수는 없다. - 아놀드 -

홍반장水_ 2013. 6. 14. 08:35

2013. 6. 14. 08:35

신념을 갖지 않는 한 남에게 신념을 줄 수는 없다. - 아놀드 -

'생활의 발견 > Cool' 카테고리의 다른 글

재능이라고 불리는 것은 올바르게 계속된 지독한 노동 이외에 아무것도 아니다 - 어니스트 헤밍웨이 - (0)	2013.06.20
시간을 이용할 줄 아는 사람은 하루를 사흘로 통용한다. - 영국 속담 - (0)	2013.06.20
"천재란 영원한 인내심이다" - 미켈란젤로 - (0)	2013.06.13
방황과 변화를 사랑한다는 것은 살아 있다는 증거이다. - 바그너 - (0)	2013.06.12
지상과 천상을 통틀어 절대적 사실은 한 방향으로의 오랜 순종이 있어야 하며, 그때에만 인생을 살 만한 가치가 있게 해주는 결과가 있게 마련이고, 또 언제나 그래왔다 - 프리드리히 니체 - (0)	2013.06.12

TDD, BDD

홍반장水_ 2013. 6. 13. 18:13

2013. 6. 13. 18:13

TDD : Test Driven Development

BDD : Behavior Driven Development

TDD에 대한 코칭을 하던 BDD의 아버지 댄 노스(Dan north)의 고민.

프로세스의 어디서부터 시작해야 하는가?
무엇을 테스트하고 또 무엇을 하지 말아야 하는가?
한 번에 얼마만큼 테스트 해야 하는가?
테스트를 어떻게 명명해야 하는가?
테스트가 실패하는 이유에 대해 어떻게 이해해야 하는가?

전통적인 TDD 소프트웨어 개발 방법론

첫 번째로 유닛을 위한 테스트 셋을 정의한다.(define a test set for the unit first).
유닛을 구현한다(the implement the unit).
마지막으로 유닛에 대한 구현이 테스틀르 통과하는지 검증한다(finally verify that the implementation of the unit makes the tests success).

TDD 템플릿

특정 값이 주어지고(Given)
어떤 이벤트가 발생했을 때(When)
그에 대한 결과를 보장해야 한다(Then).

저작자표시 (새창열림)

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

[Erlang] 얼랑 : Erlang/OTP (0)	2013.07.11
[단어] 이상, 이하, 초과, 미만 에 대한 정의 (0)	2013.07.01
도로명에 따른 우편번호 신규 내려받기 (0)	2013.06.04
개인정보보호법 (0)	2013.05.29
[Slide] 모바일 웹/앱 관점에서 본 2012년 비즈니스 동향 및 2013년 전망 (0)	2013.05.06

Angular.JS 의 구조와 특징

홍반장水_ 2013. 6. 13. 16:03

2013. 6. 13. 16:03

[마소] 2013.05 Angular.JS 의 구조와 특징

예제를 로컬에 구현해 보았다.

여러번 해본 것이지만 예제 나온김에 한번 더.

angular.js 파일은 받아두어야 한다.

기본적으로 일단 <html> 태그에 ng-app 를 입력해주어야 한다.

<body>에는 ng-controller 를 입력해주어야 한다.

반복문은 반복하려는 구문에 ng-repeat 를 입력해주면 해당 데이터 배열 갯수만큼 반복된다.

$scope로 데이터를 전달한다.

데이터 출력은 "{{데이터}}"의 형식으로 된다.

모델은 $scope의 속성값이다. (todoList)

뷰는 DOM, 보이는 템플릿 자체가 뷰인 셈이다.

컨트롤러는 자바스크립트 함수로, $scope를 argument로 가지고 있다.

※ Angular.JS 에서 사용하는 지시문

ng-app	Declares an element as a root element of the application allowing behavior to be modified through custom HTML tags.
ng-bind	Automatically changes the text of a HTML element to the value of a given expression.
ng-model	Similar to ng-bind, but allows two-way data binding between the view and the scope.
ng-class	Allows class attributes to be dynamically loaded.
ng-controller	Specifies a JavaScript controller class that evaluates HTML expressions.
ng-repeat	Instantiate an element once per item from a collection.
ng-show & ng-hide	Instantiate an element once per item from a collection.
ng-switch	Conditionally instantiate one template from a set of choices, depending on the value of a selection expression.
ng-view	The base directive responsible for handling routes that resolve JSON before rendering templates driven by specified controllers.

※ Model–view–controller (MVC)

Model > JS Objects

View > DOM

Controller > JS Function

※ Template, Model, View 방식으로 구현된다.
(참고 : http://docs.angularjs.org/#!/tutorial/step_04)

※ 예제 구현 화면

※ 소스 화면 (Sublime Text 2)

<!doctype html> <html lang="ko" ng-app> <head> <meta charset="UTF-8"> <link rel="stylesheet" type="text/css" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css"> <script type="text/javascript" src="./js/angular.js" ></script> <script> var todoList = [ {done: true, title:"마소 구독하기"}, {done: false, title:"angular 공부하기"}, {done: false, title:"GDG Korea WebTech 접속하기"} ]; function main($scope){ $scope.name = "와니"; $scope.todoList = todoList; //add new Function $scope.addNewTodo = function(newTitle){ todoList.push({done:false, title:newTitle}); }; $scope.archive = function(){ angular.forEach($scope.todoList, function(value, key){ if(value.done){ $scope.todoList.splice(key,key+1); } }); }; $scope.remain = function(){ var remainCount=0; angular.forEach($scope.todoList, function(value, key){ if(value.done === false){ remainCount++; } }); return remainCount; } } </script> <title>TODO List</title> </head> <body class="well" ng-controller="main" > <h1>{{name}}'s TODO List</h1> <p>Remaining <strong>{{remain()}}</strong> of <strong>{{todoList.length}}</strong>[ <a href="" ng-click="archive()">archive</a> ]</p> <ul class="unstyled" ng-repeat="todo in todoList"> <li><input type="checkbox" ng-model="todo.done">{{todo.title}}</li> </ul> </br> <ul class="unstyled" > <li><input type="checkbox">공부하기</li> <li><input type="checkbox">잠자기</li> </ul> <form name="newItemForm" class="form-inline" action=""> <div class="control-group"> <div class="controls"> <input type="text" name="newItemText" ng-model="newTitle"> </div> </div> <button id="add" class="btn btn-primary input-large" ng-click="addNewTodo(newTitle)">add</button> </form> </body> </html>

저작자표시 (새창열림)

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

Codeblock.js— A better code learning environment (0)	2013.06.20
PreloadJS (0)	2013.06.20
Text editor -텍스트에디터 : Brackets (0)	2013.06.13
Text editor - 텍스트 에디터 : Sublime with TrailingSpaces (0)	2013.06.13
ICEcoder — In-browser code editor (0)	2013.06.04

Text editor -텍스트에디터 : Brackets

홍반장水_ 2013. 6. 13. 09:52

2013. 6. 13. 09:52

Text editor -텍스트에디터 : Brackets

http://brackets.io/

Download : http://download.brackets.io/

Brackets is an open-source editor for web design and development built on top of web technologies such as HTML, CSS and JavaScript. The project was created and is maintained by Adobe, and is released under an MIT License.

저작자표시 (새창열림)

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

PreloadJS (0)	2013.06.20
Angular.JS 의 구조와 특징 (0)	2013.06.13
Text editor - 텍스트 에디터 : Sublime with TrailingSpaces (0)	2013.06.13
ICEcoder — In-browser code editor (0)	2013.06.04
APTANA - SVN 설치 (subclipse) (0)	2013.05.28

Text editor - 텍스트 에디터 : Sublime with TrailingSpaces

홍반장水_ 2013. 6. 13. 09:42

2013. 6. 13. 09:42

Text editor - 텍스트 에디터 : Sublime with TrailingSpaces

Sublime : http://www.sublimetext.com/

└ (plugin) TrailingSpaces : https://github.com/SublimeText/TrailingSpaces

Download :

http://www.sublimetext.com/2

http://www.sublimetext.com/3

Sublime Text 2.0.1 x64 Setup.exe

TrailingSpaces-master.zip

Sublime Text

Sublime Text is a sophisticated text editor for code, markup and prose.
You'll love the slick user interface, extraordinary features and amazing performance.

Trailing Spaces

A Sublime Text 2 and3 plugin that allows you to…

highlight trailing spaces and delete them in a flash!

Sublime의 awesome한 기능들.

Use Multiple Selections to rename variables quickly.
Here Ctrl+D is used to select the next occurrence of the current word.

단어를 선택한 다음 "Ctrl + D" 를 처음 누르면 선택된 동일 단어 전체 검색.

"Ctrl + D" 를 계속 누르면 동일 단어가 순차적으로 선택되고, 순차적으로 선택된 단어는 동시 수정이 가능하다.

Make batch edits with Multiple Selections.
Here Ctrl+Shift+L is used to split a selection into lines, and each line is then edited simultaneously.

영역 선택 후 "Ctrl + Shift + L" 를 선택하면 세로영역 선택이 된다. 세로줄에 커서가 생성됨.

The Command Palette gives fast access to functionality.
Here Ctrl+Shift+P is used to show the Command Palette, "sspy" (short for Set Syntax: Python) is used set the syntax of the current file to Python.

"Ctrl + Shift + P"를 누르고 해당 파레트를 선택하면 명령어 파레트를 선택할 수 있다.

예를 들어 Python의 Syntax를 사용하려면, "Ctrl + Shift + P"를 누르고, "sspy"라고 입력하면 "Set Suntax : Python" 이 선택된다. 선택하고 나면 해당 파일의 구문들이 Python에 맞는 구문색상으로 변경된다.

Use Goto Anything to quickly navigate between files, even in the largest projects.
Ctrl+P shows Goto Anything, and typing then filters on file and directory names.

"File" - "Open Folder" 를 해서 폴더를 열었을 경우, 또는 여러 개의 파일이 열려있을 경우 "Ctrl + P"를 누르고 열려 있는 파일 또는 폴더에 존재하는 파일을 검색해서 바로 open 할 수 있다.

Goto Anything can also be used to show a function, line or word within a file.
Type @ after a file name to filter on symbols. More...

"Ctrl + P"를 누르고 파일을 검색하는데, 해당 파일이 선택되었을때, 검색어 바로 뒤에 "@"를 입력하면 해당 파일에 존재하는 함수들을 검색 할 수 있다.

Find and Replace with regular expressions.
Here unwanted whitespace is removed by using the regex " +" to find groups of spaces, which are then selected simultaneously with the Find All button.

"Ctrl + F"를 눌러서 "Find and Replace"를 할 경우 "공백(space)"을 입력하고 "+"를 넣으면 해당 공백 사이즈와 동일한 공백을 찾을 수 있고, 삭제 또는 교체 가능하다.

Trailing spaces 를 윈도우에서 설치할 때.

압축 풀고, "C:\Users\사용자폴더\AppData\Roaming\Sublime Text 2\Packages"에 폴더채로 옮겨두고 Sublime 재 실행 하면 확인 가능하다.

저작자표시 (새창열림)

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

Angular.JS 의 구조와 특징 (0)	2013.06.13
Text editor -텍스트에디터 : Brackets (0)	2013.06.13
ICEcoder — In-browser code editor (0)	2013.06.04
APTANA - SVN 설치 (subclipse) (0)	2013.05.28
금융결제원 - 공인인증서를 PC > 스마트폰 으로 복사하는 페이지 (0)	2013.05.23

내 안의 폭군, 내 안의 천사

홍반장水_ 2013. 6. 13. 09:32

2013. 6. 13. 09:32

"우리 안의 강한 충동,
우리 안에 있는 폭군에게는
우리의 이성뿐만 아니라 양심도 굴복하게 된다."
자기 자신을 부정하고 원한과 미움을 가진 사람은
스스로에게 불만스러울 뿐 아니라 주변 사람에게도
부정적인 생각과 마음을 그대로 표현하게 된다.
즉 그는 스스로 폭군이 되어 자신을 부정하며
타인에게도 폭력적이 된다.

- 김정현의《철학과 마음의 치유》중에서 -

* 평소 그렇게 보이지 않았던 사람도
어느 한순간에 폭군으로 변하기도 합니다.
내 안의 '폭군'이 별것도 아닌 일에 욱하고 튀어나와
자기 자신은 물론 다른 사람에게도 상처를 냅니다.
그래서, 내 안의 폭군을 얼른 몰아내야 합니다.
그 빈자리에 천사를 모시면 미소가 번지고
내 안의 꽃을 피우면 향기가 번집니다.

저작자표시 (새창열림)

'생활의 발견 > 행복한 경영' 카테고리의 다른 글

현재에 만족하는 것이 가장 큰 적이다. (0)	2013.06.17
내공은 하나를 실패할 때 마다 하나씩 쌓인다. (0)	2013.06.14
타인의 은혜에 감사하라. (0)	2013.06.12
날카로운 칼보다 무서운 것 (0)	2013.06.11
목표에 다가갈수록 고난은 더욱 커진다. (0)	2013.06.10

PREV 이전 1 ···1930 1931 1932 1933 1934 1935 1936 ···2183 NEXT 다음

긍정적 사고, 음식의 절제, 규칙적인 운동

분류 전체보기

신념을 갖지 않는 한 남에게 신념을 줄 수는 없다. - 아놀드 -

'생활의 발견 > Cool' 카테고리의 다른 글

TDD, BDD

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

Angular.JS 의 구조와 특징

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

Text editor -텍스트에디터 : Brackets

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

Text editor - 텍스트 에디터 : Sublime with TrailingSpaces

Sublime Text

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

내 안의 폭군, 내 안의 천사

'생활의 발견 > 행복한 경영' 카테고리의 다른 글

+ Recent posts

티스토리툴바