블로그 이미지
Peter Note
Web & LLM FullStacker, Application Architecter, KnowHow Dispenser and Bike Rider

Publication

Category

Recent Post

2012. 12. 12. 18:01 Languages/JavaScript

[JavaScript 성능향상] 웹사이트 최적화 방법

웹에플리케이션을 개발할 때 JavaScript 와 CSS 사용이 많다. 특히 요즘음 JavaScript Module화 패턴을 이용하여 JS파일이 기하 급수적으로 늘어나고 있으므로 네트워크 비용을 줄여야하는 문제에 놓인다. 성능을 향상 시킬 수 있는 NHN의 비법을 요약한다. (Chapter 2. 기본적인 웹사이트 최적화 방법)


  - 이미지 파일이 많을 경우 -> CSS Sprite를 이용한다 (N-MET OSS 이용)

    + 성능에 전송 파일의 사이즈보다 개수가 중요하다. 이는 크기보다 네트워크 전송 비용이 더 크기때문이다 

  - HTTP 헤더에 정적 파일 만료날짜를 추가 -> Client PC에 Caching토록 한다 

    + 캐싱여부 판단 기준은 "이름"과 "인터넷 주소" : src="aa_20111231.js" or src="aa.js?20111231" 로 표현 

    + 만료날짜를 서버에 설정 : Apache의 mod_expires 모듈 설정

  - JavaScript 파일 통합 -> 파일의 개수를 최소화하여 네트워크 비용을 줄임

  - 파일 크기 최소화 -> Gzip압축을 사용한다 (파일크기 1~2KB 이상일 때 압축 권장. 이보다 크기가 작으면 압축해제시 CPU 비용이 더 큼)

  - 쿠키 크기 최소화 -> 헤더 정보에 쿠키가 들어가면 데이터 크기가 커진다

    + 사용하지 않는 쿠키 삭제

    + 최상위 도메인 설정 되도록 사용하지 말자

    + 만료날짜 최대한 짧게 한다

    + 쿠키 정보 필요없는 정적 파일(이미지, js, css)는 별도 도메인으로 서비스한다

  - 렌더링 성능 향상 -> DOM Tree - Render Tree - 좌표 배치 - 브라우져 화면 그리기 시작

    + CSS는 <head> </head> 사이에 넣는다 

    + JavaScript는 </body> 위에 넣는다 : js 수행시 렌더링이 멈추어 하얀 페이지 보일 수 있음

    + 최초 페이지에서 AJAX 통신하면 화면 렌더링이 두번 되므로 최초 호출시 AJAX 배제하자 

    + 태그 중첩을 최소화 한다 : <table> 되도록 쓰지 말고, <div>와 CSS로 Layout을 잡는다 (중첩이 많으면 렌더링 느려짐)

저작자표시 비영리 변경금지

'Languages > JavaScript' 카테고리의 다른 글

[JavaScript 성능향상] 렌더링 최적화 방법  (0) 2012.12.21
[JavaScript 성능향상] 성능을 높이는 코드 스타일  (0) 2012.12.13
[JavaScript] Template Engine  (0) 2012.11.26
[JavaScript] Closure 알아가기  (0) 2012.11.12
[JavaScript] Function Expression 과 Function Declaration 차이  (0) 2012.11.12
posted by Peter Note
2012. 12. 12. 15:00 Git, GitHub/Git Lec01

[Git] Merge 종류와 충돌 해결하기

git은 branch를 만들어 "테스트할 기능", "새로운 기능", "버그 픽스"등에 대하여 만들고, master에 다시 merge를 할 수 있다. branch를 만들고, merge하는 방법을 알아보자 



▶ Git 제어

  • git branch new : 새로운 branch 를 만든다. 아무런 내역이 없다.
  • git checkout new : 새로 만든 new 브랜치로 이동한다 
  • git checkout -b alternate master : master를 복제하여 브랜치를 만들고 alternate로 checkout 이동한다 
  • git branch -m alternate alternative : 브랜치의 명칭을 alternative로 변경한다 (-M 기존 같은 명칭 브랜치 있어도 덮어씀)
  • git brranch -d alternative : alternative 브랜치를 삭제한다 (-D 옵션은 강제 삭제)


▶ Merge 전략 
  • Straight Merge (바로 합치기) : 브랜치 변경 이력 전체를 합치는 방법
  • Squashed Commit (커밋 합치기) : 한 브랜치 이력 압축하여 다른 브랜치의 최신 커밋으로 하나 만드는 방법
  • Cherry-picking (선택하여 합치기) : 다른 브랜치의 하나의 커밋을 현재 브랜치에 적용하는 방법

각 합치기에 대해서 위->아래 명령순으로 살펴보자 

> 바로 합치기 
  • git checkout -b alternate master
  • git add about.html (내용 넣음) -> git commit -m "add about"
  • git checkout master 
  • git merge alternate : master 브랜치에 alternate 브랜치를 합친다 (즉, about.html 파일이 신규로 합쳐짐)

