spectrum learns to dig

느려터진 안드로이드 에뮬은 버리고 VM을 쓰자.

2012-02-24T06:17:00.000+09:00

iOS개발 환경이 안드로이드보다 우월점은 여러가지가 있겠지만
개인적으로 가장 큰부분이라고 생각하는 점이 iOS Simulator 의 넘사벽 속도다.
사실 iOS 의 경우 Emulator 가 아니라 Simulator 라는 훼이크를 써서 그런건데.
하드웨어+소프트웨어를 같이 하는 회사만이 쓸 수 있는 필살기라 볼 수 있다.

반면 안드로이드의 경우 ARM 에뮬레이터를 사용하는데
이게 참 못만들었다.
플스에뮬이나 GBA에뮬 반정도만 만들어도 써줄텐데 아직 갈길이 멀다.
그래서 구시렁 거리면서 하드웨어를 연결해서 테스트를 하고 있는데
역시 USB연결하는 건 불편하고
apk 를 전송하는 과정도 그다지 빠르지 않아서 개발 생산성이 월등히 나아지지는 않는다.
루팅을 하면 wifi 를 통해 apk 를 인스톨 할 수 있다고 해서
몇 가지를 해보았으나 잘 모르겠지만 인스톨까진 잘 되었는데 디버깅 모드로 실행이 되지 않아 그만두었다. 게다가 전송속도도 USB보다 wifi가 느리고 맘에 들지 않더라.
그러던중 stackoverflow.com(늘 신세지고 있습니다) 에서

"VM으로 안드로이드를 띄워서 adb connect 하면 좋아!"
라는 글에 눈이 번쩍.

시행착오를 몇번 했지만 의외로 간단하더라.

1. VMWare건 VirtualBox건 상관없다. VM호스트를 준비하자.
2. http://www.android-x86.org/download 로 가서 Deprecated x86 2.2 generic 을 받자.

Q) 왜 Deprecated 인 2.2 generic 을 받나요. Deprecated는 쓰면 안되는 거 아님?
A) http://mariuz.android-dev.ro/vm.iso.7z 도 있다고 한다. http://www.android-x86.org/download 에 있는 요즘 것들은 죄다 안된다.

3. 죄다 일단 Default 설정에 yes yes 하고 설치한다. 한글 문서가 필요한 분은 "카카오톡 PC"로 검색하면 만족하실만한 내용이 나올 것이다.
4. 부팅 후 Live CD 와 Installation이 나오는데 당연히 Installation
5. Choose Partition / Create/Modify partitions
6. 파티션 만들자. new / primary / bootable / write / yes 하고 quit
7. Choose Partition / sda1 ... 가 첫번째로 추가된 것을 확인하고 엔터
8. ext3 으로 포멧
9. grub 설치 yes
10. /system 디렉토리를 읽고 쓰기할거냐라고 묻는데 맘대로 하세요. yes 했음.
11. Congratulation 나오면 Create a fake SD card 엔터
12. 리붓
13. HDPI 나 MDPI 둘중 선택 (해상도가 다르다)
14. 겁나 빠른 부팅
15. 이 화면을 보았으면 일단 OK

16. alt+f1을 눌러 console 상태로 들어간다.
17. ifconfig eth0 을 입력하여 ethernet 어댑터의 ip 정보를 메모한다.
18. 터미널 혹은 커맨드 창을 열어 adb connect <ip> 때려서 연결

19. 5555 포트에 연결한 것을 확인한다.
20. 수고하셨습니다.

Eclipse/IntelliJ 등에서 실행하면 에뮬레이터가 아니라 연결한다.
말도 안되게 빠르다;;;;;
20MB 넘는 apk파일 구동하는데 업로드에서 인스톨까지 2초면 된다.
게임같이 하드웨어 의존이 많은 어플리케이션이면 모를까 느려터진 에뮬을 쓸 이유가 없다.

ESC,마우스 오른쪽버튼이 Back
Cmd(아마 윈도우에선 CTRL?) 키가 HOME
ALT+F4, ALT+F6 F6 이 전원 버튼 꾸욱
ALT+F1 이 console mode
ALT+F7 이 복귀
ALT+F3 이 Call log

대충 이정도 메뉴키는 뭔지 모르겠다. windows 에선 윈도우키라는 소리가 있다.

javascript 3d round carousel

2012-02-23T14:33:00.006+09:00

http://jsdo.it/spectrum/carousel
역시나 맘에 드는게 없어서 만들었다.
어렵지 않을려나 싶었는데 생각보다 얼마 안걸림.
역시 모닝 코딩인가.
querySelectorAll 때문에 $s 랑, items() 를 프로토타입에서 array를 반환하도록 하여 forEach를 돌릴 수 있도록 소금(salt)을 쳤다.

var $=function(selector) {
return document.querySelector(selector);
};

var $s=function(selector) {
return document.querySelectorAll(selector);
};

NodeList.prototype.items=function() {
var array=[];
for (var i=0; i<this.length; i++) {
array[i]=this.item(i);
}
return array;
};
var p={
objects: [],
idx: 0,
radius: 100,
onLoad: function() {
$('#turnLeft').onclick=p.turnLeft;
$('#turnRight').onclick=p.turnRight;
},
turnLeft: function() {
p.objects.items().forEach(function(v) {
v.classList.add('ease');
});
p.idx--;
p.renderCarousel(p.idx);
},
turnRight: function() {
p.objects.items().forEach(function(v) {
v.classList.add('ease');
});
p.idx++;
p.renderCarousel(p.idx);
},
renderCarousel: function(idx) {
p.objects.items().forEach(function(v,k) {
var degree = 90+(k+idx)* (360/p.objects.length);
var x = $('ul').offsetWidth/2 - v.offsetWidth/2 +
p.radius*Math.cos(degree*Math.PI/180);
var y = $('ul').offsetHeight/2 - v.offsetHeight/2 +
p.radius*Math.sin(degree*Math.PI/180) / 2;
// cos의 min/max 는 270일때 -1, 90일때 1
// 1 - 하면 [-1, 1] > [2, 0] (뒤집힘)
// / 2 하면 [1, 0]이 됨.
// * (1-2/5) 하면 [3/5, 0]
// 1 - 하면 [2/5, 1]
var scale = (1-(1-Math.sin(degree*Math.PI/180))/2*(1-2/5));
v.setAttribute('style',
'left:'+parseInt(x,10)+'px;'+
'top:'+parseInt(y,10)+'px;'+
'z-index:'+parseInt(y,10)+';'+
'-webkit-transform: scale('+scale+');'
);
});
}
};
document.ontouchmove = function(e){ e.preventDefault(); };
p.objects=$s('ul#container>li');
p.renderCarousel(p.idx);
window.onload=p.onLoad;

ul 안에 li를 몇개든 넣어보자.
중심을 기준으로 반지름은 100px, 종횡비는 2/5:1 정도인데 입맛대로 수정하면 됨.

html5 audio player를 만들어 보았다. #2

2012-02-20T23:29:00.001+09:00

html5 audio player를 만들어 보았다.
에서 언급했던 audio player 를 조금 업데이트.

마찬가지로 소스는 이곳 : http://jsdo.it/spectrum/webAudioPlayer
플레이 전용(모바일 등등)은 http://jsrun.it/spectrum/webAudioPlayer

전체 시간을 보여주고 재생 배속을 설정할 수 있다.
소스는 대동소이.
duration 을 사용. 전체 재생 길이를 보여주고
playbackRate 으로 재생 배속을 변경하도록 하였다.
http://dev.w3.org/html5/spec/Overview.html#htmlmediaelement
의외로 오디오 재생 피치를 유지한 상태로 정말 배속만 변하더라.
double 값이라서 세세한 조정은 가능함.
아쉽게도 android/iOS에서는 배속 지원은 안함.

