근두달만에 새로운 마음으로 포스팅 재 실시 ! Ember.js 먼저 

Todos.TodoController = Ember.ObjectController.extend({
 
  actions: {
   editTodo: function() {
     this.set('isEditing', true);
     },
     removeTodo: function(){
          var todo = this.get('model');
          todo.deleteRecord();
          todo.save();
    }
   },

   acceptChanges: function() {
      this.set('isEditing', false);

      if (Ember.isEmpty(this.get('model.title'))) {
        this.send('removeTodo');
      } else {
        this.get('model').save();
      }
  },
  isCompleted: function(key, value){
    var model = this.get('model');

    if (value === undefined) {
      // property being used as a getter
      return model.get('isCompleted');
    } else {
      // property being used as a setter
      model.set('isCompleted', value);
      model.save();
      return value;
    }
  }.property('model.isCompleted'),

  isEditing:false

});

Spring 4.0 의 REST 테스트를 위해서  , RestClient 프로그램을 찾던중 MAC 에서 쓸만한 프로그램이 있어서

소개를 하고자 한다. 

이름은 CocoaRestClient 고 무료로 다운받을 수 있다. 

주소는 https://code.google.com/p/cocoa-rest-client/  여기서 받을수 있다.

나름 깔끔한 UI 를 자랑하며, RestClient 로써 갖추어야 하는 기본적인 기능들은 모두 구현되어 있다. 

추천 !

오늘 포스팅할 내용은 CoffeeScript 라는 녀석이다. 

처음 CoffeeScript 라는 이름을 들었을때는 작명 센스가 대단하다는 느낌과 어떤 스크립트길래 커피라는 이름을 

붙혔을까라는 궁금증이 생겼다.

결론적으로 말하자면 CoffeeScript의 정의는 JavaScript로 컴파일 되는 기존 JavaScript를 간결화 시킨 스크립트 이다.

말이 어렵나 ?새로운 스크립트 랭귀지라기 보다는 우리가 기존에 사용중인 자바스크립트의 간소화 버젼? 

이라고 생각하면 된다. 

괄호나 세미콜론은 과감히 생략하고 함수의 정의조차 간단하게 만들어 버렸다. 

자바스크립트를 활용한 OO 프로그래밍을 좀더 명확히 표현할수 있도록 기능을 제공한다.

더 알아보기 쉽고, 빠르게 자바스크립트를 작성할수 있는게 장점이라고 한다. 기존에 자바스크립트를 사용했던 사람이

배우는데 크게 어렵거나 오랜 시간이 걸리지 않기 때문에 도전해보기 바란다. 

이제 기존 JavaScript 와 CoffeeScript 간 어떤 차이가 있는지 몇가지 케이스에 따라 살펴보자

* 변수선언

위와 같이 커피 스크립트는 변수를 따로 선언하지 않는다. 또한 세미 콜론도 생략한다. 

*함수선언 및 기본값(Default Value) 설정

위 자바스크립트 함수는 message 를 입력받고 해당 메시지가 없으면 기본메시지(Ready for some Coffeee?) 메시지가 뜨고 , 메시지가 있는경우 해당 메시지로 Confirm 창을 띄워서 사용자로부터 답을 입력 받도록 되어 있는 JavaScript 함수이다. 이 함수를 CoffeeScript로 변형한 결과는 다음과 같다.

단 4줄로 변형되었다. 여기서 설명할 부분은 함수의 구현은  = -> 을 이용해서 정의되었고, 괄호는 Indent를 통해서 표현되었다. 또한 문자열 안에서의 값은 #{변수명}으로 나타내었으며, 2번째 라인에서는 파라미터의 Default 값이 선언 되었다. CoffeeScript의 자세한 문법을 설명하려는것은 아니므로 자세한 설명은 생략하겠다. 

중요한것은 위처럼 우리가 의식하지 않은채 작성하던 불필요한 표현을 아래와 같이 간결한 문법으로 변형할수 있다라는 것이다. 

*JQuery to CoffeeScript

BROMPTON

요즘 시간이 날때마다 하는짓이 있는데... 여행가는 상상 ? 생각 ? 이 그것이다. 

5월에 끊어놨던 뱅기표를 취소하고나니 마음이 더 싱숭생숭 해서 어디든지 떠나봐야 겠다는 생각을 하고...

