jQuery Mobile에 대한 소개

Web Development/jQuery Mobile 2011/12/15 12:47

요즈음 웹 개발에 있어서 하나의 중추적인 트렌드로 자리 잡은 것이 바로 모바일 웹 개발이다. 모바일 웹 개발이라고 하면 흔히 하는 생각으로 막연하다는 느낌부터 들 것이다. 1세대의 모바일 웹 개발은 확실히 HTML보다 가벼워야 했고 하드웨어의 제한 사항이 큰 편이었기 때문에 WML과 같은 메타 언어의 존재감이나 그 수요가 분명했다. 하지만 모바일 기기와 일반 PC의 사양 차이가 날이갈수록 좁혀짐은 물론 이제 모바일 기기가 경우에 따라서는 일반 PC나 랩톱 컴퓨터보다 훨씬 더 유용해지고 쓰임새가 많아지게 되면서 이런 구분이 모호해지게 된다.

필자 역시 모바일 웹 개발을 해야 할 필요성을 자주 느끼게 되었다. 당장 가지고 있는 스마트폰인 Windows Phone 7.1 (이름하여 망고폰)을 비롯해서 주변 지인들이 빠짐없이 가지고 있는 아이폰, 아이팟, 아이패드, 그리고 안드로이드 계열이나 크롬 북을 포함하여 상당히 많은 수의 브라우저들을 고려하는 모바일 웹 사이트가 필요했다. 물론 이들 모두 일정 수준 이상의 HTML5와 CSS3, 그리고 자바스크립트 렌더링 엔진을 갖추고 있긴 하지만 특유의 해상도 제한이나 성능 제한, 그리고 결정적으로 고밀도의 선택이 가능했던 마우스를 대신하여 터치 인터페이스에 최적화된, 이전보다 훨씬 둔감한 조작을 이해할 수 있는 인터페이스를 디자인해야 한다는 것이 난제가 되었다.

기존 웹 기술을 최대한 보존하면서도 검증된 프레임워크의 이점을 누릴 수 있는 방법이 없을까 고민하다가 아주 훌륭한 프레임워크를 테스트해보게 되었고 그 내용을 블로그를 통하여 간단하게 소개하고자 한다. 바로 jQuery Mobile이다.

jQuery Mobile과 jQuery의 차이점?

그냥 얼핏 듣기에 jQuery Mobile과 jQuery는 큰 차이점이 없어보인다. 오히려 어떻게 보면 jQuery의 축소 버전이 아닌가 하는 생각이 들 수도 있다. 하지만 이 둘 사이의 정확한 관계는, jQuery Core를 기반으로 만들어진 Extension이 jQuery Mobile이며, jQuery Mobile은 단순히 기능 집합을 축소한 것이 아니라 오히려 모바일 환경에 알맞도록 확장시킨 일종의 확장팩에 해당되는 개념이다.

사실, 여러분이 어떻게 jQuery Mobile을 사용하는가에 따라서 jQuery 특유의 자바스크립트 기술을 전혀 사용하지 않을 수도 있다. jQuery Mobile이 제공하는 몇 가지 규칙에 맞추어 웹 페이지를 프로그래밍한다면 나머지 시각 효과, 간단한 검색 기능, 심지어 대화 상자 기능까지 자동으로 jQuery Mobile이 알아서 처리해주기 때문이다.

jQuery Mobile을 가장 잘 활용할 수 있는 방법

이제까지 여러분은 자바스크립트 모듈을 어떤 방식으로 사용해왔는가? 대개는 웹 사이트 안에 들어가는 부속품 정도로 여기고 이것을 같은 웹 사이트 안에서 서비스하도록 구성하는 일이 많았다. 그리고 웹 서버에 대한 트래픽이나 부하가 일어나지 않도록 하기 위하여 적절한 Cache Timeout 설정을 사용하여 클라이언트가 jQuery 라이브러리를 지속적으로 재사용할 수 있는 방안을 적용해왔을 것이다.

그렇지만 기왕 최적화를 할 요량이면 밀어 붙일 수 있는 곳까지는 밀어붙여보는 것도 나쁘지 않을 것이다. jQuery는 물론 jQuery Mobile까지 여러분의 웹 서버가 아닌 곳으로 레퍼런스를 걸 수 있는 방법이 요즈음 유행하고 있다. 즉, CDN 서버를 이용하는 방식으로, jQuery를 비롯한 몇 가지 유명한 자바스크립트 및 공통적인 웹 자원들을 공개적으로 서비스하는 곳이 있고 이곳의 라이브러리를 가져다 쓰는 방식이다.

jQuery의 경우 jQuery 프로젝트 팀이 자체적으로 운영하는 CDN 서비스가 있으며, Microsoft의 ASP.NET AJAX CDN, 그리고 잘 알려진 Google의 CDN 서비스까지 모두 세 가지 유형의 CDN 서비스를 사용하여 jQuery 및 jQuery Mobile 자바스크립트 라이브러리를 개별 웹 페이지에 붙여넣을 수 있다.

CDN에 대해서 간단히 설명하면, CDN 네임스페이스 상의 특정한 URL에 대해서 요청이 발생하면 해당 리소스에 대한 사본을 CDN 네트워크 상에서 현재 위치로부터 가장 가깝거나 혹은 빠른 응답 속도를 보이는 서버로부터 데이터를 가져와 클라이언트로 내려보내는 서비스이다. 물론 이 과정을 수행할 수 있도록 하기 위하여 원본 서버가 필요하고 이 원본 서버로부터 데이터를 가져와서 네트워크 상에 고속으로 배포하는 작업은 필수적이다. 글로벌 CDN으로 불리는 서비스들은 당연히 이러한 CDN에 큰 비용을 투자할 수 있는, 그리고 전세계적인 네트워크 망을 보유할 수 있는 기업이어야 할 필요성이 있으며 이러한 기업으로는 대표적으로 Google과 Microsoft가 있는 셈이다.

Microsoft CDN을 이용하여 jQuery 시작하기

각각의 CDN 서비스들마다 자바스크립트를 제공하는 방법에는 차이점도 있고 장단점도 있지만 여기서는 Microsoft의 CDN 서비스를 사용하는 경우를 예로 들어 설명하고자 한다. 당연한 이야이기이지만 Microsoft CDN에서는 jQuery를 Visual Web Developer의 JavaScript Intellisense와 연계할 수 있는 vsdoc 버전의 자바스크립트 라이브러리를 CDN 버전으로 제공받을 수 있다. Microsoft CDN 서비스로부터 여러분이 가져오고 싶은 자바스크립트 코드를 카탈로그로부터 가져오기 위하여 아래 웹 사이트를 찾아볼 수 있다.

http://www.asp.net/ajaxlibrary/cdn.ashx

위의 웹 사이트에 구체적인 설명이 잘 나와있지만 이 웹 페이지에서는 여러분이 상황에 맞게 쓸 수 있도록 코드 조각을 정리하여 설명하려고 한다.

만약 여러분이 jQuery 1.5.1 버전을 http 버전 프로토콜로 연결하려고 하면 아래와 같이 <HEAD> 태그 내부에 Child Element로 기술하면 된다.

<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.5.1.min.js" type="text/javascript"></script>

만약 HTTPS 기반 웹 사이트를 사용 중이고 여기서 CDN을 사용하려고 한다면 프로토콜 접두사만 바꾸면 HTTPS 버전의 CDN도 이용할 수 있다.