> 커밋 합치기 
  • git checkout -b contact master
  • git add contact.html (주소 내역 추가) -> git commit -m "add contact address"
  • contact.html (email 내역 추가) -> git commit -a -m "add contact email" (즉, commit object 두개가 된다)
  • git checkout master
  • git merge --squash contact : contact의 커밋 두개를 하나로 만들어 master의 staging에 추가함 (git status 확인)
  • git commit -m "add contact address" -m "add contact email"  (master 브랜치에 contact.html 을 커밋한다)

> 선택하여 합치기
  • git checkout contact
  • git commit -a -m "add contact sns id" (contact.html안에 twitter 계정추가 commit object Hash 코드를 34abcd 로 가정함)
  • git checkout master
  • git cherry-pick 34abcd  ( contact 브랜치의 34abcd 커밋을 master 브랜치에 커밋한다)
  • git reset --hard HEAD 마지막 커밋을 master 브랜치에서 제거
  • git cherry-pick -n 34abcd ( -n 옵션 사용하면 master 브랜치의 staging에 넣음, 커밋안함. git status 로 확인)
  • git commit (최종 커밋함)


▶ Merge시 충돌 해소하기 

두개의 브랜치를 합치기하다 같은 파일의 내용이 동시에 변경되었을 경우 해결방법을 알아보자. 
  • git checkout -b about master : about 브랜치 생성 후 checkout
  • git add about.html (about 내역 입력) -> git commit -m "add about"
  • git branch about2 abut : about 브랜치를 기반하여 about2 브랜치를 생성
  • git commit -a -m "add XXX" : about 브랜치의 about.html 파일에 XXX 입력
  • git checkout about2 
  • git commit -a -m "add YYY" : about2 브랜치의 about.html 파일에 YYY 입력 (이제 about 브랜치의 about.html과 about2 브랜치의 about.html 파일에 XXX 와 YYY 충돌이 발생함)
  • git checkout about
  • git merge about2 : about2 브랜치를 about 브랜치로 바로 합치기
  • about.html 안에 conflict 내역이 표시됨 : 내역을 직접 수정하거나, git mergetool 명령으로 merge.tool 값 확인하고 도구로 합치기 시도함 (도구 사용법은 다시 상세히 봐야겠음)
<<<<<<<< HEAD : 밑으로 현재 브랜치 코드 나옴
>>>>>>>> about2 : 합치려는 다른 브랜치 코드 나옴
======= : 구분자

예) about.html 파일안의 conflict 내역
<<<<<<<< HEAD
XXX
=======
YYY
>>>>>>>> about2


저작자표시 비영리 변경금지

'Git, GitHub > Git Lec01' 카테고리의 다른 글

[Git] tag 다루기  (0) 2012.12.20
[Git] Remote 저장소 연결 및 관리  (0) 2012.12.17
[Git] History 이용 및 관리하기  (0) 2012.12.13
[Git] Reset 사용하기  (0) 2012.12.11
[Git] Hash Object 정보보기  (0) 2012.12.11
posted by Peter Note
2012. 12. 11. 11:28 Git, GitHub/Git Lec01

[Git] Reset 사용하기

Git의 로컬 Repository에 저장된 commit 내역에서 이전 commit 내역으로 이동하고 싶을 경우. HEAD를 조작함으로써 가능하다. 


  • 지금 까지 커밋 내역 보기 : git reflog  (하기 내역으로 파란색으로 3 번의 commit 이 존재한다)
$ git reflog
c6d5478 HEAD@{0}: commit: add license properties
aa64af1 HEAD@{1}: checkout: moving from master to rb_1.0
aa64af1 HEAD@{2}: checkout: moving from master to master
aa64af1 HEAD@{3}: merge rb_1.0: Fast-forward
e13af6f HEAD@{4}: checkout: moving from rb_1.0 to master
aa64af1 HEAD@{5}: commit: License Info about mqtt client for java
e13af6f HEAD@{6}: checkout: moving from master to rb_1.0
e13af6f HEAD@{7}: commit: add eclipse foundation software user agreement propert
475d6ae HEAD@{8}: clone: from https://github.com/ysyun/jmqtt_client.git


  • c6d5478 commit 내역에서 aa64af1 commit 내역으로 이동하기 : git reset --soft HEAD~  (staging, working 영향없음)
  • --mixed 는 staging을 local repository와 같게 만든다. 즉, staging에 HEAD정보를 복사하여 영향줌. working 영향없음 
  • --hard 는 staging, working 둘다 영향을 줌
$ git reset --soft HEAD~

yuwonsystem01@YSYUN91005152 /d/git-repositories/jmqtt_client (rb_1.0)
$ git reflog
aa64af1 HEAD@{0}: reset: moving to HEAD~
c6d5478 HEAD@{1}: commit: add license properties
aa64af1 HEAD@{2}: checkout: moving from master to rb_1.0
aa64af1 HEAD@{3}: checkout: moving from master to master
aa64af1 HEAD@{4}: merge rb_1.0: Fast-forward
e13af6f HEAD@{5}: checkout: moving from rb_1.0 to master
aa64af1 HEAD@{6}: commit: License Info about mqtt client for java
e13af6f HEAD@{7}: checkout: moving from master to rb_1.0
e13af6f HEAD@{8}: commit: add eclipse foundation software user agreement propert
475d6ae HEAD@{9}: clone: from https://github.com/ysyun/jmqtt_client.git

