github에 제가 만든 pager를 공유합니다.

정말 오랬만에 글을 남겨본다.

짧은 개발 프로젝트를 하면서 정말 많은 일을 겪고 있다.

그 와중에도 느낀점들을 정리하면서 이번엔 깃허브에 프로젝트를 정식으로 오픈하게되었다.

웹개발을 하면서 몇가지 불편한 점들을 그동안 스크립트로 따로 저장해두고 사용해왔었다.

그 중에서도 pager를 깃허브에 올리면서 1.0 버전으로 정식 오픈해두었다.

MIT 라이선스로 원하는대로 사용하면 된다.

그동안 pager는 ui가 종속적인 경우가 많아서 입맞에 맞게 수정하기 힘들었었다.

내가 만든 pager는 크게 두가지에 중점을 두고 만들었다.

1. data와 view를 최대한 분리해서 ui에 종속적인 점을 최소화한다.

2. 커스터마이징하기 쉬워야 한다.

이런 목적을 두고 만들어서 그런지 나름 만족할만한거 같다.

다른 프로젝트에 투입해서도 사용할 수 있을 정도는 되는거 같고

무엇보다, 페이지가 전환되는 형식이 기본이긴 하지만, ajax 형태로 동작시켜야하는 화면에서도 적용하는게 큰 무리가 없어 보인다. 물론 코딩에는 약간의 손이 가긴한다.

깃허브에는 5개의 샘플코드가 담긴 index.html을 만들어두었으니 readme 파일과 같이 보면 충분히 이해하리라 본다.

누구든 도움이 되면 그걸로 만족한다.

깃허브 주소: https://github.com/babypaunch/pagify

[font: 1] Win8.1에서 Fixedsys 사용하기

개발을 하려다보면 참 많은 것들을 설정해야하는 경우가 생긴다.

이번에는 그중에 font에 대해서 알아보고자 한다.

필자는 코딩시에 가독성을 위해 아직도 Fixedsys 폰트를 12pt 사이즈로 애용하고 있다.

이번 포스팅은 윈도우7 이상의 환경에서 'Fixedsys' font를 사용하는 방법에 대해서 간략하게 설명하겠다.

먼저 '제어판'을 연다. 제어판 아래에 '글꼴'을 확인할 수 있다. 클릭하자.

글꼴 목록 화면이다. 우측 상단의 '기타 옵션'을 선택해서 '자세히'를 선택하면 좀 더 편하게 글꼴 목록을 확인할 수 있다.

마지막으로 가장 중요한 '글꼴 설정'을 해보자. 위 글꼴 목록 화면에서 '글꼴 설정'을 클릭하면 아래 그림과 같은 화면이 나온다.

'언어 설정에 따라 글꼴 숨기기(H)'에 check on되어 있을것이고, check off시키고 '확인'버튼을 클릭하도록 한다.

아래 그림은 숨김 처리되어 있던 Fixedsys font를 사용할 수 있는 상태(표시)로 된 것을 확인할 수 있다.

이제 이클립스나 SecureCRT 등에서 Fixedsys font를 사용할 수 있을것이다.

[UI: 1] Powermockup으로 화면을 그려보자.

많은 IT종사자 분들중에 화면정의서 또는 개발정의서와 같은 문서를 본적 있을것이다. 보통은 파워포인트로 작성된 경우가 많을 것이다. 필자도 개발시에 SK에서 사용되었다는 틀을 가져다가 쓰는 경우가 많았다. 그중에 예전엔 중구난방식으로 그려진 화면정의서를 많이 봐왔을것이다.

이미 IT는 많은 발전을 해왔다. 그중에 UI도 눈부시게 발전했음은 누구도 부정못할거라 생각한다.
오늘은 그 UI를 위해 탄생한 수 많은 Wireframe(mockup) 툴 중에 최고라 할 수 있는 Powermockup에 대해서 알아보자.

많은 사람들은 이런 질문할 것 같다.
정말 좋은가요?
쓰기 쉬운가요?
공짜인가요?
이런 질문에 대답이 될만한 내용으로 하나씩 알아보자.

먼저 다운받을 수 있는 사이트를 알아보자.
http://www.powermockup.com/을 방문하면 아래와 같은 화면에 다운로드를 할 수 있는 링크가 바로 보인다. 'Download Free Trial' 버튼을 클릭하자.
트라이얼 버전이라고는 하지만 기간적 제한이 아닌 기능적 제한을 가지고 있을 뿐이다. 써보면 왠만한 기능들은 다 있을거라고 본다.

