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

출처1 : http://linqjs.codeplex.com/

출처2 : http://blog.aliencube.org/ko/2013/07/23/linq-for-javascript-and-es5-shim/

번외로 아래와 비슷한 다른 것도 있다. 이름은 jslinq로 앞 뒤 이름만 다르다. 사용법은 거의 비슷하다.

https://jslinq.codeplex.com/

https://www.nuget.org/packages/jslinq

JSLINQ_v2.10_SourcePlusExamples.zip

대략 이런 느낌으로 사용할 수 있다.

linq.js_ver2.2.0.2.zip

<script type="text/javascript" src="static/js/jquery-3.2.1.min.js"></script>

<%--<script type="text/javascript" src="static/js/linq.min.js"></script>--%>

<script type="text/javascript" src="static/js/jquery.linq.min.js"></script>

 

var persons = [{ name: 'foo', age: 1 }, { name: 'bar', age: 2 }];

var ret = $.Enumerable.From(persons).Where(function (i) { return i.age > 1; }).ToArray()

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

1 2 3 4

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

또는

1 2 3

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

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

linq.js 소개

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

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

1 2 3

<script src="/path/to/linq.js"></script> <script src="/path/to/linq.jquery.js"></script>

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

1 2 3 4 5 6 7 8 9 10 11 12 13 14

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();

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

1 2 3 4 5 6 7

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

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

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

// $.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 바로 밑에 추가해도 된다.

1 2	<script src="/path/to/es5-shim.min.js"></script>

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