Frontend Development Tools

( 웹 개발 툴 소개 )


참조 URL
  1. https://github.com/codylindley/frontend-tools
  2. https://github.com/codylindley/simple-frontend-boilerplate
  3. https://github.com/codylindley/backbone-boilerplate



 Cody Lindley (codylindley)라는 분이 GutHub에 "Landscaping With Frontend Development Tools"라는 제목으로 올려진 글을 소개 하고자 한다. 이 페이지는 제목 그대로 웹 개발에서 UI에 필요한 개발 도구들에 대한 분류와 링크를 공유하고 있다. 적당한 프레임웍을 개발하고자 한다면 이 페이지에서 소개한 링크를 따라가 보면 전체 적인 개발 프레임을 구성하는데 도움을 받을 수 있을것이라 생각한다.


 예를 들자면 필자는 이전까지는 Script Loader에 대한 라이브러리를 Requirejs나 LazyJS에 대하서만 알고 있었는데 아래와 같은 리스트를 통해서 더 많은 정보를 알게 되어 검토하지 못했던 사안에 대해서 좀더 많이 생각할 수 있게 되었다.


Module/Script Loaders (Javascript Loaders Comparison)


  그렇지만 시간과 여유가 만족 스럽지 못하다면 소개된 여러 라이브러리 중에서 커뮤니티가 활성화된 라이브러리를 사용하는 것도 하나의 방법일 수 있겠다. ^^




저작자표시 동일조건

'Javascript' 카테고리의 다른 글

최신 jQuery에 대한 질문과 답변 - Latest jQuery interview questions and answers  (0) 2013.07.24
[Javascript Framework] jQuery UI + jQuery Tool UI - jQuery로만 UI를 개발 지원할 때  (0) 2013.05.31
[Javascript Framework] jQuery++ - jQuery helper library  (0) 2013.05.29
모바일에서 jQuery 대안 - zeptojs  (0) 2013.05.28
구형 브라우저에서 ECMAScript 5를 지원하도록 해주는 라이브러리 - ES5-shim  (0) 2013.05.26


 CultureInfo로 모든 언어의 

DateFormat, TimeFormat 알아내기



 Exchange에 타임존과 언어설정시 TimeFormat와 DateFormat 설정을 같이 해줘야 세팅이 되기 때문에 검색을 하였으나 구글리에서는 검색이 되지 않아 직접 파워쉘로 언어별로 세팅된 정보를 알아내 진행하다가 같이 프로젝트 하시는 이사님이 아래 코드를 보내 주셨다.


// 언어 리스트 가져오기
CultureInfo[] cinfo = CultureInfo.GetCultures(CultureTypes.AllCultures & ~CultureTypes.NeutralCultures);
 
// 언어 리스트
foreach (CultureInfo cul in cinfo)
{
    Console.WriteLine("Language={0}", cul.Name);
    Console.WriteLine("DateFormat={0}", cul.DateTimeFormat.ShortDatePattern);
    Console.WriteLine("TimeFormat={0}", cul.DateTimeFormat.ShortTimePattern);
    Console.WriteLine("----------------------");
}

[코드1] 모든 언어 객체를 가져와 DataFormate, TimeFormate 뿌려주기


 이 코드를 실행하면 아래와 같이 결과가 나온다.


Language=chr-Cher

DateFormat=M/d/yyyy

TimeFormat=h:mm tt

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

Language=iu-Latn

DateFormat=d/MM/yyyy

TimeFormat=h:mm tt

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

Language=tzm-Latn

DateFormat=dd-MM-yyyy

TimeFormat=H:mm

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

Language=ff-Latn

DateFormat=dd/MM/yyyy

TimeFormat=HH:mm

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

Language=ha-Latn

DateFormat=d/M/yyyy

TimeFormat=h:mm tt

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

Language=ku-Arab

DateFormat=yyyy/MM/dd

TimeFormat=hh:mm tt

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

[표1] 결과 화면


 이제 여기서 얻은 값으로 아래의 코드를 통해서 Exchange 2013에서 사용자의 타임존과 언어 설정을 할 수 있게 되었다.