$=function(element) {
return document.querySelector(element);
};
p={
audio : null,
onLoad: function() {
p.audio = new Audio('http://k003.kiwi6.com/hotlink/3dgmyavs49/your_name_ft_gaduk.mp3');
$('#play').onclick=p.onPlay;
$('#stop').onclick=p.onStop;
$('#pause').onclick=p.onPause;
$('#rew10').onclick=p.on10rew;
$('#ff10').onclick=p.on10ff;
$('#rate').onclick=p.onRate;
p.audio.addEventListener('timeupdate', p.onTimeUpdate, false);
},
onPlay: function() {
p.audio.play();
},
onStop: function() {
p.audio.currentTime = 0;
p.onPause();
},
onPause: function() {
p.audio.pause();
},
on10rew: function() {
p.audio.currentTime -=10;
},
on10ff: function() {
p.audio.currentTime +=10;
},
onRate: function() {
var rate = $('#rate').textContent;
$('#rate').textContent= rate === '1x' ? '2x' : rate === '2x' ? '1/2x' : '1x';
rate = $('#rate').textContent;
p.audio.playbackRate = rate === '1x' ? 1.0 : rate=== '2x' ? 2.0 : 0.5;
},
onTimeUpdate : function() {
var currTime = p.audio.currentTime;
$('#time').textContent=parseInt(currTime/60,10)+':'+
parseInt(currTime%60,10) + '/' +
parseInt(p.audio.duration/60,10)+':'+
parseInt(p.audio.duration%60,10);
}
};
window.onload=p.onLoad;

routing module을 만들자 - handler

2012-02-16T17:27:00.001+09:00

callback을 바로 넣을 수는 없어보이고
type 에 func 을 정의하고 달면 된다.
나름 명시적이네.

역시 소스는 여기

package main

import (
"fmt"
)

type Handler func(method string)

type Route struct {
Method,Pattern string
}

type Routes struct {
Routes []Route
}
func (r Routes) routeCount() int {
return len(r.Routes)
}
func (r *Routes) addRoute(method, pattern string, handler Handler) {
r.Routes=append(r.Routes, Route{Method:method, Pattern:pattern})
fmt.Printf("route Count : %d\n", len(r.Routes))
handler(method)
}
func (r *Routes) GET(pattern string, handler Handler) {
r.addRoute("GET", pattern, handler)
}
func (r *Routes) POST(pattern string, handler Handler) {
r.addRoute("POST", pattern, handler)
}
func (r *Routes) PUT(pattern string, handler Handler) {
r.addRoute("PUT", pattern, handler)
}
func (r *Routes) DELETE(pattern string, handler Handler) {
r.addRoute("DELETE", pattern, handler)
}
func handler(method string) {
fmt.Printf("%s handler executed \n", method)
}

func main() {
r:=new(Routes)
r.GET("/user/:user", handler)
r.PUT("/add/:user", handler)
r.POST("/update/:user", handler)
r.DELETE("/delete/:user", handler)
for _,v:=range r.Routes {
fmt.Printf("%s:%s\n",v.Method, v.Pattern)
}
}

------
의도는 이게 아닌데 빨리 무엇이든 달아보고 싶었다.

route Count : 1
GET handler executed 
route Count : 2
PUT handler executed 
route Count : 3
POST handler executed 
route Count : 4
DELETE handler executed 
GET:/user/:user
PUT:/add/:user
POST:/update/:user
DELETE:/delete/:user

routing module을 만들자 - REST 붙이기

2012-02-16T03:08:00.005+09:00

별 중요한 건 없지만 역시 func (variable struct)를 쓰는 패턴을 학습한다.
routeCount 를 구할땐 func(r Routes)를
addRoute, GET/POST/PUT/DELETE를 할땐 func(r *Routes) 를 쓰는 부분에 주목하자.

역시 소스는 여기
package main

import (
"fmt"
)

type Route struct {
Method,Pattern string
}
type Routes struct {
Routes []Route
}
func (r Routes) routeCount() int {
return len(r.Routes)
}
func (r *Routes) addRoute(method, pattern string) {
r.Routes=append(r.Routes, Route{Method:method, Pattern:pattern})
fmt.Printf("route Count : %d\n", len(r.Routes))
}
func (r *Routes) GET(pattern string) {
r.addRoute("GET", pattern)
}
func (r *Routes) POST(pattern string) {
r.addRoute("POST", pattern)
}
func (r *Routes) PUT(pattern string) {
r.addRoute("PUT", pattern)
}
func (r *Routes) DELETE(pattern string) {
r.addRoute("DELETE", pattern)
}
func main() {
r:=new(Routes)
r.GET("/user/:user")
r.PUT("/add/:user")
r.POST("/update/:user")
r.DELETE("/delete/:user")
for _,v:=range r.Routes {
fmt.Printf("%s:%s\n",v.Method, v.Pattern)
}
}

------
결과는 아래와 같다.
거의 준비가 다 되었다.
내일은 package 를 분리하고 handler를 달아봐야지.

route Count : 1
route Count : 2
route Count : 3
route Count : 4
GET:/user/:user
PUT:/add/:user
POST:/update/:user
DELETE:/delete/:user

go 공부 - struct에 대하여

2012-02-16T02:12:00.000+09:00

routing module 을 만들기 위해 객체를 작성해야겠다는 생각이 들어 struct와 function을 보고 있다.
아무래도 나온지 2년이나 되었지만 인지도가 약해서인지 제대로 돌아가는 소스가 적다.
직접 해보고 오류 메시지를 보면서 학습할 수 밖에.

go는 javascript 처럼 functional하기도 하고 prototypal 한 특성을 가지고 있다.
function 을 이용하는 법을 보고 있는데
얼추 비슷하게 쓸 수 있겠다.

http://golang.org/doc/ExpressivenessOfGo.pdf 중 21page 를 보면서 소스를 타이핑 해본다.

소스보기
package main

import (
"fmt"
"math"
)

type Point struct { x, y float64 }
func (p Point) Abs() float64 {
return math.Sqrt(p.x*p.x + p.y*p.y)
}

func main() {
p:=Point{3,4}
fmt.Printf("%f", p.Abs())
}

객체를 생성할땐 pascal 타입의 선언자 := 를 써서 쓸 수도 있고
다른 언어들처럼 new를 써서 main부분을 바꿔보면.

func main() {
p:=new(Point)
p.x = 3
p.y = 4
fmt.Printf("%f", p.Abs())
}
이런식으로 초기화 할 수도 있다.

아마도 javascript 로 쓰면 아래와 같을 것이다.
var Point = function(arg) {
var x;
var y;
x=arg.x;
y=arg.y;
return {
Abs : function() {
return Math.sqrt(x*x,y*y);
}
}
}
var p = new Point({x:3,y:4});
console.log(p.Abs());

이정도쯤 되겠네.
이렇게 비교하면서 보니까 상당히 괜찮군. 여러가지 생각이 든다.
func (p Point) 부분이 좀 어색하고 중복이 느껴지긴 한데 익숙해지면 재미있는 표현법이겠다.

go용 routing module을 만들고 있다.

2012-02-15T00:51:00.002+09:00

