MSFL :: 모리스 소프트웨어 공작소

요즘 웹 서핑을 하다 보면 "SPA (Single Page Application) - 단일 페이지로 운영되는 어플리케이션을 의미한다." 란 단어를 많이 보게 된다. SPA 를 이용한 서비스들을 보면 Trello, Facebook, Gmail 등이 대표적이다. SPA 를 만드는데 사용되는 기술 요소들은 대략 다음과 같이 정리가 될 수 있다. Coffee Script 를 사용한다. (문법 오류 들에서 해당되는 효과??) Backbone 을 사용한다. REST API를 사용하고 JSON 형식을 사용한다. CoffeeScript + Backbone.js + Jasmine BDD 를 이용해서 SPA를 구현한 사례가 있어서 링크를 걸어본다. Single Page Web Applications with CoffeeScript, Backbone and Jasmine from Paulo Ragonha 클라이언트 측면은 위의 사례와 같이 처리가 가능하고 서버 측면은 아래와 같이 검토해 볼 필요가 있다. Node.js 사용 Backbone.js + Node.js 를 이용한 사례가 있어서 링크를 걸어본다. Building a Single-Page App: Backbone, Node.js, and Beyond from Spike Brehm SPA 를 구현하기 위해서 사용할 수 있는 요소들을 정리해 보면 다음과 같다. [ 서버 측면 ] Node.js express.js npm [ 클라이언트 측면 ] bootstrap jQuery Underscore Backbone [ 공용 ] CoffeeScript EJS - Embedded JavaScript (템플릿) ### 아직도 모르는 것이 많지만, 하나씩, 천천히, 개념을 잡아서 진행하도록 한다. ###

새로운 프로토타입을 구상하면서 Javascript Client Framework이 필요하여 검토하던 중에 Knockout 과 backbone 을 비교해 본다. 당연히 각 프레임워크 마다 장/단점이 있게 마련이다. 무엇을 어떻게, 어디에, 어떤 용도로 사용할지에 따라서 판단이 되어야 할 것이다.  이미 웹 어플리케이션은 MVC 기반의 환경에서 개발이 되고 있다. 그러나 아직도 클라이언트 측면에서 보면 jQuery와 Aajax를 통해서 많은 부분을 해결하고는 있지만 Low-level 에서 개발이 되고 있다. 그러나 화면에 다양한 요소들을 표시하고 하나의 데이터가 변경되었을 때 여러 부분에 존재하는 요소들을 갱신하여야 한다면 이를 모두 jQuery를 이용해서 변경하는 것은 코드의 작성과 처리가 점점 더 복잡해지게 된다. 점점 더 사용자의 요구가 복잡해지고 있는 시점에 이런 복잡성과 기능성을 만족하기 위해서는 클라이언트도 프레임워크와 적절한 디자인 패턴이 적용되어야 한다. 이미 클라이언트에도 패턴이 적용된 프레임워크들이 존재하고 있다. 이제 가장 많이 사용된다고 생각되는 대표적인 클라이언트 프레임워크 2개를 비교해 보도록 한다. Backbone.js 적용 패턴 : MVC (Model - View - Controller) 장점 : RESTful (REpresentational State Transfer) 서비스와 통합성 단점 : 적응을 위한 시간 필요, 추가적인 코드의 양이 많을 수 있다. 모델은 back-end Ajax 처리를 의미하고, 뷰는 화면에 정보를 표현하는 마크업이 포함된 템플릿이다. 컨트롤러는 모델과 뷰를 연계하는 역할을 담당한다. 아마도 가장 많이 사용되고 있는 프레임워크일 것이다. 이와 유사한 프레임워크는 spine .js 가 있으며 거의 유사하지만 서버와의 연계 부분이 다르다. backbone 이 서버의 결과를 받아서 처리할 때까지 UI 업데이트가 불가능 하지만 spine 은 UI 업데이트를 허용하고