// 파워쉘로 사용자 언어 설정 변경
using (var powershell = Injector.Current.GetInstance<IPowerShellWrapper>())
{
    var results = powershell.PipelineInvoke("Set-MailboxRegionalConfiguration",
        new Dictionary<string, object>() 
        {
            { "Identity", ui.UserId },
            { "Language", ui.Language },
            { "TimeFormat", ui.TimeFormat },
            { "DateFormat", ui.DateFormat } 
        });
 
    result.ResultState = true;
}

[코드2] Exchange 2013에서 파워쉘로 타임존과 언어설정 코드






저작자표시 동일조건

'.Net Framework' 카테고리의 다른 글

[Mono][ASP.NET] Nancy Framework - .Net, Mono 지원하는 Restful 서비스 개발 지원  (0) 2013.06.05
[Mono] Monodevelop - Windows, Linux, Mac 응용 프로그램 개발 지원 IDE  (0) 2013.06.05
[C# Code Snippet] Enum을 String에서 변환 하기 - Enum Convert  (1) 2013.05.30
Zen Coding Visual Studio Plugin  (0) 2013.05.18
[Unit Test] 테스트 모드를 64비트에서 테스트 - 64bit COM+ 테스트시 주의  (0) 2013.05.14

Enum을 String에서 변환 하기



 환경 설정에서는 흔히 XML로 저정되어 있어서 일차적으로 읽는 값이 String으로 되어 있다. 그 값으로 Enum 타입의 값으로 변경하기 위해서는 값을 switch 구문이나 if 문으로 구분해서 변환해야 만 했었다. 그렇지만 .Net Framework 4에서 Enum의 Parse, TryParse를 통해서 쉽게 변환할 수 있도록 지원하고 있다. 아래 예제 코드로 확인해 보자 (Enum.Parse는 1.1부터 지원되었음)


var type = EnumType.None;
 
// Encryption 변환되는지 테스트
if (!Enum.TryParse("Encryption", out type) && type == EnumType.Encryption)
{
    throw new InvalidCastException("LdapAuthenticationType값이 올바르지 않습니다. 다시 확인하여 주시기 바랍니다.");
}
 
// 2(Encryption)에서 변환되는지 테스트
if (!Enum.TryParse("2", out type) && type == EnumType.Encryption)
{
    throw new InvalidCastException("LdapAuthenticationType값이 올바르지 않습니다. 다시 확인하여 주시기 바랍니다.");
}
 
// ServerBind 변환되는지 테스트
if (!Enum.TryParse("ServerBind", out type) && type == EnumType.ServerBind)
{
    throw new InvalidCastException("LdapAuthenticationType값이 올바르지 않습니다. 다시 확인하여 주시기 바랍니다.");
}
 
// 512(ServerBind)에서 변환되는지 테스트
if (!Enum.TryParse("512", out type) && type == EnumType.ServerBind)
{
    throw new InvalidCastException("LdapAuthenticationType값이 올바르지 않습니다. 다시 확인하여 주시기 바랍니다.");
}

[코드1] 형변환 테스트 코드



 위 코드는 형변환이 제대로 되는지 테스트하는 코드며 원하는 타입으로 변환이 되지 않았을 때는 예외가 발생하도록 하였다.


public enum EnumType
{
    None = 0,
    Secure = 1,
    Encryption = 2,
    SecureSocketsLayer = 2,
    ReadonlyServer = 4,
    Anonymous = 16,
    FastBind = 32,
    Signing = 64,
    Sealing = 128,
    Delegation = 256,
    ServerBind = 512,
}

[코드2] Enum 선언





[Code Snippet]




저작자표시 동일조건

'.Net Framework' 카테고리의 다른 글

[Mono] Monodevelop - Windows, Linux, Mac 응용 프로그램 개발 지원 IDE  (0) 2013.06.05
[C# Code Snippet] CultureInfo로 모든 언어의 DateFormat, TimeFormat 알아내기 - Exchange 2013에서 Set-MailboxRegionalConfiguration  (0) 2013.05.30
Zen Coding Visual Studio Plugin  (0) 2013.05.18
[Unit Test] 테스트 모드를 64비트에서 테스트 - 64bit COM+ 테스트시 주의  (0) 2013.05.14
[JSON] Json.Net - Newtonsoft.Json lowercase keys - 키값을 소문자로 만들기  (0) 2013.05.10

jQuery++


참조 URL
  1. http://jquerypp.com/



 jQuery를 부족한 부분을 도와주는 핼퍼 라이브러리를 소개하고자 한다. jQuery++ 라이브러리는 jQuery UI나 jQuery Tools와 같은 UI를 지원하는 프로젝트는 아니며 대신에 jQuery 1.8이상에서 지원하지 않는 저 수준 유틸리티를 지원한다. AMD 모듈 로딩 방식도 지원하고 있어서 Requirejs에서 동적으로 가져올 수 있다. 부분적으로 선택하여 사용할 수 있도록 아래와 같이 나눠서 웹 페이지에 로딩할 수 있다.


★DOM HELPERS - faster and easier DOM manipulation with:

★EVENTS - listen to special events with:








저작자표시 동일조건

'Javascript' 카테고리의 다른 글

[Javascript Framework] jQuery UI + jQuery Tool UI - jQuery로만 UI를 개발 지원할 때  (0) 2013.05.31
Frontend Development Tools - 웹 개발 툴 소개  (0) 2013.05.30
모바일에서 jQuery 대안 - zeptojs  (0) 2013.05.28
구형 브라우저에서 ECMAScript 5를 지원하도록 해주는 라이브러리 - ES5-shim  (0) 2013.05.26
HTML5 Cross Browser Polyfills - Modernizr wiki  (0) 2013.05.26

zeptojs

모바일에서 jQuery의 대안


참조 URL
  1. http://zeptojs.com
  2. http://zeptojs.com/#platforms - 호환 브라우저


 jQuery 문법에 호환되는 라이브러리로 9.7k의 용량을 가지고 있다. IE를 제외한 대부분의 브라우저에서는 호환이 되고 있으므로 모바일 전용 페이지를 만들때에는 고려해보면 좋을 것이다.


 zeptojs는 jQuery를 대체하기 위해 나온것은 아니며 모바일에 특화된 성격을 같고 있으며 jQuery에 익숙한 사용자들이 쉽게 접근 가능 하도록 하고 있다. 아래 '코드1'은 zeptojs의 예제  코드다. 


[코드1] zeptojs 예제 코드


 selector 문법이 jQuery와 같아 따로 학습 곡선없이 사용할 수 있을 것이다. 아래 '코드2'는 ajax를 사용법이다. 중요하다고 생각되어 한번 더 살펴 본다.


[코드2] zeptojs의 ajax 예제 코드


 일반 웹 페이지가 아닌 제한된 요건(예 모바일 전용 사이트)에서 속도가 중요시 된다면 한번 고려해 볼 수 있는 라이브러리라 할 수 있겠다.





저작자표시 동일조건

'Javascript' 카테고리의 다른 글

Frontend Development Tools - 웹 개발 툴 소개  (0) 2013.05.30
[Javascript Framework] jQuery++ - jQuery helper library  (0) 2013.05.29
구형 브라우저에서 ECMAScript 5를 지원하도록 해주는 라이브러리 - ES5-shim  (0) 2013.05.26
HTML5 Cross Browser Polyfills - Modernizr wiki  (0) 2013.05.26
Javascript Performance Test - JsPerf  (0) 2013.05.25

ES5-shim.js
( 구형 브라우저에서 ECMAScript 5를 지원하도록 해주는 라이브러리 )

참조 URL
  1. https://github.com/kriskowal/es5-shim
  2. http://ko.wikipedia.org/wiki/ECMA스크립트
  3. http://www.ecmascript.org/
  4. http://www.ecma-international.org/publications/standards/Ecma-262.htm
  5. http://kangax.github.io/es5-compat-table/ ECMAScript 5 호환 브라우저 테이블


 어디서 들었는지는 모르지만 현재 나는 ECMAScript 6 버전을 재정하고 있는줄 알고 있어서 왜 지금에서야 ES5가 나오는지 이해를 못하고 있다가 'www.ecmascript.org'에서 확인을 하고 나서야 내가 잘못 생각하고 있다는 것을 알게 되었다. ES5-shim.js는 ES5에서 새로 추가되는 map, filter, every, some, reduce와 같은 메소드를 하위 브라우저에서도 사용할 수 있도록 확장시켜준다. 


 'https://github.com/kriskowal/es5-shim/blob/master/README.md' 파일에 보면 추가된 메소드를 자세하게 확인 할 수 있을 것이다.













저작자표시 동일조건

'Javascript' 카테고리의 다른 글

[Javascript Framework] jQuery++ - jQuery helper library  (0) 2013.05.29
모바일에서 jQuery 대안 - zeptojs  (0) 2013.05.28
HTML5 Cross Browser Polyfills - Modernizr wiki  (0) 2013.05.26
Javascript Performance Test - JsPerf  (0) 2013.05.25
[Javascript Framework] Knockout-Kendo.js 결합  (0) 2013.05.15

HTML5 Cross Browser Polyfills


참조 URL
  1. https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Polyfills
  2. http://html5please.com/
  3. http://remysharp.com/2010/10/08/what-is-a-polyfill/ - Polyfill 에 대한 용어 정리
  4. http://blog.naver.com/PostView.nhn?blogId=bigdata1907&logNo=110153835621 - Polyfill 에 대한 용어 정리


 HTML5에서 추가되는 기능에 대해서 하위 브라우저에서도 사용할 수 있도록 지원해주는 라이브러리를 정리해 놓은 사이트가 있다. Modernizr의 wiki인 'HTML5-Cross-Browser-Polyfills'에서 대안 리스트를 확인 할 수 있다.


 예로 HTML5를 지원하는 브라우저에서는 localStorage를 사용할 수 있는데 IE7에서 대체할 수 있도록 지원되는 라이브러리 리스트를 아래와 같이 알려 주고 있다.


 이 중에 개발 범위나 지원 브라우저를 고려해 선택해서 테스트를 해 보면 될 것이다. 구글링을 하지 않아도 한곳에서 정리가 되어 있으니 고마워 해야 하겠다. 빠른 시간안에 모든 브라우저가 HTML5를 지원하였으면 하는 바램이다.



 

[그림1] WebWorker과 WebSocker의 Polyfill



저작자표시 동일조건

'Javascript' 카테고리의 다른 글

모바일에서 jQuery 대안 - zeptojs  (0) 2013.05.28
구형 브라우저에서 ECMAScript 5를 지원하도록 해주는 라이브러리 - ES5-shim  (0) 2013.05.26
Javascript Performance Test - JsPerf  (0) 2013.05.25
[Javascript Framework] Knockout-Kendo.js 결합  (0) 2013.05.15
[Javascript Framework] Virtual scrolling vs Infinite scrolling  (0) 2013.05.15

Javascript Performance Test


참조 URL
  1. http://jsperf.com/
  2. http://jsperf.com/faq#what
  3. http://jsperf.com/browse
  4. http://jsperf.com/jstest453534 - 2013.05.25일 6시간 전에 만든 테스트 케이스라서 링크가 깨질수도 있음.
  5. http://jsperf.com/dom-vs-innerhtml-based-templating/729


 필자가 개인적으로 생각하기에 Node.js가 나오고 나서부터 자바스크립트 프레임워크의 제2의 전성기가 도래된듯 싶다. Ajax를 통해 브라우저에서 조명을 받았다면 지금은 서버사이드 기술과 Template renderning, MVC Framwork, ... 같은 많은 종류의 구조화 지원 도구가 나오고 있다. 이런 시대상 때문에 비슷한 기능을 지원하는 스크립트들이 많이 나오고 있으나 개인적인 개발자 입장에서는 행복한 고민에 빠지지 않을 수 없다. 똑똑하고 편리하게 사용할 수 있는 자바스크립트 프레임웍이 많다 보니 선택을 하기고 힘들고 일일이 알아보고 비교하기도 힘들다. 


 이 힘들 작업을 인터넷이라는 세계 공동체 안에서 미리 시작한 사이트가 있으니 바로 "JsPerf.com" 이다. 비슷한 자바스크립트 프레임웍을 선별하여 퍼포먼스 테스트를 하면서 결과로 통계 데이터도 보여주고 있다. 내가 테스트한 데이터도 실시간으로 반영이 되고 있다.


 그렇지만 모든 성능 테스트가 마찬가지로 한정된 목표와 제한된 시스템 안에서 진행되기 때문에 결과에 맹신은 금물이다. 각각의 자바스크립트 프레임웍마다 지향하는 철학과 쓰임새가 다르게 추구하고 있기 때문에 절대적인 비교 보다는 참고용과 테스트 방법과 예제에 대한 참고 정도만 하면 될 것이다. 


 이제 간단한 페이지에 대해 설명 하면서 JSPerf가 어떤 것이라는 것을 아래 그림으로 간단하게 설명 하도록 하겠다.

'http://jsperf.com/jstest453534'은 jQuery에서 

  • $('li').first().text();
  • $('li:first').text();

두 문법에 대한 성능 차이를 알아 보는 페이지다. '그림1', '그림2'에서와 같이 준비된 코드가 있고 '그림3'과 같은 화면에서 'Run Tests'를 누르면 테스트가 진행이 된다. 가끔 javascript 로딩 문제로 에러가 발생할 수 있으니 IE나 Chrome을 번갈아 가면서 테스트를 해보고 브라우저 마다 스크립트의 성능 차이도 비교해 보기를 바란다.


[그림1] 준비 코드



[그림2] 렌더링 된 준비 코드




[그림3] 테스트 준비 화면



 '그림4'는 테스트가 된 결과 화면이며 '그림5'는 테스트 결과에 총 집계 차트다. 이 차트를 통해 나름 일반적인 통계치를 얻을 수 있을 것이다.



[그림4] 테스트 결과 화면




[그림5] 결과에 대한 통계 차트



저작자표시 동일조건

'Javascript' 카테고리의 다른 글

구형 브라우저에서 ECMAScript 5를 지원하도록 해주는 라이브러리 - ES5-shim  (0) 2013.05.26
HTML5 Cross Browser Polyfills - Modernizr wiki  (0) 2013.05.26
[Javascript Framework] Knockout-Kendo.js 결합  (0) 2013.05.15
[Javascript Framework] Virtual scrolling vs Infinite scrolling  (0) 2013.05.15
[Javascript Framework] Processingjs - Windows 8, Windows Phone multi-touch interactions  (0) 2013.05.05



XAMPP

( Cross Apache MySql PHP Perl )


참조 URL
  1. http://www.apachefriends.org/en/xampp.html
  2. http://ko.wikipedia.org/wiki/XAMPP
  3. Download
  4. Old Download
  5. http://www.html5korea.co.kr/html5lec/900


 PHP나 Perl을 사용할 수 있는 웹 서버 세팅을 간단하게 할 수 있는 프로그램 모음집이다. Linux, Windows, MAC을 지원하고 있다. PHP에 관심이 있으면 개발용으로 세팅해도 괜찮을 듯 하다.


 현재 XAMPP는 1.8.1까지 나온상태며 설치 버전에는 아래와 같은 프로그램을 포함하고 있다.

  • Apache 2.4.3
  • MySQL 5.5.27
  • PHP 5.4.7
  • phpMyAdmin 3.5.2.2
  • FileZilla FTP Server 0.9.41
  • Tomcat 7.0.30 (with mod_proxy_ajp as connector)
  • Strawberry Perl 5.16.1.1 Portable
  • XAMPP Control Panel 3.1.0 (from hackattack142)




저작자표시 동일조건

'설치 및 소개' 카테고리의 다른 글

웹에서 XML 스트링을 보기 좋게 들여쓰기 해주는 사이트  (2) 2013.07.06
Microsoft Virtual Academy  (0) 2013.06.14
Just Decompile - make Project까지  (0) 2013.05.17
Windows에서 VIM 설치 - VIM on Windows  (0) 2013.05.15
[eBook] Syncfusion에서 배포한 Succinctly series ebook입니다  (0) 2013.05.15
저작자표시 동일조건

'Music' 카테고리의 다른 글

Howl's Moving Castle Theme - Sungha Jung  (0) 2013.08.14
Joe Hisaishi - HANA-BI 【はなび】  (0) 2013.08.14
문이 열리네요 - 유리상자  (0) 2013.05.19
되돌리다 - 이승기  (0) 2012.12.02
전화카드 한장 - 꽃다지  (0) 2012.12.02

+ Recent posts

티스토리툴바