설치를 완료하면 파워포인트를 실행시켜보자. 아래 이미지와 같이 파워목업이라는 탭이 생성되었음을 알 수 있다. 탭을 클릭해보자.

처음엔 아무것도 안 보일 수 있다. 아래의 '스탠실 라이브러리 보기'를  선택하자.

우측에 아래와 같은 패널이 생성된다. 아래로 쭉 스크롤해보면, 화면 구성에 쓸 수 있는 많은 아이템들을 확인할 수 있을 것이다.

아래 이미지는 패널 전체를 캡쳐한 화면이다. 상당히 많은 양의 내용을 작성할 수 있을 자신감이 생기는거 같다. ㅎㅎ
다른 블로그에서 본 내용인거 같지만, 이 스텐실은 변경 및 추가 등이 가능하다고 했었다.
자기만의 프리셋을 만들어두면 유용하게 쓸 수 있을거라 본다.

마지막으로 간단하게 파워포인트에서 모바일 인트로화면 느낌으로 하나 만들고, 나머지 몇가지 스텐실을 추가해본것이다.

여기까지면 처음에 말한 3가지 질문에 답변을 두가지는 할 수 있다고 본다.
좋고, 쓰기 편하다. 유료이긴 하지만, 물론 공짜로 라이센스를 받는 방법이 있다.
필자와 같이 블로그를 하는 경우라면, 블로거를 대상으로 'Free Single License'를 취득하는 방법이 있다.

회사에서 업무용도로 사용할 목적이라면 라이센스를 구매해도 하나의 방법이겠지만, 필자는 굳이 파워목업 홈페이지에서 메일을 작성해서 라이센스를 구걸을 시도하였다.
라이센스를 받으면 좀 더 많은 내용을 작성해보도록 하겠다. 부디...

[node.js: 3] 4줄짜리 웹서버를 띄워보자.

필자는 기본을 이해하는것이 정말 중요하다고 생각한다.
아래 4줄짜리 파일을 만들어서 실행해보고, 앞으로 하나씩 업그레이드 해보도록 하자. 물론 되도록이면 이미 유행하는 모듈들을 활용하겠지만, 다시 언급하자면 기본 이해를 위해 쓰는 글임을 잊지말자.

1. 아래 내용을 'http.js'라고 저장하자.

require("http").createServer(function (req, res) {

   res.writeHead(200, {"Content-Type": "text/plain"});

   res.end("Hello World\n");

}).listen(80);

2. node로 실행해보자. 아무런 log 조차찍지 않았지만, 80으로 동작되는 웹서버가 구동되었을 것이다. 브라우저를 통해서 'http://localhost'로 접속해보자. 'Hellow World'가 반길것이다.
#> node http.js

[node.js: 2] npm을 사용해보자.

npm은 Node Packaged Modules의 약자라고 한다. node.js에서 사용할 수 있는 모듈을 관리해주는 툴인것이다. 필자가 npm을 사용하면서 느꼈던 소소한 것들의 기록을 남겨본다.

1. 설치된 npm의 버전은 뭘까?
이전 게시글을 보면 binary node.js를 설치하면 npm도 같이 설치됨을 알 수 있다.
#> npm --version

2. local 디렉토리에 설치된 node 모듈은 뭐가 있을까?
특정 디렉토리에서 작업하는 경우 npm으로 모듈을 install 시작하면 'node_modules' 디렉토리가 만들어지는 것을 확인할 수 있다. /root/nodejs/에 test라는 디렉토리에서 local 설치된 node 모듈을 확인할 땐 다음과 같이 입력하면 된다.
#> npm ls

3. local 디렉토리에 설치된 node 모듈은 어떻게 모두 삭제할까?
사실 이 내용은 불필요한 내용일 수 있다. 왜냐면 local 디렉토리에 설치된 모든 node 모듈의 삭제는, local 디렉토리 자체를 삭제해주면 되기 때문이다. 그래도 알아보자. 다음 명령어를 입력하면 node_modules의 디렉토리 내의 모듈을 listing해서 삭제한다.
#> for package in `ls node_modules`; do npm uninstall $package; done;
4. npm을 -g 옵션을 통해서 전역 설치를 하면, 나중에 전역 설치된 npm 모듈을 어떻게 확인할 수 있을까?
이미 인터넷에 많은 답변들이 있겠지만 나도 한번 달아본다. ㅎㅎ
#> npm ls -g
필자의 vmware centos에서는 expressjs 4에 해당하는 'express-generator', node로 구동되는 js를 백그라운드로 관리할 수 있게 도와주는 'forever', node의 결과를 client에서 확인할 수 있게 해준다는 'node-inspector'가 깔려있었다.

