밥을먹는선비의 超连接技术 연구소

일단 여기서 아두이노용 블루투스 쉴드를 구입했습니다.

http://www.eleparts.co.kr/EPX7NVUD

제품 설명에 슬래이브 모드를 지원한다고 되어있는데 상호두개 동시에 페어링할필요없이 한쪽(pc,안드로이드)에서 일방적으로 페어링을 걸어 사용할수있다는 뜻인듯합니다.

AT설정이라는것이있는데 그것으로 페스워드나 이름을 바꿀수 있는거같습니다.

그걸 하려면 좌측 딥스위치를 To FT232로 맞추어야하나봅니다.

그건 나중에 하고 일단은 암호가 기본으로 1234되어있다고 해서 To board(통신, 페어링모드)로 맞춰놓고 작업을 시작했습니다.

아두이노 우노에 붙일거라서 5v세팅을 했습니다.

To Board , 5V 세팅 하고 우노에 장착!

9V~12V 사이의 외부 전원연결  이렇게 하면 일단 하드웨어는 세팅완료

일단 목표는 씨리얼로 'a' 를 전송하면 13번 핀을 high 로하고 'b'를 전송하면 low로 하는 간단한 테스트를 해보려합니다.

맥에서 장비설정을 엽니다.

쉴드이름이 초기값은  itead입니다. 이것을 선택해줍니다.

위와 같이 연결실패했다고 나오면 암호 옵션을 클릭합니다.

특정 암호 사용을 선택하고 암호는 초기값인 '1234' 를 입력해 줍니다.

환경설정에 블루투스에들어가 보면 연결이 안됨으로 나오는데 걱정하실 필요없습니다. 

이러면정상입니다. 맥에서는 씨리얼 통신프로그램을 켜고 접속을 하면 그때 연결이라고 뜨게됩니다.

이렇게 하면 몇가지 설치를 한후 bt쉴드가 시리얼포트로 잡히게 됩니다. 

그럼 이제부터는 씨리얼포트처럼 사용하면 되는겁니다. 참 쉽겠죠?

이제 연결만 하면됩니다.

일단 아두이노에 다음 코드를 주입합니다.

(참고로 업로드할때는 FT232로 해놓으시고 하셔야합니다.)

/*

basic serial i/o tutorial

created by gbox3d 2012 12 23

*/

void setup() {

  // initialize serial:

  Serial.begin(9600);

  pinMode(13,OUTPUT);

  digitalWrite(13,HIGH);

}

void loop() {

  // if there's any serial available, read it:

  while (Serial.available() > 0) {

    char flag = Serial.read();

    if(flag == 'a') {

      digitalWrite(13,HIGH);

    }

    else if(flag == 'b') {

      digitalWrite(13,LOW);

    }

  }

}

방금 잡은 씨리얼로 잡힌 블루투스 쉴드를 선택합니다. 이름은 기기에 따라 달라 질수있습니다.

맥에서는 tty로 잡으셔야합니다.

시연 동영상

- AT커멘드 진입하기

FT232로 딥스위치를 세팅합니다. 그리고 연결된 아두이노의 씨리얼포트로 접속합니다.(아주중요. 블루투스포트가 아님)

보드레이트9600입니다. 

No line ending을 선택합니다.(다른거선택하면 OK가 보이지않습니다.)

AT 커멘드가 제대로먹히면 다음과같이 OK 메씨지가 뜸니다.

나머지 명령어는 첨부파일을 참고하세요.

참고자료 

메뉴얼 :  

BTShieldV2.1.pdf

-맥용 설치법-

1. node.js 확인

먼저 노드를 설치합니다.(노드에 대한 약간의 선행학습이 필요합니다.)

터미널창을 여시고 node 와 npm이 제데로 동작하는 확인합니다.

npm이라는것이 있는데요. 이것은 노드를설치하면 같이 깔립니다.

노드 플러그인을 설치해주는 유틸입니다. 

node 실행해서 간단하게 핼로월드 찍어보기

터미널에서 npm 실행화면

2. 노드위노설치하기

노드위노(noduino )는 듀이노(duino)를 사용한 서버 프레임웍입니다. 

터미널에서 다음을 입력해봅니다.

ls /dev | grep usb

아무것도 출력되지않으면 아두이노보드가 피씨와 연결이 안된겁니다. 연결설정을 확인하시고(리눅스, macosx 용)

