자바스크립트에서 네임스페이스 만들기와 그 구현방법

네임스페이스(namespacing)는 코드를 깔끔하고 단순하게 만드는 간단하면서도
중요한 개념이다. 자바스크립트는 아직까지는 네임스페이스 만들기를 지원하지 않는다.
그래서, 네임스페이스를 만들기 위한 간단하면서도 적당한 방법을 직접 고안해야 한다.

자바스크립트이 모든 객체는 프로퍼티를 가지고, 프로퍼티는 다시 다른 객체를 담을 수
있다는 사실을 기반으로, 다른 언어에서 네임스페이스를 만들 듯 아주 비슷한 모습으로
무언가를 만들수 있다.

아래와 같은 인기있는 프레임워크가 있다.
Dojo : http://dojotoolkit.org/
YUI  : http://developer.yahoo.com/yui/

//기본 전역 네임스페이스를 만든다.
var YAHOO = {};

//객체들을 사용해서 자식 네임스페이스 만들기를 준비한다.
YAHOO.util = {};

//함수 프로퍼티를 담는 마지막 네임스페이스를 만든다.
YAHOO.util.Event = {
    addEventListner: function(){...}
};

//특정 네임스페이스 안에 있는 함수를 호출한다.
YAHOO.util.Event.addEventListner(...)
크리에이티브 커먼즈 라이센스
Creative Commons License
이올린에 북마크하기(0) 이올린에 추천하기(0)

Posted by 홍반장

2011/04/01 16:51 2011/04/01 16:51
,
Response
No Trackback , No Comment
RSS :
http://tcbs17.cafe24.com/tc/rss/response/6030

딘 에드워즈가 만든 Base 라이브러리로 클래스를 생성하고 상속하는 간단한 예


딘 에드워즈의 웹사이트 : http://dean.edwards.name/

A Base Class for Javascript Inheritance : http://dean.edwards.name/weblog/2006/03/base/

ie7-js : http://code.google.com/p/ie7-js/

base2 (A standards-bases javascript Library) : http://code.google.com/p/base2/

cssQuery() : http://dean.edwards.name/my/cssQuery/

        //새 Person 클래스를 만든다.
        var Person = Base.extend({
            // Person 클래스 생성자
            constructor: function( name ) {
                this.name = name;
            },
        
            //Person 클래스의 간단한 메서드
            getName: function() {
                return this.name;
            }
        });
        
        // Person 클래스를 상속하는  새 User 클래스를 만든다.
        var User = Person.extend({
            // User 클래스의 생성자를 만든다.
            constructor: function( name, password ) {
                // 부모 클래스의 생성자 메서드를 호출한다.
                this.base( name );
                this.password = password;
            },
        
            // User 클래스에 간단한 메서드를 추가한다.
            getPassword: function() {
                return this.password;
            }
        });

크리에이티브 커먼즈 라이센스
Creative Commons License
이올린에 북마크하기(0) 이올린에 추천하기(0)

Posted by 홍반장

2011/03/31 15:54 2011/03/31 15:54
Response
No Trackback , No Comment
RSS :
http://tcbs17.cafe24.com/tc/rss/response/6022

자바스크립트로 클래스 상속을 흉내내는 더그라스 크록포드가 만든 세 함수

Function.prototype.method : 이 함수는 그저 생성자의 프로토타입에 함수를 붙인다. 이런 식으로 method 함수를 정의하면, 모든 생성자는 함수이므로 모두 'method'메서드를 갖게 된다.

Function.prototype.inherits : 이 함수는 간단한 단일 부모 상속을 지원한다. 이 함수에서 대부분의 코드는 어떤 객체 메서드 안에서든 this.uber('methodName')을 호출해 그 객체가 오버라이드한 부모 객체의 메서드를 호출할 수 있게 하려고 작성되었다. 오버라이드한 부모 객체의 메서드를 호출 할 수 있는 기능은 자바스크립트 상속모델에서 기본으로 지원하지 않는 기능이다.

Function.prototype.swiss : 이 함수는 .method() 함수의 고급버전으로 한 부모 객체에서 여러 메서드를 상속받는데 사용한다. 이 함수를 여러부모 객체에 대해 사용하면 다중 상속 시능을 사용하는 것과 마찬가지가 된다.

