Play it!

March 21, 2012 7:53 pm March 20, 2012 9:24 am
Experiences with Node.js: Researching Node

This is the first post in a series of 3 about my experiences with Node.js. I will follow up with posts that including my experiences porting a RESTful service from Java, some benchmarks comparing the Node.js service and the Java service and my final thoughts from these experiences.

by Josh ZeiglerGo

December 1, 2011 9:06 am

MongoDB - 설치 및 계정 생성

<윈도우즈버전기준>
1.mongodb.org에서 다운로드받아 압축을 풀면 설치 완료!

2.데이타가 저장될 디렉토리를 만들고 지정하고 서비스를 시작
D:\설치경로\bin>mongod.exe —dbpath D:\설치경로\DATA 
*connection accepted메시지가 나오면 성공!

3.D:\설치경로\bin>mongo 를 입력하면 test DB로 연결된다.

4. 서비스를 등록하고 로그파일을 기록하기 위해 다음과 같이 설정
D:>mongod —logpath D:\설치경로\DATA\Logs\log.txt —logappend —dbpath D:\설치경로\DATA\DB —directoryperdb —serviceName MongoDB —install

http://localhost:28017/ 

5.admin 계정을 추가해보자.
D:\설치경로\bin>mongo 로 접속 후
> use admin
switched ti db admin <—admin 접속
> db.addUser(“admin”, “11111”)

November 28, 2011 6:22 pm

Node.js Cloud9 IDE에서 개발하기

http://c9.io/  OS에 구애받지 않고 작업하기 위한 개발자용 cloud서비스인 cloud9 IDE를 이용해보자!
! 지원언어 목록

  • Javascript 
  • HTML/CSS
  • Coffeescript
  • Ruby
  • php
  • node.js
  • 기타등등 


윈도우에서는 다소 제한점이 많았던 Node.js를 Cloud9 IDE에서 테스트해보자.
이미 github 프로젝트가 존재한다면 간단하게 cloud9 IDE에 프로젝트를 forking하여 사용할 수 있다.
참고1) http://nodejs-kr.org/wordpress/archives/473  
사이트에서 github아이콘을 클릭하는 것만으로도 자동 임포트가되므로 clone으로 등록할 필요는 없다. 그러나 처음부터 모듈을 설치하고자 한다면 windows에서는 미처 사용하지 못했던 npm을 이용할 수 있다.

프로젝트를 생성하고 하단 console에서 npm명령을 실행하여 필요한 보듈을 설치한다.
cmd> npm install express  <—익스프레스 모듈 설치
설치후…
cmd> npm install jade <—html 렌더링을 위해 jade 모듈 설치

프로젝트에서 hello.js를 생성하고 hello world 예제를 테스트한다.

var express=require(‘express’);
var app = express.createServer();
app.get(‘/’, function(req, res) {
    res.send(‘hello world’);
});
app.listen(process.env.PORT);console.log(“웹서버 시작 : http://localhost:process.env.PORT :” + process.env.PORT ); 

테스트 샘플에서는 app.listen(3000) 이런식으로 표기되지만 cloud9 IDE환경에서 구동시키기위해 위와 같이 변경해주어야한다.
Run이 제대로 되지 않으면 캡쳐한 아래 그림과 같이 Run Configuration을 패스에 맞추어 설정해줍니다.

Run 후 http://hello-world.사용자명.c9.io 에서 실행해서 hello world 메시지가 나오면 테스트 성공!

2:07 pm 2:05 pm

github 사용해보기 (Beginner)

github란 분산형 버전 관리 시스템으로서 로컬상에서 커밋내용을 저장하고 쉽게 분기가 가능하다. github는 기본적으로 소셜하게 공유되기 때문에 오픈 프로젝트에 기여하거나 로컬에 저장하여 개인적인 작업을 하는 것이 용이하게 되어있다.

SVN과 Git의 차이점 중 가장 중요하고 기본적인 차이점은 바로 커미트에 있다. 
SVN의 커미트는 “이 변경 사항을 중앙 서버에 push하는 것”을 의미한다. 
SVN에서는 커미트 전까지의 변경 사항이 언제라도 사라질 수 있다. 
하지만 Git에서는 커미트가 로컬에서 수행되고 로컬 저장소를 사용하기 때문에 원격측에서 어떤 일이 발생하더라도 문제가 되지 않는다. 
원격 서버와의 상호 작용 없이 변경 사항을 되돌리고, 분기를 만들고, 분기에 대한 커미트를 수행하는 등의 작업을 수행할 수 있다. 
Git를 사용하여 push 작업을 수행하면 로컬 저장소의 상태와 원격 서버를 효과적으로 동기화할 수 있다. 
- subversion 사용자를 위한 Git, Part1: 시작 중에서

<windows용 이용하기>
http://help.github.com/ help를 주의깊게 따라하는 것만으로도 당신은~github의 달인~! 이 무리라면 여타 국내 블로그를 참조해본다.
참조1) 윈도우즈용 github 셋팅 http://rabits.springnote.com/pages/4735095
참조2) 좀 더 자세한 설명 http://binggrec.tistory.com/116