<script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-1.5.1.min.js" type="text/javascript"></script>

만약 VSDOC 버전을 연결하려고 하면 아래와 같이 min 대신 vsdoc으로 이름을 바꾸면 된다.

<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.5.1.vsdoc.js" type="text/javascript"></script>

jQuery UI를 사용하기 위해서는 CSS 파일, 이미지 파일, 그리고 자바스크립트 파일에 대한 참조가 필요한데, CSS 파일에 대한 참조만 정확하다면 이미지 파일들의 경로는 신경쓰지 않아도 된다. 그리고 jQuery UI는 jQuery를 기반으로 하는 프레임워크이므로 jQuery에 대한 참조가 필수이다. 그리고 테마는 여러분이 http://www.asp.net/ajaxlibrary/CDNjQueryUI1816.ashx 페이지에서 1.8.16 버전에 해당되는 미리 제공되는 테마 중에서 하나를 택하여 CSS 파일에 대한 참조만 정확히 지정하면 된다. 이런 설정을 바탕으로 jQuery UI를 CDN에서 가져올 때 Redmond 테마 버전으로 가져오고자 한다면 아래와 같이 코드 조각을 쓸 수 있다.

<link rel="stylesheet" href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.16/themes/redmond/jquery-ui.css" media="all" type="text/css" />
<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.5.1.min.js" type="text/javascript"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.16/jquery-ui.min.js" type="text/javascript"></script>

그리고 jQuery Mobile을 사용하려 한다면 아래와 같이 작성한다.

<link rel="stylesheet" src="http://ajax.aspnetcdn.com/ajax/jquery.mobile/1.0/jquery.mobile-1.0.min.css" media="all" type="text/css" />
<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.5.1.min.js" type="text/javascript"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.mobile/1.0/jquery.mobile-1.0.min.js" type="text/javascript"></script>

jQuery Mobile의 경우 HTML5 마크업을 사용하는 것이 중요하다. Custom Attribute에 대한 지원이 필수적이기 때문이다. 이 부분에 대한 설명은 다음 기회로 넘기기로 하겠다.

저작자 표시 비영리 변경 금지
크리에이티브 커먼즈 라이선스
Creative Commons License

'Web Development > jQuery Mobile' 카테고리의 다른 글

jQuery Mobile 멀티 페이지 UI 작성하기  (0) 2011/12/26
jQuery Mobile로 페이지 만들기  (0) 2011/12/16
jQuery Mobile에 대한 소개  (0) 2011/12/15
Posted by Windows Azure MVP 남정현 (rkttu.com)
TAG Ajax, ASP.NET, CDN, CSS, jQuery, jQuery Mobile, JS, Min, Mobile, rkttu, rkttu.com, vsdoc, 남정현, 비동기, 자바스크립트
트랙백이 없고, 댓글이 없습니다.

Windows Azure SDK 1.3 발표

Windows Azure Platform/Events & Updates 2010/12/01 01:14

PDC 2010에서 언급된 대로 이번 Windows Azure 업데이트에는 많은 수의 업그레이드가 있었습니다. 이러한 업그레이드들의 공통적인 목표는 단 한가지, 좀 더 높은 수준의 서비스를 좀 더 손쉽고 빠르게 개발할 수 있도록 개발자들을 지원하기 위함이었습니다. 그리고 12월 1일, 드디어 새 버전의 SDK와 함께 윈도 애저 서비스 포털이 새 단장을 합니다.

