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

html5 에 대한 이야기를 하면서 기본 웹 페이지는 index.html 또는 index.htm 으로 하고 이것이 웹 개발 표준(?)에 맞는다는 의견을 종종 보게 된다. 그러나 ASP.NET은 default.aspx 또는 index.aspx 가 기본 페이지로 프로젝트 템플릿이 구성되어 있다. 뜬금없이 ASP.NET 에서도 .html, .htm 을 쓰면 어떨까 생각해서 테스트를 해 보았다. Visual Studio 2013에서 WebForm 프로젝트를 생성하고 Default.aspx 를 default.htm 으로 확장자를 변경하고 실행하면 고스란히 아래의 그림과 같이 페이지 스크립트가 노출이 되고 동작하지 않은 상태에서 브라우저에 보여지게 된다. 이런 상황이 발생하는 이유는 IIS 의 Integrated 모드에서는 해당 확장자에 대해서 페이지 처리 핸들러가 연동이 되지 않기 때문이다. 즉, IIS 로 페이지 요청이 도착했을 때 ASP.NET 페이지 처리 핸들러가 동작할 수 있도록 연결을 해 주면 될 것이다. 따라서 web.config 파일을 열고 아래와 같은 항목들을 설정해 주면 될 것이다. * ASP.NET 페이지 스크립트가 컴파일이 될 수 있도록 해 주어야 한다. * 확장자에 맞춰서 페이지 처리 핸들러가 동작할 수 있도록 해 주어야 한다. 위와 같이 처리를 하고 default.htm 파일을 다시 한번 호출해 보도록 하자. 아래의 그림과 같이 아주 정상적으로 페이지가 처리되는 것을 확인할 수 있다. 이렇게 Page Compile Builder 와 Page Handler Factory 를 설정해 주면 확장자를 바꿔서도 충분히 서비스할 수 있다. 실제 이렇게 쓸 이유는 없지만, 혹시라도 기존에 html 로 되어 있는 것들을 변환 처리하는 경우라면 응용해 볼 수 있을 것 같다. 그렇지 않은 경우라면 이렇게 할 이유는 전혀 없다. 괜히 궁금해서 확인을 해 본다는 의미 이외에는… ㅋ 그런데 왜 이런 것이 궁금하지???????????

얼마 전에 어떤 회사에 인터뷰를 하러 간 적이 있었다. 당시 그 회사는 자체 솔루션을 개발할 기술인력을 찾고 있었고 내부적으로 OData를 사용한다고 했다. 좀 창피한 이야기일 수도 있지만 나름 기술적인 부분에서는 많은 정보를 가지고 있다고 했던 것이 무색하게 OData란 단어를 그 회사 사장님에게서 처음 들었다. 작고, 단순한 사이트들만을 계속해서 작업을 하다 보니 어느덧 큰 줄기들을 잃어버린 것을 느끼기 시작했다. 명색이 개발이 좋고, 기술적인 기반을 만들려고 하는 인간이 단어조차도 모른다는 것은 있을 수 없는 것이라서 다시 새로운 단어들과 개념들을 알아보는 시간을 가지려고 한다. OData (Open Data Protocol) 란? 간단히 정리하면 웹 상에서 손쉽게 데이터를 조회하거나 수정할 수 있도록 주고 받는 웹(프로토콜)을 말한다. 서비스 제공자 입장에서는 웹으로 데이터를 제공하는 방식으로 각 포탈 사이트들이 제공하는 OPEN API 포맷을 독자적인 형식이 아니라 오픈된 공통규약으로 제공 가능하며, 개발자는 이 정보를 다양한 언어의 클라이언트 라이브러리로 어플리케이션에서 소비할 수 있도록 사용하면 된다. 공식 사이트는 www.odata.org 이며 많은 언어들을 지원하고 있다. 좀더 상세하게 정의를 해 보면 OData는 Atom Publishing Protocol  (RFC4287) 의 확장 형식이고 REST (REpresentational State Transfer) Protocol 이다. 따라서 웹 브라우저에서 OData 서비스로 노출된 데이터를 볼 수 있다. 그리고 AtomPub 의 확장이라고 했듯이 데이터의 조회만으로 한정되는 것이 아니라 CRUD 작업이 모두 가능하다. Example 웹 브라우저에서 http://services.odata.org/website/odata.svc 를 열어 보도록 하자. This XML file does not appear to have any style in...