//프로토타입에 새 함수를 연결하는 간단한 헬퍼 Function.prototype.method = function(name,func){ this.prototype[name] = func; return this; } //다른 객체로부터 우아한 방식으로 함수를 상속받으면서 여전히 부모 객체의 함수를 //호출할 수 있게 해 주는 (약간 복잡한) 함수 Function.method('inherits', function(parent){ //상속 계층 안에서 얼마나 깊이 들어왔는지 추척한다. var depth = 0; //부모의 메서드를 상속 받는다. var proto = this.prototype = new parent(); //'uber'라는 privileged 함수를 만든다. //이 함수는 상속 과정에서 덮어쓴 함수를 실행할 수 있게 해 준다. this.method('uber', function(name){ var func; //실행할 함수 var ret; //함수의 반환값 var v = parent.prototype; //부모의 프로토타입 //이미 다른 'uber'함수 안이라면 if(depth){ //근원 프로토타입을 찾아 필요한 만큼 깊이 들어간다. for( var i = depth; i > o; i -= 1){ v = v.constructor.protptype; } //그리고 그 프로토타입에서 함수를 가져온다. func = v[name]; //아니면 'uber'를 처음 호출하는 상황이다. }else{ //실행할 함수를 프로토타입에서 가져온다. func = proto[name]; //함수가 이 프로토타입의 일부였다면 if(func == this[name]){ //대신 부모 프로토타입에 간다. func = v[name]; } } //상속 스택에서 얼마나 깊이 들어왔는지를 추척한다. depth += 1; //첫 번째 전달인자를 제외한 모든 전달인자를 넘기면서 함수를 호출한다. //(첫 번째 전달인자는 우리가 호출하려는 함수 이름을 담고 있다.) ret = func.apply(this, Array.prototype.slice.apply(arguments, [1])); //스택의 깊이를 변경한다. depth -= 1; //함수 호출의 결과값을 되돌려준다. return ret; }); return this; }); //parent 객체에서 new parent()를 사용해 모든 함수를 // 상속받지 않고, 오직 함수 몇개만을 상속받는 함수 Function.method('swiss', function(parent){ for(var i = 1; i < arguments.length; i+= 1){ //상속받을 메서드들을 모두 방문한다. var name = arguments[i]; //메서드를 이 객체의 프로토타입으로 가져온다. this.prototype[name] = parent.prototype[name]; } return this; });
크리에이티브 커먼즈 라이센스
Creative Commons License
이올린에 북마크하기(0) 이올린에 추천하기(0)

Posted by 홍반장

2011/03/31 14:29 2011/03/31 14:29
,
Response
No Trackback , No Comment
RSS :
http://tcbs17.cafe24.com/tc/rss/response/6021

자바스크립트 클래스 상속 ( Douglas Crockford 가 구현한 간단한 메서드들)
http://javascript.crockford.com/inheritance.html
크리에이티브 커먼즈 라이센스
Creative Commons License
이올린에 북마크하기(0) 이올린에 추천하기(0)

Posted by 홍반장

2011/03/31 13:58 2011/03/31 13:58
,
Response
No Trackback , No Comment
RSS :
http://tcbs17.cafe24.com/tc/rss/response/6020

객체의 타입을 검사하는 첫번째 방법은 typeof 가 있다.
typeof 연산자는 변수가 담고 있는 값의 타입을 나타내는 문자열 이름을 반환하는데,
 객체,배열 또는 사용자 정의 객체를 담은 변수에 대해서는 object라는 문자열만
반환하기 때문에 이 객체들을 구별하기가 어렵다는 점을 제외하고는, typeof 연산자를
사용하는 방법이 타입을 검사하는 최적의 방법이라고 할 수 있다.

두번째 방법은 모든 자바스크립트객체에 존재하는 constructor라는 프로퍼티를 참조하는
방법인데, 이 프로퍼티는 맨 처음 객체를 생성할때 사용한 함수를 가리킨다.

아래의 표는 위 두 방법을 사용해 여러 객체의 타입을 검사 할 때 반환되는 결과를
보여주는데, 첫번째열은 타입을 알아보려는 객체이고, 두번째열은 typeof, 세번째는
 첫번째열의 객체에 대해 Variable.constructor 를 실행한 결과이다.