새 버전의 Windows Azure SDK의 버전은 1.3이며, Windows Azure Management Portal은 이제 정식으로 사용할 수 있도록 서비스됩니다. 다음은 Windows Azure SDK 버전 1.3에서 바뀐 사항들을 정리한 것입니다.

  • 권한 상승과 전체 IIS 기능 사용을 통하여 좀 더 완성도 높은 응용프로그램의 개발이 가능하게 됩니다. 이제 웹 역할과 작업자 역할에서 관리자 권한을 이용한 실행을 지원하므로 고유한 소프트웨어의 설치가 가능하게 되었고, 특히 웹 역할의 경우 IIS 전체 기능을 지원하도록 개선되어 IIS 7 전용 모듈을 설치하는 등의 작업이 가능하게 되었습니다.
  • 원격 데스크톱 기능을 켜고 끌 수 있도록 웹 역할이나 작업자 역할의 출판 속성이 추가되었습니다. 이에 대한 자세한 내용은 제 블로그의 글 ([Software Development/Windows Azure] - Windows Azure 인스턴스를 원격 제어하기)을 참조하십시오.
  • 윈도 서버 2008 R2 기반의 역할 지원: Windows Azure는 이제 Windows Server 2008 R2를 OS로 사용할 수 있도록 웹 역할, 작업자 역할, 그리고 가상 머신 역할이 개선되었습니다. 여기에는 IIS 7.5, AppLocker를 비롯하여 고급 명령줄 도구와 PowerShell 버전 2.0과 같은 자동화 기능까지 지원되며, 이전에 제 블로그 글 ([Software Development/Windows Azure] - 이제 UNIX 기반 프로그램도 Windows Azure의 First Citizen이 됩니다.)에서 언급했던 것과 마찬가지로 SUA 등의 리소스를 사용하여 UNIX, LINUX, POSIX 기반 응용프로그램을 윈도 애저 플랫폼으로 이식하는 작업도 가능하게 됩니다.
  • 다중 서비스 관리자 지원: 이제 Windows Azure는 다수의 윈도 라이브 ID를 관리자로 인정하여 서비스에 대한 제어를 수행할 수 있도록 기능이 개선되었습니다. 팀 단위 작업에 대한 지원을 고려하여 추가된 기능으로 더 효율적이고 편리한 작업을 수행할 수 있습니다. 특히 이 기능은 작업 시간대가 서로 다르고 위치가 떨어져있는 팀원들 사이에 관리 작업을 공유할 때 매우 효율적입니다.
  • 실버라이트 기반의 Windows Azure Portal 런칭: 기존의 AJAX 기반 Windows Azure Portal보다 더 사용하기 쉽고 빠르며, 새로운 기능들에 대한 완벽한 인터페이스를 제공하는 실버라이트 UI를 Windows Azure Portal에서 사용할 수 있습니다.
  • 향상된 진단 정보: 1차원적인 진단 정보가 아닌 좀 더 상세한 진단 정보를 통하여 관리하는 역할 인스턴스들의 종류, 배포된 시간, 마지막으로 다시 부팅한 시간등을 확인할 수 있습니다.
  • 새로운 회원 가입 프로세스: 이전보다 더욱 편리하고 쉽게 Windows Azure 서비스에 가입하여 곧바로 클라우드 컴퓨팅 서비스를 이용할 수 있게 됩니다.
  • 시나리오 기반의 Windows Azure Platform 포럼 런칭: 상황 별 대처 방안에 따라 빠르게 답을 구할 수 있는 Windows Azure Platform 포럼이 런칭됩니다. (http://social.msdn.microsoft.com/Forums/en-US/category/windowsazureplatform)

다음의 기능들은 베타 버전으로 제공됩니다.

  • Windows Azure 가상 머신 역할: 새로운 - 또는 - 기존의 윈도 서버 기반 응용프로그램을 VM Role을 이용하여 손쉽게 클라우드로 이관할 수 있습니다. 이에 대한 자세한 정보는 http://www.microsoft.com/windowsazure/compute/#vmrole 의 내용을 참조하십시오.
  • 극소형 인스턴스 레벨: 런타임 시간당 0.05$, 원화로 환산하면 한달 약 4~5만원 선으로 새로운 Windows Azure Platform의 기능을 경험해볼 수 있습니다. 극소형 인스턴스를 통하여 여러분이 원하는 클라우드 솔루션을 비용 걱정없이 자유롭게 테스트하며 개발할 수 있습니다. 자세한 내용은 http://www.microsoft.com/windowsazure/compute/#computeinstancesize 의 내용을 참조하십시오.

이제 개발자와 IT 전문가들은 Windows Azure Management Portal을 통하여 다음의 베타 서비스에 액세스할 수 있습니다.

  • Windows Azure 마켓플레이스: Windows Azure 마켓플레이스는 여러분의 빌딩 블록 구성 요소를 공유하거나, 판매하거나, 구입할 수 있도록 도우며, 고급 데이터를 거래할 수 있도록 도와주는 온라인 마켓플레이스입니다. 현재는 DataMarket (구 Codename: Dallas)이 런칭된 상태이며, 이번에는 Application Market Section이 오픈되었습니다. 40개 파트너사와 50여개의 응용프로그램과 서비스가 현재 게시되어있습니다.

다음의 기능은 CTP (Community Technology Preview)로 제공됩니다.

  • Windows Azure Connect (구 Project Sydney): 더욱 단순하고 관리하기 쉬운, 클라우드와 온 프레미스 사이의 IP 기반의 네트워크를 형성할 수 있도록 도움을 주는 서비스가 CTP로 런칭되었습니다. 현재는 별도의 비용을 받지 않는 CTP 버전으로 제공되며 Windows Azure Management Portal을 통하여 서비스를 신청하고 미리 테스트해보실 수 있습니다.

미국 시간 기준으로 2010년 12월 1일 오전 9시 (한국 시간은 2010년 12월 2일 오전 2시)에 Windows Azure Management Portal을 통하여 Overview 웹 캐스트 (http://go.microsoft.com/fwlink/?LinkID=207019)가 게시될 예정이니 관심있으신 분들께서는 꼭 살펴보시기 바랍니다. :-)

PDC10에서 발표된 Windows Azure 업데이트들을 다시 보시려면 http://www.microsoft.com/windowsazure/pdcannouncements/ 의 내용도 같이 확인하십시오.

출처: http://blogs.msdn.com/b/windowsazure/archive/2010/11/29/just-released-windows-azure-sdk-1-3-and-the-new-windows-azure-management-portal.aspx

저작자 표시 비영리 동일 조건 변경 허락
크리에이티브 커먼즈 라이선스
Creative Commons License

'Windows Azure Platform > Events & Updates' 카테고리의 다른 글

Windows Azure Platform Training Kit 2010년 12월 버전 출시!  (0) 2010/12/30
윈도 애저에도 퐈이야 (FireStarter) 웹 캐스트가 12월 9일에 있습니다. o_O  (0) 2010/12/07
Windows Azure SDK 1.3 발표  (0) 2010/12/01
이번 PDC 2010을 통하여 공개된 Windows Azure의 개선 사항 정리  (0) 2010/11/05
PDC 2010에서 공개된 Windows Azure 업데이트  (2) 2010/10/29
PDC2010 클라우드 컴퓨팅 세션 미리 보기  (0) 2010/10/27
Posted by Windows Azure MVP 남정현 (rkttu.com)
TAG 1.3, 2008, Ajax, AppMarket, azure, Beta, cloud, Cloud Computing, Codename, Computing, CTP, Dallas, DataMarket, diagnostic, forum, Information, Linux, Live, marketplace, MSDN, Multiple Administrator, Platform, posix, PROJECT, Public Cloud Computing, R2, Remote Desktop, ria, rkttu, rkttu.com, Scenario, SDK, Server, service, Silverlight, SUA, sydney, Unix, wazure, Windows, Windows Azure, Windows Azure SDK, Windows Azure Service Portal, windows server, Windows Server 2008 R2, windows.azure.com, 남정현, 다중 관리자, 라이브 ID, 마켓플레이스, 베타, 서버, 서비스, 서비스 포털, 시드니, 실버라이트, 애저, 원격 데스크톱, 윈도, 윈도 라이브, 윈도 라이브 ID, 윈도 서버, 윈도 서버 2008 R2, 윈도 애저, 정보, 진단, 진단 정보, 컴퓨팅, 클라우드, 클라우드 컴퓨팅, 포럼, 플랫폼
트랙백이 없고, 댓글이 없습니다.

taeyo.net 실전 jQuery 세미나 (2010년 7월 10일)

이벤트 2010/06/25 23:44

ASP.NET AJAX와 더불어서 ASP.NET MVC를 비롯하여 거의 모든 웹 사이트와 웹 개발 프레임워크들이 채택하는 jQuery에 대한 세미나가 오는 2010년 7월 10일에 열립니다. 이번 세미나에서는 jQuery에 대한 고급 기법을 다루고, jQuery를 어떤 방법으로 확장할 수 있는지에 대한 다양한 테크닉을 "실전! jQuery CookBook"의 역자 분들께서 꼼꼼히 짚어주실 것입니다. 많은 참여 부탁드립니다. :-)

주의 사항: 세미나 참석 등록을 아래의 주소에서 제공하는 댓글 달기 기능을 이용하여 등록해 주십시오. 아래는 세미나 소개 글을 발췌해 온 것입니다.

세미나 등록하러 가기: http://taeyo.net/Forum/Content.aspx?TBL=NOTICE&SEQ=383&PGN=1

7월 10일 기다리던 jQuery 세미나가 시작됩니다.
실전! jQuery CookBook의 역자들이 모두 모여서 jQuery 고급기법에 관한 세미나를 진행합니다.
경품으로 신간 "실전! jQuery CookBook"도 드리니 많이 참석하셔서 즐겨주세요.

이번 세미나는 닷넷 개발자이던, 자바 개발자이던 무관하게 누구나 참석이 가능합니다.
현장등록도 가능하지만, 사전 준비를 위해서 반드시 리플로 참석 등록을 해주시기 바랍니다.
미리 참석등록을 한 분에 한해서 경품 추첨에 참여하실 수 있습니다.
(난 좀 샤이한 사람이다 하시는 분은 등록없이 그냥 오셔도 됩니다만, 그 경우 경품추첨에서 배제됩니다)

장소 : 한국 마이크로소프트 세미나실(선릉 포스코빌딩 서관 5층)
일시 : 2010년 7월 10일 토요일 오후 1시 (접수는 1시, 시작은 2시)

등록방법 : http://taeyo.net/Forum/Content.aspx?TBL=NOTICE&SEQ=383&PGN=1 에 리플로 참석여부와 이름, 개발분야를 남겨주시면 됩니다.

세션1 : jQuery의 Event 다루기

  • 시간 : 2:00 - 3:00
  • 발표자 : 김경균
  • 내용 :
    jQuery가 지원하는 이벤트에 대한 효과적인 사용방법과 고급 이벤트 기법에 대해서 다룹니다.
    이미 jQuery가 제공하고 있는 이벤트를 사용하는 방법 뿐만 아니라,
    자체적인 이벤트를 작성 및 사용하는 방법 및 이벤트 통지를 받는 방법에 대해서까지 심도 있게 이야기합니다.

세션2 : jQuery와 QUnit을 이용한 단위 테스트

  • 시간 : 3:15 - 4:15
  • 발표자 : 최지훈
  • 내용 :
    jQuery로 작성한 코드에 대해 단위 테스트하는 방법을 소개합니다.
    Qunit 프레임워크를 사용하여 결과를 어설션하고, 동기/비동기 콜백을 테스트하는 방법을 설명합니다.
    또한, 다양한 테스트를 그룹으로 묶어서 처리하는 방법에 대해서도 다룹니다.

세션3 : jQuery 확장 플러그인 만들기

  • 시간 : 4:30 - 5:30
  • 발표자 : 김태영
  • 내용 : jQuery를 확장하기 위한 방법들을 설명하고 그를 기반으로 플러그인을 제작해 봅니다.
    기본적인 플러그인 개발 규칙에 대해 다룬 후, 좀 더 완성된 형태의 플러그인 제작을 위해 필요한
    Option Hash 기법 및 $.extend()을 이용한 매개변수 초기화 방법 그리고 클로저 기법을 설명합니다.
    그리고, 그들을 모두 혼합하여 보편적인 형태의 플러그인을 직접 제작하고 활용하는 방법에 대해 이야기합니다.

경품 : BJ퍼블릭 협찬 - 실전! jQuery CookBook 5권
- 원하시면 역자들이 사인을 해드립니다.

* 세션 주제는 좀 더 나은 세미나를 위해 통지없이 변경될 수 있습니다.

tweet : @taeyo

세미나 등록하러 가기: http://taeyo.net/Forum/Content.aspx?TBL=NOTICE&SEQ=383&PGN=1

저작자 표시 비영리 동일 조건 변경 허락
이 장소를 Daum지도에서 확인해보세요.
서울특별시 강남구 대치4동 | 포스코센터
도움말 Daum 지도
크리에이티브 커먼즈 라이선스
Creative Commons License

'이벤트' 카테고리의 다른 글

Hello .NET Framework 4 세미나 Part 2 발표 자료 및 샘플 소스 코드 올립니다.  (0) 2010/07/19
[세미나] Hello .NET Framework 4  (0) 2010/07/14
taeyo.net 실전 jQuery 세미나 (2010년 7월 10일)  (0) 2010/06/25
[이벤트] SQL Unplugged 컨퍼런스: 국내 최고의 DB 스페셜리스트와 언플러그드 토크  (0) 2010/06/07
[이벤트] REMIX'10  (0) 2010/05/12
[이벤트] Advanced Computing Conference 2010  (0) 2010/05/07
Posted by Windows Azure MVP 남정현 (rkttu.com)
TAG 5층, @taeyo, Ajax, ASP.NET, ASP.NET MVC, BJ Public, BJ퍼블릭, Cookbook, event, Java, JavaScript, jQuery, Microsoft, MVC, QUnit, taeyo.net, 강좌, 김경균, 김태영, 서관, 세미나, 실전! jQuery CookBook, 오프라인, 웹 개발, 자바, 자바스크립트, 최지훈, 포스코센터, 한국 Microsoft, 한국 마이크로소프트, 서울특별시 강남구 대치4동 | 포스코센터
트랙백이 없고, 댓글이 없습니다.

jQuery를 이용하여 POST 방식의 WCF 서비스 호출하기

Software Development/Useful Solutions 2009/09/13 12:27

dojo와 더불어서 jQuery는 요즈음 웹 상에서 널리 사용되고 인기도가 높은 자바스크립트 프레임워크들 중 하나입니다. 작은 Foot-print를 유지하면서 무엇하나 모자람이 없는 기능을 제공하고 있고, 또한 ASP.NET 개발자들 사이에서는 ASP.NET MVC에서 공식 채택하기 이전부터 널리 사용되어온 자바스크립트 프레임워크입니다.

jQuery는 AJAX 기능 뿐만 아니라 비동기적으로 자바스크립트를 로드하고, 직렬화된 JSON 컨텐츠를 복원하여 메모리 상에 되살려놓을 수 있는 기능까지 내장하고 있습니다. 하지만 딱 한 가지 아쉬운 점이 있었는데 그 점은 바로 WCF가 노출하는 Contract들 중에서 POST 방식으로 호출해야 할 때 사용이 불편하다는 점입니다.

REST (GET) 방식으로 호출하는 방법은 대개 유용합니다. URL을 이용하여 호출하는 것이므로 프로그래밍하기에는 훨씬 간단한 방법일 수 있습니다. 하지만 경우에 따라서 전달해야 하는 매개 변수의 수가 많거나 복잡한 자료 구조를 전달해야 하는 경우 적절하지 않을 수 있습니다.

이 Article에서는 jQuery를 이용하여 POST 방식의 WCF 서비스를 호출하는 방법을 다뤄보기로 하겠습니다. 이 Article에서 사용하는 Code의 원본은 http://www.west-wind.com/weblog/posts/324917.aspx 에서 가져온 것임을 밝혀둡니다.

 public static void NoCaching(WebOperationContext context)
 {
     if (context == null)
         return;

     context.OutgoingResponse.Headers["Pragma"] = "no-cache";
     context.OutgoingResponse.Headers["Cache-Control"] = "no-cache";
 }

 [OperationContract]
 [WebInvoke(RequestFormat = WebMessageFormat.Json, ResponseFormat = WebMessageFormat.Json)]
 public int CreateArticle(int boardID, string title, string contents)
 {
        NoCaching(WebOperationContext.Current);

        if (!Security.IsLoggedOn)
            return (-1);

        int? newArticleID = null;
        this.dataContext.CreateArticle(
            (int?)boardID,
            title,
            (int?)Security.CurrentUserID,
            contents,
            ref newArticleID);

        return newArticleID.HasValue ? newArticleID.Value : (-1);
 }

위의 코드는 Internet Explorer가 내장하는 XMLHttpRequest의 캐싱 기능을 사용하지 않도록 응답을 내보내는 POST 방식의 WCF Contract 코드 예제입니다. [WebGet] 대신 [WebInvoke]가 사용된 것을 확인하면 됩니다. 그리고 입력과 출력 형식을 모두 JSON으로 지정하였습니다.

이제 아래의 코드를 별도의 JavaScript 파일로 저장합니다.

jQuery.invokeWcf = function(serviceUri, method, data, callback, error, bare) {
    var json = JSON.stringify(data);
    var url = serviceUri + '/' + method;

    $.ajax({
        url: url,
        data: json,
        type: 'POST',
        processData: false,
        contentType: 'application/json',
        timeout: 10000,
        dataType: 'text',
        success: function(rawResult) {
            if (!callback) {
                return;
            }

            var result = JSON.parse(rawResult);

            if (bare) {
                callback(result);
                return;
            }

            for (var eachProperty in result) {
                callback(result[eachProperty]);
                break;
            }
        },
        error: function(xmlHttpRequest) {
            if (!xmlHttpRequest) {
                return;
            }

            if (xmlHttpRequest.responseText) {
                var errorMessage = JSON.parse(xmlHttpRequest.responseText);
                if (errorMessage) {
                    error(errorMessage);
                } else {
                    error({ Message: 'Unknown server error found.' });
                }
            }

            return;
        }
    });
};

그리고 위의 코드를 사용하기 위하여 JSON2.js 파일이 별도로 필요합니다. JSON2.js는 http://www.json.org/js.html 페이지에서 다운로드할 수 있습니다. 마지막으로, jQuery 플러그인으로 개발된 위의 코드를 사용하기 위하여 jQuery를 추가해야 합니다. 위의 코드는 1.3.2 버전에서 테스트하였습니다.

이제 위의 코드를 호출해보기로 하겠습니다.

var editorInstance = FCKeditorAPI.GetInstance('<%= this.articleBody.ClientID %>');
var data = {
    boardID: parseInt(boardID),
    title: $('#' + '<%= this.articleTitle.ClientID %>').attr('value'),
    contents: editorInstance.GetXHTML()
};

$.invokeWcf('Board.svc', 'CreateArticle', data, function(result) {
    result = result.toString();
    if (result == '-1') {
        window.alert('글 쓰기 도중 오류가 발생하였습니다.');
        return;
    }
    if ($('#fileQueue > .uploadifyQueueItem').size() > 0) {
        $('#fileUploads').uploadifySettings('script', 'UploadHandler.ashx?ID=' + result.toString());
        $('#fileUploads').bind('uploadifyAllComplete', function(event, data) {
            window.location.replace('ViewArticle.aspx?ID=' + result.toString());
        });
        $('#fileUploads').uploadifyUpload();
    } else {
        window.location.replace('ViewArticle.aspx?ID=' + result.toString());
    }
}, function(result) { window.alert(result); });

실제 WCF가 제공하거나 입력시 필요로 하는 JSON 코드의 경우 jQuery가 내장하는 getJSON 함수로 다루기에는 까다로운 부분이 많았습니다. 하지만 위의 코드에서처럼 매개 변수를 동적으로 프로그래밍하고 함수 인자를 전달하는 것 만으로 모든 처리가 이루어지게 됩니다.

많은 도움이 되었기를 바라며 글을 마무리합니다.

ps. jQuery를 활용하는 RIA 기반 File Upload 솔루션을 찾고 있다면 uploadify (http://www.uploadify.com) 의 소스 코드를 활용해 보실 것을 권합니다. 무료로 사용 가능하며 약간의 테스트와 개발을 통하여 손쉽게 적용할 수 있습니다.

크리에이티브 커먼즈 라이선스
Creative Commons License

'Software Development > Useful Solutions' 카테고리의 다른 글

루씬 라이브러리를 닷넷에서 사용하기  (3) 2009/09/27
App_Code 폴더를 통하여 여러 프로그래밍 언어 동시에 사용하기  (0) 2009/09/14
jQuery를 이용하여 POST 방식의 WCF 서비스 호출하기  (0) 2009/09/13
TortoiseSVN에서 제외할 파일/디렉터리 이름 패턴 (Delphi/VC++/.NET IDE)  (0) 2009/03/23
Visual Studio 2008의 새 프로젝트 만들기 관련 문제점  (0) 2009/02/01
Informix, Oracle, MSSQL을 위한 테이블 구조 확인 SQL문  (0) 2009/01/19
Posted by Windows Azure MVP 남정현 (rkttu.com)
TAG .NET, Ajax, ASP.NET, c#, Caching, framework, GET, jQuery, JSON, LINQ TO SQL, Microsoft, post, REST, rkttu, rkttu.com, uploadify, WCF, 남정현, 대한민국>서울>송파구>잠실동
트랙백이 없고, 댓글이 없습니다.

Microsoft Live Labs Volta

Software Development/Exploring 2008/07/30 00:54

사용자 삽입 이미지

Microsoft Live Labs Volta 프로젝트 (이하 Volta 프로젝트)는 Technology Preview 단계의 프로젝트로서 클라이언트 응용프로그램에서 사용하던 프로그래밍 기법 (플랫폼 특정적인 기법이 아닌 디자인 패턴과 같은 주제들)을 웹 응용프로그램에서도 손쉽게 적용할 수 있는 모델을 구현하는 독특한 프로젝트입니다. 이름에서 알 수 있듯이 "빠르고 간편함"을 강조하고 있습니다.

Volta 프로젝트를 통하여 완성할 수 있는 응용프로그램은 상당히 특이한 모양을 지니고 있습니다. Volta Application Server를 통하여 실행할 수 있도록 간단한 스텁 코드와 컨텐츠 서버만이 제공된 상태에서 이를 Volta Application Server나 IIS 호스팅 환경 상에 게시하여 로컬 컴퓨터와 인터넷 응용프로그램으로의 Formation 전환이 손쉽게 되어있습니다.

Volta 프로젝트를 통해서 다계층 응용프로그램, AJAX 기반 웹 응용프로그램, 스마트 클라이언트와의 통합, Open API 매쉬업 등 최근 이슈가 되고 있는 다양한 웹 2.0 기술들을 한 번에 해결할 수 있게 하여 "새로운 것"에 대한 부담감을 개발자들에게서 덜어내고자 하는 것이 프로젝트의 궁극적인 목표라고 합니다.

Volta는 앞서 언급한 대로 Technology Preview 단계에 있기 때문에 기술적인 한계와 불편함이 아직 남아있으며, 발견되지 않은 문제점들도 있을 가능성이 있습니다. 제일 큰 걸림돌은 Volta가 동적으로 생성하는 JavaScript 코드와 라이브러리가 무겁고, 다운로드 시간과 처리 속도가 느리다는 단점이 있습니다. 이 문제는 향후 Volta 프로젝트가 정식 버전에 가까워질수록 많은 개선이 있을 것입니다.

조만간 Volta 프로젝트 기반의 응용프로그램에 대한 상세한 원리와 기술적 접근을 블로그에 별도의 카테고리로 개설하여 강좌를 올릴 예정이니 많은 관심 바랍니다.

Volta 공식 홈페이지: http://labs.live.com/volta
Volta 팀 블로그: http://labs.live.com/volta/blog/


크리에이티브 커먼즈 라이선스
Creative Commons License

'Software Development > Exploring' 카테고리의 다른 글

Windows 이후 - Microsoft Midori 운영 체제; 새로운 시스템 아키텍처와 운영 체제  (0) 2008/08/29
Visual Studio 2008 및 .NET Framework 3.5 SP1 발표  (2) 2008/08/13
Microsoft Live Labs Volta  (0) 2008/07/30
Windows Live Hotmail의 불쾌한 사용자 경험  (0) 2008/07/23
오픈 소스 라이센스에 대한 요약  (11) 2008/07/19
Delphi 2007 (Install Aware)과 Anhlab V3 사이의 충돌  (0) 2008/03/10
Posted by Windows Azure MVP 남정현 (rkttu.com)
TAG Ajax, ASP.NET, c#, Live labs, Microsoft, OpenAPI, rkttu, rkttu.com, VB.NET, Volta, 남정현, 매쉬업, 대한민국>인천>인하대학교
트랙백이 없고, 댓글이 없습니다.

JavaScript의 OOP가 생소하신가요?

Web Development/Web Programming 2007/11/28 23:03

근래에 들어서 ASP.NET AJAX도 나왔고 본격적으로 Visual Studio 2008이나 Visual Web Developer 2008을 통해서 Java Script 인텔리센스도 사용할 수 있게 되면서 참 좋아졌습니다. 하지만 JavaScript에서도 OOP가 가능하다는 사실을 모르는 분들도 많고 알고 난 뒤의 당황스러움 또한 말로 표현하기 어려우실 겁니다. :-)

JavaScript의 OOP는 기존의 OOP 프로그래밍 언어에서 최소한의 내용만을 가져왔고 복합적인 형태를 띕니다. 아래의 연속된 박스들을 보면서 어떻게 OOP가 완성되는지 살펴보도록 하겠습니다.

function myClass()
{
    // 보통은 이곳에 함수의 내용을 프로그래밍하는 것으로 알고 있고 그렇게 합니다.
}
function myClass()
{
    // 그러나, this라는 키워드가 있습니다. 그리고 this라는 키워드에 임의의 변수를 새로 정의하는 것이 가능합니다.
    this.something = 'Hello World!';
}
function myClass()
{
    // 한걸음 더 나아가서, something의 내용을 브라우저의 메시지 박스로 띄워주는 함수도 만들어볼까요?
    this.something = 'Hello World!';
    this.showSomething = function() {
        alert(this.something);
    }
}
var test = new myClass();
test.showSomething();

위의 연속된 박스들을 보면서 몇 가지 특징을 한꺼번에 설명해보겠습니다.

우선 myClass라는 함수이자 클래스는 보통의 함수로 사용되면 의미가 없습니다. 반드시 new 연산자에 의해 생성될 필요가 있습니다. 이 때, myClass 안에 들어있는 선언부 외의 모든 일반적인 코드들은 myClass의 생성자와 같은 일을 합니다.

그리고 따로 선언한 적이 없는 변수나 함수가 this 키워드에 이름을 지정하는 것 만으로 생성이 되는 것을 알 수 있는데, 이렇게 생성된 변수나 함수 모두 액세스 한정자가 public인 멤버로 볼 수 있습니다. 만약 로컬 변수를 사용하고 싶어서 var 키워드를 써서 변수를 정의했다면 로컬 변수로도 취급됩니다. var 키워드의 경우 브라우저의 해석 방법에 따라서는 private 액세스 한정자 멤버로 취급될 수 있는것도 같습니다만 정확한 것은 아닙니다.

이와 같이 JavaScript OOP를 이용하여 새로운 형식을 만든다는 것은 어려울 것이 없는 단순명료한 작업입니다. 여기에 기존의 브라우저들이 제공해왔던 다양한 형태의 API와 XMLHttpRequest와 같은 서비스를 결합시킨다면 유용할 것입니다. ASP.NET AJAX를 비롯하여 여러 JavaScript 고급 서비스들은 JSON (Java Script Object Notation)을 통하여 직렬화와 역직렬화 서비스를 구현하고 있으며 이를 통하여 클래스에 영속성을 부여하기도 합니다.

JavaScript OOP를 성공적으로 활용하는 사례는 도처에 널려있습니다. ASP.NET AJAX의 XML 웹 서비스 연동 기능, 자바스크립트 객체 영속성을 위한 JSON, 자바스크립트 코드 검증 및 분석 도구인 JSLINT 등이 있습니다.

ASP.NET AJAX를 통하여 새로운 기능을 배우는 것도 좋지만 JavaScript의 OOP 능력도 시험해보고 좀 더 낳은 코드를 제작할 수 있도록 아이디어를 찾아보는 시도 또한 중요할듯 싶습니다.

크리에이티브 커먼즈 라이선스
Creative Commons License

'Web Development > Web Programming' 카테고리의 다른 글

Windows Vista에서 Firefox로 ASP.NET 디버깅할 때 느려지는 현상  (0) 2008/11/17
Microsoft ASP.NET Inline Compilation의 문제점  (0) 2008/09/28
JavaScript의 OOP가 생소하신가요?  (2) 2007/11/28
[웹 개발] ActiveX 없이 간단한 AES 암호화 시스템 적용하기  (0) 2007/11/26
Visual Web Developer 2008 테스트 드라이브  (0) 2007/11/21
ASP.NET의 XHTML 지원은 정말 완벽한 것일까?  (0) 2007/09/01
Posted by Windows Azure MVP 남정현 (rkttu.com)
TAG Ajax, asp.net ajax, JavaScript, Jscript, JSLINT, JSON, OOP, rkttu, rkttu.com, 객체지향, 남정현, 대한민국>인천>인하대학교
트랙백이 없고, 댓글 2개가 달렸습니다

[웹 개발] ActiveX 없이 간단한 AES 암호화 시스템 적용하기

Web Development/Web Programming 2007/11/26 01:15

개인적인 호기심에 Java Script 기반의 암호화 알고리즘 구현이 있을까 검색해보게 되었다. 혹시가 역시였는데 매우 다양한 버전의 Java Script 기반의 암호화 알고리즘을 찾을 수 있었다. 클라이언트에서 데이터를 암호화한 후 이것을 서버로 전송하고 이것을 서버에서 같은 비밀 키를 사용하여 해독한다는 개념은 이제는 너무 일반적인 것이라 굳이 언급하지 않아도 될 정도다. 하지만 놀랍게도 이런 구현 절차를 ActiveX에 너무 많이 기대고 있다는 것 또한 사실이다.

ActiveX 없이 다중 브라우저를 지원하면서도 일정 수준 이상의 보안을 충족하는 암호화 시스템을 어쩌면 간단히 구현해볼 수도 있지 않을까라는 호기심이 생겨서 몇 번 코드를 끄적여보았을 뿐인데 개인적으로나 일반적인 커뮤니티에 적용하기에는 딱 좋은 수준의 암호화 시스템이 나와서 글을 써본다. Security Critical한 서비스에서는 HTTPS, SSL, IP/sec 등을 사용하는 것이 100배 안전하지만 이것은 어디까지나 일상적인 암호화만을 다루는 것이다.

기본적인 원리는 간단하다. 같은 Java Script Source Code를 가지고 하나는 Internet Browser용 Java Script Code로 사용하고 또 하나는 JScript .NET 컴파일러용으로 패키징하여 ASP.NET에 통합하는 것이다. 이 글에서는 AES (Advanced Encryption Standard) 알고리즘을 채택하였다.

Java Script AES Implementation: http://www.movable-type.co.uk/scripts/aes.html

위의 사이트에서 핵심적인 AES 구현을 먼저 가져왔다. AES 알고리즘과 비밀 키를 통하여 평문을 암호문으로, 암호문을 평문으로 바꾸는 것이 정확하게 작동한다는 것을 테스트하였다. 하지만 암호문을 평문으로 바꾸는 과정에 있어서 암호문이 바이트의 배열로 출력된다는 점이 걸린다. 인코딩에 따라서는 완전히 다른 내용으로 읽혀져 손상될 가능성이 있기 때문이다. 그래서 BASE64 알고리즘을 다시 찾게 되었다.

Java Script BASE64 Implementation: http://rumkin.com/tools/compression/base64.php

AES 암호문을 BASE64로 보호하고, BASE64 디코딩으로 얻어낸 AES 암호문을 평문으로 바꾸는 것 또한 정확히 동작함을 확인하였다. 그리고 이번엔 정말 실용성이 있는지 확인해보고 싶어서 2바이트 문자열을 가지고 암호화 복호화를 시험해보았다. 하지만 이번엔 정확히 복원해내지 못한다는 것을 확인할 수 있었다. 다행히 2바이트 문자열에 대해서는 자바스크립트 내장 함수인 encodeURI와 decodeURI를 통하여 처리할 수 있었다. 평문에 관한 문제는 해결이 되었지만 비밀 키의 경우에는 이 방법도 의미가 없었다. 비밀 키는 1바이트 문자열 수준에서 해결해야 하는듯 보였다.

이러쿵 저러쿵하여 만든 JavaScript 코드와 바이너리를 ZIP 파일로 묶어서 올려본다. 여러 메서드가 있지만 이 글의 내용을 반영하여 만든 실질적인 메서드는 다음과 같다.

AesImpl.zip

// JavaScript
AesEncrypt128(plainText, password);
AesEncrypt192(plainText, password);
AesEncrypt256(plainText, password):
AesDecrypt128(cipherText, password);
AesDecrypt192(cipherText, password);
AesDecrypt256(cipherText, password):

// C# (Need JScript.NET Runtime Assembly)
SecurityManaged.ComplexAes aesModule = new SecurityManaged.ComplexAes();
aesModule.AesEncrypt128(plainText, password);
aesModule.AesEncrypt192(plainText, password);
aesModule.AesEncrypt256(plainText, password);
aesModule.AesDecrypt128(cipherText, password);
aesModule.AesDecrypt192(cipherText, password);
aesModule.AesDecrypt256(cipherText, password);

클라이언트 측에서는 AesEncrypt로 보호할 내용을 암호화한 후 서버에 전송하고, ASP.NET - 또는 - 이를 받아들일 소켓 서버 등에서는 SecurityManaged.dll 파일을 레퍼런스로 참조하고 SecurityManaged.ComplexAes 클래스의 인스턴스를 만들어 위의 AesDecrypt로 내용을 복구하면 되겠다. 참고로 128/192/256은 키의 길이에 해당된다.

첨부된 파일 안의 .Managed.js 파일은 JScript.NET 문법에 맞게 재배치한 것으로 DLL로 컴파일하는 것을 가능하게 해준다. 안의 내용이나 코드 문법은 오리지널 Java Script과 전혀 차이가 없지만 닷넷 어셈블리로 만들기 위해서 package 구문과 class 구문을 추가하였을 뿐이다. 또한, 가능성만을 타진해보기 위함이었으므로 JScript.NET에서만 가능한 명시적인 형식 지정 또한 누락되어있다. 만약 좀 더 최적화를 원한다면 코드를 수정해서 사용할 것을 권하며 필요한 경우 어트리뷰트 지정을 통하여 지연된 서명을 추가해볼수도 있겠다.

닷넷 프레임워크 2.0을 설치하였다면 명령 프롬프트에서 다음과 같이 입력하면 원하는 어셈블리를 직접 얻을 수 있다. (이 작업을 위해서 Visual Studio 2005나 2008은 필요하지 않다.)

%windir%\microsoft.net\framework\v2.0.50727\jsc.exe /target:library AesImpl.managed.js

이제 우리들만의 일상적이고도 간단한 AES 암호화 알고리즘 시스템을 얻을 수 있게 되었다. 그 다음 활용 방안은 다시 고민해봐야 하겠다. 자바스크립트 기반에 닷넷까지 지원되니 ASP.NET AJAX와 Silverlight에도 잘 어울릴듯 하다.

크리에이티브 커먼즈 라이선스
Creative Commons License

'Web Development > Web Programming' 카테고리의 다른 글

Microsoft ASP.NET Inline Compilation의 문제점  (0) 2008/09/28
JavaScript의 OOP가 생소하신가요?  (2) 2007/11/28
[웹 개발] ActiveX 없이 간단한 AES 암호화 시스템 적용하기  (0) 2007/11/26
Visual Web Developer 2008 테스트 드라이브  (0) 2007/11/21
ASP.NET의 XHTML 지원은 정말 완벽한 것일까?  (0) 2007/09/01
이올라스 패치에 대한 초간단 솔루션  (0) 2006/12/03
Posted by Windows Azure MVP 남정현 (rkttu.com)
TAG AES, Ajax, asp.net ajax, c#, cryptography, Java Script, JavaScript, Jscript, JScript.NET, rkttu, rkttu.com, Silverlight, 로그인, 보안, 브라우저, 암호화, 웹 표준, 인터넷, 대한민국>인천>인하대학교
트랙백이 없고, 댓글이 없습니다.

Visual Web Developer 2008 테스트 드라이브

Web Development/Web Programming 2007/11/21 17:38

오늘은 자투리 시간을 이용하여 Visual Web Developer 2008을 설치해서 가장 써보고 싶었던 기능인 JavaScript 편집 기능을 활용해 보았다. 평소에 JavaScript 에디터 중에 무료로 사용할 수 있으면서도 완벽한 기능을 보여주는 에디터가 없는게 큰 불만이었던터라 무척 반가웠다.

Visual Web Developer 2008의 자바스크립트 기능이 특별한 이유는 바로 JavaScript OOP를 지원하기 때문이며 부수적으로 HTML DOM을 완벽하게 해석하기 때문에 정확한 코딩을 할 수 있어서 좋다. 만약 JavaScript를 분석할 일이 있지만 까탈스러운 문법때문에 고민중이라면 당장이라도 Visual Web Developer 2008만은 다운로드받아서 활용해보길 바란다. 덤으로 테스트용 웹 서버까지 따라오므로 IIS도 필요없다.

본업인 닷넷 프레임워크 기반 개발 환경에 대해서도 당연히 관심이 있기에 ASP.NET AJAX가 2005때보다 얼마나 더 개발하기 편리해졌는지, 그리고 WCF (Windows Communication Foundation) 프레임워크 기반의 서비스 개발의 능력도 체크해 볼 생각이다.

Visual Web Developer 2008은 이 글을 쓰는 현 시점에서 아직까지 영문판 전용이지만 곧 한글판도 나올 것으로 보인다. http://msdn.microsoft.com/express 에서 받을 수 있다.

아래는 기념으로 만든 예제 코드이다. 요즈음은 어떤 환경이던간에 Hello World를 못할리가 없으므로 나는 예제 코드로 좌항과 우항을 더해서 결과값을 반환하는 사칙 연산 로직을 앞으로의 새로운 프로그래밍 언어에 대한 시험 코드로 써볼 생각이다.

[CODE]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>Untitled Page</title>
    <script type="text/javascript">
    function exception(content) {
        this.message = content.toString();
       
        this.alert = function() {
            alert(this.message);
        }
       
        this.toString = function() {
            return this.message;
        }
    }

    function calc(leftVal, rightVal) {
        this.left = parseInt(leftVal.toString(), 10);
        this.right = parseInt(rightVal.toString(), 10);
       
        if (isNaN(this.left)) {
            throw new exception('left is NaN!');
        }
       
        if (isNaN(this.right)) {
            throw new exception('right is NaN!');
        }
       
        this.add = function() {
            return this.left + this.right;
        }
       
        this.sub = function() {
            return this.left - this.right;
        }
       
        this.multi = function() {
            return this.left * this.right;
        }
       
        this.div = function() {
            if (this.right == 0) {
                throw new exception('div/0!');
            }
            return this.left / this.right;
        }
       
        this.mod = function() {
            return this.left % this.right;
        }
       
        this.pow = function() {
            return Math.pow(this.left, this.right);
        }
    }
    </script>
</head>
<body>
    <div id="Test"></div>
    <script type="text/javascript">
    var test = new calc(3, 4);
    alert(test.add());
    alert(test.sub());
    alert(test.multi());
    alert(test.div());
    alert(test.mod());
    alert(test.pow());
    </script>
</body>
</html>


[/CODE]
크리에이티브 커먼즈 라이선스
Creative Commons License

'Web Development > Web Programming' 카테고리의 다른 글

JavaScript의 OOP가 생소하신가요?  (2) 2007/11/28
[웹 개발] ActiveX 없이 간단한 AES 암호화 시스템 적용하기  (0) 2007/11/26
Visual Web Developer 2008 테스트 드라이브  (0) 2007/11/21
ASP.NET의 XHTML 지원은 정말 완벽한 것일까?  (0) 2007/09/01
이올라스 패치에 대한 초간단 솔루션  (0) 2006/12/03
ActiveX는 그 수명을 다하려는가...  (0) 2006/12/03
Posted by Windows Azure MVP 남정현 (rkttu.com)
TAG Ajax, ASP.NET, ASP.NET 3.5, asp.net ajax, JavaScript, Jscript, rkttu, rkttu.com, Visual Studio 2008, Visual Web Developer 2008, VWD, VWD2008, WCF, 남정현, 대한민국>서울>광화문
트랙백이 없고, 댓글이 없습니다.

Visual Studio 2007 Orcas 2007年 1月 CTP

Software Development/Exploring 2007/02/03 17:34
다운로드: http://www.microsoft.com/downloads/details.aspx?familyid=1ff0b35d-0c4a-40b4-915a-5331e11c39e6&displaylang=en&tm

Visual Studio 2007 (코드네임: Orcas)의 2007년 1월 CTP가 MS 웹 사이트에서 배포 중입니다. Visual Studio 2005가 2005년 말에 나왔고 그로부터 1년 조금 넘게 걸려서 첫 소식이 나온 셈입니다.

아직 Visual Studio 2007은 Windows Vista와의 호환성은 고려하지 않고 배포 중인 것 같습니다. 기존 시스템에 영향을 주지 않고 테스트할 수 있도록 얼마전에 무료화된 Microsoft Virtual PC 2004와 무료 가상 서버 플랫폼인 Microsoft Virtual Server 2005 R2에서 돌려볼 수 있는 OS를 포함한 전체 가상 PC 이미지도 같이 제공하고 있습니다.

VIsual Studio 2007은 대강 이런 기능들을 새로 선보인다고 하네요.

* ADO .NET 엔티티 프레임워크
* LINQ와 완전히 통합된 ADO .NET API (LINQ는 프로그래밍 언어 수준에서 SQL과 유사한 질의를 사용할 수 있는 언어 확장 기술)
* 문서로만 떠돌던 C# 3.0을 처음으로 정리한 C# 3.0 컴파일러 및 IDE 내장
* LINQ 자체도 ADO .NET 외에 일반적인 컬렉션, 제네릭 컬렉션에 대해서 작동할 수 있도록 확장됨
* ClickOnce 기능의 업그레이드
* 강력한 암호화 기술을 위한 Elliptic Curve Diffie Hellman 및 Elliptic Curve Digital Signature Algorithm 구현 추가
* 오피스 2007 개발 지원
* 향상된 객체 수명 주기 관리 및 응용프로그램 도메인 관리 기능 추가
* ASP .NET을 위한 향상된 로그인/로그아웃/역할 모델 메카니즘 도입
* Windows Vista의 ETW 시스템과 연동되는 이벤트 추적 Listener 지원
* ASP.NET AJAX를 위한 확장된 JScript 인텔리센스 기능 구현
* System.Numeric 네임스페이스가 새로 추가되고 기존의 System.Int64 및 System.UInt64보다 훨씬 넓은 범위의 수를 다룰 수 있으며 이런 범위의 수에 대해 효율적으로 작동하는 전용 수학 알고리즘 대거 추가
* 이번 버전에 포함된 LINQ의 경우 특별히 XML에 관한 기능까지 사용할 수 있게 됨 (XML을 XPath 이외의 방법으로 질의하거나 데이터의 삽입 및 수정이 가능해짐)
* SSCE (SQL Server Compact Edition) 번들링

다운로드: http://www.microsoft.com/downloads/details.aspx?familyid=1ff0b35d-0c4a-40b4-915a-5331e11c39e6&displaylang=en&tm

VMware Workstation이나 VMware Player에서 아직 구동해보지는 않았습니다만 가상 PC 마이그레이션을 통하여 실행하는 것도 가능할 듯 싶습니다. :-)
크리에이티브 커먼즈 라이선스
Creative Commons License