일단 github.com에 가입한다. 
팀프로젝트나 기업용으로 이용하지 않는 이상 Free로 이용할 수 있다. Free계정으로 생성한 프로젝트는 기본적으로 오픈소스로 취급받는다.
가입이 완료되었으면
1. windows용 Git 설치
2. 리파지토리 생성!
3. Fork (분기/커밋 등의 작업 숙지)
4. 소셜하게 이용하기  

1. Windows용 Git설치 http://help.github.com/win-set-up-git/
프로그램은 http://code.google.com/p/msysgit/downloads/list 에서 최신버전을 이용할 수 있다. 
- install하면  C:\Users\Administrator혹은 본인이 로그인한계정(windows7일 때) 아래를 root로 잡고 .gitconfig가 생성된다. (여기에 계정정보가 셋팅된다)
- 튜토리얼 중 SSH Key 생성하는 과정이 있는데 remote 작업을 위해 꼭 생성!

2.리파지토리 생성 및 테스트 http://help.github.com/create-a-repo/
가입한 사이트에서 리파지토리를 생성하고 설치한 git-bash 툴에서 몇 가지 명령을 입력하면 바로 리파지토리를 이용할 수 있다.
윈도우즈 git-bash에서 이용되는 명령어는 생각보다 간단하다.
cmd> mkdir ~/Hello-World     <—디렉토리 생성
cmd> ~/Hello-World    <—디렉토리 이동
cmd> init   <—생성한 리파지토리 초기화
cmd> touch README   <—파일 open
에디터에서 README.txt에 임의의 내용을 작성하고 저장!
cmd> git add README    <—로컬저장소에 추가
cmd> git commit -m ‘first commit’     <—커밋 코멘트 작성
cmd> git remote add origin git@githun.com:username/Hello-World.git  <—원격리파지토리 접근
cmd> git push origin master <—파일 푸시!

3.Forking http://help.github.com/fork-a-repo/
github의 Test용 오픈 프로젝트를 이용해 내 저장소에 분기하여 저장하고 삭제하는 등의 기본 작업을 테스트해보자!
pull : 원격업데이트 내용을 내 저장소에 적용하다.
fetch : 내 저장소에 커밋버젼을 통합하지 않고 먼저 변경사항을 리뷰할 수 있도록해준다.
merge : 모든 커밋 작업을 통합한다. 

4. 소셜하게 이용하기  http://help.github.com/be-social/
GitHub사이트에서 프로젝트를 수행하고 있는 사람들을 follow하고 project를 watch함으로써 관심가는 프로젝트에 참여하거나 업데이트 상황을 feedback받을 수 있다. 

November 23, 2011 4:05 pm

Node.js 알아보기

Step1) Node.js 란?

Node.js란 무엇이며 어떻게 작업하며 어떤 기능을 하는지 먼저 이해하기 위해 아래 링크의 내용을 숙지합니다.
http://www.ibm.com/developerworks/kr/library/os-nodejs/index.html

Step2) Node.js 설치하기
<Windows 환경에서 설치하기>
http://www.sqler.com/454552 
이 내용을 참고로 설치 가능합니다만 그대로 하면 설치되지 않습니다. node.js의 프레임워크인 express를 설치하기 위해 사용하는 ryppy.cmd 파일을 열어 설치경로와 환경변수의 경로를 일치시킨 후 셋팅을 해야합니다.
! Windows 버젼인지 잘 확인하시고 필요한 파일을 다운로드합니다!
! node.js 는 항상 최신 버젼으로! http://nodejs.org/#download
! python도 http://www.python.org/download/  
! ryppy.py https://github.com/japj/ryppi/blob/master/ryppi.py (윈도우즈에서 npm을 대신해서 설치 및 관리해주는 파이썬 파일입니다. 이 파일의 사용을 위해 파이썬이 설치됩니다.)

* 설치를 위한 폴더 구조 
node.js 폴더 root 아래 다음과 같이 배치합니다.