셋째열은 모두 객체다. 

Variable typeof Variable Variable.constructor
{an:"object"} object Object
["an","array"] object Array
function() {} function Function
"a string" string String
55 number Number
true boolean Boolean
new User() object User
크리에이티브 커먼즈 라이센스
Creative Commons License
이올린에 북마크하기(0) 이올린에 추천하기(0)

Posted by 홍반장

2011/03/30 13:47 2011/03/30 13:47
, ,
Response
No Trackback , No Comment
RSS :
http://tcbs17.cafe24.com/tc/rss/response/6017

HTML CSS JAVASCRIPT로 IPHONE APPS 개발하기
IPHONE APPS 개발하기
저자 조나단 스타크 | 역자 성윤정, 황연주 | 출판사 아이티씨

Online Book : http://ofps.oreilly.com/titles/9780596805784/index.html

책소개
Object-C 혹은 Cocoa 없이 앱스토어 애플리케이션 만들기『HTML, CSS, JavaScript로 iPhone Apps 개발하기』. 이 책은 웹 개발자라면 누구라도 쉽게 아이폰 애플리케이션 개발자가 될 수 있도록 도와주는 안내서다. Objective-C나 Cocoa를 사용하지 않고 플랫폼 위에서 아이폰과 아이팟 터치를 위한 애플리케이션을 디자인하고 작성할 수 있는 오픈 소스 웹 기술들을 사용하는 방법을 배울 수 있다.

목   차

1장 시작하기
Web Apps VS. Native Apps
Web Programming 특강

2장 기본 아이폰 스타일링
첫 번째 단계
아이폰 CSS 추가하기
아이폰에 모양과 느낌 추가하기
jQuery와 기본적인 동작 추가하기
이 장을 마치며

3장 향상된 아이폰 스타일링
Ajax의 터치 추가하기
교통경찰 역할을 하는 iphone.html 작성하기
간단한 부가기능 추가하기
‘back' 버튼으로 되돌리기
Home Screen에 Icon 추가하기
Full Screen Mode
이 장을 마치며

4장 Animation
친구로부터 약간의 도움을 얻다.
Dates 패널 추가하기
Date 패널 추가하기
New Entry 패널 추가하기
Settings 패널 추가하기
하나의 HTML로 완성하기
jQTouch 사용자 정의에 맞추기
이 장을 마치며

5장 Client-Side 데이터 기억장치
localStorage와 sessionStorage
사용자 설정을 localStorage에 저장하기
Client-Side Database
이 장을 마치며

6장 Offline
Offline Application Cache의 기본
Online Whitelist와 Fallback 옵션
동적 Manifest 파일 생성하기
Debugging
이 장을 마치며

7장 Native
PhoneGap 소개
아이폰에 우리가 만든 애플리케이션 인스톨하기
JavaScript로 아이폰 제어하기
이 장을 마치며

8장 iTunes에 애플리케이션 올리기
아이폰 Distribution Provisioning Profile 만들기
아이폰 Distribution Provisioning Profile 인스톨하기
프로젝트명 변경하기
애플리케이션 바이너리 준비하기
애플리케이션 올리기
기다리는 동안
참고할 사이트


테스트 주도 개발
테스트 주도 개발 (CD-ROM 포함)
저자 켄트 벡 | 역자 김창준 외 | 출판사 인사이트

책소개

최근 주목받고 있는 프로그래밍 방법인 테스트 주도 개발, 즉 TDD를 설명한 최초의 책이자, 가장 권위적인 책. 테스트 주도 개발을 퍼뜨린 장본인이며 객체 지향 프로그래밍의 선구자 중 한 사람인 켄트 벡이 직접 썼다.

'테스트 주도 개발(Test-Driven Development)'은 테스트가 개발을 주도하는 방법이다. 테스트가 개발을 주도한다는 것은 테스트가 코딩의 방향을 이끌어 간다는 말이다. 테스트를 실패하는 코드가 없으면 코딩을 하지 않고, 코드 상에 중복이 있으면 제거한다는 간단한 규칙을 지켜나가면 자연스레 아름다운 코드가 천변만화 펼쳐진다. 덤으로 회귀 테스트도 생기고, 개발 과정 자체가 즐거워지는 보너스도 있다.