'Software Development > Exploring' 카테고리의 다른 글

젠투 리눅스 2006.1 도전  (4) 2007/02/18
Mono 1.2.3 런칭  (0) 2007/02/10
Visual Studio 2007 Orcas 2007年 1月 CTP  (2) 2007/02/03
Archive.org - 세계에서 가장 방대한 웹 사이트 아카이브 수집기  (0) 2007/01/07
ImgBurn을 노트북에서 사용할 때  (0) 2007/01/02
Virtual Appliance를 이용하여 필요한 곳에 서버를 배달하기  (0) 2006/12/30
Posted by Windows Azure MVP 남정현 (rkttu.com)
TAG .NET Framework 3.0, ADO .NET, ADO.NET, Ajax, AppDomain, ASP.NET, asp.net ajax, atlas, BCL, c#, C# 3.0, ClickOnce, CTP, Elliptic Curve Diffle Hellman, Elliptic Curve Digital Signature Algorithm, ETW, LINQ, Office 2007, Orcas, rkttu, rkttu.com, SQL Server Compact Edition, SSCE, System.Core.dll, System.Numeric, virtual pc, Virtual PC 2004, Virtual Server, Virtual Server 2005, Virtual Server 2005 R2, Visual Studio, Visual Studio 2007, VMware, vmware player, VMware WorkStation, Windows Server 2003, Windows Vista, windows xp, WinFX, 남정현, 생명주기, 암호화, 대한민국>인천>인하대학교
트랙백이 없고, 댓글 2개가 달렸습니다