1. crw-rw-rw- 1 root wheel 18, 17 24 Feb 22:54 cu.usbmodem1d11
2. crw-rw-rw- 1 root wheel 18, 16 24 Feb 22:00 tty.usbmodem1d11

가 출력되었다면 정상적으로 보드가 잡힌겁니다.( 윈도우는 설정에서 확인하세요.)

http://semu.github.com/noduino/ 에 접속하셔셔 파일을 다운 받거나..

git clone git://github.com/semu/noduino.git 으로 프로잭트저장소를 끌어 옵니다.

파일첨부합니다. 그러나 되도록 최신버전을 받아서 하시는것이 좋을듯^^;

noduino-master.zip

암튼 다운받은 파일의 압축을 푸시고 터미널창을 여신다음 cd 를 입력하시고 압축을 푼 폴더를 터미널창에 끌어다 놓습니다.

ls 로 폴더로 제데로 이동했는지 확인합니다.

그다음 npm으로 노드위노(nodeuino)에 필요한 노드확장플러그인들을 설치합니다.

npm install 을 쳐줍니다.

3. 노드위노 전용 듀이노(duino) 설치하기

듀이노는 노드위노와는 다른것입니다. 듀이노는 단순히 자바스크립트로 아두이노를 제어하는 프로잭트이고 여기에 노드를 붙이는것은 노드위노가 해주게됩니다. 

그래서 노드위노용 듀이노가 필요합니다. 그냥 듀이노를 설치하시면 안됩니다.

여러 버전의 듀이노가 있지만 꼭 여기서 듀이노를 다운받아서 해야합니다.

https://github.com/semu/duino

duino-master.zip

마찬가지로 압축을 풀어 듀이노(duino) 폴더에 넣어줍니다.

node_modules 폴더 안에 있는 듀이노와는 다르므로 이것을 카피하시면 안되고 새로 받으셔야 합니다.

duino/src/du.ino 파일을 아두이노 보드에 업로드합니다.

3. 예제 실행하기

텍스트 편집기로 다음과 같이 간단한 예제를 만들어봅니다.

var requirejs = require('requirejs');

requirejs.config({nodeRequire: require});

requirejs(['./public/scripts/libs/Noduino','./public/scripts/libs/Noduino.Serial','./public/scripts/libs/Logger'],

        function(NoduinoObj,NoduinoConnector,logger) {

            console.log('load success NoduinoObj module');

            var Noduino = new NoduinoObj({debug: true, host: 'http://localhost:8090'}, NoduinoConnector,logger);

            Noduino.connect(function(err, board) {

                if (err) {

                    console.log('************device not ready');

                    return console.log(err);

                }

                console.log('Connected to board');

            });

        });

그리고 1.js 저장합니다.

1.js

터미널에서 node 1.js 를 타이핑해줍니다.

다음과 같이 설정이 초기화되고 제데로 모듈이 동작하지만 아두이노 보드가 없기 때문에 디바이스 못찾는다고 나옵니다.

물론 아두이노 보드가 있으면 커넥트 됐다는 메쎄지가 나오겠죠

암튼 노드에 아두이노 제어모듈은 제데로 설치된것입니다. 이제 쇼핑몰로 가서 아두이노 구매 하시고 즐겨보시길 바람니다.

보드구입 하고 다시 실행해보면...

다음과 같이 나옵니다.

1. 모델 클래스 만들기

Model 객체로부터 상속받아서 새로운 클래스를정의 할수있다.

var Person = Backbone.Model.extend({

        initialize: function(data) {

            console.log('welcome backbone');

            console.log('hello ' + data.name);

        }

    });

스크립트언어에 익숙하지않다면 약간 이상해보일수도있지만 이것은 스크립트언어이기때문에 가능한 문법이다. 컴파일러형언어에서는 클래스와 객체가 명확히 나누어져있다. 클래스는 붕어빵틀역역활을 하고 인스턴스 객체는 그틀로 만들어진 붕어빠같은것이지만

스크립트언어에서는 붕어빵틀과 붕어빵의 구분이 명확하지않다. 스크립트언어에서는 인스턴스만 객체 있을뿐이다. 왜냐하면 컴파일과 실행이 따로 분리되어있지않고 항상실행상태로 간주되기때문이다. 코딩을 하는중간에도 실행중인것이다. 그래서 틀이라는 개념이 컴파일러형언어처럼 경직되어있지않다.

그래서 위와같이 어떤 함수 객체가 새로운 함수 객체를 만들어 반환할수도있고 이미만들어진 객체에 새로운 멤버데이터가 추가 될수도있는것이다.