// git reset에서 이전 commit 이동하였으나 다시 앞선 커밋인 c6d5478 로 원복하고 싶을 경우
$ git reflog
aa64af1 HEAD@{0}: reset: moving to HEAD~
c6d5478 HEAD@{1}: commit: add license properties
// 위에서 HEAD@{1} 을 reset하면 다시 최신 HEAD로 간다 
$ git reset HEAD@{1}


  • aa64af1 commit 으로 이동했을 때 상태 정보를 확인 : git status  (c6d5478 commit 되기전 rename 명령을 내렸었음)
$ git status
# On branch rb_1.0
# Changes to be committed:
#   (use "git reset HEAD <file>..." to unstage)
#
#       renamed:    license.dat -> license.properties

// 만일 staging에 있는 변경내역을 반영하고 싶지 않을 경우 
// 변경 파일이 하나 존재 
$ git status
# On branch feature_input_data
# Changes not staged for commit:
#   (use "git add <file>..." to update what will be committed)
#   (use "git checkout -- <file>..." to discard changes in working directory)
#
# modified:   app/views/moving_average.html
#
no changes added to commit (use "git add" and/or "git commit -a")

// 설명문의 내역에 따라 파일이 있는 경로명과 함께 입력 
$ git checkout -- app/views/moving_average.html

// status로 다시 확인해 보면 방금 변경된 특정 staging에 있는 파일 내역을 이전 commit 당시 상태로 되돌려 놓았음
$ git status
# On branch feature_input_data
nothing to commit, working directory clean

  • Git 에서 HEAD, Branch는 Pointer이다 

* 참고 : 개발자를 위한 고급 Git 활용 (p100부터)


저작자표시 비영리 변경금지

'Git, GitHub > Git Lec01' 카테고리의 다른 글

[Git] tag 다루기  (0) 2012.12.20
[Git] Remote 저장소 연결 및 관리  (0) 2012.12.17
[Git] History 이용 및 관리하기  (0) 2012.12.13
[Git] Merge 종류와 충돌 해결하기  (0) 2012.12.12
[Git] Hash Object 정보보기  (0) 2012.12.11
posted by Peter Note
2012. 12. 11. 11:02 Git, GitHub/Git Lec01

[Git] Hash Object 정보보기

commit을 하여 Blob format으로 되어 있는 binary 파일에 대한 명칭은 SHA-1 해쉬알고리즘으로 해쉬명을 가지고 있다. 파일명과 해쉬명을 오가면 확인하는 방법을 알아보자 


  • 파일명 통하여 해쉬명 알아내기 : git hash-object <fileName>
$ git hash-object license.properties
b2ece065fd82ac65e5871a602166586fe691e3e7


  • 해쉬명 앞 6자리를 통하여 변경 내역이 무엇인지 파악하기 : git cat-file -p <해쉬명 앞 6자리>
$ git cat-file -p b2ece0
mqtt client for java version 1.0
written by ysyun, 2012


  • 전체 해쉬에 대한 파일명 맵핑 목록 보기 : git ls-files -s  ( .git/index 파일 내역을 참조함 )
$ git ls-files -s
100644 63bc96b980e4f36e5679312d4437908eb3add614 0       .classpath
100644 c349675aef6a30ee914d585a741bd742aad8b027 0       .project
100644 8e4055a6fa840c0bb4179360cee8a6e10352309f 0       .settings/org.eclipse.jdt.core.prefs
100644 8a6d87a1e842e58d1ea6bb707510c62f5eacc3d0 0       .settings/org.eclipse.m2e.core.prefs
100644 3ae4edb1acf2899b42b8ee6b9fd1c1ccb07cdd48 0       README.md
100644 026d2feeef3eccda9bbaae9db1ad251b9a436203 0       eclipse_feature.properties
100644 5ada071fd63361c553a5a1f7e9b816025e992c13 0       jmqtt_client-1.0.jar
100644 b2ece065fd82ac65e5871a602166586fe691e3e7 0       license.properties
100644 5f6e56a8381891e9ad64b61f58716ec7925ec5bb 0       pom.xml
100644 1fdcc8c6237579974f662d902f28d13f4c592580 0       src/main/java/MqttService.java




▶ Git의 4가지 객체


> Blob Object

  • Header + Content 
  • zlib으로 압축되어 있음
  • .git/objects/ 아래 있음 

> Tree Object
  • blob + 다른 tree 객체
  • 폴더와 같은 개념
  • .git/objects/ 아래 있음 

> Commit Object
  • blobs + trees + author + date + message
  • .git/objects/ 아래 있음

> Tag Object 
  • pointer to commit object
  • .git/refs/tags/ 아래 있음 


* 참고 : 개발자를 위한 고급 Git 활용 (p50부터)

저작자표시 비영리 변경금지

'Git, GitHub > Git Lec01' 카테고리의 다른 글

[Git] tag 다루기  (0) 2012.12.20
[Git] Remote 저장소 연결 및 관리  (0) 2012.12.17
[Git] History 이용 및 관리하기  (0) 2012.12.13
[Git] Merge 종류와 충돌 해결하기  (0) 2012.12.12
[Git] Reset 사용하기  (0) 2012.12.11
posted by Peter Note
2012. 12. 10. 17:22 NodeJS/Concept

