Pragmatic Programmer

Javascript Link를 SkyDrive의 OneNote를 통해서 공유 하도록 하겠습니다.

OneNote Link : Javascript Link 공유(새창 링크)

RequireJS를 사용하여 MVC App 만들기

RequireJS : http://requirejs.org/

원문 : http://verekia.com/requirejs/build-simple-client-side-mvc-app-require-js

한글 : http://zziuni.pe.kr/zziuni/587

RequireJS는 

간단하게 한문장으로 설명하자면 "모듈화와 동적 로딩을 지원하는 프레임웍"입니다.

여기에서 모둘화와 동적 로딩은 왜 이슈가 되는 것일까?

1. 모듈화
   
• - 문제점

1. .서로 호환되는 표준 라이브러리가 없다.
2. .데이터베이스에 연결할 수 있는 표준 인터페이스가 없다. - Server side
3. .다른 모듈을 삽입하는 표준적인 방법이 없다.
4. .코드를 패키징해서 배포하고 설치하는 방법이 필요하다.
5. .의존성 문제까지 해결하는 공통 패키지 모듈 저장소가 필요하다.
   
   
• - 해결책은?  -> 모듈화가 답

1. 동적로딩
• - 문제점
1. 하나의 HTML 파일에서 용량이 많고 여러가지 Library를 로딩 하는 시간이 많이 갈려 최초 실행 진입이 늦다.
   
   
• - 해결책
1. 동적으로 필요한 js파일을 로딩하여 최초 실행 진입을 빠르게 한다.
   위 방법은 IE 옛날 버전에서는 상당한 속도 향상을 기대할 수 있지만 최신 브라우저에서는 성능 향상 별로 없다.

위 문제점을 해결하기 위하여 RequireJS 프레임웍이 개발되었다.

그렇지만 RequireJS는 다른 많은 기능들을 함께 제공하고 있다.

(이 기능들에 대해서는 차차 알아 가도록 하겠다.)

RequireJS 링크 : http://requirejs.org/

----------------------------------------------------------------------------------------

위 사항은 RequireJS를 살펴 보면서 개인적으로 알아보고 느꼈던 사항에 대해서 한정됨을 알려 드리며 보다 자세한 사항을 알아 보려면 밑의 "자세한 링크"를 따라가 보시면 보다 많고 정확한 정보를 알 수 있을 것입니다.

자세한 링크

- http://helloworld.naver.com/helloworld/12864

이전 포스트에서 처음으로 실행하여 화면을 띄워 보았습니다.

이제 처음 실행된 WebMatrix에 대해서 전체적으로 설명을 드리도록 하겠습니다.

1. 사이트 탭

- 현재 프로젝틔 대략적인 정보와 URL을 관리한다.

[그림1]

2. 파일

- 프로젝트에서 포함되어 있는 파일을 관리 한다.

- 추가, 삭제, 수정을 할 수 있도록 한다.

[그림2]

3. 데이터베이스

- 데이터베이스 관리를 할 수 있도록 한다.

[그림3]

4. 보고서

- 에러 통계를 관리 할 수 있도록 한다.

[그림4]

이제 설치가 되었으면 실행을 해볼 차례입니다.

윈도우 -> 시작 -> 모든프로그램 -> WebMatrix -> Microsoft WebMatrix 클릭

[그림1]은 실행이 되어 나온 첫 페이지 화면입니다.

[그림1]

이곳에서 "템플릿"을 클릭하면 [그림2]와 같은 대화상자가 나오며 HTML을 클릭하고 "빈사이트" 클릭하고 사이트 이름을 지어 주면 됩니다. 예로 "html_test"로 하겠습니다.

[그림2]

모든 대환 상자를 마치면 [그림3]과 같이 완료가 되었습니다.

[그림3]

 위 상태에서 Html_test의 바로 밑 URL을 마우스로 클릭하면 기본 페이지를 Web Browser에서 볼 수 있습니다.(port 번호는 임의로 선택이 되기 때문에 달라 질 수 있습니다.)

이제 본격적으로 WebMatrix를 설치 해보도록 하겠습니다.

http://www.microsoft.com/web/downloads/platform.aspx 에서 [그림1]에 있는 "Free Download" 버튼을 눌러 파일을 다운로드 받습니다.

[그림1]

다운로드 받은 파일을 실행하면 [그림2]와 같은 화면이 표시가 됩니다.

[그림2]

[그림3]은 실행이 완료되어 선택할 수 있는 대기 화면입니다.

[그림3]

여러가지 나와 있는 [그림4]처럼 프로그램 중에서 'Microsoft WebMatrix2"를 추가 버튼을 누릅니다.

(저는 이미 설치가 되어 있어서 추가 버튼 대신에 설치됨 이라고 상태가 나오고 있습니다.)

[그림4]

설치 버튼을 누르면 [그림5]와 같이 대화 상자가 나오고 "동의함"을 누르면 설치가 진행됩니다.

[그림5]

위와 같이 완료하고 나면 일단 WebMatrix 설치가 완료가 된 것입니다.

 WebMatrix 설치를 위해서는 우선적으로 WPI(Web Platform Installer 이하 WPI)에 대해서 약간의 설명할 필요 성이 있습니다.

 WPI는 MS의 최신 컴포넌트를 쉽게 다운받아 설치 및 추가할 수 있도록 제공하는 응용프로그램입니다. 제공되는 플랫폼들이 많이 존재하며 MS에 국한되어 제공하고 있지는 않습니다.

WPI를 설치 Link : http://www.microsoft.com/web/downloads/platform.aspx

WebMatrix외에 Python, PHP, MySQL, Windows Azure 같은 플랫폼도 있고

WordPress, Joomla, Moodle 등 설치하여 서비스할 수 있게도 할 수 있습니다.

[그림1]에서 보시는 바와 같이 주요 제품에 대한 리스트를 보여주고 있습니다.

WebMatrix란?

 한마디로 정의 하자면 "웹 개발을 쉽게 지원하기 위해 나온 공개 소프트웨어"라고 말할 수 있을것입니다. 그렇지만 그 속내를 추측하자면 MS의 개발 언어(ASP.NET MVC, Razor Syntax)를 보더 쉽게 접근하고 널리 보급하기 위해 배포하는 프로그램이라고 생각합니다.

 더군다나 WebMatrix는 MS에 제한적인 기능만을 지원하지 않고 PHP, MySQL, Node.js도 지원을 하고 있으며 확장 기능을 이용해 얼마든지 넓혀 갈수 있는 여지를 가지고 있습니다. 더군다나 NuGet를 이용해서 필요한 리소스를 유동적으로 추가하여 사용할 수 있습니다. 배포에 대해서 쉽게 접근할 수 있도록 되어 있습니다.

좀더 자세한 사항은 아래 "더보기"를 보시면 됩니다.

[그림 1]

 위 그림은 실제 실행된 WebMatrix이며 확장 기능을 이용해 테마를 설치하여 색상 변경을 완료한 화면입니다.