Person은 인스턴스객체 이면서 동시에 클래스가 될수도있다.(c++ 프로그래머만 알아들을수있는 말?)

Peroson이 새로운 인스턴스를 만들려면 다음과 같이한다.

var somebody = new Person({name:'tommy'});

{name:'tommy'} 은 생성자에 넘겨주는 인자와 같은 역활을한다. 이 인자는 그대로 initialize함수의 인자로 전달된다.

2. 멤버 다루기

멤버 변수에 접근하는 방법은

내부에서는 

this.attributes.name

this.get('name'); 두가지로 가능하다.

외부에서접근은 

somebody.attributes.name; 

somebody.get('name');

역시 두가지 모두 가능하다.

somebody.toJSON();

json형태로 모델데이터를 내보낼수도 있다.

3. initialize 함수

생성자에서 넣어준값이 파라메터로 넘어올수있고 또는 함수내에서 this.attributes 형태로 받아볼수있다.

4. defaults 구조체

초기 값들을 설정해주는 일종의 초기화 객체이다. 단순히 객체만 값을 초기화 해줄목적이면 initialize에서보다 defaults에서 단순하게 정의만 해주는게 낫다.

Person = Backbone.Model.extend(

{ 

 initialize: function() { console.log('wellcome' + this.get('name')); }, 

 defaults: { name: 'lsz', age: 42, children: [] }

 });

이렇게 하면 name의 기본값은 'lsz가된다.

5. 리스너

값이 바뀌면 연결해서 함수가 자동으로 호출되게 하는 개념이다.

function start() {

    Person = Backbone.Model.extend({

        initialize: function() {

            console.log('wellcome' + this.get('name'));

            /*

             * 리스너 설정 예 

             */

            this.bind("change:name", function() {

                console.log('change : ' + this.get('name'));

            });

            this.bind('error',function(model,error) {

                console.log('error occur~');

                console.log(model);

                console.log(error);

            })

        },

        defaults: {

            name: 'lsz',

            age: 42,

            children: []

        },

        replaceNameAttr: function(_name) {

            this.set({name:_name});

        },

        validate : function(attributes) {

          if(attributes.age < 0) {

              return 'u cant have negative age!';

          }  

        }

    });

    var person = new Person();

    person.set({name: 'tommy'});

    console.log(person.get('name'));

    person.set({age:-2});

}

bind 함수를 통해서 값과 변화가 있을때 연결할 함수를 정한다. 예제에서는 name값이 바뀌면 자동으로 인자로 연결해준 함수가 호출된다.

validate 함수를 이용해서 멤버변수값들의 범위를 지정할수있다. 만약 적절하지못한 범위의 값이 들어오면 해당 메시지를 보내거나 특정한 작업을 수행할수있다. 여기서는 age가 음수값이 나오면 오류 메씨지를 리턴하도록 했다.

bind 에서 'error'로 묶어진 함수에서 처리가된다. 묶어진 함수의 첫번째 인자로는 에러가 유발된 객체가 오고 두번째에는 validate에서 넘어온 메씨지나 오브잭트가 온다.

6. 상속

Person = Backbone.Model.extend({

        initialize: function(data) {

            console.log('init person');

        },

        test: function() {

            console.log('test!' + this.attributes.name);

        },

        test2: function() {

            console.log('person test!' + this.attributes.name);

        }

    });

    Soldier = Person.extend({

        initialize: function(data) {

            console.log('init soldier');

        },

        test2: function() {

            console.log('Soldier test!' + this.attributes.name);

        }

    });

    var soldier = new Soldier({name: 'tom', age: 27});

    soldier.test();

    soldier.test2();

    var person = new Person({name: 'jery', age: 27});

    person.test2();

Solider 를 Person을 상속받아서 만들었다. 이렇게 만들어진 soldier 는 test함수를 정의 하지 않았더라도 부모의 test 함수를 호출하게된다.

기본적으로 클릭이밴트는 약 300ms의 딜레이 시간을 가지게되므로 사용자 반응성이 매우 취약하다고 볼수있다.

그래서...

터치감 개선의 핵심은 click 이밴트를 사용하지않고 touchstart 사용하는것에서 시작한다.

그러나 데스크탑에서도 동시에 서비스를 하고싶다면 터치이밴트가 동작하지않는 문제가 있다.

vmousedown이밴트를 사용하면 데스크탑에서 마우스로 터치 디바이스에서는 touchstart자동으로 바꿔서 전달하게된다.