[Node.js] Global Objects

전역범위에서 참조가 가능한 글로벌 오브젝트. already defined object라고 할 수 있겠다. 



global objects 
> 하기 객체는 모든 모듈에서 이용할 수 있다. 실제 전역 범위를 가진다 
> node에서 var something의 something은 지역범위만 갖는다 
> global : {Object} 전역 네임스페이스 객체 
> process, console : {Object}
> Class: Buffer : {Function} 바이너리 데이터를 다루는데 사용 
> require() : 모듈 로딩으로 지역범위임
> __filename : {String} 실행되는 코드의 파일명 (코드의 절대경로 포함)
> __dirname : {String} 현재 실행되는 스크립트가 존재하는 디렉토리 경로 
> module : {Object} 현재 모듈에 대한 참조. 특히 module.exports는 exports 객체와 같다 
> exports : require()로 접근가능하게 된 모듈의 모든 인스턴스 사이에서 공유되는 객체다. 
> setTimeouts(cb, ms) : cb=callback, ms=milliseconds
  clearTimeout(t) : setTimeout()올 생성된 타이머를 멈춘다
> setInterval(cb, ms) : 반복적으로 callback 수행
  clearInterval(t)


>> fileName : globalTest.js

console.log(__filename);

console.log(__dirname);


>> 수행 

D:\Framework\Node.js> node globalTest

D:\Framework\Node.js\globalTest.js

D:\Framework\Node.js


저작자표시 비영리 변경금지

'NodeJS > Concept' 카테고리의 다른 글

[Jade] Jade 사용하기  (0) 2012.12.15
[EJS] 사용하기  (0) 2012.12.15
[Node.js] File I/O 사용하기  (0) 2012.12.10
[Node.js] EventEmitter 에 대하여  (0) 2012.12.10
[Node.js] debugger 사용하기  (0) 2012.12.10
posted by Peter Note
2012. 12. 10. 17:00 Lean Agile Culture/Architecturing

[아키테쳐링] Netflix SlideShare

SlideShare 링크 



저작자표시 비영리 변경금지

'Lean Agile Culture > Architecturing' 카테고리의 다른 글

[아키텍쳐] A Full Javascript Architecture - NodeJS (1)  (0) 2013.02.06
[기술셋] Backbone.js Node.js MongoDB를 이용한 Web Application 개발  (0) 2013.01.31
[아키텍쳐링] Evernote SlideShare  (0) 2012.12.10
대용량 아키텍쳐 설계 엔지니어 되기  (0) 2012.11.20
[아키텍쳐링] 스타트업 기업들의 기업문화와 아키텍쳐들  (0) 2012.11.16
posted by Peter Note
2012. 12. 10. 16:59 Lean Agile Culture/Architecturing

[아키텍쳐링] Evernote SlideShare

SlideShare 링크 



저작자표시 비영리 변경금지

'Lean Agile Culture > Architecturing' 카테고리의 다른 글

[아키텍쳐] A Full Javascript Architecture - NodeJS (1)  (0) 2013.02.06
[기술셋] Backbone.js Node.js MongoDB를 이용한 Web Application 개발  (0) 2013.01.31
[아키테쳐링] Netflix SlideShare  (0) 2012.12.10
대용량 아키텍쳐 설계 엔지니어 되기  (0) 2012.11.20
[아키텍쳐링] 스타트업 기업들의 기업문화와 아키텍쳐들  (0) 2012.11.16
posted by Peter Note
2012. 12. 10. 16:35 NodeJS/Concept

[Node.js] File I/O 사용하기

node.js에서 File I/O 를 위하여 역시 모듈을 로딩하여 사용한다 



> require('fs') 포함 
> 비동기 방식은 마지막 파라미터로 완료 콜백함수를 받고, 첫 아규먼트로 에러를 받음. 성공이면 null 또는 undefined 가 된다 
> rename과 stat가 비동기 호출이므로 오류 발생가능성 존재 

fs.rename('/tmp/hello', '/tmp/world', function (err) {

  if (err) throw err;

  console.log('renamed complete');

});

fs.stat('/tmp/world', function (err, stats) {

  if (err) throw err;

  console.log('stats: ' + JSON.stringify(stats));

});

> 이를 해결하기 위하여 callback chain을 사용한다. 즉, callback안에 callback function을 둔다 

fs.rename('/tmp/hello', '/tmp/world', function (err) {

  if (err) throw err;

  fs.stat('/tmp/world', function (err, stats) {

    if (err) throw err;

    console.log('stats: ' + JSON.stringify(stats));

  });

});


-- 결과 내역 

stats: {"dev":0,"mode":33206,"nlink":1,"uid":0,"gid":0,"rdev":0,"ino":0,"size":1876992,"atime":"2012-09-17T18:05:45.000Z","mtime":"2012-09-17T18:05:48.000Z","ctime":"2012-09-17T18:05:41.000Z"}


저작자표시 비영리 변경금지

'NodeJS > Concept' 카테고리의 다른 글

[EJS] 사용하기  (0) 2012.12.15
[Node.js] Global Objects  (0) 2012.12.10
[Node.js] EventEmitter 에 대하여  (0) 2012.12.10
[Node.js] debugger 사용하기  (0) 2012.12.10
[Express] Express Framework 사용하기  (0) 2012.10.30
posted by Peter Note
2012. 12. 10. 16:08 NodeJS/Concept

