AI Convergence

Sublime Text 2에서 CoffeeScript를 빌드하고 Syntax Highlighting 기능을 사용하기 위하여 CoffeeScript 플러그인을 설치해 보자 

1) 플로그인 설치 

  - 하기 내역을 ctrl + `  누르면 sublime text 하단에 command 입력란이 나온다 => copy & paste => enter key를 치면 설치

  - ctrl + shift + p => install package 이동 => coffeescript 타입핑 하여 필요한 coffeescript 플로그인을 설치한다 

  - .coffee 파일을 오픈하면 Syntax Highlighting 이 되어 있다. (잘 안되면 하단의 참조 원문 보고 진행)

  - sublime text 메뉴 tool => build system => Automatic 으로 설정

import urllib2,os; pf='Package Control.sublime-package'; ipp=sublime.installed_packages_path(); os.makedirs(ipp) if not os.path.exists(ipp) else None; urllib2.install_opener(urllib2.build_opener(urllib2.ProxyHandler())); open(os.path.join(ipp,pf),'wb').write(urllib2.urlopen('http://sublime.wbond.net/'+pf.replace(' ','%20')).read()); print 'Please restart Sublime Text to finish installation

2) Short Key

alt+shift+t - Run a Cake task
alt+shift+r - Run some CoffeeScript (puts/print is available for output)
alt+shift+s - Run a syntax check
alt+shift+c - Compile a file
alt+shift+d - Display compiled JavaScript
alt+shift+l - Display lexer tokens
alt+shift+n - Display parser nodes
alt+shift+w - Toggle watch mode
alt+shift+p - Toggle output panel

<참조>

  - 설정 원문 : CoffeeScript Install Using Package Installation

  - 참조 원문 : CoffeeScript Setting

한개의 Socket.io 인스턴스를 공유하여 3개의 독립적인 채팅 서버를 운영하는 방법과 Express.js 사용시 virtual host를 설정하여 sub domain을 만드는 방법을 알아본다.

1. 가정

  - mydomain.com / sub1.mydomain.com / sub2.mydomain.com 의 서로 독립적인 채팅서버 운영

  - socket.io 인스턴스는 하나만 사용하여 공유함

  - 테스트 사이트 구경하기

2. GitHub에서 소스 다운로드

  - git 기본 설치 되었음을 가정한다 (참조)

  - 각 분리된 namespace에서 Chat 애플리케이션 3개의 인스턴스를 수행할 것이다

  - 소스 설치하기 

3. mydomain.com의 app.js 와 mydomain.com/subdomain/sub1(2).js 소스이해

  - Express 사용하기 

  - socket.io Listen 설정 : 전역(gobal)으로 Socket.IO 인스턴스에 접근하도록 선언한다 

  - subdomain 만들기

    + virtual host로써 동작하는 subdomain 애플리케이션을 설정한다

  - 모듈 로딩하면서 수행

  - sub1(2).js 소스 : 채팅 커넥션과 메세지를 다루기위해 chat-socket을 포함한 Express 애플리케이션이다

4. chat-socket.js 소스이해

  - socket.io에 네임스페이스를 '/chat'으로 정의하기 

  - sub1.mydomain.com 에 대하여 네임스페이스를 틀리게 기술한다 

  - sub2.mydomain.com 에 대하여 네임스페이스를 틀리게 기술한다 

5. index.js와 index.jade 소스이해

  - index.jade 하단에 index.js 와 socket.io.js 포함 

  - index.js 파일

7. 채팅 서비스 설정하기 

  - 채팅 서비스에 대한 수행전에 필요한 모듈에 대해서 install 한다 

  -  /etc/hosts 파일에 다음을 설정한다 : 브라우져에서 호출하기 위한 sub1, sub2 도메인을 설정한다 

8. Chat Node Server 실행하기

  - mydomain.com 디렉토리로 들어가서 Node를 실행한다

  - 브라우져 2개를 띄워서 http://localhost:8080 을 동일하게 실행한다 

    + dowon 채팅창과 다른 브라우져창에서 try 명칭의 사용자가 들어왔다

    + socket.io를 통하여 채팅을 주고 받고 있다

  - 브라우져 2개를 띄워서 http://sub1.localhost:8080 을 동일하게 실행한다 (http://sub2.localhost:8080 동일 수행함)

    + youngsik 채팅창과 다른 브라우져창에서 girl 명칭의 사용자가 들어왔다

    + mydomain.com의 동일한 socket.io를 통하여 채팅을 주고 받고 있다 (namespace만 틀릴 뿐이다)

<참조>

  - 원문 : Building a Node.js Chat Application and Sharing Socket.IO Across Multiple Subdomains

  - 소스 : https://github.com/braitsch/sub.socket.io

  - Express.js Virtual Host 설정

  - 원문과 동일한 socket.io 인스턴스 한개와 Virtual Host 를 통한 SubDomain 공유에 대한 동일 예제

공개팀으로 Git을 운영하는데는 비공개팀과 약간의 차이가 있다. 공개팀 운영시에는 모든 사람이 공유 저장소에 대해서 쓰기 권한이 없기 때문이다. 프로젝트 관리자는  Fork를 지원하는 Git 호스팅에서 -GitHub- 기여하는 방법에 대해 가이드 해야 한다. GitHub을 예로 Pull Request는 어떤 절차로 이루어 질까?

1) 갑순이 Fork 질 하기 

  - 갑순이 중앙 저장소(예, ysyun)의 GitHub에서 Fork질 하여 자신의 원격 저장소(예, nulpulum)를 하나 만든다  

    + GitHub의 갑순이 계정으로 로그인한다 

    + GitHub의 중앙 저장소(ysyun)로 이동하여 "Fork" 버튼을 클릭하면 갑순이 계정으로 중앙 저장소(nulpulum)가 clone된다 

     [GitHub Fork 클릭]

  - 갑순이 원격 저장소(nulpulum)를 자신의 PC 로컬 저장소로 clone 한다 : git clone <갑순이 원격저장소>

  - 갑순이의 원격 저장소 이름을 origin에서 myfork로 바꾼다

    + git remote -v : default 설정된 origin 명칭 확인 

    + git rename origin myfork : origin을 myfork라는 이름으로 변경 

2) 갑순이 별도 브랜치 만들고 push 질 하기 

  - 갑순이 별도의 featureA 브랜치를 만들고 두번의 commit 질 한다 

    + git checkout -b featureA : featureA 만들기 

  - 간혹 commit  실수 한것은 날려 버리고 싶다 : git reset --hard HEAD^ (참조)

  - 갑순이의 원격 저장소(nulpulum)인 myfork에 featureA를 push 한다 (참조)

    + GitHub 의 commit 내역은 "Commit" 탭에서 확인가능하다 

  [GitHub Commit]

 [갑순이 GitHub 저장소(nulpulum)의 featureA 브랜치]

3) 갑순이 Pull Request 질 하기 

  - 갑순이는 수정한 사항에 대하여 중앙 저장소(ysyun)의 관리자에게 Pull Request를 요청하여 자신이 수정한 것을 가져가라 알린다

    + 갑순이 GitHub 계정으로 들어가서 상단의 "Pull Request"를 클릭한다 

 [갑순이 GitHub 저장소(nulpulum)의 Pull Request 버튼 클릭]

    + Pull Request 원하는 브랜치를 선택한다 

    + 갑순이 원격 저장소(nulpulum)에서 featureA를 선택하고 중앙 저장소(ysyun)에게 Pull Request를 보낸다

    + featureA에 commit 두번 한것과 파일 수정 정보등이 보인다 -Commits (2) Files Chagned (1)-

  [Pull Request 요청 내역 입력한후 "Send pull request" 보내기]

    + 중앙 저장소 (ysyun)에서 Pull Request온 내역을 볼 수 있다 

 [중앙 저장소(ysyun)의 Pull Request 내역 보기]

  - 가급적 Pull Request를 할때는 별도의 토픽 브랜치(갑순이가 만든 featureA)와 같이 만들어서 관리자에게 요청한다 

    + master 브랜치와 구분하고 수정 내용을 거부할 때 쉽게 버릴 수 있다

  - 갑순이 다른 브랜치를 만들어서 작업할 때는 featureA에서 하지 말고 origin/master에서 한다 

    + git checkout -b featureB origin/master

<참조> 

  - Pro Git (p. 110)

  - 2개 아이디의 Public repository를 만들어서 테스트 해보았다.

Node.js를 설치하고 MongoDB를 사용하여 REST API를 만들어보자. native MongoDB driver를 사용하며 REST API를 쉽게 만들기 위하여 Node.js의 웹애플리케이션 프레임워크인 Express를 이용한다. 원문의 내용을 보고 수행한 결과를 요약한다 

1) Node.js 설치 

  - http://nodejs.org/dist/  : 사이트에서 최신 버전을 선택하여 다운로드한다 

  - 예) linux 

2) Node.js 수행하기 

  - 적당한 디렉토리에 nodecellar 디렉토리 만듦

  - nodecellar 안에 server.js 파일 생성

  - server.js 코딩 

////////////////////////////////////////////////
// server.js
var http = require('http');
http.createServer(function (req, res) {
  res.writeHead(200, {'Content-Type': 'text/plain'});
  res.end('Hello World\n');
}).listen(3000, '127.0.0.1');
console.log('Server running at http://127.0.0.1:3000/');

  - server.js 수행하고 브라우져에서 http://127.0.0.1:3000/ 호출 

3) Express 설치하기 

  - Node.js의 Web Application Framework 이고, REST API 생성을 쉽게 해준다 

  - nodecellar 디렉토리안에 package.json 파일을 만들어서 Node.js가 의존하는 모듈을 정의한다 

////////////////////////////////////////////
// package.json
{
    "name": "wine-cellar",
    "description": "Wine Cellar Application",
    "version": "0.0.1",
    "private": true,
    "dependencies": {
        "express": "3.x"
    }
}

  - express 설치하기 

4) server.js를 Express 형식으로 바꾸기 

  - express 프레임워크를 이용하여 HTTP Listener를 바꾼다

////////////////////////////////////////////
// server.js
var express = require('express');
 var app = express();
 
app.get('/wines', function(req, res) {
    res.send([{name:'wine1'}, {name:'wine2'}]);
});
app.get('/wines/:id', function(req, res) {
    res.send({id:req.params.id, name: "The Name", description: "description"});
});
 
app.listen(3000);
console.log('Express Listening on port 3000...');

  - express 실행

  - 브라우져 호출하기 

    + 전체 wine들 

    + 1번 wine 내역 

5) Node.js에서 Controller로써 routes를 만들기 

  - nodecellar 디렉토리 밑으로 routes 폴더를 만든다 

  - routes 밑에 모듈로 wines.js 를 만든다 

////////////////////////////////////////////
// routes 디렉토리 밑의 wines.js
exports.findAll = function(req, res) {
    res.send([{name:'wine1'}, {name:'wine2'}, {name:'wine3'}]);
};
 
exports.findById = function(req, res) {
    res.send({id:req.params.id, name: "The Name", description: "description"});
};

  - server.js 파일에서 wines.js 모듈을 로딩하게 한다. 그리고 다시 브라우져로 호출한다 

////////////////////////////////////////////
// server.js에서 wines.js 모듈 로딩
var express = require('express'),
    wines = require('./routes/wines');
var app = express();
 
app.get('/wines', wines.findAll);
app.get('/wines/:id', wines.findById);
 
app.listen(3000);
console.log('Express Listening on port 3000...');

6) MongoDB Driver 설치하기 

  - MongoDB는 설치되어 있다고 가정한다 (참조)

  - 여기서는 native Node.js driver를 사용한다

  - mongodb driver 설치하기 

7) REST API 정의하기 

  - 호출 내역 

    + GET: 전체 wine 목록

    + GET: id로 선택된 wine 정보얻기 

    + POST: 새로운 wine 생성

    + PUT: id로 선택된 wine 정보갱신

    + DELETE: id로 선택된 wine 삭제하기 

  - server.js에서 wines.js를 확장한 메소드를 추가한다 

  - wines.js 안에 MongoDB 코드로 변경하기 

8) MongoDB 와 Node.js 수행하고 Testing 하기 

  - MongoDB는 default port로 수행한다 

  - Node.js 수행하기 

     + MongoDB의 기본 port 27017 로 접근한다 

  - curl을 수행한다 

<참조>

  - 원문 : Creating a REST API using Node.js, Express, and MongoDB

  - 참조 

    + https://speakerdeck.com/jakobmattsson/writing-restful-web-services-using-nodejs

    + Node.js 설치하기

    + MongoDB 설치하기

  - 심화 : Backbone.js 와 Bootstrap, Node.js로 만들기 

정규표현식과 html안에 .coffee 확장자로 작성한 스크립트를 포함시키는 방법에 대하여 알아보자 

1) 정규 표현식 

  - /// .....  ///   슬래쉬3개 앞뒤로 하여 그사이에 표현식을 넣는다 

//////////////////////////////////////////
// regex.coffee
emails = ['ysyun@yuwin.co.kr', 'nulpulum@gamil.com', 'joe.567@gmail.com', 'andrew']

emailRegex = ///
	([\w\.+-]+) 	# unique name
	@				# at-sign
	(\w+)			# domain name
	(\.\w+[\w\.]*)  # tld
///

for email in emails
	match = email.match emailRegex
	if match?
		console.log "#{email} matched"
	else
		console.log "#{email} didn't matched"

//////////////////////////////////////////
// 컴파일 내역
// Generated by CoffeeScript 1.4.0
var email, emailRegex, emails, match, _i, _len;
emails = ['ysyun@yuwin.co.kr', 'nulpulum@gamil.com', 'joe.567@gmail.com', 'andrew'];
// 한줄로 표현된다 
emailRegex = /([\w\.+-]+)@(\w+)(\.\w+[\w\.]*)/;

for (_i = 0, _len = emails.length; _i < _len; _i++) {
  email = emails[_i];
  match = email.match(emailRegex);
  if (match != null) {
    console.log("" + email + " matched");
  } else {
    console.log("" + email + " didn't matched");
  }
}

2) Coffeescript를 컴파일한 Javascript 파일을 포함한 경우의 html

  - src/dom.coffee 파일 작성

  - js/ 디렉토리 밑으로 컴파일된 .js 위치 : coffee -c --watch -o js src/dom.coffee

    + --watch 옵션 : 변경내용을 감시하여 자동 재컴파일 수행 

  - 브라우저에서 웹서버 도움없이 바로 index.html 파일을 호출하면 된다. 

    + 단, jquery.js 파일은 동일 디렉토리에 위치 (첨부파일 참조)

//////////////////////////////////////////
// index.html 파일 
<!DOCTYPE html>
<html>
	<head>
		<title> CoffeeScript in the Browser </title>
	</head>
	<body>
		<div id="menu">
			<div>Tools</div>
			<div id="dropdown">
				<ul>
					<li>Tool 1</li>
					<li>Tool 2</li>
					<li>Tool 3</li>
				</ul>
			</div>
		</div>
		<script src="jquery.js"></script>
		<script src="js/dom.js"></script> <!-- 컴파일한 dom.js 파일을 포함시킨다 -->
	</body>
</html>  

// dom.coffee 파일로 jquery 기반 코딩
$ -> 
	menu = $ '#menu'
	dropdown = $ '#dropdown'
	dropdown.hide()

	menu.on 'mouseover', (e) -> dropdown.stop().show 200
	menu.on 'mouseout', (e) -> dropdown.stop().hide 200

//////////////////////////////////////////
// 컴파일 내역
$(function() {
  var dropdown, menu;
  menu = $('#menu');
  dropdown = $('#dropdown');
  dropdown.hide();
  menu.on('mouseover', function(e) {
    return dropdown.stop().show(200);
  });
  return menu.on('mouseout', function(e) {
    return dropdown.stop().hide(200);
  });
});

3) dom.coffee 파일을 직접 html안에 포함시키기 

  - html안에 coffee-script.js 파일을 포함시킨다 (첨부파일 참조)

    + 다운로드 한 파일의 extras 디렉토리 파일임

  - dom.coffee 파일을 포함시키고 type="text/coffeescript" 타입을 넣는다 

//////////////////////////////////////////
// index2.html 파일 
<!DOCTYPE html>
<html>
	<head>
		<title> CoffeeScript in the Browser </title>
	</head>
	<body>
		<div id="menu">
			<div>Tools</div>
			<div id="dropdown">
				<ul>
					<li>Tool 1</li>
					<li>Tool 2</li>
					<li>Tool 3</li>
				</ul>
			</div>
		</div>
		<script src="jquery.js"></script>
		<script src="coffee-script.js"></script>  <!-- 컴파일한 coffee-script.js 파일을 포함 -->
		<script src="src/dom.coffee" type="text/coffeescript"></script>  <!-- dom.coffee 포함 -->
	</body>
</html>  

  - 브라우져에서 로컬파일을 불러오게 되면 오류가 발생한다

  - 실행방법 : 웹서버 구동하여 브라우져에서 호출 

    + node-static 을 설치한다 (블로그 참조)

    + $ static : dom.coffee 파일이 있는 곳에서 수행 (8080 포트로 브라우저에서 호출함)

  - 최종 파일 구조     

* 파일 

coffeescript-5.zip

<참조>

  - 자바스크립트 정규표현식

이전에 Ant를 이용하여 Javascript project를 build하는 것을 알아 보았다. 요즘은 Grunt.js라는 빌드도구가 나와서 많이 사용되고 있고, Javascript 에 최적화 되어 있기때문에 앞으로는 Grunt.js를 사용한다. Grunt.js에 대해서 알아보자 

1) 준비하기

  - node.js 와 npm 설치되어 있어야 한다 

  - 기본 설치 : npm uninstall -g grunt  ==> npm install -g grunt-cli

  - 부가 설치 : npm install grunt-contrib

  - grunt.js (gruntfile)이 핵심 구성내역

    + 프로젝트 환경

    + grunt plugins 또는 tasks 폴더 로딩

    + Tasks 와 Helpers

2) Task 만들기 

  - 환경파일 만들기 (node.js 모듈로 생성) :  grunt init:gruntfile  명령 수행하면 Gruntfile.js 파일 생성됨(grunt 환경파일)

    + 윈도우 : grunt.cmd init:gruntfile 수행

  - grunt.js 파일안에 task 열거 lint, qunit, concat, min, watch, jshint, test, uglify

    + lint : 자바스크립트 문법오류 가능성 있는 것 체크

    + qunit : Unit test를 위하여 QUnit을 사용 (PhantomJS이용)

    + concat : 지정된 디렉토리/파일을 1개의 파일로 합침

    + min : 파일사이즈 minify 최소화

    + mincss : css 최소화 

    + watch : node.js::fs 모듈의 watch 메소드 사용하여 파일 변경사항 발생시 task를 수행한다 

    + 사용가능 task 목록 보기 : grunt -h 

// grunt.js 파일 내역 
/*global module:false*/
module.exports = function(grunt) {
  // Project configuration.
  grunt.initConfig({
    pkg: '',
    meta: {
      banner: '/*! <%= pkg.title || pkg.name %> - v<%= pkg.version %> - ' +
        '<%= grunt.template.today("yyyy-mm-dd") %>\n' +
        '<%= pkg.homepage ? "* " + pkg.homepage + "\n" : "" %>' +
        '* Copyright (c) <%= grunt.template.today("yyyy") %> <%= pkg.author.name %>;' +
        ' Licensed <%= _.pluck(pkg.licenses, "type").join(", ") %> */'
    },
    lint: {
      files: ['grunt.js', 'lib/**/*.js', 'test/**/*.js']
    },
    qunit: {
      files: ['test/**/*.html']
    },
    concat: {
      dist: {
        src: ['', '.js>'],
        dest: 'dist/<%= pkg.name %>.js'
      }
    },
    min: {
      dist: {
        src: ['', ''],
        dest: 'dist/<%= pkg.name %>.min.js'
      }
    },
    watch: {
      files: '',
      tasks: 'lint qunit'
    },
    jshint: {
      options: {
        curly: true,
        eqeqeq: true,
        immed: true,
        latedef: true,
        newcap: true,
        noarg: true,
        sub: true,
        undef: true,
        boss: true,
        eqnull: true,
        browser: true
      },
      globals: {}
    },
    uglify: {}
  });

  // Default task.
  grunt.registerTask('default', 'lint qunit concat min');
};

  - module.exports = function(grunt){...}; 를 딱 한번만 grunt.js 에 표기한다 (module.exports 참조)

    + 가급적 module.exports를 사용한다 (exports 사용안함)

  - grunt.initConfig({...}); 에 환경설정 한다 

  - 환경 설정 참조 파일 : javascript-hooker/grunt.js

  - 일반 설정 사항

// Project configuration.
grunt.initConfig({
  // Project metadata, used by some directives, helpers and tasks.
  meta: {},
  // Lists of files to be concatenated, used by the "concat" task.
  concat: {},
  // Lists of files to be linted with JSHint, used by the "lint" task.
  lint: {},
  // Lists of files to be minified with UglifyJS, used by the "min" task.
  min: {},
  // Lists of files or URLs to be unit tested with QUnit, used by the "qunit" task.
  qunit: {},
  // Configuration options for the "server" task.
  server: {},
  // Lists of files to be unit tested with Nodeunit, used by the "test" task.
  test: {},
  // Configuration options for the "watch" task.
  watch: {},
  // Global configuration options for JSHint.
  jshint: {},
  // Global configuration options for UglifyJS.
  uglify: {}
});

  - plugins 또는 task를 로딩한다

// TASK
// Load tasks and helpers from the "tasks" directory, relative to grunt.js.
grunt.loadTasks('tasks');

// PLUGIN
// Load tasks and helpers from the "grunt-sample" Npm-installed grunt plugin.
grunt.loadNpmTasks('grunt-sample');

3) 사용하기 : grunt <task>

  - lint 수행 : grunt lint 

  - min 수행 : grunt min 

  - grunt 명령으로 default 수행 만들기 : grunt.registerTask('default', 'lint test concat min mincss'); 

4) Grunt.js & Yeoman 이해하기 

<참조>

  - Grunt.js Getting Started

  - Grunt.js 소개

  - 사용하기 : Outsider님 블로깅

비공개 대규모 팀을 운영할 때는 Git Workflow에서 Integration-Manager 방식을 선택한다. 이는 팀별로 별도의 Master를 두고 Integration Manager가 중앙 Master로 push할 수 있는 권한을 갖도록 한다. 즉, 중간 단계의 master가 하나 더 있는 구조이다. 

1) 가정

  - 갑순이는 두 팀에 속한다 

  - 1팀 갑순이 + 갑돌이

  - 2팀 갑순이 + 갑복이 

2) 1팀 갑순이 featureA만들어 갑돌이와 작업

  - 갑순이는 저장소를 clone하고 featureA 브랜치를 만들고 수정후 커밋한다 

    + feautreA 브랜치 생성 : git checkout -b featureA

    + 커밋 : git commit -am "add function"

  - 갑순이가 해당 브랜치를 갑돌이와 공유하려 한다. 

    + 여기서 갑순이는 Integration Manager가 아니다

    + 갑순이는 운격 저장소에 featureA로 push 하고 갑돌이에게 해당 사실을 알린다 

3) 2팀 갑순이 featureB 브랜치 만들어 갑복이와 작업

  - 갑순이는 갑복이와 원격 저장소의 master 브랜치를 기반으로 featureB작업을 계속 수행하기로 한다

    + 원격저장소에서 로컬 저장소로 fetch 하기 : git fetch origin

    + git checkout -b featureB origin/master

  - 갑순이가 몇가지 작업을 하고 featureB에 커밋을 한다 

    + git fetch origin

    + git checkout -b featureB origin/master

    + 2번의 커밋객체 생성 : git commit -am "modified some function" (e5b0f) -> git commit -am "add new function" (85127)

   [그림 5.12] 갑순이 현재 로컬 저장소 커밋 그래프

  - 갑순이 featureB를 push 하려는데 갑복이로부터 이미 featureBee 브랜치로 한번 push 했다고 연락을 받는다

    + 갑복이 내역을 merge 하기위해 fetch 한다 : git fetch origin

    + 갑복이 브랜치를 merge 한다 : git merge origin/featureBee

  - 갑순이 이제 featureB를 원겨 저장소로 push 하려는데 갑복이 featureBee 와 이름이 틀리다

    + 로컬 featureB를 원격 featureBee로 push 한다 : git push origin featureB:featureBee (cd685)

4) 1팀 갑돌이 featureA 작업

  - 갑돌이 featureA 작업후에 push 했고 갑순이에게 확인요청한다 

  - 갑순이는 내역확인을 위하여 원격저장소에서 fetch 한다 : git fetch origin 

  - 갑순이는  featureA 브랜치에 어떤 것이 업데이트 되었는지 확인한다 (갑돌이 커밋시 메시지 잘 입력했다 가정함)

    + 변경내역 확인 : git log origin/featureA ^featureA 

    + 확인후 로컬 featureA 브랜치로 이동 : git checkout featureA

    + 원격 featureA를 로컬 featureA에 merge 수행 : git merge origin/featureA

  - 갑순이 다시 일부 수정하여 featureA 브랜치를 원격 저장소로 push 한다 

    + git commit -am "small tweak"

    + git push origin featureA (774b3)

    + 갑순이의 저장소를 보자 

  [그림 5.13] featureB도 원격으로 push하고 featureA도 원격 저장소로 push한 갑순이 로컬 저장소 

5) 갑순이 메인 브랜치로 merge 요청작업 

  - Integration-Manager는 두 브랜치를 merge 하고 메인 브랜치의 커밋 (5399e) fetch해 온다 

  - 다음과 같은 구조가 될 것이다 

  [그림 5.14] integration manager는 774b3 과 ce685 커밋을 merge하여 5399e를 원격저장소에 커밋한 후 갑순이가 fetch 함!

<참조>

  - Pro Git 5장 108p

소규모 팀으로 일을 할때 어떤 절차에 의해서 소스를 Merge하고 원격저장소로 Push 할 수 있는지 알아보자. 팀원간 Git 기본 workflow로써 가장 기본적으로 숙지해야할 사항이라 판단된다. 

1) 가정 

  - 3~5명이 하나의 원격 Git - 예, GitHub Private Repository - 에 원본을 합친다 

  - 각자가 local repositor로 내려 받아서 작업을 한다 

2) 갑순이 push 작업

  - 갑순이가 GitHub에서 저장소를 복제한다 : git clone <git address>

  - 갑순이가 하나의 파일에 대해서 수정하고 commit 한다 : git commit -am "modified files"

  - GitHub에 변경된 파일을 push 한다 : git push origin master

3) 갑돌이 push 작업

  - 갑돌이도 GitHub에서 저장소를 복제한다 

  - 값돌이도 다른 파일 하나를 수정하고 commit 한다 

  - GitHub에 변경된 파일을 push 한다 => 오류가 발생하여 파일 push를 하지 못한다 

4) 갑돌이 push 오류 해결하기 

  - 갑돌이는 Push 하기전 원격저장소의 갑순이 commit 내역을 로컬 저장소에 merge 해야 한다 

  - 갑돌이는 먼저 원격 저장소의 내용을 fetch 한다 : git fetch origin

   [그림 5.4] origin에서 fetch를 하면 origin/master가 된다(fbff5) 로컬의 master (738ee)와 merge는 안된 상태

  - 로컬 master와 원격 origin/master를 merge 한다 : git merge origin/master

  - 갑돌이는 merge를 완료하고 push를 재시도 한다 : git push origin master  (origin master 생략가능)

  [그림 5.5] merge를 했을 때 새로운 commit object가 생성된다 (72bbc)

  [그림 5.6] push를 하게되면 origin/master의 위치도 최신 commit object를 가르키게 된다 (72bbc)

5) 갑순이 branch 생성후 push 추가작업

  - 갑순이는 이슈해결을 위하여 별도 issue54 브랜치를 만들었다

  - issue54 브랜치에 대해서 3개의 commit을 수행하였다. 

  - 원격으로 push 하기 위하여 먼저 원격의 갑돌이 push 내역을 fetch 한다 : git fetch origin

  [그림 5.8] fetch하여 원격의 origin/master를 가져온다 (72bbc)

  - fetch 해온 origin/master 와 merge할 내용을 확인한다 : git log --no-mergs origin/master ^issue54

  - merge를 위하여 master 브랜치로 checkout 한다 : git checkout master

  - 먼저 issue54 부터 merge 한다 : git  merge issue54

    origin/master 와 issue54 브랜치는 모두 master 보다 fast-forward 된 브랜치 이기 때문에 순서에 상관없이 merge해도 된다

  - 다음 origin/master 를 merge 한다 : git merge origin/master

  [그림 5.9] local의 issue54를 merge하고, origin/master와 merge를 하면 새로운 commit object가 생성된다 (8059c)

  - 로컬 저장소에 모드 merge 되었으므로 원격 저장소로 push 한다 : git push origin master 

  [그림 5.10] push를 하게되면 origin/master가 가르키는 commit object는 최신 8059c 가 된다. 

6) 최종 Workflow 모습

  - 갑순이 == Jessica

  - 갑돌이 == John

  [그림 5.11] push -> fetch -> merge -> push 작업이 이루어진다     

<참조>

  - Pro Git : 5장 page 104

참조의 원문에 대해서 테스트 해하고 글을 정리해 본다. JavaScript에 대한 빌드 자동화를 ant로 하는 방법을 알아보자.

Javascript코드에 대해 Ant를 이용하여 Java의 Maven처럼 compile -> test -> build를 자동으로 수행할 수 있는 방법을 소개하고 있다. 하지만 현재는 gruntjs를 통하여 본 글에서 수행하였던 것을 보다 더 쉽게 할 수 있다. gruntjs에서 하나 단점은 shell command 호출인데 grunt-jasmine-task를 통해  극복하였다. 

1) JavaScript 대응 테스트 & 빌드자동화 도구들

  - 구문오류 체크 : JSLint / JSHint 

  - 유닛 또는 행휘 테스트 : Jasmine 또는 QUnit

  - API 문서 생성 : JSDoc

  - JS 파일압축 : YUI compressor 또는 Uglify.js 

  - 위의 내역들 빌드 통합 수행 : Ant

각 내역들에 대해서 순차적으로 수행하는 것을 Ant로 만들어 보도록 한다 

2) Ant로 구현한 Build Automation 구조

  - GitHub 소스 : git clone https://github.com/creynders/Build-JS-example.git  수행하여 로컬에 내려 받는다 

  - Ant로 하다 보니 1)에서 필요로 하는 모든 프레임워크 라이브러리를 다운로드 받아 놓아야 한다   

  - 디렉토리 구조 

    + bin : ant의 destination 디렉토리, 배포되는 최종 .js 파일이 위치함 

    + docs : API 문서 생성 디렉토리 

    + lib : 3-rd party 도구들 

    + specs : unit test 파일 존재 (test 파일이 specification 즉, 명세라는 표현이 맘에 든다)

    + src : 원본 소스 

3) 도구 설명

  - Apache Ant : 의존관계를 만들어서 타겟소스에 대하여 빌드를 수행케 하는 command-line 도구 (다운로드)

  - JSHint : JSLint 기반의 자바스크립트를 위한 code 품질 측정 도구. 에러나 문제가능성 있는 것을 찾아줌 (다운로드)

  - JSDoc Toolkit : HTML (XML, JSON, TEXT) 포멧으로 자바스크립트 애플리케이션에 대한 자동 문서 생성 도구 (다운로드)

  - YUI compressor : 압축을 통하여 네트워크 전송 성능을 높여준다. (다운로드)

  - Jasmine : 자바스크립트 코드 테스트를 위한 행위지향 개발 프레임워크(behavior-driven) (다운로드)

  - PhantomJS : 자바스크립트에 대해서 브라우져 없이(without GUI client) 없이 브라우징이 가능토록 해준다 (다운로드)

    + 즉, HTML 파일의 parse & rendering을 해준 다음 수행하고 결과값 읽고 ant에게 전달한다 (Headless WebKit)

    + OS 버전에 맞는 것을 다운로드 받은후 path를 잡아준다

    + 좀 더 쉽게 사용할 수 있도록 casperjs 도 있다. (요걸 사용하는게 좋을듯)

4) 소스 빌드 프로세스 (순서)

  - 원본 소스는 3개 존재 : buildexample.js, Baz.js, Foo.js

    + buildexample.js에서 namespace를 정의한다 

  - 모든 .js 파일에 대해 JSHint를 통해서 QA tool을 수행한다 

  - unit test를 수행한다

  - 3개의 개별 .js 파일을 1개의 .js 파일로 통합한다

  - 한개의 파일을 축소된(minified) .js 파일로 나눈다 

  - API 문서를 생성한다 

  - 통합하고 축소화한 파일명칭과 API 문서에 version number를 사용한다 

5) build.xml 작성하기 

  * properties : 상수 속성값을 설정. build.properties

  * tasks : ant 수행전 전처리 환경 내역들 

  * targets : 각 단계에 대하여 ant에 task로 구분하여 설정. build.xml

  - 버젼 (Version Number)

    + version.txt 파일을 읽는다 

    + 테스트 : ant version

<target name="version">
    <loadfile property="version.old" srcFile="version.txt" />
    <input message="Current version number is ${version.old}. Please enter the new version number:"
        defaultValue="${version.old}" addproperty="version"/>
    <echo file="version.txt" message="${version}" />
</target>

  - 속성 선언(Properties Declaration)

    + build.properties 파일을 사용한다 

    + build.uer.properties에 속성 재정의 한다 

<target name="properties">
    <tstamp>
        <format property="timestamp" pattern="yyyyMMddHHmmss"/>
    </tstamp>
    <!-- allow user-specific overrides -->
    <property file="build.user.properties"/>
    <property file="build.properties"/>
</target>

  - 빌드 디렉토리 생성 

   + build 디렉토리 생성한다 : 생성 temporary 파일이 위치한다. 빌드과정이 성공하면 bin에 파일이 위치한다.

<target name="create_build" depends="properties">
    <echo>Creating build...</echo>
    <delete dir="${dir.build}" />
    <mkdir dir="${dir.build.current}" />
    <echo>Finished.</echo>
</target>

  - 파일 하나로 합치기 (Consolidation)

   + src 디렉토리의 buildexample.js를 복사해서 build 디렉토리에 buildexample-.js 로 넣는다

   + 다른 파일들을 buildexample-.js 에 포함시키고 version과 timestamp를 넣는다 

<target name="consolidate" depends="properties, create_build">
    <echo>Consolidating...</echo>
    <copy file="${dir.src}/${name.base.js}" tofile="${file.consolidated.js}"/>
    <replace file="${file.consolidated.js}" token="%VERSION%" value="${version}"/>
    <replace file="${file.consolidated.js}" token="%TIMESTAMP%" value="${timestamp}"/>
    <concat id="srcfiles" destfile="${file.consolidated.js}" append="true>
        <fileset dir="${dir.src}" includes="**/*.js" excludes="${name.base.js}"/>
    </conca>
    <pathconvert pathsep=";" property="files" refid="srcfiles"/>
    <echo>${files}</echo>
    <echo>Finished.</echo>
</target>

  - JSHint 구문 검사 (코드 품질 측정)

    + PhantomJS를 통하여 수행한다 (PhantomJS API)

    + phantom-jshint-runner.js 파일로 jshint.js를 수행토록 한다 (lib 디렉토리에 존재)

<target name="jshint" depends="properties, consolidate">
    <echo>Checking syntax...</echo>
      <exec executable="phantomjs" dir="${basedir}" failonerror="true" resultproperty="specs.results">
          <arg line="'${file.jshint-runner.js}'" />
          <arg line="'${file.jshint.js}'" />
          <arg line="'${file.consolidated.js}'" />
          <arg line="${timeout.phantom}" />
      </exec>
    <echo>Finished</echo>
</target>

  - Jasmine 테스트에서 .html 파일 수행 (specs/index.html 존재)

    + PhantomJS를 통해 html을 읽어와 파싱하고 결과값을 ant로 반환한다

    + phantom-jasmine-runner.js 파일을 작성한다 (web 애플리케이션 headless test 방법)

<target name="specs" depends="properties">
    <echo>Running specs...</echo>
    <exec executable="phantomjs" dir="${basedir}" failonerror="true" resultproperty="specs.results">
        <arg line="'${file.jasmine-runner.js}'" />
        <arg line="'${file.specs-runner.html}'" />
        <arg line="${timeout.phantom}" />
    </exec>
    <echo>Finished.</echo>
</target>

  - 압축 (Minifying)

    + YUI compressor를 사용한다 (사용법)

    + command line 사용 :  java -jar yuicompressor-x.y.z.jar [options] [input files]

<target name="minify" depends="properties,create_build, consolidate">
    <echo>Minifying...</echo>
    <exec executable="java" dir="${basedir}" failonerror="true">
        <arg line="-jar '${file.yui_compressor.jar}'" />
        <arg line="--type js" />
        <arg line="-o '${file.minified.js}'" />
        <arg line="'${file.consolidated.js}'" />
    </exec>
    <echo>Finished</echo>
</target>

  - JSDoc 파일 생성 

    + command line 사용 : java -jar jsrun.jar app/run.js myscript.js -t=templates/jsdoc

<target name="jsdocs" depends="properties, consolidate">
    <echo>recreating docs folder...</echo>
    <delete dir="${dir.docs}"/>
    <mkdir dir="${dir.docs}" />
    <echo>Generating...</echo>
    <exec executable="java" dir="${basedir}">
        <arg line="-jar '${file.jsdoc_toolkit.jar}' '${dir.jsdoc_toolkit}/app/run.js'" />
        <!-- -d tells JSDoc toolkit where to output the documentation -->
        <arg line="-d='${dir.docs}'" />
        <!-- use the default template -->
        <arg line="-t='${dir.jsdoc_toolkit}/templates/jsdoc'" />
        <!-- Create an arg element for each file you want to include in the documentation -->
        <arg line="'${file.consolidated.js}'" />
    </exec>
    <echo>Finished</echo>
</target>

  - Clean up

    + build 디렉토리 파일이 빌드가 성공하면 bin 디렉토리로 옮긴다 

<target name="finish" depends="properties">
    <echo>Finishing...</echo>
    <delete dir="${dir.bin}" />
    <mkdir dir="${dir.bin}" />
    <move file="${dir.build.current}" tofile="${dir.bin}"/>
    <echo>Finished.</echo>
</target>

  - 각 target을 한꺼번에 수행하기 

<target name="build" depends="version, properties, create_build, consolidate, jshint, specs, minify, jsdocs, finish">
</target>

  - 수행 : ant build

* 현재는 Grunt를 많이 사용하고 있다. (참조)

<참조>

원문 : Automating JavaScript builds

Java 처럼 Class를 쉽게 만들어 보자. 클래스끼리 상속하여 재정의(overriding)하는 부분도 알아보자 

1) Class 만들기 

  - class 로 표현한다

  - 컴파일 내역에 IIFE(즉시실행함수)안에 다시 Dog을 생성하여 호출함 

// clazz.coffee
class Dog

// 컴파일 내역 : clazz.js 
// Generated by CoffeeScript 1.4.0
(function() {
  var Dog;
  Dog = (function() {
    function Dog() {}
    return Dog;
  })();
}).call(this);

  - constructor 로 생성자를 정의한다

  - constructor를 사용하면 Dog 생성자가 생성되고 다른 프로퍼티는 prototype에 정의된다 

// clazz2.coffee
class Dog
	constructor: (@name) ->
	growl: -> console.log '*growl*'

dog = new Dog 'Dowon'
console.log dog.name
dog.growl()

// 결과
D:\Development\coffeescript\4>coffee clazz2
Dowon
*growl*

// 컴파일 내역 : clazz2.js
// Generated by CoffeeScript 1.4.0
var Dog, dog;
Dog = (function() {
  function Dog(name) {
    this.name = name;
  }
  Dog.prototype.growl = function() {
    return console.log('*growl*');
  };
  return Dog;
})();

dog = new Dog('Dowon');
console.log(dog.name);
dog.growl();

2) 상속 관계 만들기 

  - extends 사용하여 상속관계 정의 한다

  - super() 사용하여 동일 메소드에 대한 재정의(Overriding)을 한다 

// clazz3.coffee
class Dog
	constructor: (@name) ->
	growl: -> console.log '*growl*'

class BorderCollie extends Dog
	constructor: (name, @tricks = []) ->
		super name
	perform: (trick) -> console.log if trick in @tricks then "#{@name} is #{trick}" else '*whine*'	
	growl: (person) ->
		if person is @master
			console.log '*bark*'
		else
			super() # Dog.growl()
 
dog = new Dog 'Dowon'

console.log dog.name
dog.growl()

dog2 = new BorderCollie 'YoungSik', ['playing', 'catching', 'rolling']
dog2.master = "Dowon"

console.log dog2.name
dog2.perform 'rolling'
dog2.growl("Dowon")
dog2.growl("Yun")

// 결과 
D:\Development\coffeescript\4>coffee clazz3
Dowon
*growl*
YoungSik
YoungSik is rolling
*bark*
*growl*

  - BorderCollie extends Dog 으로 상속 만들어 줌 

  - BorderCollie의 constructor안에 "super name" 을 호출하여 super(name)을 넣어 줌

  - BorderCollie의 grow안에서 super() 를 호출하여 super.growl()을 넣어 줌 

// 컴파일 내역 : clazz3.js 
// Generated by CoffeeScript 1.4.0
(function() {
  var BorderCollie, Dog, dog, dog2,
    __hasProp = {}.hasOwnProperty,
    __extends = function(child, parent) { for (var key in parent) { if (__hasProp.call(parent, key)) child[key] = parent[key]; } function ctor() { this.constructor = child; } ctor.prototype = parent.prototype; child.prototype = new ctor(); child.__super__ = parent.prototype; return child; },
    __indexOf = [].indexOf || function(item) { for (var i = 0, l = this.length; i < l; i++) { if (i in this && this[i] === item) return i; } return -1; };

  Dog = (function() {
    function Dog(name) {
      this.name = name;
    }
    Dog.prototype.growl = function() {
      return console.log('*growl*');
    };
    return Dog;
  })();

  BorderCollie = (function(_super) {
    __extends(BorderCollie, _super);
    function BorderCollie(name, tricks) {
      this.tricks = tricks != null ? tricks : [];
      BorderCollie.__super__.constructor.call(this, name);
    }
    BorderCollie.prototype.perform = function(trick) {
      return console.log(__indexOf.call(this.tricks, trick) >= 0 ? "" + this.name + " is " + trick : '*whine*');
    };

    BorderCollie.prototype.growl = function(person) {
      if (person === this.master) {
        return console.log('*bark*');
      } else {
        return BorderCollie.__super__.growl.call(this);
      }
    };
    return BorderCollie;
  })(Dog);

  dog = new Dog('Dowon');
  console.log(dog.name);
  dog.growl();

  dog2 = new BorderCollie('YoungSik', ['playing', 'catching', 'rolling']);
  dog2.master = "Dowon";
  console.log(dog2.name);
  dog2.perform('rolling');
  dog2.growl("Dowon");
  dog2.growl("Yun");

}).call(this);

* 파일 

coffeescript-4.zip

객체의 function으로 호출될 때 this. 값을 어떻게 줄여서 표현 하는지와 prototype 도 알아보자. 또한 extends를 어떻게 사용하는지도 알아본다

1) this.name = name 표현하기 

  - this. 을 @ 로 표현한다 

// prototype.coffee
###
function Dog (name) {
	this.name = name;
}
Dog.prototype.growl = function() {
	console.log("*growl*");
}
r = new Dog("Dowon");
r.growl();
###

Dog = (name) -> 
	@name = name # this.name = name

d = new Dog 'Dowon'
console.log d.name

console.log '----same thing----'

Dog2 = (@name) ->  # 파라미터로 @name을 쓰면 위와 같은 표현임 

d2 = new Dog2 'Dowon'

console.log d2.name 

// 결과 
D:\Development\coffeescript\3>coffee prototype
Dowon
----same thing----
Dowon

// prototype.js 컴파일 내역
(function() {
  var Dog, Dog2, d, d2;
  Dog = function(name) {
    return this.name = name;
  };
  d = new Dog('Dowon');
  console.log(d.name);

  console.log('----same thing----');

  Dog2 = function(name) {
    this.name = name;
  };
  d2 = new Dog2('Dowon');
  console.log(d2.name);
}).call(this);

  - Tip : 만일 (function(){ 코딩내역 }).call(this)  을 없애고 싶다면 --bare 옵션을 사용하면 됨

2) prototype. 표현하기

  - prototype. 을 :: 로 표현한다  

// prototype2.coffee
Dog = (@name) ->

Dog.prototype.growl = ->
	console.log '*growl*'

d = new Dog 'Dowon'
d.growl()

console.log '----same thing----'

Dog2 = (@name) ->
	
Dog2::growl = ->   # :: 로 표현한다 
	console.log '*growl*'

d2 = new Dog2 'Dowon'
d2.growl()

//결과 
D:\Development\coffeescript\3>coffee prototype2
*growl*
----same thing----
*growl*

// 컴파일 내역 : prototype2.js
// Generated by CoffeeScript 1.4.0
(function() {
  var Dog, Dog2, d, d2;
  Dog = function(name) {
    this.name = name;
  };
  Dog.prototype.growl = function() {
    return console.log('*growl*');
  };
  d = new Dog('Dowon');
  d.growl();

  console.log('----same thing----');

  Dog2 = function(name) {
    this.name = name;
  };
  Dog2.prototype.growl = function() {
    return console.log('*growl*');
  };
  d2 = new Dog2('Dowon');
  d2.growl();
}).call(this);

3) 상속에 대한 표현

  - extends 를 통하여 상속받기

// extend.coffee
Dog = (@name) ->

Dog.prototype.growl = ->
	console.log '*growl*'

BorderCollie = (@name, @tricks) ->

BorderCollie extends Dog

BorderCollie::perform = (trick) ->
	if trick in @tricks
		console.log "#{@name} is #{trick}"
	else
		console.log '*whine*'

dowon = new BorderCollie 'Dowon', ['playing dead', 'catching', 'rolling']

dowon.perform 'catching'
dowon.growl()	

// 결과 
D:\Development\coffeescript\3>coffee extend
Dowon is catching
*growl*

// 컴파일 내역 : extend.js
// Generated by CoffeeScript 1.4.0
(function() {
  var BorderCollie, Dog, dowon,
    __hasProp = {}.hasOwnProperty,
    __extends = function(child, parent) { for (var key in parent) { if (__hasProp.call(parent, key)) child[key] = parent[key]; } function ctor() { this.constructor = child; } ctor.prototype = parent.prototype; child.prototype = new ctor(); child.__super__ = parent.prototype; return child; },
    __indexOf = [].indexOf || function(item) { for (var i = 0, l = this.length; i < l; i++) { if (i in this && this[i] === item) return i; } return -1; };

  Dog = function(name) {
    this.name = name;
  };
  Dog.prototype.growl = function() {
    return console.log('*growl*');
  };

  BorderCollie = function(name, tricks) {
    this.name = name;
    this.tricks = tricks;
  };

  __extends(BorderCollie, Dog);

  BorderCollie.prototype.perform = function(trick) {
    if (__indexOf.call(this.tricks, trick) >= 0) {
      return console.log("" + this.name + " is " + trick);
    } else {
      return console.log('*whine*');
    }
  };
  dowon = new BorderCollie('Dowon', ['playing dead', 'catching', 'rolling']);
  dowon.perform('catching');
  dowon.growl();
}).call(this);

 @ :: extends 를 익히자 ^^

coffeescript-3.zip

this를 자바스크립트에서 만나게 되면 이게 어느 인스턴스의 this인지 파악하기가 난해하다. this는 context(Execute Context)와 Scope(유효범위)에 대한 부분을 잘 알아야 한다. 

1) function안에서 변수 접근 권한

function someFunc() {
    var _this = this;
    something.on("click", function() {
        console.log(_this);
    });
};

  - var _this = this; 문구는 왜 사용하는 것일까?

  - 첫번재 유효범위(First Scope)는 Global Scope 이다

    + 모든 변수(Variable)과 함수(Function)은 global이다. 

    + Global Scope는 window 객체이다 

    + window.x = 9; 라고 property를 설정하면 어디서나 접근이 가능하다 

function myFunc() {
    var x = 5;
});
console.log(x); // undefined

  - x 는 myFunc()안에서 초기화 되었고, myFunc()안에서만 접근이 가능하다 

  - var 키워드를 사용하지 않으면 자동으로 global 유효범위로 만들어진다 

  - var 키워드를 사용하면 function이 호출 될때 생성되는 context에 지역변수로(local variable) 포함된다

function myFunc() {
    x = 5;
});
console.log(x); // 5

  - Outer Function에 정의된 모든 변수는 다른 Inner Function에서 접근을 할 수 있다

function outer() {
   var x = 5;
   function inner() {
      console.log(x); // 5
   }
   inner();
}

  - Outer Function에서는 Inner Function의 변수를 접근 할 수 없다 

function outer() {
    var x = 5;
    function inner() {
        console.log(x); //5 
        var y = 10;
    }
    inner();
    console.log(y); //undefined
}

2) this의 유효범위 

  - this는 function이 호출될 때 자동으로 설정되는 변수이다 

  - 변수의 값은 function이 어떻게 호출되냐에 따라 틀려진다

  - 자바스크립트에서 함수를 호출하는 주된 몇가지 방법을 가지고 있다. (주로 사용하는 3가지 방법)

    + function이 method처럼 호출하기 : when a function is called as a method === 오브젝트.function은 메소드라 칭함

    + 자기자신위에 호출하기  : when a function is called on it's own === function 자체가 호출 오브젝트.function이 아닐 경우

    + event handler로서 호출하기 : when a function is called as an event handler == 이벤트 핸들러 수행시 호출되는 function

function foo() {
   console.log(this); //global object
};

myapp = {};
myapp.foo = function() {
   console.log(this); //points to myapp object
또는 (같은 내용)
myapp = {
   foo: function() {
     console.log(this); //points to myapp object
   }
}

var link = document.getElmentById("myId");
link.addEventListener("click", function() {
   console.log(this); //points to link
}, false);

  - addEventLister를 사용하여 function을 붙이면 this의 값이 변경된다 : this값은 caller로 부터 function에 전달된다 

$("myLink").on("click", function() {
    console.log(this); //points to myLink (as expected)
    var _this = this;  //store reference
    $.ajax({
        //ajax set up
        success: function() {
            console.log(this); //points to the global object. Huh?
            console.log(_this); //better!
        }
    });
});

  - myLink을 click하면 function이 수행된다. 이때 이벤트 핸들러로서 펑션의 this는 myLink DOM element의 참조로 설정된다

  - 그러나 ajax 정규호출의 this는 global object로 this 값을 설정한다. 이는 "event handler"도 "오브젝트 method"도 아닌 function이기 때문이다

  - 위와 같이 하는 것이 function을 호출하는 곳에서 this에 대한 값을 정확히 사용하기 위한 방법이다

3) Crockford on JavaScrpt

  - 백발의 중년 신사분이 JavaScript 언어에 대해 설명을 하고 있다. 우리나라에선 상상할 수 없는 일이겠지, 큰 세미나에 가봐야 젊은 친구들의 열정만을 엿볼 수 있는 부분을 생각해 보면 그들의 환경이 참 부럽다.

  - 15분경의 동영상에서 this의 호출에 대해서 보자 

  - 31분경에서 정확한 Closure 사용법 설명

<참조> 

  - 원문 : Scope and this in JavaScript

  - Scope 한글 블로깅 연재

  - Naver Dev JavaScript 클로져, 유효범위

트위터의 개발자와 디자이너는 웹 디자이너나 개발자에게 좀 더 나은 삶을 주고자 Bootstrap이라 불리는 프레임워크를 내놓았다. 원문의 Bootstrap 시작하기를 사용해 보고 원문과 함께 정리해 본다. 역시 Bootstrap 사이트에서 따라하기 해보는 것이 가장 좋겠다. 

1. Bootstrap 활용하기 

  - 반응형 레이아웃의 CSS Grid

  - 서체, 버튼, 폼, 테이블, 이미지에 대한 CSS

  - 네비게이션, 프로그레스바, 경고창등의 사용자 인터페이스 컴포넌트

  - 홈페이지에서 다운로드를 할 수 있다

  - 디렉토리 구조 

 - HTML 첨부 하기

  - 반응형 웹사이트 : width가 줄어들면 메뉴형태가 자동 변경 및 레이아웃 자동 조절됨 (데모사이트)

    + 넓이가 넓을때 메뉴 예

    + 넓이가 줄어들때 메뉴 변경 예

2. CSS Base: Button 

  - <button type="button" class="btn">Default Button</button>

  - <button type="button" class="btn btn-success">Button</button>

    <button type="button" class="btn btn-warning">Button</button>

    <button type="button" class="btn btn-danger">Button</button>

  - Bootstrap 스타일은 LESS로 빌드되었다.

   @btnSuccessBackground:              #bce895; //#62c462;

   @btnSuccessBackgroundHighlight:     #a0cd78; //#51a351;

 - 그룹 버튼

  <div class="btn-group">

   <button type="button" class="btn btn-success">Button</button>

   <button type="button" class="btn btn-warning">Button</button>

   <button type="button" class="btn btn-danger">Button</button>

  </div>

3. JQuery Plugin

  - $('#container').tooltip({

      selector: "a[rel=tooltip]"

    });

4. Bootstrap으로 만들어진 괴안은 사이트 

  - leanIX

  - 프리미엄 테마 구매 사이트 (강력추천)

  - 오픈소스 약간 메트로 스타일 사이트

<참조>

  - 원문 : http://www.hongkiat.com/blog/twitter-bootstrap/

  - Bootstrap 시작하기

  - 적은 자원으로 훌륭한 웹사이트를 만들기 위한 9가지 아이디어

  - Bootstrap+Node.js로 SPA 만들기

  - Bootstrap 267 리소스

  - CSS Layout 기초 배우기

  - Bootstrap에 대한 다양한 사용예제 블로그

  - 최근 version 3이 나왔다. 마이그레이션 관련내용

  - Twitter Bootstrap을 확장한 Jasny Bootstrap

  - Facebook 스타일의 Bootstrap 제공

Git을 배우려면 다음과 같이 하자. 

1. Git 레퍼런스와 강좌 사이트 

  - Pro Git 한글 번역본 완독

  - http://gitimmersion.com : 사이트 튜토리얼 수행 

  - http://gitready.com : 초심자, 중급, 고급 명령 수행

  - http://gitref.org : Git Reference 에서 바로 Cheat

  - Git Cheatsheet : UI에서 명령흐름을 직관적으로 보여줌

2. 도전과제 

  - PPT의 내용을 직접 수행해 보자  

Git commit 할 때 가이드 라인을 잘 지켜서 원격 저장소에 소스가 꼬이지 않도록 하고, 커밋된 내역을 잘 이해할 수 있도록 메세지 작성 정책에 대해 알아보자

  - 공백 문자를 깨끗이 제거 한다 : 확인)  git diff --check (공백 문자 오류확인가능, 잘 못 사용한 공백은 X 문자로 바꿈)

  - 최대한 수정사하을 하나의 주제로 요약한다

    + 여러 가지 이슈에 대한 수정사항을 하나의 커밋에 담지 말아라

    + 적절한 메세지를 작성한다 : 반드시 좋으 커밋 메세지를 담는다

  - 같은 파일의 다른부분을 수정하는 경우에는 git add -patch 명령을 이용한다 

    + 한 부분씩 나누어 Stage 영역에 저장해야 한다 

  - 메세지 작성

    + 첫줄엔 50자내로 간략히 요약

    + 두번째줄 비우고 세번째줄에 자세히 설명글 :개발동기, 구현 상황, 제약조건/상황

    + 글은 현재형을 사용한다 

    + 추가 내용은 한줄 띄우고 시작한다 

    + 잘쓰여진 커밋 메세지는 git log --no-merges 명령으로 꼭 살펴본다 

   예)

Git은 분산 버전관리 시스템이다. 서로 각자의 저장소를 가지고서 어떻게 충돌없이 잘 사용할 수 있을지 알아보자. (5장)

1) 중앙집중식 Workflow

  - 예전의 Subversion에 익숙한 사용자들의 방식

  - 예로 2명이 작업, 한명이 서버로 update코드 push하면 다른한명이 서버에서 update코드를 pull하여 merge 수행

  - 모든 사용자에게 서버에 push 권한을 부여해야 함

  - 그러나 중앙 서버 저장소로 a코드가 다른이에 의해 push 되었고, 다른사람이 a코드를 수정하여 push해도 Git은 이것을 방지해 준다. 즉, 다시 로컬로 fetch 또는 pull 하지 않으면 중앙 서버로 push 할 수 없게 막아준다

2) 통합관리(Integration-Manager) Workflow

  - 여러 리모트 저장소를 두고 한개는 R/W 가능, 다른 한개는 R만 가능하게 설정가능 하다

  - 이것은 GitHub의 운영방식이다. Pull Request 수행하면 통합관리자가 이것을 보고 기여자의 저장소에서 원본 저장소로 pull하여 merge 하게 된다

3) 독재자 보조관(Dictator and Lieutenants) Workflow

  - 2)번 형태의 확장판

  - Linux Kernel과 같은 큰 프로젝트에서 사용한다 

* 다양한 변종의 Workflow가 존재함 

<참조>

  - 성공적인 Git Branch 전략 (한글번역본 - dogfeet)

    + feature : 기능 만들기 

    + develop : 개발진행

    + release : 릴리즈 

    + hotfixes : 긴급 패치 

    + master : 원본 

Twitter Bootstrap과 Node.js를 이용하여 Single Page App을 만들어 보자. 여기서는 Backbone.js를 배제하고 만드는 방법이다. 외국 블로깅 글을 따라서 실행보면서 정리한다. (총 3 part중 part 1)

서버단 코드 만들기

1) GitHub에서 소스 다운로드 및 사전 설정

  - 소스 다운로드 : $ git clone https://github.com/iatek/one-page-app.git

  - node.js 와 npm 이 설치되어 있어야 한다

  - Express 프레이워크 설치 : npm install express

  - ejs 템플릿 엔진 설치 : npm install ejs npm install ejs-locals

2) Express 환경파일 설정

  - app.js

app.js

// ejs template engine 사용
var express = require('express'),
	engine = require('ejs-locals'),   
	app = express();

// init export
exports.init = function(port) {
    app.locals({
		_layoutFile:'layout.ejs'
	})
	
    app.configure(function(){
    	app.set('views', __dirname + '/views');
    	app.set('view engine', 'ejs');
    	app.use(express.bodyParser());
    	app.use(express.methodOverride());
        // Static pages 서비스 
        app.use(express.static(__dirname + '/static'));
        // Session과 Cookie 관리 
        app.use(express.cookieParser());
        app.use(express.cookieSession({cookie:{path:'/',httpOnly:true,maxAge:null},secret:'skeletor'}));
    	app.use(app.router);
    	//app.enable("jsonp callback");
    });

    app.engine('ejs', engine);	
    app.configure('development', function(){
        app.use(express.errorHandler({ dumpExceptions: true, showStack: true })); 
        // app.use(express.logger({ format: ':method :url' }));
    });

    app.configure('production', function(){
	   app.use(express.errorHandler()); 
    });

    app.use(function(err, req, res, next){
	   res.render('500.ejs', { locals: { error: err },status: 500 });	
    });
	
    server = app.listen(port);
    console.log("Listening on port %d in %s mode", server.address().port, app.settings.env);
    return app;
}

3) Routing 만들기 

  - server.js : app이 시작하는 초기 파일이다. app route를 정의한다

server.js

  - "app.get", "app.post", "app.del" 을 사용한다 

  - 4개의 HTTP get routing 호출  

    /(default homepage)

    /login

    /logout

    /admin

var port = process.env.PORT || 4000,
    app = require('./app').init(port),
	dirty = require('dirty');
	
var locals = {
	author:'in1'
	// add other vars here
};

var userDb = dirty('user.db');

app.get('/', function(req,res){
    locals.date = new Date().toLocaleDateString();
	
	var appDb = dirty('app.db'),
		sectionsDb;
	
	appDb.on('load', function() {
		sectionsDb = dirty('sections.db');
		sectionsDb.on('load', function() {
			/*
			sectionsDb.forEach(function(key, val) {
				console.log('Found key: %s, val: %j', key, val);
			});
			*/
			res.render('index.ejs', {locals:locals,sections:sectionsDb,app:appDb.get('app'),page:appDb.get('page')});
		});
	});
});
... 중략 ...
app.post('/contact', function(req,res){
	appDb = dirty('app.db');
	console.log('contact form submit.');
	
	appDb.on('load', function() {
		console.log('Form submitted.');
		res.send('Thank you.');
	});
});

/* The 404 Route (ALWAYS Keep this as the last route) */
app.get('/*', function(req, res){
    res.render('404.ejs', locals);
});

4) Persistence 유지 하기 

  - Node-Dirty를 이용하여 disk log형태로 가벼운 데이터베이스겸으로 사용한다

  - 5개의 database 파일안에 관련 표현할 내역이 .db파일에 들어있음 (백만 record 미만 사용하는 앱에 적당)

    app.db : 애플리케이션 래벨 설정

    sections.db : 섹션 설정과 내용 저장

    user.db : 사용자 credential 과 admin 권한

    snippet.db : 미리 생성할 섹션 내용을 위한 코드 조각 저장

    post.db : 연락처와 이메일 폼 결과 저장 

  - server.js에서 require('dirty')

> 다음은 UI Part to be continued...

<참조>

  - Single Page App with Twitter Bootstrap and Node.js : 데모사이트

  - One page app GitHub 소스

  - SPA를 위한 storage : node-dirty

  - Node.js 기초 강의 동영상

  - Node의 MVC Framework : Express.js

  - Bootstrap 확장판

Node.js 기반하에 Front-end 개발을 할 경우 텍스트 기반의 툴들을 알아보자.

  - Node.js로 개발할 때 commmand-line 유틸리티가 상당히 많고 이는 front-end 개발자에게 도움을 준다 

  - 다섯가지의 Node CLI 유틸리티를 알아보자 

  - Node와 npm이 설치되어 있음을 전제로 한다 

1) UglifyJS

  - JavaScript를 압축하고 사이즈를 최소화해준다 (네트워크 전송량을 작게해서 성능향상을 기대할 수 있다) 

  - UglifyJS의 기능을 바로 웹상에서 사용하기   

// coffee에서 컴파일된 javascript 소스 
// Generated by CoffeeScript 1.4.0
(function() {
  var x;

  x = 4;

  if ((0 <= x && x <= 10)) {
    console.log("true");
  }

}).call(this);

// -b 옵션을 주었을 경우 
(function() {
    var x;
    x = 4;
    if (0 <= x && x <= 10) {
        console.log("true");
    }
}).call(this);

// -b 옵션을 주지 않았을 경우 
(function(){var x;x=4;if(0<=x&&x<=10){console.log("true")}}).call(this);

2) Grunt

  - JavaScript 프로젝트를 위한 task-based command line 빌드 툴

  - 미리 정의된 템플릿을 만들어 준다 : 테스트(QUnit & PhantomJS), Lint파일(JSHint), 최소화파일(UglifyJS), Static WebServer

  - 템플릿들은 Node Server에서 구동할 수 있다. (jQuery 템플릿도 가능)

  - 시작하기 가이드

  - Grunt 간단 소개

  - 좀 더 자세한 튜토리얼

3) GruntIcon

  - css icon 만들기

  - PhantomJS가 필요하다 (phantomjs.exe 파일을 프로젝트 폴더에 놓는다)

  - grunt.js 파일에 GruntIcon 로드 설정을 한다

4) JSHint

  - JavaScript의 코드 품질 측정 툴 

  - 잠재적인 위험 요소를 찾아준다 : 웹기반 측정도 가능

5) Node-static

  - 로컬 테스트시에 캐쉬/헤더 별도 셋팅가능

  - 로컬 웹서버로서 아무 디렉토리에서나 시작하면 ROOT 디렉토리가 된다

* CLI를 이용하여 브라우져안에서 클라이언트단 유닛 테스트 도구 : bunyip

원본 데이터로 부터 데이터를 수집하고 이를 데이터베이스에 저장한 후에 레포팅 가공을 할 경우 MongoDB를 사용한 예를 보도록 하자

1) MongoDB의 Scale-out을 통하여 Sharding에 대한 아키텍쳐 Case

  - 데이터를 수집하는 Collection Server의 Write에 대하여 Scaleble Writes가 가능해 진다 

  - 레포팅 서버로 부터 데이터를 읽어오는 것에 유연하게 대처한다 

  - 각 내역은 Mongos를 통하여 routing 되어서 여러 MongoD의 Master를 통하여 Sharding 된다 

2) MongoDB를 통해서 실시간 분석을 수행하는 방법

3) 실시간 Logging 저장소로써 MongoDB를 사용할 경우 아키텍쳐

  - HTTP 로그 Header 정보를 key:value 도큐먼트로 저장 

  - Filtering하여 화면에 출력 

if, switch, for loop 구문등을 사용해 보자 

machine = 
	running: no
	turnOn: -> this.running = yes
	turnOff: -> this.running = no

###
if not === unless
###
if not machine.running
	machine.turnOn()

machine.turnOne() if not machine.running
console.log machine.running

unless machine.running
	machine.turnOn()
else
	machine.turnOff()

// Generated by CoffeeScript 1.4.0
(function() {
  var machine;
  machine = {
    running: false,
    turnOn: function() {
      return this.running = true;
    },
    turnOff: function() {
      return this.running = false;
    }
  };

  /*
  if not === unless
  */
  if (!machine.running) {
    machine.turnOn();
  }
  if (!machine.running) {
    machine.turnOne();
  }
  console.log(machine.running);

  if (!machine.running) {
    machine.turnOn();
  } else {
    machine.turnOff();
  }
}).call(this);

person = 
	name: "dowon"
	job: "programmer"

giveWork = (person) ->	
	switch person.job
	  when "programmer"
	  	console.log "1> Here's your code work, #{person.name}"
	  when "designer"
	  	console.log "1> Here's your design work, #{person.name}"
	  else 
	  	console.log "1> Um, do you work here?"	  	
giveWork person	  	

# or
person.job = "designer"
giveWork2 = (person) ->	
	switch person.job 
	  when "programmer" then console.log "2> Here's your code work, #{person.name}"
	  when "designer" then console.log "2> Here's your design work, #{person.name}"
	  else console.log "2> Um, do you work here?"
giveWork2 person

// Generated by CoffeeScript 1.4.0
var giveWork, giveWork2, person;
person = {
  name: "dowon",
  job: "programmer"
};

giveWork = function(person) {
  switch (person.job) {
    case "programmer":
      return console.log("1> Here's your code work, " + person.name);
    case "designer":
      return console.log("1> Here's your design work, " + person.name);
    default:
      return console.log("1> Um, do you work here?");
  }
};
giveWork(person);

person.job = "designer";
giveWork2 = function(person) {
  switch (person.job) {
    case "programmer":
      return console.log("2> Here's your code work, " + person.name);
    case "designer":
      return console.log("2> Here's your design work, " + person.name);
    default:
      return console.log("2> Um, do you work here?");
  }
};
giveWork2(person);

person1 = 
	name: "dowon"
	relationship: "friend"
person2 = 
	name: "youngsik"
	relationship: "boss"

greet = (person) ->
	if person.relationship is "friend"
		console.log "1> hi, #{person.name}!"
	else if person.relationship is "boss"
		console.log "1> hello, papa!"
greet person1
greet person2
# or
greet2 = (person) ->
	msg = if person.relationship is "friend"
		"2> hi, #{person.name}!"
	else if person.relationship is "boss"
		"2> hello, papa!"
	console.log msg
greet2 person1
greet2 person2
# or
greet3 = (person) ->
	console.log if person.relationship is "friend"
		"3> hi, #{person.name}!"
	else if person.relationship is "boss"
		"3> hello, papa!"
greet3 person1
greet3 person2
# or
greet4 = (person) ->
	msg = switch person.relationship 
		when "friend" then "4> hi, #{person.name}!"
		when "boss" then "4> hello, papa!"
	console.log msg
greet4 person1
greet4 person2

// Generated by CoffeeScript 1.4.0
(function() {
  var greet, greet2, greet3, greet4, person1, person2;
  person1 = {
    name: "dowon",
    relationship: "friend"
  };
  person2 = {
    name: "youngsik",
    relationship: "boss"
  };

  greet = function(person) {
    if (person.relationship === "friend") {
      return console.log("1> hi, " + person.name + "!");
    } else if (person.relationship === "boss") {
      return console.log("1> hello, papa!");
    }
  };
  greet(person1);
  greet(person2);

  greet2 = function(person) {
    var msg;
    msg = person.relationship === "friend" ? "2> hi, " + person.name + "!" : person.relationship === "boss" ? "2> hello, papa!" : void 0;
    return console.log(msg);
  };
  greet2(person1);
  greet2(person2);

  greet3 = function(person) {
    return console.log(person.relationship === "friend" ? "3> hi, " + person.name + "!" : person.relationship === "boss" ? "3> hello, papa!" : void 0);
  };
  greet3(person1);
  greet3(person2);

  greet4 = function(person) {
    var msg;
    msg = (function() {
      switch (person.relationship) {
        case "friend":
          return "4> hi, " + person.name + "!";
        case "boss":
          return "4> hello, papa!";
      }
    })();
    return console.log(msg);
  };
  greet4(person1);
  greet4(person2);
}).call(this);

2) for 구문 

  - for 구문을 다양하게 사용하는 방법

  - 5가지 for loop 문 사용방법 : loop.coffee

arr = ["Net", "Aet", "Photo", "Psd", "Cgt"]

obj = 
	name: "dowon"
	topic: "web development"
	editor: "yun"

###
for ( var i = 0; i < arr.length; i++) {
	console.log(arr[i]);
}	
###
console.log "---1---"
for siteName in arr
	console.log siteName

console.log "---2---"
console.log siteName for siteName in arr

console.log "---3---return array---"
console.log (siteName for siteName in arr)	

console.log "---4---"
for siteName, i in arr
	console.log "#{i}: #{siteName}"	

console.log "----5--"
for siteName, i in arr when siteName.indexOf("P") is 0	
	console.log "#{i}: #{siteName}"	

console.log "---6---"
###
by 2 ===  when i % 2 is 0
###
for siteName, i in arr by 2
	console.log "#{i}: #{siteName}"	


// Generated by CoffeeScript 1.4.0
(function() {
  var arr, i, obj, siteName, _i, _j, _k, _l, _len, _len1, _len2, _len3, _len4, _m, _step;
  arr = ["Net", "Aet", "Photo", "Psd", "Cgt"];

  obj = {
    name: "dowon",
    topic: "web development",
    editor: "yun"
  };

  /*
  for ( var i = 0; i < arr.length; i++) {
  	console.log(arr[i]);
  }
  */
  console.log("---1---");
  for (_i = 0, _len = arr.length; _i < _len; _i++) {
    siteName = arr[_i];
    console.log(siteName);
  }

  console.log("---2---");
  for (_j = 0, _len1 = arr.length; _j < _len1; _j++) {
    siteName = arr[_j];
    console.log(siteName);
  }

  console.log("---3---return array---");
  console.log((function() {
    var _k, _len2, _results;
    _results = [];
    for (_k = 0, _len2 = arr.length; _k < _len2; _k++) {
      siteName = arr[_k];
      _results.push(siteName);
    }
    return _results;
  })());

  console.log("---4---");
  for (i = _k = 0, _len2 = arr.length; _k < _len2; i = ++_k) {
    siteName = arr[i];
    console.log("" + i + ": " + siteName);
  }

  console.log("----5--");
  for (i = _l = 0, _len3 = arr.length; _l < _len3; i = ++_l) {
    siteName = arr[i];
    if (siteName.indexOf("P") === 0) {
      console.log("" + i + ": " + siteName);
    }
  }

  console.log("---6---");
  /*
  by 2 ===  when i % 2 is 0
  */
  for (i = _m = 0, _len4 = arr.length, _step = 2; _m < _len4; i = _m += _step) {
    siteName = arr[i];
    console.log("" + i + ": " + siteName);
  }
}).call(this);	

3) Scope 알아보기 

  - this 에 대한 유효범위(scope)를 보았을 때 object의 method로 사용되지 않는 단순 function 호출의 this는 global object (즉, UI에서는 window객체)를 가르킨다 (참조)

var classroom = {
	students: ["Jonh", "Jane", "Jill", "Joe"],
	print: function() {
		var thiz = this;
		function getName(i) {
			return thiz.students[i];
		}
		for(var i=0; i < this.students.length; i++) {
			console.log(getName(i));
		}
	}
}
classroom.print();

  - 위의 경우를 coffee로 표현하고자 할 경우 다음과 같이 => 사용하면 "var thiz = this;" 를 표현할 수 있다

classroom = 
	students: ["Jonh", "Jane", "Jill", "Joe"]
	print: ->
		getName = (i) =>    // =>를 사용하면 var thiz = this; 동일 효과가 가능하다 
			this.students[i]

		for s,i in this.students
			console.log getName i 

classroom.print()

// Generated by CoffeeScript 1.4.0
(function() {
  var classroom;
  classroom = {
    students: ["Jonh", "Jane", "Jill", "Joe"],
    print: function() {
      var getName, i, s, _i, _len, _ref, _results,
        _this = this;
      getName = function(i) {
        return _this.students[i];
      };
      _ref = this.students;
      _results = [];
      for (i = _i = 0, _len = _ref.length; _i < _len; i = ++_i) {
        s = _ref[i];
        _results.push(console.log(getName(i)));
      }
      return _results;
    }
  };
  classroom.print();
}).call(this);

* 파일 

coffeescript-2.zip