1부에서는 자바 언어를 사용해서 다중 화폐 코드를 작성하고, 2부에서는 파이썬 언어를 사용해서 단위 테스팅 프레임웍을 작성한다. 3부에는 이런 개발을 할 때 자주 등장하는 패턴들을 정리해 놓았다. 100여 개의 역주로 내용을 알기 쉽고 풍부하게 해설하고 있다. TDD를 국내에 처음 소개한 역자의 'TDD 수련법', '실전 TDD' 원고 추가했으며, 부록으로 TDD 시연 동영상 CD를 준다. 또한 한국어판 발간에 즈음한 켄트 벡 인터뷰를 수록했다.


저자 소개

<지은이>
켄트 벡(Kent Beck)
켄트 벡(Kent Beck)은 소프트웨어 패턴 운동의 선구자 중 한 명이며, CRC 카드와 HotDraw 드로잉 에디터 프레임워크, xUnit 유닛 테스팅 프레임워크를 개발했고, 리팩토링과 테스트 주도 개발을 소개했다. 또한 기민한 방법론(Agile Methodology) 중 가장 널리 알려진 익스트림 프로그래밍(Extreme Programming, XP)의 아버지다. 피플웨어로 유명한 톰 디마르코(Tom DeMarco)는 2001년 OOPSLA 컨퍼런스에서 "켄트 벡은 CMM 개발을 지휘한 와츠 험프리가 지난 10년 간 중요했던 것보다 더 중요해질 것"이라고 말했다. 켄트 벡은 현재 Three Rivers Institute 소속이다. 저술한 책으로는 Smalltalk Best Practice Patterns와 Kent Beck's Guide to Better Smalltalk 같은 스몰토크 패턴에 관련된 책들과 Extreme Programming Explained, Planning Extreme Programming(공저), Refactoring(공저), Contributing to Eclipse(공저) 등이 있고 현재도 여러 책을 집필 중에 있다.

< 옮긴이 >
김창준
현재 월간 마이크로소프트웨어 자문위원, 한국 XP 사용자 모임 설립자 및 코어그룹 멤버, XP 코치 팀 수석 코치.
다음커뮤니케이션, NHN, 한미 연합사령부, SKT, 삼성전자/전기 등에 XP 코칭, 교육, 컨설팅 등을 제공한 바 있다.
한국 XP 사용자 모임 http://xper.org 를 운영하고 있다.

강규영
현재 다음커뮤니케이션 R&D 센터에서 근무중. 한국 XP 사용자 모임 코어그룹 및 XP 코치 팀으로 활동하고 있으며 김창준씨를 도와 여러 XP 컨설팅에 참여.
개인위키 http://jania.pe.kr 을 운영하고 있다.

목  차

TDD 수련법 (by 김창준)
한국어판 인터뷰
 
1부 화폐(돈) 예제
 
1장 다중 통화를 지원하는 Money 객체
2장 타락한 객체
3장 모두를 위한 평등
4장 프라이버시
5장 솔직히 말하자면
6장 돌아온 ‘모두를 위한 평등’
7장 사과와 오렌지
8장 객체 만들기
9장 우리가 사는 시간(times)
10장 흥미로운 시간
11장 모든 악의 근원
12장 드디어, 더하기
13장 진짜로 만들기
14장 바꾸기
15장 서로 다른 통화끼리 더하기
16장 드디어, 추상화
17장 Money 회고
 
2부 XUnit 예시
 
18장 xUnit으로 가는 첫걸음
19장 테이블 차리기
20장 뒷정리하기
21장 셈하기
22장 실패 처리하기
23장 얼마나 달콤한지
24장 xUnit 회고
 
3부 테스트 주도 개발의 패턴
 
25장 테스트 주도 개발 패턴
26장 빨간 막대 패턴
27장 테스팅 패턴
28장 초록 막대 패턴
29장 xUnit 패턴
30장 디자인 패턴
31장 리팩토링
32장 TDD 마스터하기
 