[Node.js] EventEmitter 에 대하여

EventEmitter는 말 그대로 이벤트를 발생시키는 모든 객체를 지칭한다. 서버에 접속(connect)할 때 이벤트가 발생하고 파일을 읽을 때 이벤트가 발생하는 식으로 이미 내장된 이벤트들이 존재할 것이고, 사용자 정의 이벤트를 만들 수도 있을 것이다. 



> require('events') 첨부한다 
> 이벤트를 발생시키는 모든 객체는 events.EventEmitter 의 인스턴스 
> 이벤트 발생할 때 실행할 함수를 객체에 연결, 이러한 함수를 리스너(Listener)라고 부른다 
> EventEmitter 접근 : require('events').EventEmitter
> emitter.on(event, listener) 또는 emitter.addListener(event, listener)
  예) server.on('connection', function(stream){...});
> emitter.once(event, listener) : 한번만 수행 즉, 일회성 listener 
> emitter.removeListener(event, lisetener) : listener 제거 
> emitter.removeAllListeners() : 모든 listener 제거 
> emitter.setMaxListeners(n) : listener등록이 10개 default로 제한, emitter의 listener 갯수를 늘릴 수 있다. 


저작자표시 비영리 변경금지

'NodeJS > Concept' 카테고리의 다른 글

[EJS] 사용하기  (0) 2012.12.15
[Node.js] Global Objects  (0) 2012.12.10
[Node.js] File I/O 사용하기  (0) 2012.12.10
[Node.js] debugger 사용하기  (0) 2012.12.10
[Express] Express Framework 사용하기  (0) 2012.10.30
posted by Peter Note
2012. 12. 10. 15:42 NodeJS/Concept

[Node.js] debugger 사용하기

node명령으로 자바스크립트 코드를 수행할 때 콘솔상에서 debugging을 할 수 있다. 


  • debugger 키워드를 코드에 끼워 넣는다 : breakpoint 역할을 한다 
  • cont, c : 계속 진행 
  • next, n : step next
  • step, s : step in
  • out,   o : step out
  • pause  : 실행 멈춤 
  • 상세명령들

> 예제 코드 (debuggerTest.js)
x = 5;
setTimeout(function () {
  debugger;
  console.log("world");
}, 1000);
console.log("hello");



> 디버깅 수행 : node debug <수행 자바스크립트 파일명>

D:\Framework\Node.js> node debug debuggerTest

< debugger listening on port 5858

connecting... ok

debug> cont

< hello

break in D:\Framework\Node.js\debuggerTest.js:3

  1 x = 5;

  2 setTimeout(function () {

  3   debugger;

  4   console.log("world");

  5 }, 1000);

debug> next

break in D:\Framework\Node.js\debuggerTest.js:4

  2 setTimeout(function () {

  3   debugger;

  4   console.log("world");

  5 }, 1000);

  6 console.log("hello");

debug> cont

< world

program terminated


hello을 찍고 debugger가 있는 곳에서 멈추면 next step으로 이동하면 console 객체로 가고 cont하면 수행을 다시 하여 world 문자가 찍힌다. 수행되는 process를 command line에서 추적해 보고자 할 경우 사용하면 좋겠다. 


저작자표시 비영리 변경금지

'NodeJS > Concept' 카테고리의 다른 글

[EJS] 사용하기  (0) 2012.12.15
[Node.js] Global Objects  (0) 2012.12.10
[Node.js] File I/O 사용하기  (0) 2012.12.10
[Node.js] EventEmitter 에 대하여  (0) 2012.12.10
[Express] Express Framework 사용하기  (0) 2012.10.30
posted by Peter Note
2012. 12. 8. 15:16 NodeJS

[Node.js] 라이언 일병 이야기 이해하기

Node.js 주말강좌 요약하기 


> 참조 : 라이언 일병(Ryan Dahl) 의 발표와 PPT자료 : Node.js 에 대한 문화적, 구조적 차이를 이해하자!

> 참조 : Node.js API 사용 (예제 포함)


  • 현재 System(I/O) : L2 Cache <-> Memory <-> Disk  대비 Network I/O = compiler 서비스
  • Web System : a = b() 식의 assign 즉 sync를 사용하지 않는다. b(a) {} 를 사용하자 (async 방식)
  • b(a) {} 구문에서 Node.js는 a = call back 객체이다 = anonymous object = closure object = 스트림에서 이해됨 
  • stream = functional의 목적은 네트워크에 있는 모듈을 Merge하여 사용하는 것이다 = social web service 세대 
  • Node.js는 모듈 기반이고 모듈을 위한 스펙 CommandJS와 AMD를 이해하자 
  • Node.js의 수많은 Modules in GitHub
  • Node.js에 대한 기본적이 이해


저작자표시 비영리 변경금지

'NodeJS' 카테고리의 다른 글

[Node.js] 프론트앤드 개발을 위한 Command-Line Tools (CLI)  (0) 2013.01.24
[Node.js] 역사와 기초  (0) 2012.12.08
[Node.js] 시작하기  (1) 2012.10.30
posted by Peter Note
2012. 12. 8. 11:18 NodeJS