어느덧 삶이 힘들다고 느껴질 때가 점점 더 많아지는 나이에 접어 들었다.   이럴 때 좋은 의미의 새로운 생각이나 느낌을 가질 수 있는 7가지 방법이라는 글이 있어서 여기에 옮겨본다.   “자신이 한 없이 초라하고 작게 느껴질 때”   산에 한번 올라가 보십시오. 산 정상에서 내려다 본 세상. 백만장자가 부럽지 않습니다.   아무리 큰 빌딩이라도 내 발 아래 있지 않습니까. 그리고 큰 소리로 외쳐 보십시오.   "난 큰 손이 될 것이다."   이상하게 쳐다보는 사람이 분명히 있을 겁니다. 그럴 때는 실실 쪼개십시오. ^^   “죽고 싶을 때” 병원에 한번 가 보십시오. 죽으려고 했던 내 자신, 고개를 숙이게 됩니다. 난 버리려고 했던 목숨. 그들은 처절하게 지키려고 애쓰고 있는 것을 볼 수 있습니다.   흔히들 파리 목숨이라고 하지만 쇠 심줄보다 질긴 것이 사람 목숨입니다.   그래도 죽고 싶을 때는 "자살"을 꺼꾸로 읽어 보십시오. "살자"!!!   맞습니다. 살아야 하는 겁니다.   “인생이 갑갑할 때” 버스 여행을 한번 떠나 보십시오. 몇 백원으로 떠난 여행. 많은 사람들을 만날 수 있고, 무수히 많은 풍경을 볼 수 있고, 많을 것들을 보면서 조용히 내 인생을 그려 보십시오.   비록 지금은 한치 앞도 볼 수 없어 갑갑하지만, 분명 앞으로 펼쳐질 내 인생은 탄탄대로 아스팔트일 것입니다. 진정한 행복을 느끼고 싶을 때 따듯한 아랫목에 배를 깔고 엎드려 재미난 만화책을 보며, 김치 부침개를 드셔 보십시오. 세상을 다 가진 듯한 행복함을 느낄 수 있을 겁니다.   파랑새가 옆에서 노래를 불러도 그 새가 파랑새인지, 까마귀인지를 모른다면 아무 소용이 없는 겁니다.   분명 행복은 멀리 있지 않습니다.   “사랑하는 사람이 속 썩일 때...

성공을 막게 되는 13가지 습관이란다. 나는 도대체 몇 개의 습관이 있는 것일까? 맞춤법 실수 행동보단 말 성급한 결정 불평 불만 허풍 떨기 남 탓하기 요령 찾기 열정 있는 척 하기 목적없이 살기 부탁 다 들어주기 인생을 쉽게 생각 생각없이 행동 현실 부정 제기랄. 최소한 4개는 확정적이고, 대 부분은 연관성이 있다. 쯔업~ 뭐.. 딱 맞거나 절대적인 영향력이 있는 것은 아니겠지만, 흔히 빠져들게 될 수 밖에는 없는 습관들이다. 이런 것을 한번 해 보면서 망가져가는 정신을 다독거릴 수는 있겠지... 

CoffeeScript 를 사용하는 곳이 점점 더 많아지는 듯 하고 SPA 를 구성하는 쪽은 기본인 것처럼 표현하는 것이 대부분이라서 CoffeeScript에 대해서 알아 보도록 한다. 설치 CoffeeScript 를 쉽게 설치하려면 NodeJS를 설치한 후에 NPM (Node Package Manager)를 통해서 설치하면 된다. C:\Temp> npm install -g coffee-script ... 설치과정 생략... C:\Temp> coffee -v CoffeeScript version 1.6.3 기본 사용법 사용법은 아주 쉽다. 확장자는 *.coffee 로 만들면 되고, coffee 명령으로 실행 또는 js 파일로 컴파일을 할 수도 있다. 그럼 일반적인 코딩 방식의 차이점을 알아보도록 하자. 아래의 코드는 일반 js 코드 방식이다. function makeArray(dimension) { var arr = [], i = 0, j = 0; for(; i < dimension; i++) { arr[i] = []; for(j = 0; j < dimension; j++) { arr[i][j] = '1111'; } } return arr; } var arr = makeArray(4); console.log(arr); 아래의 코드는 동일한 내용을 Coffee 방식으로 변환한 것이다. makeArray = (dimension) -> arr = [] for i in [0...dimension] arr[i] = [] arr[i][j] = '1111' for j in [0...dimension] arr myArr = makeArray 4 console.log myArr 실행된 결과는 동일하다. 단지 위의 문법 차이에서 볼 수 있...

요즘 웹 서핑을 하다 보면 "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 업데이트를 허...

아주 간단하게 정적인 Content (PHP, C#, Java 등과 같은 서버 처리가 필요 없는) 를 처리하는 웹 서버를 구축하는 방법은 다음과 같다. 이 글에서는 IIS 나 Apache 등의 웹 서버 구축을 node + express 로 대체하는 것이 아니다. 간단한 코드와 몇 분의 노력으로 즉시 테스트가 가능한 환경을 만드는 것이 목적이다.  node 설치 Command Prompt 를 열고 웹 서버로 활용할 디렉터리로 이동한 후에 Express 를 아래와 같이 설치한다. C:\Temp> npm install express 설치된 Express 를 구동할 수 있는 서버 스크립트를 작성한다. var express = require('express'); var app = express(); app.configure(function() { app.use( "/", // the URL throught which you want to acess to you static content express.static(__dirname) // where your static content in located in your filesystem ); }); app.listen(8080); // the port you want to use node 로 작성한 서버 스크립트를 구동한다. C:\Temp> node server.js 이제 위에서 지정한 포트로 브라우저에서 접근을 하면 정상적으로 서비스가 되고 있는 것을 볼 수 있다.

웹 개발을 하는데 필요한 각종 효과와 기능들을 제공하는 사이트를 정리해 본다. reveal.js - Slide 효과 및 PDF, Zoom 등의 효과 처리가 훌륭하다.

Node.js를 알아보면서 정리가 필요한 부분들을 나열해 본다. Node.js 버전 : node --version Node 의 V8 엔진 버전 : node -e "console.log(process.versions.v8)"