node.cmd의 내용

@ECHO OFF
SETLOCAL
SET NODE_HOME=%~dp0
SET NODE_PATH=%NODE_HOME%node_modules
SET PATH=%PATH%;%NODE_HOME%bin
if “%*”==”” GOTO CMD
%NODE_HOME%bin\node.exe %*
GOTO EXIT
:CMD
ECHO.
ECHO node.js 명령 프롬포트
ECHO node.js 현재 버전은 0.6.0(안정)
ECHO.
:START
set /p CMD=%CD%^>
if “%CMD%” == “exit” goto EXIT
%CMD%
GOTO START
:EXIT

ryppi.cmd의 내용

@ECHO OFF
SETLOCAL
SET NODE_HOME=%~dp0
SET NODE_PATH=%NODE_HOME%node_modules
SET PATH=%PATH%;%NODE_HOME%bin
“%NODE_HOME%\python\Portable Python 2.7.2.1\App\python.exe” ”%NODE_HOME%ryppi.py” %*

필요한 환경변수도 설정해줍니다.
커맨드창에서
setx NODE_PATH (node.js 경로)
setx NODE_PATH (node.js 경로)\node_module
setx PATH %PATH%;(node.js 경로)\bin
이렇게 환경변수를 쉽게 설정할 수 있습니다.파일들을 제 위치에 놓고 express를 이용해 웹서버를 구축해봅니다.

cmd > node.js 폴더 루트\ryppi.cmd install express
커맨드 창이 주루룩 내려가며 node_modules 폴더 아래로 필요한 파일들이 정상적으로 설치되면 express모듈이 사용가능합니다.

Step3) 예제 실행해보기

var express=require(‘express’);
var app = express.createServer();
app.get(‘/’, function(req, res){
  res.send(‘hello world’);
});
app.listen(3000);
console.log(“웹 서버 시작 : http://localhost:3000”); 

적당한 위치에서 hello.js로 저장한 후
cmd  node.js 폴더>node hello.js 
브라우저에서 http://localhost:3000/으로 실행하면 hello world를 확인할 수 있습니다.

October 27, 2011 4:00 pm September 9, 2011 8:00 am

Fusion Chart 디스플레이 커스터마이징

*참고 url : http://www.fusioncharts.com/flex/docs/charts/
Flex Examples by Case  > Number Formatting  > Basic

Chart XML Reference > Chart XML Reference > Pie 3D Chart

* Data Label

1. 숫자 천단위 표기

<chart … decimalSeparator=’,’ thousandSeparator=’.’ >

2. prefix and suffix

통화의 표현 예) <chart numberPrefix=’$’>  $130 

퍼센트 표기 예) <chart numberSuffix=’p.a’>

July 22, 2011 11:50 am

jQuery Tab UI : 전체보기 탭

일반적인 탭 샘플에서는 전체 탭 내용을 펼쳐 보여주는 기능이 없습니다. http://jqueryui.com/demos/tabs/

전체 탭 기능을 추가하기 위해서는 전체보기 탭을 선택하는 이벤트가 발생했을 때 다른 탭의 클래스 속성을 컨트롤해야합니다.

  .removeClass(‘ui-tabs-hide’) 

전체 소스는 다음과 같습니다.

<!DOCTYPE html>

<html>

<head>

<link href=”http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css” rel=”stylesheet” type=”text/css”/>

<script src=”http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js”></script>

<script src=”http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js”></script>

<script>

$(document).ready(function() {

   var user_tabs = $(“#tabs”).tabs({

   show: function(event, ui) {

    if (ui.index == 3) { //4번째 탭 인덱스를 클릭했을 때

      $(“div[id^=’tabs-‘]”).removeClass(‘ui-tabs-hide’);

      $(“div[id=’tabs-4’]”).addClass(‘ui-tabs-hide’);

    } 

  }

 });

});

</script>

</head>

<body style=”font-size:62.5%;”>

<div id=”tabs”>

<ul>

<li><a href=”#tabs-1”><span>One</span></a></li>

<li><a href=”#tabs-2”><span>Two</span></a></li>

<li><a href=”#tabs-3”><span>Three</span></a></li>

<li><a href=”#tabs-4”><span>Show All Tab</span></a></li>

</ul>

<div id=”tabs-1”><p>디폴트 탭 콘텐츠</p></div>

<div id=”tabs-2”><p>두번째 탭 </p></div>

<div id=”tabs-3”><p>세번째 탭 </p></div>

<div id=”tabs-4”></div>

</div>

</body>

</html>