병역특례 포트폴리오 웹 사이트

남정현/포트폴리오 2006/12/30 21:04

병역특례 지원을 위하여 백방으로 노력하던 때 만들었던 웹 사이트이다. AJAX 연습을 위해서 만들어보았고 내가 원하는대로 괜찮게 만들어진 사이트인 것 같다. (물론 나는 디자이너가 아니므로 디자인 감각은 꽝이다.) 지금 생각해보면 힘들었지만 나의 경력이 아직도 한참 모자란다는 것을 알게 해준 시절인것 같아서 굉장히 소중하다.

http://rkttu.com/portfolio/index.html

크리에이티브 커먼즈 라이선스
Creative Commons License

'남정현 > 포트폴리오' 카테고리의 다른 글

OpenSearch 플러그인  (2) 2008/04/22
직접 실행 창과 NUnit을 위한 유틸리티 - IDataReader 뷰어  (0) 2007/01/20
병역특례 포트폴리오 웹 사이트  (2) 2006/12/30
주민등록번호 검사 메서드  (0) 2005/02/07
.PLA 형식의 MP3 Playlist 작성  (0) 2005/02/01
C/C++ #define 정의문 내용 검색  (0) 2005/01/09
Posted by Windows Azure MVP 남정현 (rkttu.com)
TAG Ajax, rkttu, rkttu.com, 남정현, 방산, 방위산업체, 병역특례, 산업기능요원, 대한민국>인천>인하대학교
트랙백이 없고, 댓글 2개가 달렸습니다