기왕 갈거면 나의 애마 브롬톤과 함께 하자란 생각이 들었다. 

그래서.... 열심히 눈팅질을 하던 도중 이걸 발견.

보자마자 바로 오더 !! 2개나 !! 얼핏 보면 비닐백같지만... 

이렇게 포장이 가능하다 ! 박스 + 뽁뽁이 포장을 하면 비행기 화물로 운반이 가능하다. 

허허 그래서 이제 계획을 짜볼려고 하는데.... S전자 박모양께서 5월엔 비행기표가 없을거라고 포기하라 하신다.

이번엔 상상여행 말고... 실제로 여행을 떠나보자. ㄱㄱㄱㄱㄱ

오늘 소개할 내용은 CodeSchool 이라는 프로그래밍 학습사이트에 대한 내용이다. 

https://www.codeschool.com/

코드 스쿨은 프로그래밍을 온라인 으로 학습할수 있는 사이트라고 생각하면 된다. 

평소에 관심 있는 랭귀지나 기술이 있다면 가입해서 공부하면 도움이 많이 될거 같다. ( 한달 $29 )

교육의 큰 카테고리는 4개로 구성되어 있으며 , 각각의 카테고리 안에 코스가 있다.

RubyPath : Rails, Git , Git Real, Testing with Rspec 등

JavaScript Path : JavaScript, Try Jquery, Backbone.js, Ember.js, Node.js, coffeeScript, AngularJS(todo)

HTML/CSS : CSS, Front-end Formation, Saas 등

iOS Path : Try iOS, Try Objective-C, core IOS7, Exploring Google Maps for IOS

기본적인 내용부터 최신 트랜드까지 많은 강좌들이 있다. 한달 결제를 하면 제한 없이 위 코스들을 모두 수강할수 있다. 

코스를 시작하면 어떤식으로 학습이 진행되는지 설명하겠다. (예로 현재 열심히 배우고 있는 Ember에 대해서 설명하겠다)

가입을 하고 로그인을 하면 위와 같이, 현재 진행중인 과정과 그동안 익힌 기술의 진행도가 표시된다.

학습을 시작하게 되면 해당 단원과 관련되어 있는 내용에 대한 동양상 이론강의가 진행 된다.(물론 영어로,,,)

영어로 강의가 진행되지만, 개발자가 구사하는 영어라 우리가 아는 용어들이 대부분이므로 , 크게 어렵지는 않게 이해할수 있을것이다. 이보다 충격적인 것은... 각 코스마다 과정과 관련된 인트로 음악이 등장한다...이것이야 말로 컬쳐쇼크

이론강의가 끝나면 다음과 같은 화면이 나온다.

왼쪽은 이번 미션에 대한 개요와 문제가 나와 있는 부분이고, 오른쪽은 개발을 할수 있는 에디터 창 화면이다. 

문제는 다음과 같은 식으로 나온다.

이번 미션을 완료하기 위해서는 8개의 Task 를 완료해야 되고 첫번째 테스크에 대한 질문이다. 

교육 내용과 관련된 내용이 기억나지 않는 경우엔 SLIDE 를 보거나 VIDEO 를 다시 볼수도 있다. 

그래도 모르겠다 라고 하면 "Show Answer" 버튼을 통해서 빠르게 답을 확인할수도 있다. 

다음과 같이 Task 에서 지시하는대로 코드를 작성하면, 자동으로 컴파일을 하고 해당 Task 를 완료 시킨다.

이런식으로 모든 테스크를 마무리해야지 한 단원이 끝나는 식으로 진행된다. 

막연히, 배운다는 생각보다는 잼있는 미션들을 깬다는 생각으로 프로그램을 익힐수 있도록 만든것이 이 사이트의 장점

이라고 생각한다.

또 하나의 장점은, 따로 개발환경 설치가 필요 없다는 것이다. 웹사이트를 통해서 진행되기 때문에 환경 설치가 된 PC를

가지고 다니면서 학습하지 않아도 된다는 점이다. 마음만 먹는다면 테블릿 PC에서도 학습이 가능하다. 

웹을 통해서 제공되는 개발환경은 실제 환경과 매우 흡사해서, 사이트를 통해서 학습한 내용을 실제 개발환경에서도

바로 적용할수 있다. 