[Node.js] 역사와 기초

이복영 강사님의 Node.js 와 MongoDB 주말강좌부분을 들으며 요약하기 




▶ 자바스크립트 
  • 에크마스크립트 : ECMAScript 6 로 가고 있다. 
  • 표준언어 : 자바스크립트 통일 = Presentation (Backbone.js or 앵귤러) + Application Tier(Node.js + Express.js) + Database(MongoDB + mongoos.js)


  • 자바스크립트를 크롬에서 간단히 테스트 해보기 : 크롬에서 F12에서 console 선택하여 자바스크립트 코드 넣고 Enter
  • 각 Tier별 MVC Fraemwork = Presentation (BackBone.js) + Appllcation(Express.js) + MongoDB(Mongoos.js)
  • MongoDB 와 함께 Redis를 사용 : 이때는 mongoose를 사용한다 
  • 윈도우에서 Node.js 개발시 : Microsoft제공 webmatrix tool로 개발 - MVC 코딩이 쉽다  



▶ Web 역사

  • Polling Service (Request + Response) = internet polling (ajax : client side), long polling (web api : server side)
    content delivery service (webserver 기술) = document base operation  -> Compile 기술
    • 제 1세 web : static web - IBM Host 기술 
    • 제 2세 web : dynamic web - C/S PC 기술
  • bi-direction Service (websocket) = data (json) delivery service = stream task operation( = functional operation) 
    -> Service 기술 (공식 전용 언어 : JavaScript -> ECMAScript 6)
    • 제 3세 web : social network web service - Smart Device 기술 (Virtual Host)


▶ 3 세대 Web
  • Task Base Operation = workflow (사람 + 정보 + 프로세스) -> Activity 단위 (스마트폰을 통해 구현되고 있다)
  • 객체 {key, value} 에서 key = property 이고 { {k,v}, {k,v} } 에서 {k,v} 를 attribute라고 한다. 이를 가지고 functional 프로그램을 한다 
  • Presentation 자바스크립트의 코딩 이동방향
    • getElementByID : javascript 직접 핸들링
    • jQuery : MVVM의 Knockout.js 사용, 물리적 뷰 사용
    • Undersocre.js (4kbytes) : functional 코딩, 논리적 뷰 사용, {k,v} 같은 그룹객체를 다룬다 (ORM) 
    • BackBone.js : 논리적 뷰 사용 (모바일 통해 다운로드 받는 세상)
  • Ria -> WebApp -> Smart UI (?)
  • Node.js와 MongoDB의 조상은 Underscore.js 이다
  • Functional Operation = Execution 밖에 없다. 크기는 4 Kbytes 이다. 
  • 1,2 세대의 기술과 3 세대 기술을 mix 하지 말고, 비교하지 말라


저작자표시 비영리 변경금지

'NodeJS' 카테고리의 다른 글

[Node.js] 프론트앤드 개발을 위한 Command-Line Tools (CLI)  (0) 2013.01.24
[Node.js] 라이언 일병 이야기 이해하기  (0) 2012.12.08
[Node.js] 시작하기  (1) 2012.10.30
posted by Peter Note
2012. 12. 7. 14:38 Dev Environment/Sublime Text

[Sublime Text 2] 한글 인코딩 보기

Sublime Text 2를 설치하고 한글 문서를 열어 보면 깨져 나온다. 우선 인코딩이 안맞는 것인데 그럴경우 플러그 하나 설치하자. 


  • 우선 Install Package 설치하자 
  • 제공하는 플러그인 : EncodingHelper
  • Install Package (ctrl+shift+p)에서 EncodingHelper 나오면 설치를 한다 
  • 설치후 sublime text에서 
    • edit menu 선택
    • 맨 하단 convert to UTF-8 from Encoding 선택
    • 맨 위 Complete List Sorted 선택
    • 위에서 7번째 EUC KR 선택

이제 한글이 제대로 보이기 시작한다. 


저작자표시 비영리 변경금지

'Dev Environment > Sublime Text' 카테고리의 다른 글

[Sublime Text 2] Mac OS X 의 Terminal 에서 바로 수행시키기  (0) 2013.03.12
[Sublime Text 2] Jade, Stylus 플러그인 설치  (0) 2013.02.02
[Sublime Text 2] CoffeeScript 설정하기  (0) 2013.01.30
[Gist] SublimeText 2 의 코드를 Gist로 전송  (0) 2012.12.05
[Sublime Text 2] 설치 및 환경설정하기  (0) 2012.10.30
posted by Peter Note
2012. 12. 7. 13:59 Middleware, Cloud/Linux

[Linux] Free Memory 사이즈 알기

운영중에 Free Memory size가 부족하다고 하여 top 명령어로 살펴보았다. 


top - 13:52:48 up 60 days,  4:05,  2 users,  load average: 0.09, 0.34, 0.46

Tasks: 186 total,   1 running, 185 sleeping,   0 stopped,   0 zombie

Cpu(s):  1.8%us,  0.2%sy,  0.0%ni, 97.8%id,  0.1%wa,  0.0%hi,  0.0%si,  0.0%st

Mem:  47185920k total, 47125908k used,    60012k free,  1250664k buffers