5. 마지막으로 설치된 모든 global module을 찾아서 삭제해보자.
#> npm ls -gp --depth=0 | awk -F/node_modules/ '{print $2}' | grep -vE '^(npm|)$' | xargs npm -g rm

[node.js: 1] node.js를 binary로 설치해보자.

필자의 게시물은 어쩌면 자세한 내용을 원하는 독자들에게 맞지 않을거라는 생각이 문득들었다. 그래도 어떤 누군가에겐 도움이 되길 바라며 간단한 글을 다시 써본다.

node.js를 설치하는 환경과 방법은 여러가지가 있겠지만 필자는 vmware에 설치한 centos 6.5 x64를 대상으로 한다. 특히 centos가 6버전이면 git을 통한 컴파일 설치가 쉽게 되지만,  centos가 5.8버전에서 원할하지 않았다. 따라서 되도록이면 편하게 binary 파일을 이용하는것을 추천한다.

1. 먼저 설치하고자하는 node.js를 다운 받을 위치를 파악해보자. 'http://nodejs.org'를 입력하면 아래와 같은 화면이 나타난다. 
  1.1. 'DOWNLOADS' 화면으로 이동을 해보면 'Linux Banaries (tar.gz)'를 확인할 수 있다.


  1.2. '64-bit'를 오른클릭해서 '링크 주소 복사'를 선택해둔다.

2. 여기서부터가 중요하다.
  2.1. 먼저 디렉토리를 이동한다.
  #> cd /usr/local/lib

  2.2. 복사해둔 링크를 'wget'을 통해서 다운로드 받는다.
  #> wget http://nodejs.org/dist/v0.10.33/node-v0.10.33-linux-x64.tar.gz

  2.3. 다운로드 완료된 tar파일의 압축을 푼다.
  #> tar xfz node-v0.10.33-linux-x64.tar.gz

  2.4. 이제 가장 중요한 부분이라고 할 수 있겠다. binary로 설치된 node.js는 특정 위치에서만 실행할 수 있으므로, 아무곳에서나 node 명령어를 실행할 수 있도록 '심볼릭 링크'를 걸어주자.
  #> ln -s /usr/local/lib/node-v0.10.33-linux-x64/bin/* /usr/local/bin/

  2.5. 설치를 위한 모든 과정은 끝났다. 참고로 node의 버전을 확인해보면 잘 설치되었음을 확인할 수 있으며, node.js를 설치하면 'npm'도 같이 설치되는것을 확인할 수 있다.

[vmware: 4] 가상OS를 윈도우 시작시 background mode로 자동 실행시키기

vmware의 설치가 완료되서 개발을 하다보면 불편한 점 중에 하나가, 바로 컴퓨터 부팅시 vmware workstation 등을 직접 실행해서 가상OS를 수동으로 시작하는 것이다. 이런 불편함을 해보자.

필자의 시스템은 Win8.1임을 감안하길 바란다.

1. 시작프로그램의 위치를 찾자. 개인별로 계정이 다를 수 있으므로, 이점만 유의하면 쉽게 찾을 수 있다. [C:\Users\정대규\AppData\Roaming\Microsoft\Windows\Start Menu\Programs\Startup] 폴더를 열어두자.

2. 열린 Startup 폴더에서 batch 파일 작성을 해보자. batch 파일명은 'centos.bat'로 해보자. 내용은 아래와 같이 입력해주면 된다. 가상OS가 설치된 폴더를 감안해서 vmx 확장자를 찾아서 등록해주면 된다.

"C:\Program Files (x86)\VMware\VMware Workstation\vmrun.exe" -T ws start "C:\Users\정대규\Documents\Virtual Machines\CentOS6.5X64\CentOS6.5X64.vmx" nogui

두 개의 단계를 거쳐서 모든 준비는 끝났다. 재부팅해보면 CMD 창이 한번 떴다가 자동으로 닫히는 것을 확인할 수 있다. 편하게 가상OS를 다뤄보자.