부록 A 영향도
부록 B 피보나치
마치는 글 (by 마틴 파울러)
실전 TDD (by 김창준, 강석천)


크리에이티브 커먼즈 라이센스
Creative Commons License
이올린에 북마크하기(0) 이올린에 추천하기(0)

Posted by 홍반장

2011/03/29 10:00 2011/03/29 10:00
, , , , ,
Response
A trackback , a comment
RSS :
http://tcbs17.cafe24.com/tc/rss/response/6008

'모바일웹과 웹개발자가 2011년 주목해야 하는 기술들'

Modern Javascript
: web2.0과 함께 자바스크립트 개발에 초점이 맞춰졌다.
  다양한 OpenAPI 개발환경이 구축되고, 다양한 모바일 디바이스에서 HTML5로
  Application을 개발할 수 있기 때문에 브라우저들은 HTML5기술을 수용하기 위해
  경쟁 중이며, 다양한 자바스크립트 라이브러리들이 나오고 개발되어지고 있다.
  HTML5는 기존의 문서기반 정보를 탐색하기위한 방식에 불과했다면,
  HTML웹환경에서 Application platform을 그대로 가지게 된 것이고 API를 가지고
  HTML5기능을 접목시키면 기존에 데스크탑에 있었던 application을
   Web에서 그대로 구현 가능해진 것이다.

  JavaScript + Html5 + Ideas, Libraries, Tool, API = Marketplace

1. HTML5
     ▷ HTML5가 모바일에 중요한 이유는 각 모바일 플랫폼용 네이티브앱을
          기간내에 모두 만들기는 어렵기 때문이다.
     ▷ 한글 HTML5 Spec : http://clearboth.org/html5/spec.html
     ▷ HTML5의 Tutorial & Presentation : http://www.html5rocks.com/
     ▷ IE에서 HTML5에 새로 추가된 element들을 사용할수 있게 도와준다.
          :  http://code.google.com/p/html5shiv/
     ▷ 브라우저가 신기능을 지원하는지 체크하여 조건분기 할 수 있게 도와준다.
          : http://www.modernizr.com/
     ▷ 웹개발자들을 위해 정리된 HTML5 Spec : http://developers.whatwg.org/
     ▷ HTML5의 Video, Audio 지원이 안되는 브라우저를 지원한다.
          : http://videojs.com/, http://kolber.github.com/audiojs/
     ▷ HTML5 Initializer라는 서비스는 HTML5템플릿을 제공하서 프로젝트 진행을 빠르게
          시작할 수 있도록 한다. : http://www.cssclip.com