Swap: 10485752k total,      120k used, 10485632k free, 30877100k cached


  - Mem: 60,012 free 로 나온 것을 보아 헉 현재 60Mbytes 밖에 여유가 없다니! 과연 그럴까?

  - Linux의 경우 real free = free + cached of Swap 로 봐야 한다. 


free -gt 명령을 수행해 보면, 여유 메모리는 30G가 됩니다. 따라서 free 0 로 나오지만 buffers + cached 30G 의 free memory 여유가 있다고 보면 됩니다. 

[jboss@hostname ~]$ free -gt
                 total       used     free     shared   buffers  cached
Mem:            45         44          0          0          1         29
-/+ buffers/cache:     14         30
Swap:            9          0          9
Total:            54        44         10

cashed는 여유메모리로 보시면 됩니다.

리눅스 시스템은 파일형태로 관리되는 운영체제이기때문에 여유메모리를 캐쉬파일로 표현되고 있습니다.

또한 스왑이란 실제 메모리 캐쉬메모리까지 모두 사용해서, 부족할때 하드 일부분을 메모리 처럼 가져다 쓸때 사용되는 메모리를 말합니다.

free -gt로 보시면 사용되는 스왑메모리는 거의없습니다.

현재 메모리 여유가 있다고 보시면됩니다.


<참고>

  - 리눅스 메모리 관리

저작자표시 비영리 변경금지

'Middleware, Cloud > Linux' 카테고리의 다른 글

[Linux] Bash Shell for Log Backup  (0) 2013.02.20
[Linux] CPU 갯수 알아내기  (0) 2013.02.07
[Linux] 현재 공동작업하는 사람이 무얼하는지 알고 싶을 경우  (0) 2013.01.11
[Linux] Ubuntu 에 Maven 2 설치  (0) 2012.11.23
[Linux] vsftpd 설치하기  (0) 2012.11.21
posted by Peter Note
2012. 12. 5. 20:16 Dev Environment/Sublime Text

[Gist] SublimeText 2 의 코드를 Gist로 전송

Gist를 GitHub이 운영하는 코드 Snippet을 관리할 수 있는 서비스이다. 이와 비슷하게 jsFiddle.net 에서도 html/css/javascript를 저장하고 테스트까지 해볼 수 있다. 



> GitHub에 로그인 하면 상단에 Gist 메뉴가 나온다. 클릭!  (발음 : 지스트)


> Sublime Text를 통하여 등록한 코드조각이 우측에 보인다. (Create Private Gist 로 생성)


> 우측 등록된 코드조각을 클릭하면 코드를 볼 수 있고, 멘션을 달 수 있다. 




저작자표시 비영리 변경금지

'Dev Environment > Sublime Text' 카테고리의 다른 글

[Sublime Text 2] Mac OS X 의 Terminal 에서 바로 수행시키기  (0) 2013.03.12
[Sublime Text 2] Jade, Stylus 플러그인 설치  (0) 2013.02.02
[Sublime Text 2] CoffeeScript 설정하기  (0) 2013.01.30
[Sublime Text 2] 한글 인코딩 보기  (0) 2012.12.07
[Sublime Text 2] 설치 및 환경설정하기  (0) 2012.10.30
posted by Peter Note
2012. 12. 5. 10:39 Lean Agile Culture

GearMan 에 대하여

예전 한 서버안에서 대량으로 들어오는 데이터처리를 위하여 Multi-Thread 기반 Queuing을 통하여 막힘없는 서비스를 구현했었다. 하지만 점점더 많은 데이터가 들어올 경우 Scale out을 하려면 결국 어떻게 해야 할까? 서로 다른 Stack에 있는 것들 예로 웹서버와 데이터베이스 사이, 또는 WAS와 데이터베이스사이에 Queue를 두고 사용하면 어떨까 생각해 볼 수 있다. 


  • A<->B 사이에 데이터량은 많으나 느린 성능이 예상될 경우
  • A는 계속 막힘없이 다음 C를 호출해야 할 경우
  • 정기적인 통계정보 생성 및 레포트 생성 배치 Job도 괜찮을 듯 하다. 

결국 Queue기반 Job 분산처리 Server 라고 이해하면 될듯...


▶ GearMan 이해하기

GearMan은 Queue를 하여 요청을 처리하는 Job Server이다. Scale Out을 고려하여 여러대의 서버를 운영하여 Job을 수행해야 한다면 좋은 대안으로 보인다. 



> 파란색의 Client와 Worker만 API를 사용하여 간단히 작성하면 된다. 다양한 언어에 대하여 지원한다


> Client 코드 : 함수를 문자 리터럴로 전송


> Worker 코드 : 함수를 문자 리터럴로 전송 


> 호출 흐름도 

> 구성 예시 : High Availibility와 Fault Tolerance의 분산 환경의 구성이 가능하다



저작자표시 비영리 변경금지

'Lean Agile Culture' 카테고리의 다른 글

HTTP Header의 user-agent 에 대한 역사  (0) 2012.12.21
모바일 컨버전스 5가지 패러다임  (0) 2012.12.17
jsfiddle 이용하여 js code 블로그에 embedding 하기  (0) 2012.11.25
SW 개발에 꼭 필요한 시스템  (0) 2012.11.21
좋은 타이밍이란 없다  (0) 2012.08.22
posted by Peter Note
2012. 11. 28. 15:17 Protocols