리턴값을 false 로 하면 부모로 이밴트가 전달되는것과 기본 이밴트처리가되는것을 막아준다.

그렇지만 이것으로 부족하다 jqm 에서 a태그 또는 button 태그는 touch가 일어나면 vclick을 강제로 한번씩 발생시킨다.

그래서 아래와 같이 vclick이밴트를 따로 한번 더 처리하여준다. 

li 의 하위 단계에있는 a태그에 들어오는 vclick이밴트가 더이상 전파되지않도록 하고 기본적인으로 해주는 동작들을 금지 시킨다.(핸들러 함수객체에서  false값을 반환하게 해서... ) 그렇지않으면 의도하지않게 vclick이밴트가 한번더 들어오게된다. 그렇게 되면 버튼이 두번눌러지는등의 오동작이 일어날수있다.

-예제 소스

무제 폴더.zip

사실 내가 백본에 관심을 가지게 된것은 우연한것은 아니였다.

객체지향 페러다임에 염증이난 상태에서 펑션널 프로그래밍 페러다임에 푹빠져있을때 

내가 하는 코드가 해면체같다는 느낌을 받았다.

VC(뷰 와 컨트롤) 만 가지고 프로그램을 하면 쉽게 모든것을 할수있다는 착각도 잠시했던거같다.

일리히트엔진에 빠져서 보낸날들동안 집착했던 모델을 버리고 그동안 잊고살았던 뷰와 컨트롤과 함께 즐거운시간을 보내던나는

너무 소모적인 코드가 나온다는 사실을 깨닭기 까지는 그다지오랜시간이 필요하지는 않았다.

일리히트엔진의 장점이자 최대 단점은 모델이 너무 견고하다는 점이다.

모델이 견고할(비중이 클...)경우를 쉽게 설명하자면 이렇다.

건물을 지어야하는데 골격이 튼튼하다면 굉장히 빠르고 쉽게 높이 건물을 올릴수있다.

그러나 건물의 형태는 괭장히 획일적이고 밋밋하게 지어야만한다.(한마디로 안이쁘다)

그런면에서 일리히트엔진으로 작업을 했던 동안 나는 매우 큰 딜래마에 빠져들곤했다. 게임이라는 매우 불안정하고 다루기 힘든 주조물을 경직된 틀안에 가두어 개발하는게 과연 정답일까?

물론 학생들이 모델에 대한 이해를 돕는데는 좋지만 이것이과연 실용적으로 사용될수있을런지는 계속 의문이 많았다.

그래서 실험적으로 아주 반대의 길을 가보고싶었다. 재물은 바로 웹(html5)이라는 아직은 음지에 머물러있는(물론 게임쪽에서만) 신물질이였다.

이것으로 처음한 실험이 모델을 완전 배제한체 프로잭트를 진행해보는것이였다. 뷰만 컨트롤만 가지고 개발을 하는것이다.

아주 빠른속도로 결과물이 나왔지만 매우 불안정해서 나오자 마자 바로 사라져버리는것이 문제였다.

즉 프로잭트가 진행되는 동안에 코드들이 모두 부패해버려 결과물이 나올때가 되면 이미 완전히 모든 코드가 썩어버려서 더이상 프로잭트를 진행할수가없었다.

모델없이 개발하는것은 마치 아키라에서 데츠오가 궁극의 힘을 얻고도 제어가 안되어 파멸했던 상황과 같다.

MVC 의 세가지 요소의 적절한 배합이 중요하다는것을 정말 뼈아프게 느꼇다. 그리고 아직은 내가 배워야할게 너무나 많다는 사실에 한편은 실망스럽기도 하지만 다른 한편으로는 이제 막 바다가에 나온 소년처럼 설레이기도한다.

원자로로 치자면 VC가 발생시키는  온도를 제어 할수 있는 제어봉이 바로 M 이다.

이것을 기억하며 Backbone.js를 시작하자...

fbx를 일리히트에서 구동시키려한것은 어쩌면 저의 마지막 일리히트엔진에 대한 연구주제 였습니다.

관심가져주신 분들 덕분에 잘 마칠수있었던거 같습니다.

부족한 발표 내용 끝까지 들어주신 분들께 다시 한번 감사드림니다.

다음에는 웹표준기술에 관련된 내용으로 더알차게 준비할예정입니다.

도움이 되셨으면 좋겠습니다.

소스와 ppt파일을 같이 첨부해드립니다.

fbx와일리히트엔진의만남.ppt

예제 파일입니다.

ndc12_src.zip