코스를 완료할때마다 뺏지를 준다. 이걸 다 모으겠다...라는 생각은 너무 덕스러운거 같기도 하고...

코드스쿨에 대해서 더 궁금한분들은 직접 튜토리얼코스를 해보면 될거 같다. 

아직까지 코스들이 매우 다양하게 있다고는 생각되지 않지만, 한 두개 정도 관심있는 분야가 있다면, 투자할

가치는 충분히 있다고 생각이 된다. 개인적으로는 코스 하나를 두번정도 반복하니까 새로운 언어를 배우기 위해서

책만 봤을때보다는 훨씬더 큰 효과가 있었던거 같다. 

그럼 다들 공부합시다 ! 

프로그래밍 언어의 트랜드를 알수 있는 사이트 ( http://langpop.corger.nl/ )

Stack-overflow 와 Git-hub 을 이용해서 언어별 순위를 메긴 사이트이다.  

위와 같이 그래프가 나오고 , 색깔이 칠해져있는 부분에 마우스를 올리면 어떠한 언어인지 팝업이 뜬다. 

X축이 Github 의 소스코드 변화 , Y축이 Stack-overflow 에서의 활동 수치를 나타낸다. 

상위권에는 역시나 JAVA , C, C# 등이 있고... 의외로 Perl 프로그래밍이 상당히 높은 순위에 있었다. 쉘스크립트 프로

그래밍을 잊고 살고 있는 나에게는 와닿지 않는 순위... 이외에도 Ruby 가 메이져 언어의 뒤를 이었고 그 밑에 Groovy!!

Groovy , Scala , Python, Closure 등등이 보인다.  

많다 많아 !!! 벌려논 공부좀 마무리 되면... Python을 파야겠다. 

이번 포스팅은 스프링 4.0에 대한 것이다. 다양한 프레임워크가 각광을 받고 있지만, 엔터프라이즈급 어플리케이션을 안정적으로 실행해야 한다면 스프링을 선택하게 될것같다... 자바를 놓지 않는 한 스프링과는 땔수 없는 관계가 될듯하다. 

현재는 4.0 버전의 스프링이 나와있고, 올해 안으로 스프링 4.1 버젼이 릴리즈 된다고 한다.(8~9월)

Srping 4.0  Overview

Biggest changes :

. JAVA 8 지원 => Lamda , Date and Time API, Repeatable annotation등 자바8 을 지원한다. 

. JAVA 7 EE APIs 지원 => RestTemplate을 위한 비동기 API 지원, Bean Validation, EL3.0 JMS 2.0, Servelet 3.1                                             등을 지원

. WebSocket 지원 

. 메시지기반 프로그램 아키텍쳐 제공 => 웹소켓 프로토콜을 이용하여 메세지 기반 아키텍쳐 구성할수 있다.                                                                                        (STOMP)

Smaller changes : 

.@javax.transaction.Transactional  

. New @Conditional annotation

. New @RestController annotation

. AsyncRestTemplate

. Autowiring of generic types

. Groovy based config

자바가 자바8 버젼에서 많은 기능의 변화를 주었다면 스프링도 거기에 맞춰서 여러가지 변화를 주었다.  세상의 변화에

어쩔수 없이 따라가는 느낌이 있긴하지만... 

그중에 가장 관심 있는 부분이 WebSocket을 지원하는 것이다. 스프링 자체 웹소캣을 지원하면서, Low Level 웹소캣이

갖는 단점을 보완하였다. 아직 직접 써보진 않았지만 곧, 스프링4.0 의 웹소캣을 활용한 샘플 프로그램을 작성해 포스팅

하겠다. 개인적으로 작은 변화중에는 Groovy를 상요한 DSL 정의가 가능하다는 점이다. Gradle 뿐만 아니라 Spring 4.0 

에서도 Groovy를 사용하는걸 보면, Groovy 의 활용도는 점점 높아질듯하다. 

     Groovy DSL 관련 내용 (http://spring.io/blog/2012/11/06/a-groovy-dsl-for-spring-integration)

Srping 4.0  프로젝트 설정

spring4.0 .zip  <= 완성 프로젝트

이번 포스팅에서는 노드와 관련된 개념을 정리해보고자 합니다.

ㆍWhat is Node.js? 

Node 를 몇가지 키워드로 설명하자면 , javascript, event-driven, non-blocking I/O, single-thread 로 설명이 하다.

Node는 크롬의 V8 Javascript Engine 기반으로 동작하는 서버이다. 라이언달이 2009년에 만들었고, 지금까지 계

속해서 발전해 왔다. Javascript로 프로그램을 작성하기 때문에 Front-end 개발자들과 Back-end 서버 개발자들간의 경

계가 허물어 졌고, Front 개발자들의 Server-side 의 개발 진입장벽 자체를 낮추는 효과도 있다. 

노드는 싱글 스레드 기반으로 동작하며,  다수의 커넥션이 있을때 우수한 성능을 낸다.(직접 겪어보진 못함) 

일반적으로 생각할때는 멀티스레드 기반의 서버가 더욱 좋은 성능을 낼것같지만, 멀티스레드 기반의 CPU는 실제로 연

산을 하는 시간보다 네트워크처리, I/O 에따른 Delay로 많은 시간을 허비 하게 된다. 

이에반해, 싱글스레드 기반의 Node는 Request가 오면 처리를 하고, 중간에 I/O 처리나 네트워크처리 등이 발생하면,

이벤트를 등록하고 다른 작업을 수행한다. 이때 처리 완료 이벤트가 동작하면 콜백을 받아 다시 작업을 수행하는 

event-driven 방식으로 동작한다. 이로써, I/O 로 인한 지연을 없애 우수한 성능을 낼수 있다.

실제로 노드를 이용하면서  개발을 해보니까... 좋은점은 기존 자바/자바스크립트 개발자는 별도의 Learning Curve가 

크게 없다라는 것이다. 어찌되었든, Javascript 문법을 사용하기 때문에 각 모듈과 노드가 구성되어 있는 형태만 

익힌다면 큰 어려움 없이 개발을 진행할수 있다. 

그리고 새로운 기능을 추가할때, npm 을 이용하여 모듈을 추가하고 그 기능을 활용하는데 크게 어려움이 없다. 

또한, 핫한 트랜드인 만큼 구글링을 통해서 많은 정보를 얻을수 있는 장점 또한 존재한다.

다들 공부합시다.

회사에서 일하다 문득... 공부도 할겸 소켓을 이용해서 찬반투표 프로그램을 하나 만들어 보자라는 생각이 들었다....

일찍 퇴근해서 만들어 봤다 ... Node의 socket.io 를 이용해서 !! 조만간 비쥬얼과 기능을 업그레이드 한 프로그램

을 Sprint4.0 의 sock.js 를 이용해서 만들어봐야 겠다.  일단은 포스팅 시작 !

 ExpressVote.zip      <=== 완성작

Prepare

일단 현재 내 PC 환경은 

Node 개발 환경이 구성되어 있으며, 이클립스에 node.js 플러그인이 깔려 있는 상태다. 

Note & Express 개발환경 구성은 생략한다. 

ExpressVote 라는 Express 프로젝트를 하나 생성했고, 

package.json 의 내용은 다음과 같다. (npm install 명령어를 실행하면 의존성 걸려있는 모듈이 자동으로 설치된다.)

Preview

완성된 프로젝트 폴더 구조 설명

jquery-1.11.0.js : Html 엘리먼트에 이벤트를 설정하기 위해서 사용했다. 물론 기본 자바 스크립트를 활용해도 상관 없다.

vote.js : JQuery를 활용해서 버튼별 이벤트를 설정하고 , Client-Side의 Socket과 관련된 엑션을 정의한다.

vote.jade : 간단한 UI 를 Jade Template Engine을 활용하여 구성하였다. 화면 UI 껍데기라고 생각하면된다.

app.js : Node의 핵!! app.js !! 서버 Socket을 설정하고, vote를 하면 client 소캣으로 emit 을 해주는 역활을 한다. Server-side

package.json : 프로젝트와 관련된 모듈의 의존성 관리.

완성된 프로그램 화면 

프로그램은 매우 간단하다. 사용자가 접속해서 Accept , Denied 버튼을 누르면 투표수가 올라간다. 

투표는 한번씩만 할수 있도록 제한한다. UI는 일단 신경쓰지 않는다...ㅠㅠ

Server-Side

기본적인 Jade 사용 관련, 또는 Route 설정과 관련된 부분은 넘어가겠다.

먼저 , 서버측에서 사용할 Socket 을 선언하면서 소켓을 깐다(?). 나같은 경우는 3000번 포트로 소캣을 열었다.

그리고 서버측에서 관리할 변수들을 선언하였다. 전체 유저수, 찬성, 반대수 같은 경우에는 클라이언트는 Push 된 값

만 확인하고 서버에서 값들을 관리한다.

io.sockets.on('connection',function(){}); 의 의미는  'connection'을 하면 function 안의 내용들을 수행하겠다는 뜻입니다. 여기서 간단하게 설명하자면 , On 은 어떠한 이벤트에 반응하는 리스너라고 생각하면 되고 , Emit 함수는 그 이벤트를 발생시키는 주체 라고 이해하면 편하겠다.  

위에서는 사용자가 접속을 하면 전체 사용자수를 늘리고, 현재 상태를 소캣클라이언트에게 전달한다. (Status 이벤트이용 / 클라이언트에서는 on('status'~~) 가 있겠죠? ) 

그다음에는 'vote'이벤트를 수신하면 사용자가 보낸 데이터에 따라서 찬성이나 반대수를 증가 시키고, 해당 내용을 다시 사용자들에게 푸시 합니다. 

UI (Jade Template Engine)

화면은 Title, 버튼 (찬성,반대) , 결과를 나타낼 Label 로 구성되며, Socket 과 Jquery 를 사용할 라이브러리와 이벤트를 등록할 vote.js 를 포함 한다. (Jade도 나름 많이 쓰다 보니 편한거 같기도..)

Client-Side

클라이언트 사이드의 코드는 아래와 같다. 큰 이벤트는 없다. emit 과 on 만 이해한다면 쉬울듯 ! 

<= 서버 소켓에 접속한다.

<=status Event 를 받으면 화면의 Label 컴포넌트들을 업데이트 한다. (결과를 보여주는부분)

<=찬성과 반대 버튼을 눌렀을 경우 이벤트 핸들링

1. 전역변수로 _vote를 가지고 있고, 아직 투표 하지 않은 경우에는 서버에 vote 이벤트를 emit 한다. 결과는 json 형식으로 전달했다.

2. 투표를 이미 한경우에는 메시지를 표시하고 별도의 행동은 하지 않는다.

맺음말

소캣을 이용해서 실시간 프로그램을 쉽게 만들수 있었다... 비슷한 내용을 스프링으로 구성해보고 비교해 봐야겠다. 

끄읕.

이번에 다뤄볼 내용은 Bower 라는 Front-end 단 패키지 관리 툴이다. 

Bower은 Git 기반으로 동작하며, Bower 에서 제공하는 패키지는 다음에 나와있는 사이트를 통해서 검색가능하다.

http://bower.io/search/

Ember.js 관련 패키지도 바로 검색이 된다.  클릭을 해서 들어가보면, Git 레파지토리에 Bower.json 파일이 보인다.

Installing Bower

Bower는 Node 와 npm에 종속적이다. Node에 익숙한 사용자라면 이해하기 쉬울듯. 

npm install -g bower

Installing Bower package

현재 디렉토리의 bower.json 파일을 이용한다. 이부분 또한 npm과 매우 흡사한 동작 방법을 취한다. 

검색을해서 자신이 원하는 패키지를 찾아내고 => bower install <package> 명으로 해당 패키지를 설치하면 끄읕. 

bower install

Using a local or remote package

bower install <package>

Using a specific version of a package

bower install <package>#<version>

Using a different name and a specific version of a package

bower install <name>=<package>#<version>

Finding packages

위에서 얘기했던 package를 검색하는 명령어 

bower search [<name>]

Using just bower search will list all packages in the registry.

Using packages

Bower는 단순히 패키지를 관리하는 도구로써 동작하기 떄문에 Package 내용을 사용하기 위해서는 아래 처럼 일반적인 <script> 태그를 활용하여 사용한다..

<script src="/bower_components/jquery/jquery.js"></script>

For more complex projects, you'll probably want to concatenate your scripts or use a module loader. Bower is just a package manager, but there are plenty of other tools -- such as Sprockets and RequireJS -- that will help you do this.

bower init

Front-end 단에서 프로젝트를 직접 진행한 적이 없다. 그래서 , 웹라이브러리의 의존성을 의식한 경우가 아직까지 없다는게 함정. 언젠간 필요한 날이 오면 그때 다시 찾아줄게.