Advanced Message Queueing Protocol (AMQP) 란 무엇인가

Polyglot 에 기반한 서비스를 만들다 보면 아키텍쳐링을 위하여 Queue 시스템이 필요할 경우가 있다. Message Queue를 위하여 Open Source로 제공되는 구현체들이 존재하기도 한다. 각각에 대한 궁금증을 풀어보자


  • AMQP 무엇인가 : 메세지 통신을 위한 규약 스펙 (참조)
  • 구현체는 무엇들이 있는가 : Rabbit MQ, Apache Qpid, etc
  • 어느 때 사용하는가 : 서로 다른 시스템이나 서비스를 업무적으로 엮으고 싶을 경우 (참조)
  • Spring Framework와 잘 어울리는 것은 : Rabbit MQ - spring AMQP 에 포함됨 (참조)

모바일 서비스 구축시 내부 확장과 다양한 언어에 대한 통합을 고려한다면 필수 아이템이 되겠다. 하기 그림은 CloudFoundry에서 제시하는 아키텍쳐이다





저작자표시 비영리 변경금지

'Protocols' 카테고리의 다른 글

MQTT 사용하기 - 1  (1) 2012.09.11
MQTT Push  (0) 2012.09.10
posted by Peter Note
2012. 11. 27. 17:18 Middleware, Cloud/DBMS

MySQL 에 데이터베이스 만들고 테이블 만들기

AMPSetup에서 install wizard로 설치후에 MySQL을 사용해 본다. apmsetup으로 설치를 하면 mysql console을 수행할 수 있고, 여기서 부터 mysql 명령을 통해 테이블을 만들어 보자


  • 테이터베이스 로그인 : mysql -u <id> -p <password> (만일 root 패스워드 잃어버렸을 경우 재설정 방법, APMSetup으로 설치하면 root default 암호 : apmsetup)
  • 테스트 데이터베이스 생성 : create database <database명>;   (참조)
  • 생성 내역 보기 : show databases;  (참조)
  • 데이터 베이스 사용하기 : use <database명>;
  • 테이블 보기 : show tables;  
mysql> create database ajax;
Query OK, 1 row affected (0.00 sec)

mysql> show databases;
+--------------------+
| Database           |
+--------------------+
| information_schema |
| ajax               |
| mysql              |
| phpmyadmin         |
+--------------------+
4 rows in set (0.00 sec)

mysql> use ajax;
Database changed
mysql> show tables;
Empty set (0.00 sec)

mysql> create table comment(
    ->    id  int primary key,
    ->    name varchar(20) not null,
    ->    content long varchar not null
    -> );
Query OK, 0 rows affected (0.01 sec)

mysql> create table id_repository(
    ->    name varchar(2) primary key,
    ->    value int
    -> );
Query OK, 0 rows affected (0.01 sec)

mysql> insert into id_repository values('commnet', 0);
Query OK, 1 row affected, 1 warning (0.00 sec)

ajax 샘플 프로그램-댓글 달기- 테스트 하면서 만든 테이블 구조


저작자표시 비영리 변경금지

'Middleware, Cloud > DBMS' 카테고리의 다른 글

ORA-12505, TNS:listener does not currently know of SID - 오류 해결하기  (0) 2012.10.21
posted by Peter Note
2012. 11. 27. 16:54 Languages

APM 설치하기

Apache, PHP, MySQL을 가장 편하게 설치할 수 있는 방법을 제공하는 사이트 소개


  - APM 일반사항을 설치 : start, stop UI 제공

  - HongPD : 문서파일 검색 사이트 구축

  - WowIP : wifi 환경의 유동아피를 고정아이피화하여 내 PC를 서버로 만들 수 있게 해줌 


설정 관련 부분을 bitnami 처럼 패키징화하여 install wizard를 통하여 설치토록 해준다. Go~~~~od!


저작자표시 비영리 변경금지

'Languages' 카테고리의 다른 글

[문서화 도구] Groc 사용하기  (0) 2013.03.09
posted by Peter Note
2012. 11. 27. 15:26 Dev Environment/JetBrains, Eclipse

[Eclipse] Color Theme 설정

Eclipse Editor의 색상에 대하여 원하는 스타일로 변경하고 싶다면 직접하거나 또는 Plugin을 설치하여 손쉽게 변경을 할 수 있다. 



흰바탕의 깔끔한 Roboticket 스타일 추천


저작자표시 비영리 변경금지

'Dev Environment > JetBrains, Eclipse' 카테고리의 다른 글

[Webstorm] Editor Skin을 Sublime Text 2 스타일로 Customizing 하기  (0) 2013.06.07
[WebStorm] Karma (Testacular) Start, Run, Debug 수행하기  (0) 2013.04.14
[IntelliJ IDEA] Project 및 클래스 생성하기  (0) 2013.01.09
[IntelliJ IDEA] 프로젝트의 Library 셋팅하기 & Hot Keys  (0) 2013.01.09
[WebStorm] Live Edit 설정하기  (0) 2012.12.23
posted by Peter Note

티스토리툴바