Discover Top Posts Tagged with #es5-shim

크로스 브라우징을 위한 HTML5 Boilerplate + 추가 스크립트

HTML5 Boilerplate (H5BP)는 프론트엔드 개발자들이 웹페이지를 제작하는데 필요한 베스트 프랙티스들을 모아놓은 템플릿이다. 다양한 브라우저 환경, 특히 구버전의 인터넷 익스플로러(IE)에서 HTML5 + CSS3 조합의 풍부한 기능을 이용하기를 원한다면 이 H5BP의 사용은 필수불가결하다 할 수 있다.

하지만, H5BP가 만능은 아닌 것이, 다양한 브라우저를 지원하는 웹페이지를 제작하는데 꼭 필요한 최소한의 장치들만을 포함하고 있기 때문에 개발 환경에 따라 몇가지를 추가해야 하는 것은 분명하다. 따라서, 이 포스트에서는 H5BP에 추가적으로 어떤 것들이 더 필요한지에 대해 논의해 보기로 한다.

HTML 문서 기본 골격 구조

우선, 기본적인 H5BP에서 제안하는 HTML 문서의 골격구조부터 살펴보자. 아래의 내용은 H5BP 리포지토리의 index.html이다. (https://raw.github.com/h5bp/html5-boilerplate/master/index.html)

<!DOCTYPE html>     <html class="no-js">  <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title></title> <meta name="description" content=""> <meta name="viewport" content="width=device-width, initial-scale=1">  <link rel="stylesheet" href="css/normalize.css"> <link rel="stylesheet" href="css/main.css"> <script src="js/vendor/modernizr-2.6.2.min.js"></script> </head> <body>   <p>Hello world! This is HTML5 Boilerplate.</p> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script>window.jQuery || document.write('<script src="js/vendor/jquery-1.10.2.min.js"><\/script>')</script> <script src="js/plugins.js"></script> <script src="js/main.js"></script>  <script> (function(b,o,i,l,e,r){b.GoogleAnalyticsObject=l;b[l]||(b[l]= function(){(b[l].q=b[l].q||[]).push(arguments)});b[l].l=+new Date; e=o.createElement(i);r=o.getElementsByTagName(i)[0]; e.src='//www.google-analytics.com/analytics.js'; r.parentNode.insertBefore(e,r)}(window,document,'script','ga')); ga('create','UA-XXXXX-X');ga('send','pageview'); </script> </body> </html>

짧은 지식으로는 <meta> 태그와 <link> 태그 들은 자체적으로 닫는 태그를 갖고 있어야 하는 것으로 알고 있다. 따라서, 이부분은 <meta ... />, <link ... /> 형태로 바꾸어 주는 것이 좋다.

기본 문자셋

유니코드 문자셋으로 웹페이지를 제공하는 것이 좋다.

IE 호환성 모드 메타 태그

이 내용은 사용자가 IE를 사용해서 페이지를 열었을 때, 해당 IE가 지원할 수 있는 최신의 호환성 모드로 페이지를 렌더링하게끔 하는 것이다. 하지만, 이 메타 태그는 인트라넷 상에서는 해석할 수가 없기 때문에 웹서버에서도 자체적으로 커스텀 헤더 안에 위의 호환성 모드를 뿌려주는 것이 좋다. 이에 덧붙여 만약 사용자가 IE 크롬 익스텐션을 사용할 경우에는 아래와 같이 수정하여 크롬 익스텐션으로 렌더링하는 것을 강제하게끔 할 수도 있다.

파비콘

다양한 사이즈의 파비콘을 준비해 두면 다양한 디바이스에서 파비콘들의 모양이 깨지는 현상을 방지할 수 있다. H5BP의 목적에 맞게끔 다양한 사이즈의 파비콘을 생성해 주는 사이트는 http://iconifier.net과 같은 것들이 있다.

CSS 정규화

웹브라우저들마다 저마다의 방식으로 기본 렌더링 모드를 제공하고 있다. 따라서, 가급적이면 브라우저 고유의 렌더링 모드 대신 이렇게 정규화시킨 CSS를 이용하여 브라우저에 상관없이 동일한 렌더링을 제공하는 것이 좋다. 참고로, 트위터 부트스트랩과 동시에 사용하는 경우에는 이미 동일한 내용의 정규화 CSS가 들어 있기 때문에 필요없다.

Modernizr – HTML5 엘리먼트 폴리필

IE8 이하 버전에서는 HTML5에서 새롭게 제공하는 태그들을 인식할 수 없다. 따라서, 이를 인식시키는 작업이 필요한데, 이것을 이 modernizr가 담당한다. html5shiv.js로도 충분히 가능하지만, modernizr는 이를 포함한 다양한 기능들을 포함하고 있으므로 이것을 사용하는 것이 좋다. 참고로, modernizr는 <head> 태그 안에서 로딩하는 유일한(?) 자바스크립트이다.

이상으로 H5BP에서 제공하는 템플릿에 대해 간략하게 확인해 봤다. 이어서 아래에 언급하는 부분은 H5BP에 부가적으로 추가하면 좋을 내용들이다.

jQuery

자바스크립트 프레임웍의 대표주자. 굳이 없어도 괜찮지만, 어지간하면 로드하는 것이 좋다. IE9 이하 버전을 지원하기 위해서는 jQuery 1.x 버전을 사용한다. 만약 트위터 부트스트랩을 사용한다면, jQuery 로딩은 필수.

Placeholders.js

IE9 이하의 브라우저에서는 HTML5에서 새롭게 제공하는 <input> 태그의 placeholder를 제대로 인식하지 못한다. 이를 위해 Placeholders.js(http://jamesallardice.github.io/Placeholders.js) 라는 폴리필을 로드한다. 이와 더불어 Placeholders.js의 기능을 보완해주는 Placeholders.js Monkey Patch(https://github.com/aliencube/Placeholders.js-Monkey-Patch)도 함께 로드한다. 참고로 Placeholders.js Monkey Patch는 jQeury가 있어야만 실행 가능하다.

EcmaScript 5 지원

IE8에서 사용하는 자바스크립트 엔진은 오래된 것이라서 EcmaScript 5를 지원하지 못한다. EcmaScript 5에서는 Array와 관련해서 향상된 기능을 제공하므로 이를 인식시켜주는 확장 라이브러리가 필요한데, 이 때 es5-shim.js(https://github.com/kriskowal/es5-shim)가 필요하다.

linq.js

만약 .NET의 LINQ에 익숙하다면 linq.js(http://linqjs.codeplex.com)를 설치해 보는 것도 좋다.

이상으로 H5BP 템플릿에 덧붙여 함께 사용하면 좋을만한 자바스크립트 라이브러리들을 나열해 봤다. 이는 물론 최소한으로 필요한 것들이고 프로젝트의 성격마다 더 많은 것들을 추가할 수 있을 것이다.

#HTML5 Boilerplate #H5BP #HTML5 #CSS3 #es5-shim #modernizr #normalize #placeholder #Placeholders.js #Placeholders.js Monkey Patch #EcmaScript 5 #linq.js

닷넷의 LINQ 기능을 자바스크립트로 이용하기

LINQ (Language Integrated Query)는 닷넷 개발시 가장 강력한 기능들 중의 하나이다. LINQ-to-SQL, LINQ-to-XML, LINQ-to-OBJECT 등 거의 모든 상황에서 LINQ를 사용할 수 있다. LINQ는 보통 아래와 같은 형태로 많이 쓰인다.

var products = (from p in context.Products where p.ProductName.Contains("ABC") select p).ToList();

또는

var products = context.Products .SingleOrDefault(p => p.ProductId == 123);

하지만 이것의 가장 큰 단점(?)이라면, 프론트엔드에서 쓰이는 자바스크립트로는 이러한 기능을 사용할 수 없다는 데 있다. 그래서 나타난 것이 바로 linq.js이다.

linq.js 소개

이 자바스크립트 프레임웍을 사용하면, LINQ에서 제공하는 대부분의 기능들을 자바스크립트 상에서도 거의 동일한 문법으로 사용할 수 있다. 또한, 이 linq.js는 jQuery 플러그인도 제공하므로, 더더욱 편리하게 쓸 수 있다.

이 linq.js를 사용하기 위해서는 우선 라이브러리를 불러들여야 한다. 기왕이면 jQuery를 호출한 후에 이 linq.js를 호출하도록 하자.

이렇게 호출해 놓으면 그냥 사용이 가능하다. 대략의 사용 방법은 아래와 같다.

var jsonArray = [ { "user": { "id": 100, "screen_name": "d_linq" }, "text": "to objects" }, { "user": { "id": 130, "screen_name": "c_bill" }, "text": "g" }, { "user": { "id": 155, "screen_name": "b_mskk" }, "text": "kabushiki kaisha" }, { "user": { "id": 301, "screen_name": "a_xbox" }, "text": "halo reach" } ]; // ["b_mskk:kabushiki kaisha", "c_bill:g", "d_linq:to objects"] var queryResult = Enumerable.From(jsonArray) .Where(function (x) { return x.user.id < 200 }) .OrderBy(function (x) { return x.user.screen_name }) .Select(function (x) { return x.user.screen_name + ':' + x.text }) .ToArray();

조금 더 편하게 람다 함수를 이용한다면 아래와 같이 사용할 수도 있다. 위와 아래는 동일한 결과를 가져온다.

// shortcut! string lambda selector var queryResult2 = Enumerable.From(jsonArray) .Where("$.user.id < 200") .OrderBy("$.user.screen_name") .Select("$.user.screen_name + ':' + $.text") .ToArray();

마찬가지로 jQuery 플러그인을 사용한다면 더욱 간결한 표현을 쓸 수 있다.

// $.Enumerable: // 알럿 메시지로 짝수만 보여준다. 총 다섯번. $.Enumerable.Range(1, 10).Where("$%2==0").ForEach("alert($)"); // TojQuery - Enumerable to jQuery // #select1 이라고 하는 ID를 가진 드롭다운리스트에 옵션을 1부터 10까지 추가한다. $.Enumerable.Range(1, 10) .Select(function (i) { return $("<option>").text(i)[0] }) .TojQuery() .appendTo("#select1"); // toEnumerable - jQuery to Enumerable // 1부터 10까지 추가한 값을 모두 더한다. var sum = $("#select1").children() .toEnumerable() .Select("parseInt($.text())") .Sum(); // 55

이렇게 쉽게 사용이 가능하다. 더 많은 레퍼런스는 이곳에서 확인할 수 있다.

IE6 - 8 에서 linq.js 사용하기 – es5-shim

문제는 역시나 IE6, IE7, IE8 에서 발생한다. 그 이유는 기본적인 자바스크립트 처리 엔진의 버전으로, EcmaScript 5 를 지원하지 않는 브라우저이기 때문이다. 즉, 배열 처리가 상당히 제한적이라서 이 linq.js가 제대로 동작하지 않는다.

하지만, 이럴 때 es5-shim 이라는 자바스크립트를 추가해 주면 IE6-8 에서도 이 linq.js를 사용할 수 있다.

만약 html5shiv를 사용한다면, 바로 밑에 이 es5-shim 라이브러리를 추가하도록 하자. 아니라면 modernizr 바로 밑에 추가해도 된다.

단순히 이렇게 추가하는 것 만으로 linq.js의 기능들을 모두 사용할 수 있게 된다.

#linq.js #es5-shim #LINQ #LINQ to Javascript