2. Javascript
     ▷ zepto.js 는 모바일을 위한 자바스크립트 라이브러리. jQuery 와 호환되는 문법을
          사용하지만 jQuery보다 가벼운 용량이어서 용량에 대한 부담을 줄여준다.
     ▷ 서버사이드 자바스크립트 node.js는 구굴크롬의 V8엔진을 사용하며,
          대용량 서버에 적용할수록 기존 서버에 비해 좋은 효율을 보여준다.
          자바스크립트로 서버의 모든 기능들을 활용할 수 있도록 계속 개발되어지고 있다.
     ▷ 브라우저가 아닌 서버/데스크탑 어플을 자바스크립트로 작성하기 위한 Common.js
          란 스펙이 있는데, 이는 node.js를 따르고 있고 그 외에도 CommonJS를 통한
          많은 시도들이 되어지고 있다.
     ▷ CoffeeScript 자바스크립트로 컴파일되는 간단한 언어
          .: 나 { 가 없는 영어와 같은 간단한 문법을 사용하는데, 문법이 간결해지고 더 빠르게
           실행될 수 있도록 컴파일 해주기 때문에 익숙해지면 굉장히 유용하다.



3. Responsive Web Design
     ▷ 다양한 사이즈의 해상도에 자동으로 대응하기 위한 웹페이지 제작 방법
          - Screen Size, Platform, Orientation에 반응

4. Web App Stores
     ▷ Crome Webstore https://chrome.google.com/webstore
          : 구글에서 payment 부분을 개발해놓았기 때문에 웹앱 개발자들이 자신이 만든
             앱을 쉽게 팔아 수직을 얻을 수 있는 환경이 생겼다는 점에서 큰 의미
     ▷ GetJar http://www.getjar.com/
          : 멀티플랫폼 앱스토어, 모든 플랫폼의 앱을 동시에 취급,판매한다.
             Getjar 는 사용자의 단말정보를 저장하여 사용자에게 필요한 앱만을 리스트에
              보여주어 사용자가 신경쓰지 않고 편하게 사용 할 수 있다.

5. Hybrid App
     ▷ Native App  과 WebApp의 기술을 합친 형태.
     ▷ 외형은 네이티브, 내용은 웹앱으로 만든것을 말한다.
     ▷ 멀티플렛폼이 가능한 장점이 있으나,
           네이티브 대비 웹부분의 속도가 문제가 되기도 한다.
     ▷ Hybrid App의 범위
         : 서버에 접속해서 웹앱을 실행하는 방식부터 NativeApp내에서 약간의 WebView를
            사용하는 방식까지 해당되는 범위가 넓고, 업데이트가 잦은 부분은 웹으로
            구현하면 관리에 용이하다.
     ▷ Hybrid App 개발방법.
          : 작업은 웹앱으로 모두 마친 뒤에 Appspresso, PhoneGap, Titanium 같은
             프레임웍으로 감싸준다. 프레임웍에서 Device 기능을 컨트롤 할 수 있는
             기능을 제공하여 이용할 수 있다.


크리에이티브 커먼즈 라이센스
Creative Commons License
이올린에 북마크하기(0) 이올린에 추천하기(0)

Posted by 홍반장

2011/03/28 17:18 2011/03/28 17:18
, , , , , , ,
Response
No Trackback , No Comment
RSS :
http://tcbs17.cafe24.com/tc/rss/response/6004

# javascript library story

1. 모든 요소들을 읽어 들인다.

2. 모든 요소들을 관리할 수 있다.

3. 모바일 디바이스에 최적화한다(해상도 or 장비).

4. CSS로 관리되고, HTML로 표현한다.

5. 필요기능을 우선순위로 추가하고, 최신버전은 수시 배포한다.

크리에이티브 커먼즈 라이센스
Creative Commons License
이올린에 북마크하기(0) 이올린에 추천하기(0)

Posted by 홍반장

2011/03/28 10:47 2011/03/28 10:47
,
Response
No Trackback , No Comment
RSS :
http://tcbs17.cafe24.com/tc/rss/response/6001

[Web] PhoneGap API Document

http://docs.phonegap.com/index.html

API Reference


API Reference

  • Accelerometer

    Tap into the device's motion sensor.
  • Camera

    Capture a photo using the device's camera.
  • Compass

    Obtain the direction that the device is pointing.
  • Contacts

    Work with the devices contact database.
  • Device

    Gather device specific information.
  • Events

    Hook into native events through JavaScript.
  • File

    Hook into native file system through JavaScript.
  • Geolocation

    Make your application location aware.
  • Media

    Record and play back audio files.
  • Network

    Quickly check the network state.
  • Notification

    Visual, audible, and tactile device notifications.
  • Storage

    Hook into the devices native storage options.
크리에이티브 커먼즈 라이센스
Creative Commons License
이올린에 북마크하기(0) 이올린에 추천하기(0)

Posted by 홍반장

2011/03/23 11:22 2011/03/23 11:22
, , ,
Response
No Trackback , No Comment
RSS :
http://tcbs17.cafe24.com/tc/rss/response/5983

closure-compiler - http://code.google.com/p/closure-compiler/
Compressor - http://javascriptcompressor.com/
크리에이티브 커먼즈 라이센스
Creative Commons License
이올린에 북마크하기(0) 이올린에 추천하기(0)

Posted by 홍반장

2011/03/18 14:05 2011/03/18 14:05
,
Response
No Trackback , No Comment
RSS :
http://tcbs17.cafe24.com/tc/rss/response/5957

« Previous : 1 : 2 : 3 : 4 : Next »

블로그 이미지

- 홍반장

Archives

Recent Trackbacks

Calendar

«   2024/03   »
          1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30
31            
Statistics Graph

Site Stats

Total hits:
175709
Today:
139
Yesterday:
96