ror/sinatra 나 express.js 처럼 우아한 routing쓰고 싶은데
연습삼아 만들어보자는 생각에 서툰 코딩을 시작
/user/:userid 인 경우 \/user\/([^\/]+)\/? 이런 식으로 우아하게 정규식 치환을 했으면 했는데
string 패키지도 좀 볼겸. 단순하게 문자열 조작+뺑뺑이로 구현했다.
https://gist.github.com/1827639


package main




import "fmt"


import "strings"




var routes = []string{


  "/user/:id/friends/:friendsId",


  "/scrapbook/:scrapbookid/scrap/:scrapid",


  "/"}




func getParams(url string) map[string]string {


  for idx,_:=range routes {


    format := routes[idx]


    urlToken := strings.Split(url, "/")


    formatToken := strings.Split(format, "/")




    /* match pattern */


    if len(urlToken)==len(formatToken) && len(formatToken)>0 {


      params := make(map[string]string)


      match := true


      for i,v:=range formatToken {


        if len(v)>0 && v[0:1] == ":" {


          params[v[1:]]=urlToken[i]


        } else if v!=urlToken[i] {


          match =false


        }


      }


      if match {


        return params


      }


    }


  }


  return nil  


}




func main() {


  for i,v:=range getParams("/scrapbook/1ABCDE/scrap/401") {


    fmt.Printf("[%s:%s]",i,v)


  }


  fmt.Println("")


  for i,v:=range getParams("/user/spectrum/friends/cid") {


    fmt.Printf("[%s:%s]",i,v)


  }  


  fmt.Println("")


  for i,v:=range getParams("/root") {


    fmt.Printf("[%s:%s]",i,v)


  }  


  fmt.Println("")


}

웹에서 코드실행


/user/:id/friends/:friendsId


/scrapbook/:scrapbookid/scrap/:scrapid

에서 각각 :으로 시작하는 인자값을 뽑아낸다.

정적 타이핑 언어치고 재미있네. 에휴 Dennis Ritchie옹 생각에 눙무리 ;;ㅅ;;

html5 audio player를 만들어 보았다.

2012-02-11T08:17:00.001+09:00

http://jsdo.it/spectrum/webAudioPlayer

audio 객체를 이용한 플레이어.

onTimeUpdate 이벤트를 이용해 재생 시간을 업데이트하고

audio.currentTime 을 이용해 구간 이동.

크로스플랫폼(iOS/Android등등) 플레이어가 필요하다면 간단하게 구현할 수 있다.

$=function(element) {

return document.querySelector(element);

};

p={

audio : null,

onLoad: function() {

p.audio = new Audio('http://k003.kiwi6.com/hotlink/3dgmyavs49/your_name_ft_gaduk.mp3');

$('#play').onclick=p.onPlay;

$('#stop').onclick=p.onStop;

$('#pause').onclick=p.onPause;

$('#rew10').onclick=p.on10rew;

$('#ff10').onclick=p.on10ff;

p.audio.addEventListener('timeupdate', p.onTimeUpdate, false);

onPlay: function() {

p.audio.play();

onStop: function() {

p.audio.currentTime = 0;

p.onPause();

onPause: function() {

p.audio.pause();

on10rew: function() {

p.audio.currentTime -=10;

on10ff: function() {

p.audio.currentTime +=10;

onTimeUpdate : function() {

var currTime = p.audio.currentTime;

$('#time').textContent=parseInt(currTime/60,10)+':'+parseInt(currTime%60,10);

}

};

window.onload=p.onLoad;

추가:
http://www.w3.org/TR/html5/the-iframe-element.html#media-element
비디오도 요령은 같다.
duration, timeupdate 관련 내용은
http://www.w3.org/TR/html5/the-iframe-element.html#mediacontroller
이쪽을 보자. 내용이 상당히 방대하다.
하지만 다른 곳에서 검색하는 것보다 역시 레퍼런스를 보는 편이 세세한 걸 잘 알 수 있다.

go 언어용 개발환경으로 Chocolat을 써보자.

2012-02-11T04:46:00.003+09:00

http://chocolatapp.com
textmate 는 너무 무겁고 한글이 지원이 헬이어서 다른 걸 찾던 중 발견한 에디터인데
아직 beta지만 꽤 훌륭한 완성도라 애용하고 있다.
프리오더의 유혹이 (후덜덜; )

go 언어용 에디터로 쓰고 싶은데 찾아보니 Truffle 파일이 있더라.
textmate 용으로 먼저 만든게 아닌가 싶은데 textmate github 엔 없더라
https://github.com/chocolat/go.truffle

일단 chocolat 을 종료하고
해당 Truffle을 추가해보자.

git clone https://github.com/chocolat/go.truffle
하거나 zip download 해서 압축을 풀면 go.truffle 디렉토리가 생긴다.
응용프로그램 > Chocolat 2 를 선택하여 "패키지 내용 보기" 하면
Contents/SharedSupport/Truffles 가 있다.

go.truffle 디렉토리를 Truffles 아래에 복사한 후

Chocolat 을 기동해보자.

아이 좋아. =_=)
스샷은 go로 만든 웹서버. 사실 이것때문에 본거임. 심플하고 좋네.
Action > Go > Compile 을 실행하니

/Applications/Chocolat 2.app/Contents/SharedSupport/Truffles/go.truffle/support/gomate.rb:3:in `require': no such file to load -- /Applications/Chocolat 2.app/Contents/SharedSupport/Support/lib/tm/executor (LoadError) from /Applications/Chocolat 2.app/Contents/SharedSupport/Truffles/go.truffle/support/gomate.rb:3 from /var/folders/pO/pORC8XqvHvCCoR6XVJTsa++++TI/-Tmp-/CHTemporaryFiles/47C22E5B-C1A2-4309-A68B-F99B784A5776:3:in `require' from /var/folders/pO/pORC8XqvHvCCoR6XVJTsa++++TI/-Tmp-/CHTemporaryFiles/47C22E5B-C1A2-4309-A68B-F99B784A5776:3

에러를 뿜어낸다. (...)
그냥 편집기로만 쓰자.

다른 개발환경을 원한다면
$GOROOT/misc 아래 보면 아래와 같이 나오니

IntelliJIDEA
arm
bash
bbedit
cgo
chrome
dashboard
emacs
fraise
godoc
goplay
kate
notepadplus
swig
vim
xcode
zsh
입맛대로 골라쓰면 된다. 뭐 윈도우에서 쓸 수 있는 건 별로 없지만 notepadplus 하고 intelliJIDEA 정도쓰면 될 듯.
goclipse(http://code.google.com/p/goclipse)가 있긴한데 망할 이클립스용 플러그인들이 그렇듯이 잘 죽고 인내심 실험장이라는 평.

requestAnimFrame 사용

2012-02-09T08:06:00.003+09:00

http://jsdo.it/spectrum/rG9b
setInterval 로 bpm 카운터를 만들어봤더니 시간이 말도 안되게 안맞아서
requestAnimFrame을 사용해 오차를 측정해보았다.

var p = {
frameRate : 60,
fps : document.querySelector('#fps'),
deltaTime : 0,
onLoad : function() {
fps.onclick=p.onClick;
},
onClick : function() {
p.setDelta();
p.animationLoop();
},
setDelta : function() {
p.deltaTime = +(new Date());
},
animationLoop : function() {
var currentTime = +(new Date());
p.fps.innerHTML= (currentTime - p.deltaTime) +'msec/frame in 60frames';
p.setDelta();
requestAnimFrame(p.animationLoop);
}
};

window.onload=p.onLoad;
window.requestAnimFrame = (function(callback) {
return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame ||
function(callback) {
window.setTimeout(callback, 1000 / p.frameRate);
};
})();

16/17으로 일정한 지연이 발생한다. latency 가 16ms라고 보면 되는데 이정도면 쓸만한 편.
http://html5-demos.appspot.com/ 여기를 참조하였음.

client 에서도 node.js 처럼 require 를 써보자.

2012-02-04T04:07:00.003+09:00

문득 생각난 옛날 코드. 그땐 include 였나 싶기도 한데

html 문서에 script 태그를 덕지덕지 쓰는게 싫었다.

그래서 script 객체를 동적으로 생성하고 javascript 안에서 참조하도록 하곤 했는데 간단하게 만들어 보았다.

var require=function(a){document.getElementsByTagName("head")[0].appendChild(function(b){b.type="text/javascript";b.src=a;return b;}(document.createElement("script")));};

딱 한줄 넣어주시라.

require('source URI');

형식으로 사용하면 된다.

풀어서 쓰면 아래와 같다.

script 객체를 만들어서 속성을 정해주고 head에 append하는 함수인셈이다.

var require = function(URI) {

  document.getElementsByTagName('head')[0].appendChild(

    (function(s) {

      s.type='text/javascript';

      s.src=URI;

      return s;

    })(document.createElement('script'))

};

실제 사용예.

http://jsbin.com/ihamaf/edit#javascript,html,live




var require=function(a){document.getElementsByTagName("head")[0].appendChild(function(b){b.type="text/javascript";b.src=a;return b;}(document.createElement("script")));};
require('http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js');
window.onload=function(){
  $('p').text('realtime javascript loader');
};



실시간으로 생성하는 것이라 onload 이후에 사용해야한다는 점을 조심하자.

audiolib.js 를 사용하여 Web Audio 를 만져보자. 악기도 만들어보자.

2012-02-02T07:06:00.002+09:00

https://github.com/jussi-kalliokoski/audiolib.js/wiki/Tutorials

아무래도 안되겠어서 튜토리얼을 읽기로함.
Oscillator 를 써서 440hz 음을 내는 것부터 다시.

http://jsbin.com/uculiz/10/edit

var p = {
channelCount : 2,
frequency : 440,
preBufferSize : 0,
sampleRate : 44100,
gain:1.0,
rec:null,
dev:null,
audioElement:null,
onReady : function(){
$("#play").click(p.onPlay);
$("#stop").click(p.onStop);
},
onPlay: function() {
dev = audioLib.AudioDevice(function(buffer, channelCount) {
osc.append(buffer, channelCount);
}, p.channelCount);
osc = audioLib.Oscillator(dev.sampleRate, p.frequency);
},
onStop: function() {
dev.kill();
}
};

$().ready(p.onReady);

음 역시 이렇게 하는건 안끊기네. kill로 끊는 것도 잘되고. (근데 설명에선 chrome 이 kill을 지원안한다고 하네)
하지만 내가 원하는 건 이런게 아니야. tutorial을 다 봐도 시큰둥.

아 정말 새로 만들어야하나;

Web Audio로 악기를 만들자.

2012-02-02T04:35:00.001+09:00

잉여력이 넘치던 꼬꼬마 시절. 10년전쯤이었나. 2000년 이전이었는지 이후였는지 가물가물.
친구 taekie군과 함께 Lazy Bird Cook Book 이란 프로젝트명을 걸고 wb303이라는 TB-303 머신을 만든 적이 있다.
생긴건 대충 이런 식.

구조는 건반을 찍고 나면 Music Macro Language(http://en.wikipedia.org/wiki/Music_Macro_Language) 비슷한 일련의 문자열을 생성하고 wav 파일을 생성하도록 인자를 POST하는 구조였는데
MSX에서 play 명령문으로 음악을 만들어보거나 마비노기로 연주를 만들어본 사람이라면 익숙한 구조일것이다.

C 1 ! _

첫번째는 C D E F G A B (도레미파솔라시도) 로 음계를
두번째는 옥타브를
그 뒤부터 붙는 !와 _ , x는 각각 accent와 slide, mute 여부를 표기하는 방식으로 극히 단순하지만 나름 효율적인 구조여서 게시판이나 메일, 메신저 등등으로 간편하게 주고 받을 수 있었는데 아무튼 나중엔 Propellerhead 사의 rb338 파일 저장형식인 rbs 포멧을 분석. rbs import 와 song pattern 도 가능했지만 당시에 호스팅했던 하나포스가 망해버리는 바람에 소스가 엉망이 되어버리긴했지만서도.

암튼 요즘은 세상이 좋아져서 Native Application에서나 가능했던 영역들이 속속 html5란 이름 아래 모여들고 있는데
Web Audio라는 기술이 생겨 관심있게 지켜보고 있어 뭐라도 안할 수가 없다.

뚜껑을 열어보니 생각보다 진지하게 만든 구조라서 좀 놀랐음.
https://dvcs.w3.org/hg/audio/raw-file/tip/webaudio/specification.html
풀 스펙은 위의 링크를 참조하면 됨.
low-pass filter, send effect, pan 등을 routing 하는 구조가 잡혀있음. 심지언 impulse response 까지 지원. 뭐야 무섭쟎아!
일단 빨리 뭐라도 소리를 내보고 싶어서 좀 쉬운 라이브러리가 없나 구글링을 해보니
FireFox와 Chrome 간의 구현방법이 달라서 jQuery 같은 표준라이브러리로 쓸만한 놈이 필요했다.
Sink.js(https://github.com/jussi-kalliokoski/sink.js)가 있고
거기에 FFT(고속푸리에변환)용 라이브러리랑, Wav codec 지원, binary data 처리 라이브러를 합쳐놓은 audiolib.js(https://github.com/jussi-kalliokoski/audiolib.js)가 있어 둘 다 써보기로 결정하고.

삐익하고 소리를 내보았다.

http://jsbin.com/uculiz/edit#javascript,html,live
먼저 audiolib.js를 써서

var dev, sampleRate, osc, buf, fx, filter;
var p = {
onReady : function(){
$("#play").click(p.onPlay);
},
onPlay : function() {
setTimeout(function(){
dev = audioLib.AudioDevice(null, 2);
sampleRate = dev.sampleRate;
buf = new Float32Array(sampleRate * 8);
osc = new audioLib.Oscillator(sampleRate);
osc.waveShape = 1;
osc.append(buf.subarray(0, sampleRate * 1), 2);
dev.writeBuffer(buf);
}, 0);
}
};

$().ready(p.onReady);

헉 html 파일에 오타있네.
요정도로 일단.
채널이 2개(stereo)인 AudioDevice를 생성하고
square 파형인 1초 분량의 440hz 음인 buffer 를 생성 후 writeBuffer로 소리를 출력하는 구조.

해놓고보니 sink.js 를 포함하고 있어서 그냥 이걸 쓰는게 낫겠다는 생각이 들었음.

waveShape따위를 쓰고 싶은 생각은 없어서 sink를 사용해서 직접 low-level로 버퍼를 핸들링함.
http://jsbin.com/uculiz/3/edit

var p = {
channelCount : 1,
preBufferSize : 0,
sampleRate : 0,
onReady : function(){
$("#play").click(p.onPlay);
},
onPlay : function() {
var dev = audioLib.Sink(function(sampleBuffer){
// make some noise
for (i=0; i<sampleBuffer.length; i++){
sampleBuffer[i] = Math.random() - 0.5;
}
}, p.channelCount, p.preBufferSize, p.sampleRate);
}
};

$().ready(p.onReady);

channelCount 를 제외한 나머지 preBufferSize나 sampleRate는 값을 바꿔도 별 효과가 없음.
-0.5~0.5 사이의 값을 무작위로 생성하여 화이트 노이즈를 생성했다.
play를 하면 무한 재생이 되는데 지금은 일단 모르겠고
의미있는 음도 재생해봐야겠다 싶어서 sin파를 생성해본다.

http://jsbin.com/uculiz/4/edit

var p = {
channelCount : 2,
frequency : 440,
preBufferSize : 0,
sampleRate : 44100,
onReady : function(){
$("#play").click(p.onPlay);
},
onPlay : function() {
var dev = audioLib.Sink(function(sampleBuffer){
// sampleBuffer length:8192
for (i=0; i<sampleBuffer.length; i++){
sampleBuffer[i] = Math.sin(i * Math.PI * p.frequency / p.sampleRate);
}
}, p.channelCount, p.preBufferSize, p.sampleRate);
}
};

$().ready(p.onReady);

440hz의 sin파를 생성하려고 했는데 8192 버퍼마다 끊어짐.
음 뭔가 잘못했나 싶어서 여기저기 기웃기웃.

http://jsbin.com/uculiz/5/edit
Gain 을 달아주면 음량을 조절할 수 있다.
최대값이 1이므로 0이면 무음. 1이상이면 overdrive가 걸린다.

http://jsbin.com/uculiz/9/edit
녹음은 잘 되나?
아 record는 현재 장비에서 나는 음을 캡쳐하는 것이구나.
실시간 mixdown 같은 개념으로 보면 되겠네.

var p = {
channelCount : 2,
frequency : 440,
preBufferSize : 0,
sampleRate : 44100,
gain:1.0,
rec:null,
dev:null,
audioElement:null,
onReady : function(){
$("#rec").click(p.onRecord);
$("#play").click(p.onPlay);
},
onRecord : function() {
p.dev = audioLib.Sink(function(sampleBuffer){
// make some noise
for (i=0; i<sampleBuffer.length; i++){
sampleBuffer[i] = Math.floor(i*440/this.sampleRate) % 2 ? 1:-1;
}
}, p.channelCount, p.preBufferSize, p.sampleRate);
p.rec = p.dev.record();
$("#log").text("recording....");
/* To stop */
setTimeout(p.recordStop, 4000);
},
recordStop: function() {
p.rec.stop();
p.dev.kill();
// To export wav
p.audioElement = new Audio(
'data:audio/wav;base64,' + btoa( p.rec.toWav() )
);
p.audioElement.play();
$("#log").text(p.rec.toWav().length);
},
onPlay: function() {
p.audioElement.play();
}
};

$().ready(p.onReady);

악! 크롬 다운되서 다날렸다;;
다음에 계속(...할 수 있으려나)

Array function - Iteration

2012-01-27T14:53:00.000+09:00

이것만은 꼭 알고 이해하고 손에 익숙해두자.

forEach : 배열의 갯수만큼 반복
map : return 값을 인자로 배열을 반환
reduce : return 값과 배열을 인자로 연산
some : return 이 하나라도 참이면 참을 반환
every : return 이 모두 참이면 참을 반환
sort : return 이 참인 기준의 순방향 정렬
filter : return 이 참인 것들의 배열을 반환

배열을 만들고 직접 돌려보고 느껴보자.
reduce 로 sum, min, max를 한다던가
every 로 transaction처리를 한다던가 하는 걸 예로 들면 사고의 폭이 좁아질 수도 있으니
돌려보면서 현상을 관찰하는게 좋다.

기타 함수
concat : 배열들을 연결
indexOf : 인자의 위치를 반환
join : 인자로 배열들을 연결
slice : from<to 범위의 배열을 반환
splice : from에서 n개만큼 배열을 잘라내고 그 부분을 반환
push, pop : 배열의 뒷쪽에 넣고 빼기
unshift, shift : 배열의 앞쪽에서 넣고 빼기

requery 를 피하는 법

2012-01-25T19:54:00.000+09:00

객체를 생성 후 생성한 객체를 다시 참조하는 패턴으로

$('div#mainContext').append('<div class="header"/>');
$('div.header').click(function() {
// do something
});

이런 식으로 흔히들 쓰는데 $('div.header') 를 도는 비용이 많이 드니

$('<div class="header"/>').appendTo('div#mainContext').click(function() {
// do something
});

으로 순서를 바꿔서 객체를 chaining으로 활용하자.

object-literal을 이용한 패턴

2012-01-25T19:44:00.000+09:00

Object-literal은 아래처럼 new Object() 대신

var car = new Object();

car.goes = "far";

심플하게 JSON인

var car = {goes: "far"};

를 사용하는 패턴인데

$().ready(function() {

$('#submit').click(function() {

$('.container').slideUp(function() {

// do something

});

$('#navBar').bind('swipeleft', function() {

// do something

});

무기명 함수를 사용할 경우 흔히 발생하는 콜백 패크맨 형태를 정리하는데 사용할 수 있다.

사용 방법은 간단하다.

var app = {

onReady: function() {

$('#submit').click(app.onSubmit);

$('#navBar').bind('swipeleft', app.onSwipeLeft);

onSubmit: function() {

$('.container').slideUp(app.afterSlideUp);

afterSlideUp: function() {

// do something

onSwipeLeft: function() {

// do something

}

};

$().ready(app.onReady);

콘솔 테스트나 유닛 테스트를 하기에도 편하고 가독성도 낫다.

Dijkstra's algorithm을 이용한 최단 경로 찾기를 javascript 로 구현해보았다.

2012-01-20T23:10:00.000+09:00

http://en.wikipedia.org/wiki/Dijkstra's_algorithm

여기가 위키.

언제나처럼 소스는 http://jsbin.com/acatav/3/edit#javascript

"최단경로 그까이꺼 대충 트리로 펼친 담에 올 합산한 비용이 젤 적은 놈 뽑아내면 되는거 아니야?"

라고 생각했다가 역시 검색이 최고. 나보다 멍청한 놈은 좀처럼 없다는 것이 진리.

알고리즘은 심플하다.

'자신과 인접한 노드와 이제까지 탐색한 노드 중 가까운 놈만 남기고 다 지운다.'의 반복.

node 에서 해보려면 맨 마지막 $('p')부분을 지워주시면 되겠다.

사용예는 다음과 같다.

computePath(vertices, vertices[0]);

vertices 중 0번째부터 출발하는 최단 경로를 계산해서 각 vertex별 previous 와 minDistance를 넣어준다.

node.js 에서 바로 돌려볼 수 있는 소스는 다음과 같다.

var vertex = function(param){

var name = '';

var edge = [];

var minDistance = 99999;

var previous = null;

name = name || param.name;

edge = edge || param.edge;

minDistance = minDistance || param.minDistance;

previous = previous || param.previous;

return {

"name" : name,

"edge" : edge,

"minDistance" : minDistance,

"previous" : previous

};

var vertices = [];

vertices.push(new vertex({"name" : 'Harrisburg'})); // Baltimore,Allentown

vertices.push(new vertex({"name" : 'Baltimore'})); // Harrisburg

vertices.push(new vertex({"name" : 'Washington'})); // Baltimore

vertices.push(new vertex({"name" : 'Philadelphia'})); // Baltimore,Allentown,New York

vertices.push(new vertex({"name" : 'Binghamton'})); // Allentown

vertices.push(new vertex({"name" : 'Allentown'})); // Harrisburg,Philadelphia,Binghamton,New York

vertices.push(new vertex({"name" : 'New York'})); // Philadelphia,Allentown

vertices[0].edge = [{

"id" : vertices[1],

"distance" : 79.83

},{

"id" : vertices[5],

"distance" : 81.15

}];

vertices[1].edge = [{

"id" : vertices[0],

"distance" : 79.75

},{

"id" : vertices[2],

"distance" : 39.42

},{

"id" : vertices[3],

"distance" : 103.00

}];

vertices[2].edge = [{

"id" : vertices[1],

"distance" : 38.65

}];

vertices[3].edge = [{

"id" : vertices[1],

"distance" : 102.53

},{

"id" : vertices[5],

"distance" : 61.44

},{

"id" : vertices[6],

"distance" : 96.79

}];

vertices[4].edge = [{

"id" : vertices[5],

"distance" : 133.04

}];

vertices[5].edge = [{

"id" : vertices[0],

"distance" : 102.53

},{

"id" : vertices[3],

"distance" : 62.05

},{

"id" : vertices[4],

"distance" : 134.47

},{

"id" : vertices[6],

"distance" : 91.63

}];

vertices[6].edge = [{

"id" : vertices[3],

"distance" : 97.24

},{

"id" : vertices[5],

"distance" : 87.94

}];

var computePath=function(vertices, source) {

source.minDistance = 0;

var vertexQueue = [source];

while (vertexQueue.length) {

var u = vertexQueue.shift(0);

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

console.log(u.name);

u.edge.forEach(function(v,k) {

var distanceThroughU = u.minDistance + v.distance;

console.log(' ', v.id.name + ':'+distanceThroughU+'<'+v.id.minDistance +

(distanceThroughU < v.id.minDistance ? '' : '(out)' ));

if(distanceThroughU < v.id.minDistance) {

v.id.minDistance = distanceThroughU;

v.id.previous = u;

vertexQueue.push(v.id);

}

});

}

};

computePath(vertices, vertices[0]);

vertices.forEach(function(v) {

var path = [];

var current = v.previous;

while(!!current) {

path.push(current);

current = current.previous;

}

var result = v.name+':'+path.map(function(w) {

return w.name;

}).reverse().join('->')+'=>'+v.name+'('+v.minDistance+')';

console.log(result);

});

jQuery vs Native

2012-01-09T13:03:00.000+09:00

http://sharedfil.es/js-48hIfQE4XK.html 내용.
맘에 들어서 퍼옴.
포인트는 querySelector 같은게 IE 에서 되면 뭐다러 jQuery selector를 쓰냐
forEach가 먹으면 뭐하러 귀찮게 $.each를 쓰냐.
이게 다 IE 때문이다. 그래서 jQuery 를 쓴다.

jQuery	JavaScript
$(document).ready(function() { // code…});	document.addEventListener("DOMContentLoaded", function() { // code…});
var divs = $("div");	var divs = document.querySelectorAll("div");
var newDiv = $("<div/>");	var newDiv = document.createElement("div");
newDiv.addClass("foo");	newDiv.classList.add("foo");
newDiv.toggleClass("foo");	newDiv.classList.toggle("foo");
$("a").click(function() { // code…})	[].forEach.call(document.querySelectorAll("a"), function(el) { el.addEventListener("click", function() { // code… });});
$("body").append($("<p/>"));	document.body.appendChild(document.createElement("p"));
$("img").filter(":first").attr("alt", "My image");	document.querySelector("img").setAttribute("alt", "My image");
var parent = $("#about").parent();	var parent = document.getElementById("about").parentNode;
var clonedElement = $("#about").clone();	var clonedElement = document.getElementById("about").cloneNode(true);
$("#wrap").empty();	var wrap = document.getElementById("wrap");while(wrap.firstChild) wrap.removeChild(wrap.firstChild);
if($("#wrap").is(":empty"))	if(!document.getElementById("wrap").hasChildNodes())
var nextElement = $("#wrap").next();	var nextElement = document.getElementById("wrap").nextSibling;

JSONObject 전용 CustomView Adapter를 만들었다.

2011-12-20T15:06:00.000+09:00

질보다 양이 우선하는 허접안드로이드 프로그램 의뢰를 처리해주고 있다.
어찌나 기능들이 다양한지 덕분에 스터디는 제대로 하네 ㅎㅎ
하다보니 리스트들이 엄청 많은데
SimpleAdapter 로 대충 하려고 했더니 요리조리 잘도 빠져들 나가서
커스텀 시리즈를 하나씩 종류별로 다 만들고 있다.
SimpleAdapter를 선호하는 편인데 Hash Map 에만 넣어주면 이미지건 뭐건 알아서 잘 해주니까 좋다.

myAdapter = new SimpleAdapter(this, groupData, R.layout.couponlist,

new String[] { "title", "desc" }, new int[] {

R.id.textViewListTitle, R.id.textViewListDesc });

mListView.setAdapter(myAdapter);

대략 이런식.

1.context 를 주고,

2.Map의 ArrayList 형을 받고,

3.리스트를 표현할 Layout을 정하고

4.리스트에 값을 가져올 Map의 키와

5. 그 키값에 대응하는 List안의 View들을 대응

이것만으로 오케이

물론 이것마저도 사실 지저분하고 더러운 코드로 보이지만 자바에선 이정도면 짧은 코드인편

그런데 이걸 Custom으로 구현하면 갑자기 일이 커진다.

http://developer.android.com/resources/samples/ApiDemos/src/com/example/android/apis/view/List4.html

나는 짜증나서 이짓 못하겠다.

일단 서버나 array.xml 등등에서 JSON을 다루는 일이 대부분이라서

SQLite DatabaseAdapter (어라 이것도 만들었네)에서도 그냥 죄다 키발키발(key:val)해버렸다.

하나 만들고 리팩토링하면서 생각해봐야지 하고 촥 만들고 보니

Custom ListAdapter라고 해봤자. 결국 getView 만 외부에서 콜백으로 지정할 수 있으면 나머지는 매번 작성할 필요가 없다는 생각이 들었다.

package com.appsoulute.library;

import java.util.List;

import org.json.JSONObject;

import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ArrayAdapter;

public class CustomJSONListAdapter extends ArrayAdapter {

private onGetViewCallback getViewCustomCallBack;
public List objects;
private int listViewResourceId;
Context context;

public CustomJSONListAdapter(Context context,
int listViewResourceId, List objects) {
super(context, listViewResourceId, objects);
this.listViewResourceId = listViewResourceId;
this.objects = objects;
this.context = context;
}

/-
* Callbacks from getView
*-
public interface onGetViewCallback {
View getView(final int position, View convertView,
ViewGroup parent);
}
public void setOnGetViewCallback(onGetViewCallback onGetViewCallback) {
getViewCustomCallBack = onGetViewCallback;
}

@Override
public int getCount() {
return objects.size();
}
@Override
public JSONObject getItem(int position) {
return objects.get(position);
}
@Override
public long getItemId(int position) {
return position;
}
@Override
public View getView(final int position, View convertView, ViewGroup parent) {
if(convertView==null) {
convertView=(LayoutInflater.from(context)).inflate( listViewResourceId, parent, false);
}
return getViewCustomCallBack.getView(position, convertView, parent);
}
}
이런 형태가 되겠다.

실제 사용은 해당 CallBack 만 채워주면 된다.

groupData = new ArrayList();

mListView = (ListView) findViewById(R.id.listViewSearchLocation);

myAdapter = new CustomJSONListAdapter(this, R.layout.bookmarkperformancelist, groupData);

myAdapter.setOnGetViewCallback(getViewListener);

mListView.setAdapter(myAdapter);

요정도로 OnCreate 에 선언해주고

private onGetViewCallback getViewListener = new onGetViewCallback() {

@Override

public View getView(int position, View convertView, ViewGroup parent) {

try {

((TextView)convertView.findViewById(R.id.textViewListTitle)).setText(myAdapter.objects.get(position).getString("title"));

((CheckBox)convertView.findViewById(R.id.checkBox1)).setChecked(((ListView)parent).isItemChecked(position));

} catch (JSONException e) {

e.printStackTrace();

}

return convertView;

}

};

리스너를 취향에 맞게 만들어 주시면 되겠다. setText 할때 myAdapter.objects 라고 쓴 부분이 맘에 안드는데 자바 하도 오래간만에 해서 다 까묵었다.

일단 여기까지 올리고 차차 수정해보자.

왜 object에 prototype을 쓰지 않나?

2011-12-07T03:22:00.000+09:00

http://triin.net/2009/09/13/Why_exactly_is_Object.prototype_verboten

이유는 이렇다.

prototype 에 method 를 정의하면

자기 자신도 해당 object 에 카운트가 된다.

무슨말이냐?

object (array포함) 의 key와 value를 보기 위해 종종 아래와 같이 해본다.

var ages = { John: 10, Mary: 28, Alice: 16};

일때

(function(obj){ for (idx in obj) { console.log(idx+':'+obj[idx]) }})(ages)

이렇게 떠 보면

John:30

Mary:30

Alice:30

뭐 이렇게 나오겠지.

그럼 아예 object 에 이걸 prototype 해서 그냥 method 로 만들지 싶어

Object.prototype.printObject=function(){ for (idx in this) { console.log(idx+':'+this[idx]) }};

요따우로 해주면

ages.printObject()

> John:10

> Mary:20

> Alice:30

> printObject:function (){ for (idx in this) { console.log(idx+':'+this[idx]) }}

망한다.

다시 이야기 하지만 자기 자신도 객체의 일부가 되니까.

그래서 쓰지말라는 것이다.

hasOwnProperty를 사용해서 피해가는 방법도 있겠지만 다른 문제가 있다.

자세한 설명은 생략한다. 왜 그런지 알고 싶으면 본문 봐라. (난 알고싶지 않아서 안봤다. 안쓸거니까 우왕ㅋ)

결론은 이거다.

defineProperty 를 사용하자.

ECMAScript 5 스펙이다. 하지만 망할 IE7 에선 안되겠지

http://ejohn.org/blog/ecmascript-5-objects-and-properties/ (꼼꼼히 읽어볼 필요가 있다)

사용법이 좀 뜨억함.

Object.defineProperty(Object.prototype, "printObject", {

value: function() {

for (idx in this) { console.log(idx+':'+this[idx]) }

}

});

이런식으로 쓰면 된다.

console.log 를 찍은 삽질을 해도 이해바란다.

---------- 보너스 ---------

get 으로 합을 구해보자.

array 형인 경우 length 라는 property 가 있어서 항상 갯수를 반환한다.

length() 가 아니고 length 로 말이다.

[10,20,30].length() <- 이게 아니다.

[10,20,30].length <- 요거

그렇다. getter를 정의한 것이다. 그럼 sum이 getter 로 선언하면 되는데.

일단 sum은 어떻게 구하는가?

reduce를 사용해본다. noSQL! 하고 외친다면 당신이 생각하는 그것이 맞다고 말해주고 싶다.

var ages = [10,20,30];

ages.reduce(function(sum,val) { return sum+val; });

> 60

Object.defineProperty(Object.prototype, "sum", {

get: function() {

return this.reduce(function(sum,val) { return sum+val; });

}

});

ages.sum

> 60

좋지 아니한가?

node.js 로 만드는 좀 더 본격적인 TCP Server

2011-11-29T02:30:00.000+09:00

서로 에코만 하는게 부족하다면 유닉스의 wall 채팅을 구현해보자.
사실 이것만 되면
누가 접속했는지도 알고
누가 누구한테 무얼 보낼 수 있는지도 아는 셈이므로
채팅방을 하든지
온라인대전 격투게임 서버를 만들던지
바카라(어이쿠 위험한 단어) 서버를 만들던지
엠엠오알피지 서버를 만들던지
알아서 주무르면 된다.

자 그럼 이 대단한 서버의 코드를 보자

var clients = [];
require('net').createServer(function(socket) {

socket.on("connect", function() {
clients.push(socket);
});

socket.on("close", function() {
clients.splice(clients.indexOf(socket), 1);
});

socket.on("data", function(data) {
var sender = this;
clients.forEach(function(client) {
if (client !== sender) client.write(data);
});
});
}).listen(1337,"0.0.0.0");

네트워크 프로그래밍 좀 해본 사람이라면 다리에 힘이 턱 풀릴 정도로 허무한 코드라고 할 수 있겠다.
코드를 위에서부터 말로 쭉 설명하자면

1. 빈 접속자 배열을 만든다.
2. connect 할때마다 접속자 배열에 해당 소켓을 추가한다.
3. close 하면 socket 의 위치를 찾아(indexOf) 해서 떼어낸다(splice)
4. data 즉 접속자로 부터 입력을 받으면 자기 자신이 아닌 다른 모든 소켓에게 쓰기를 한다.
5. 이 모든 것을 1337번 포트에 연다.

정말 간단하다.

node.js server pattern

2011-11-25T03:19:00.000+09:00

에코 서버 3줄이면 된다는 걸 증명하기 위해선

require('net').createServer(function(socket) {
socket.pipe(socket);
}).listen(1337,"127.0.0.1");

요정도면 충분.
접속/서버메시지/접속종료 구현은

require('net').createServer(function(socket) {
socket.on("connect", function() {
socket.write("hello\n");
});
socket.on("close", function() {
console.log("closed");
});
socket.on("data", function(data) {
socket.write("usay:"+data);
});
}).listen(1337,"127.0.0.1");

이정도면 충분하겠다.

DotCloud 에서 Redmine 수정 후 Push 하였을때 발생하는 오류에 대한 대처법

2011-10-30T00:50:00.000+09:00

http://www.redmine.org/boards/2/topics/11085 구글링해보았다.

a key is required to write a cookie containg the session data

오류인데 당황하지 말고

$ dotcloud ssh redmine.redmine (redmine.redmine 은 나만 이렇게 쓰고 있으니 알아서 변경하시길)
로 들어가서

$ cd current
$ rake config/initializers/session_store.rb

해주면 끝.

redmine project 식별자(identifier) 변경

2011-09-28T02:15:00.000+09:00

dotcloud 에 redmine 등록 후 Domain 도 연결해보자

2011-09-22T05:29:00.000+09:00

redmine 을 dotcloud.com 에 올렸습니다. 무료니까요.
이후 할것들이 몇가지가 있다.

하나는 Domain 연결이고
나머지 하나는 mail notification 인데 차근차근 보자

잘 등록했다면 list 를 보았을때

$ dotcloud list
redmine:
- db (type: mysql; instances: 1)
- redmine (type: ruby; instances: 1)

라고 나올 것이다.

http://docs.dotcloud.com/guides/domains/ 가이드대로

$ dotcloud alias add ramen.www www.example.com 형식으로 써보자

어플리케이션명이 redmine 이고 모듈도 redmine 이니까

$ dotcloud alias add redmine.redmine www.<니가 쓰는 도메인> 형식이 되겠다.

아래와 같이 나오면 정상.

Ok. Now please add the following DNS record:
www.<니가 쓰는 도메인>. IN CNAME gateway.dotcloud.com.

내 경우엔 서브도메인으로 쓰고 싶어서

$ dotcloud alias add redmine.redmine redmine.<내 도메인> 형식으로 썼다.

브라우저에서 http://redmine.<내 도메인> 으로 접근했을때 CNAME Alias 를 줘서 호스팅 서비스쪽에서 gateway.dotcloud.com 을 바라보게 하고 gateway.dotcloud.com 에서 해당 어플리케이션으로 연결되게 하는 구조다.
netfirms.com 이란 곳에서 도메인 호스팅을 받고 있는데 관련 설정을 보면 이런 식이다.

CNAME (Alias)

A CNAME record (also known as an alias record) is a subdomain that points to a domain name (sales.yourdomain.com >> yourdomain.com)

Host	Points To:	Action
redmine	gateway.dotcloud.com

CNAME 설정을 이렇게 했다. 쓰고 있는 도메인 호스팅 서비스마다 차이가 있겠지만 알아서 잘 하면 된다.

redmine 을 dotcloud.com 에 올렸습니다. 무료니까요.

2011-09-20T15:31:00.000+09:00

PaaS(Platform as a Service)의 시대입니다.
지금 배타고 물들어올때 잽싸게 올라타자 하는 마음으로
http://www.dotcloud.com 에 계정을 하나 만들어놓았습니다.
소프트웨어(ex.ASP) 뿐만이 아니라 플랫폼마저도 빌려쓰는 세상이라니 좋은 세상입니다.

자 바로 본론입니다.
먼저 http://dotcloud.com 에 가입하시고 http://docs.dotcloud.com/firststeps/install 에서 cli 도 설치하고 기본 준비를 하세요.
이런건 패스합니다. 읽어보면 멸치라도 할 수 있어요. 봐도 모르시겠다고요. 그럼 Backspace : )
현재는 Free Plan 뿐입니다만 너무도 훌륭한 서비스입니다.

http://yanitime4u.fluxflex.com/56 를 보고 해보니까 쉽더군요.
근데 보실 필요는 없어요. 왜냐면 이 아래에 쓸 내용도 같은 내용이니까요 :)

https://www.dotcloud.com/settings/ 에서 유저명을 바꿔주세요.
API Key, Username,First name, Last name, E-mail address 순으로 있죠?
두번째 Username을 바꿔줍니다. 최종 우리가 사용할 URL은 http://redmine-<Username>.dotcloud.com 이 될테니까요.

일단 지금 홈디렉토리라고 가정하고 복사하고 붙여봅니다.
현재 최신버전인 redmine 1.2.1 을 사용합니다.

$ mkdir redmine
$ cd redmine
$ wget http://rubyforge.org/frs/download.php/75097/redmine-1.2.1.tar.gz
$ tar zxvf redmine-1.2.1.tar.gz

일단 압축을 풀으셨으면 디플로이할때 걸리적거리니까 redmine-1.2.1.tar.gz 일단 지워주고 dotcloud.yml 파일을 만듭니다.
우리는 redmine 을 쓰고 mysql을 db로 쓸테니 다음과 같은 파일을 만듭니다.

$ vi dotcloud.yml
---- 아래 복사하세요 -----
redmine:
type: ruby
approot: redmine-1.2.1
config:
ruby-version: ree

db:
type: mysql
---- 여기까지 ----

이제 Application 을 생성해봅니다.

$ dotcloud create redmine
$ dotcloud push redmine

오케이 redmine 이라고 꼭 할 필욘없습니다. 이게 Application 명이니까요 다른 이름을 써도 무방. 설명은 이걸 redmine으로 합니다.

$ dotcloud list
로 확인하거나
https://www.dotcloud.com/dashboard/ 에서 확인해볼 수 있습니다.

여기까지 했다면 준비는 끝났습니다.
이제 남은 건 세세한 설정 뿐이죠.

$ dotcloud info redmine
$ dotcloud info redmine.redmine
$ dotcloud info redmine.db

설정을 보고 어딘가에 복사해놓습니다. 다 쓸데가 있어요
대충 이런식으로 나올겁니다.

$ dotcloud info redmine
db:
config:
mysql_password: <mysql 암호>
instances: 1
type: mysql
redmine:
config:
rack-env: production
ruby-version: ree
instances: 1
type: ruby
url: http://redmine-<Username>.dotcloud.com/
$ dotcloud info redmine.redmine
aliases:
- redmine-<Username>.dotcloud.com
build_revision: rsync-1316499221.6
cluster: wolverine
config:
rack-env: production
ruby-version: ree
created_at: 1316499226.2593739
image_version: aec61048b63c (latest)
ports:
- name: ssh
url: ssh://dotcloud@redmine-<Username>.dotcloud.com:13631
- name: http
url: http://redmine-<Username>.dotcloud.com/
state: running
type: ruby
$ dotcloud info redmine.db
cluster: wolverine
config:
mysql_password: <mysql 암호>
created_at: 1316499226.5895569
image_version: 57db01da2848 (latest)
ports:
- name: ssh
url: ssh://mysql@redmine-<Username>.dotcloud.com:13632
- name: mysql
url: mysql://root:<mysql 암호>@redmine-<Username>.dotcloud.com:13633
state: running
type: mysql

대인배입니다. ssh 까지 제공하다니요. 그저 고맙습니다.
mysql 설정 먼저 합니다.
redmine DB 생성하고 redmine 유저를 만듭니다. 암호는 <mysql 암호> 를 사용합니다.

$ dotcloud ssh redmine.db
$ mysql -u root -p<mysql 암호>
create database redmine character set utf8;
grant all on redmine.* to redmine@"%" identified by "<mysql 암호>";
FLUSH PRIVILEGES;
quit
$ exit

바로 어플리케이션 설정도 들어갑니다.
필요한 ruby gem 들을 설치합니다.

$ dotcloud ssh redmine.redmine
$ gem install mysql
$ gem install rack -v=1.1.1
$ gem install i18n -v=0.4.2
$ exit

거의 다왔습니다.
이제 redmine 압축 푼 경로에 config.database 를 만듭시다.
아까 복사한 것들 잘 붙여넣습니다.

$ cd redmine-1.2.1/
$ vi config/database.yml

production:
adapter: mysql
database: redmine
host: redmine-<Username>.dotcloud.com
port: <mysql Port>
username: redmine
password: <mysql 암호>
encoding: utf8

이제 내 서버 셋팅만 하면 끝입니다.

$ dotcloud push redmine

이제까지 한 작업을 push 합니다.
서버에 올라가고 나면

$ dotcloud ssh redmine.redmine

ssh 로 다시 어플리케이션 접근해서

$ cd current

현재 버전으로 들어가서
rake 합니다.

$ rake config/initializers/session_store.rb
$ rake db:migrate RAILS_ENV="production"

마지막으로 디폴트데이터를 적재하는데 언어를 묻습니다. 한글을 쓸거니까 ko 라고 입력해줍니다.

$ rake redmine:load_default_data
(in /home/dotcloud/rsync-1316495751.45/redmine-1.2.1)

Select language: bg, bs, ca, cs, da, de, el, en, en-GB, es, eu, fa, fi, fr, gl, he, hr, hu, id, it, ja, ko, lt, lv, mk, mn, nl, no, pl, pt, pt-BR, ro, ru, sk, sl, sr, sr-YU, sv, th, tr, uk, vi, zh, zh-TW [en] ko
====================================
Default configuration data loaded.

자 끝났습니다!

http://redmine-<Username>.dotcloud.com 해서 확인해봅니다.

초기 어드민 계정은 admin/admin 이므로 최초 로그인 후 암호 변경합니다.