라스모르의 일상다반사

[ParamQuery] 그리드 시각화를 위한 jQuery Grid Plugin - ParamQuery

라스모르 — Thu, 11 Apr 2013 19:17:40 +0900

웹페이지에 일일히 테이블 코드를 코딩하여 넣기는 싫고 엑셀의 그리드 화면처럼 수치 중심의 데이터를 깔끔하게 보여줄 수 없을까 하던차에 우연히 알게 된 그리드 플러그인이 ParamQuery 다.

앞서 DataTables라고 하는 또 다른 jQuery 그리드 플러그인을 소개한 적이 있었는데 이것은 그것과는 또 다른 화면구성과 인터페이스를 제공하는 그리드 플러그인이다.

2012/12/14 - [웹/모바일 개발/웹개발] - [DataTables] 테이블 출력을 위한 막강한 기능의 jQuery 플러그인, DataTables

역시 jQuery를 이용하여 만들어진 것이며 DataTables와는 다르면서도 또 다른 기능을 제공하므로 용도와 목적에 맞게 활용하면 좋을 듯 싶다.

화면이 흡사 엑셀과 같아 일단 깔끔해보이고 테마를 적용할 수 있어 별도의 테이블 코딩이 필요하지 않다. 여타의 jQuery 플러그인이 그러하듯이 기능을 구현하는데 필요한 데모소스와 API를 제공해준다.

DataTables의 경우 관련 자료도 많고 샘플예제도 많은 편이어서 적용하다 부딪히는 문제는 대부분 구글링으로 해결이 되는 반면 ParamQuery 같은 경우 상대적으로 레퍼런스 자료가 많지 않은 편이어서 나같이 소스가져다 쓰는 사람의 입장에서는 아직 해결하지 못한 문제가 몇가지 있었다. 그래도 여전히 활용가치가 충분한 그리드이다.

하이챠트(HighCharts)와 ParamQuery를 이용해 유지보수 대시보드 화면을 구성해보았다.

나의 경우 로그이력이나 오류내역과 같은 텍스트 정보 중심의 화면 구성에는 DataTables를 사용하였고 유지보수와 같은 SM 수행관련 데이터 즉, M/M나 투입시간 등의 수치화된 데이터로 화면을 구성하는 경우에는 ParamQuery를 적용해보았는데 다행히 각각의 쓰임새와 용도에 비교적 잘 맞은것 같다.

DataTables와 마찬가지로 Ajax 로 가져온 JSON 데이터를 파싱하여 그리드로 구현하였다. 테이블과 각각의 개별 컬럼을 모두 리사이징할 수 있고 DB와 연동하여 CRUD를 적용할 수도 있으므로 잘만 활용하면 아주 쓸모있는 웹어플리케이션을 개발할 수도 있겠다.

아직 다 파악을 못해서 그럴 수 있겠지만 아직 테이블의 사이즈를 '%'로 지정하는 옵션을 보지 못했다. 보통 화면구성을 '%'로 분할하여 구성하는데 ParamQuery의 옵션에는 테이블 크기를 픽셀단위로만 지정하는 것외 다른 옵션은 보이지 않는다.

어쨋든 나와 같이 유지보수 관련 데이터를 제한된 화면안에서 효율적이고 효과적으로 제시하고자 할 경우 앞서 소개한 하이챠트나 DataTables, ParamQuery와 같은 그리드는 충분히 활용가치가 있다고 판단된다.

'웹/모바일 개발 > 웹개발' 카테고리의 다른 글

[ParamQuery] 그리드 시각화를 위한 jQuery Grid Plugin - ParamQuery (0)	2013/04/11
[HighCharts JS] 자바스크립트만으로 다양한 챠트를 그려낼 수 있는 챠트 라이브러리 (2)	2013/01/15
[구글챠트] 솔루션없이도 클라이언트에서 구현하는 구글 챠트(Google Chart) (0)	2012/12/28
[DataTables] 테이블 출력을 위한 막강한 기능의 jQuery 플러그인, DataTables (1)	2012/12/14
[PHP] 윈도우 서버에 PHP 5.4 설치하기 (0)	2012/11/05
[프로그래밍 도서] 뇌를 자극하는 ASP.NET (0)	2012/10/24

구글 애드센스의 우수파트너 블로그에 선정되었다는군요.

라스모르 — Wed, 13 Feb 2013 13:38:25 +0900

구글 애드센스로부터 한 통의 메일을 받았습니다. 제 블로그가 애드센스의 우수파트너로 선정되었다는 구글의 메일이었습니다.

블로그라고 해봐야 방문자가 특출나게 많은 사이트도 아니고 최근에는 바쁘다보니 포스팅도 규칙적이지 못했는데 어찌되었든 우수파트너로 선정이 되었다고하니 블로그를 개설하고 포스팅을 하느라 보낸 시간이 의미없진 않았구나 하는 생각에 기분이 나쁘지 않습니다.

최근에는 앞서의 포스팅을 통해 소개하였던 몇 가지 꽤 괜찮은 챠트와 jQuery 플러그인 등을 이용하여 각종 통계 데이터를 어떻게 하면 효과적으로 보여줄 수 있을지에 대한 고민을 하고 그것을 구현하느라 나름 바쁜 시간을 보내고 있었습니다. 어쨋든...

별 생각없이 애드센스를 달고 아직 한 번도 수익을 내보지는 못했지만 언젠가는 그런날이 오지 않을까 싶습니다. 그것이 목표는 아니어도 의미있는 또 하나의 이정표가 되지 않을까 싶네요.

저 큰 복주머니에 있는 재물에 대한 소망은 물론, 무엇보다 올 한해는 탈없이 또 큰 걱정없이 건강하게 지낼 수 있기를 소원해봅니다. 여러분들의 소원은 어떠신가요~?

'IT 이런저런 이야기' 카테고리의 다른 글

구글 애드센스의 우수파트너 블로그에 선정되었다는군요. (4)	2013/02/13
Mobile megatrends 2012 (모바일 트렌드) (1)	2012/05/14
내 주민번호로 네이버에 가입된 아이디가 있다? 도용아이디 찾아서 제거하기! (0)	2011/09/09
국내 주요 싸이트에 대한 비밀번호를 변경해 보았습니다. (6)	2011/08/03

[HighCharts JS] 자바스크립트만으로 다양한 챠트를 그려낼 수 있는 챠트 라이브러리

라스모르 — Tue, 15 Jan 2013 00:23:14 +0900

2012/12/28 - [웹/모바일 개발/웹개발] - [구글챠트] 솔루션없이도 클라이언트에서 구현하는 구글 챠트(Google Chart)

이전 포스팅을 통해 구글 챠트에 대해 소개했는데 오늘 설명할 Highcharts JS 역시 구글 챠트와 같이 다양한 기능의 챠트를 구현할 수 있는 라이브러리다.

비상업적 용도로는 제약없이 사용할 수 있지만 상업적 용도라면 라이센스를 구입하면 된다. 라이센스 비용도 서버 기반의 솔루션에 비하면 비교할 수 없을만큼 싸기 때문에 훨씬 좋은 대안이 될 수 있겠다싶다.

순수 자바스크립트만으로 만들어진 Highcharts 챠트 라이브러리

이전 포스팅에서 얘기한 것처럼 관리해야 하는 웹사이트의 uptime 모니터링을 위해 무료 웹서비스(http://www.uptimerobot.com/)의 기능을 연동하였는데 그 사이트에서 보여주는 챠트가 맘에 들어 확인해보니 바로 이 highcharts 였다.

이 화면에서 각 사이트의 정상작동 여부를 보여주는데 사용한 챠트가 Highcharts 다.

highcharts는 순수 자바스크립트만으로 구현된 라이브러리이므로 이 라이브러리를 이용해 챠트를 그리고자 할 때 서버에 무언가 설치할 필요가 없다. 클라이언트에는 단 몇 개의 자바스크립트만이 필요할 뿐이다.

해당 사이트에서 다운로드를 받을 수 있고 여러 유형의 챠트에 대한 데모와 해당 데모의 소스를 직접 구동하여 확인해볼 수 도 있다. 그래서 전혀 지식이 없던 상태에서 이 챠트를 이용하는데 까지 일주일의 시간이면 충분했다. 무엇보다 jsFiddle 서비스를 이용하여 브라우저 상에서 직접 코딩하고 그 결과를 확인해볼 수 있어 챠트의 기능을 익히는데 많은 도움이 되었다.

보통 챠트를 그리기 위한 데이터는 통계 데이터이거나 시간에 따라 집계되는 동적 데이터이기 때문에 ajax 연동을 통해 데이터를 끌어와 챠트를 그리는 경우가 많다. 내 경우에는 관리대상이 되는 약 50 여개 이상의 각 웹사이트에서 방문자수를 집계하여 일별, 시간별 방문자를 확인할 필요가 있었다. 또한 사이트별로 챠트를 보는 것도 의미가 있지만 관리대상이 되는 사이트 중 어떤 사이트들이 트래픽 점유율이 많은 사이트인지 한눈에 파악할 수 있도록 상위 10%의 사이트에 대해서만 한 챠트에서 비교하여 보여주고자 할 때 막강한 기능을 제공해준다. 가령 여러 사이트의 방문자수를 한 챠트에 그려놓고 그 중 내가 보고 싶은 사이트만 필터링 하여 볼 수도 있다.

사이트의 오류로그를 집계하여 가장 많은 오류가 발생하는 상위 10%의 사이트에 대한 비교분석결과에 활용

하이챠트 라이브러리가 제공하는 챠트는 거의 모든 브라우저에서 볼 수 있다. 심지어 IE 6에서도 볼 수 있으며 아이폰이나 아이패드와 같은 사파리와 안드로이드 모바일 기기에서도 볼 수 있다.

물론 단점도 있다. 서버에서 처리하는 것이 아니라 클라이언트에서만 실행하고 구현되는 것이기때문에 데이터가 많거나 그려야 할 챠트가 많을 경우 브라우저가 웹페이지를 띄우는 속도가 느려지는 것을 느낄 수 있다. 나의 경우 약 60개가 넘는 사이트의 에러로그를 한 챠트에 그려봤는데 적정수준으로 그려야 할 챠트의 개수 및 데이터를 제한할 필요를 느꼈다.

40개가 넘는 챠트를 한 화면에 그려보았다. 생각보다 나쁘지는 않은 반응속도를 보여주지만 챠트의 개수가 많아질수록 느려지는 것은 어쩔 수 없다.

하지만 내게 필요한 기능을 구현하기에는 하이챠트가 제공하는 장점이 이러한 단점을 충분히 커버하고 남는다. 순수 자바스크립트만으로 구현되어 서버이전이나 교체에 따른 이슈가 없고 모든 브라우저를 지원하기때문에 브라우저 문제로 골머리를 썩힐 필요도 없다. 무엇보다 보기에도 근사한 챠트를 그리는데 많은 지식을 필요로 하지 않기 때문에 누구나 쉽게 다양한 기능의 챠트를 그려낼 수 있다는 점이 이 라이브러리의 가장 큰 장점이 아닐까 싶다.

이전에 포스팅한 또다른 jQuery 플러그인인 datatables과 연계하여 구현하면 깔끔한 화면을 구성할 수도 있겠다.

2012/12/14 - [웹/모바일 개발/웹개발] - [DataTables] 테이블 출력을 위한 막강한 기능의 jQuery 플러그인, DataTables

또 다른 jQuery plugin인 datatables과 연계하여 오류 집계 챠트와 해당 일자별 오류발생내역을 함께 확인할 수 있도록 해보았다.

구글 챠트도 있지만 서버 솔루션을 대신할 수 있는 다른 챠트를 찾아보고 있다면 Highcharts가 그에 대한 충분한 대안이 될 수 있지 않을까 싶다. 추천~!

'웹/모바일 개발 > 웹개발' 카테고리의 다른 글

[ParamQuery] 그리드 시각화를 위한 jQuery Grid Plugin - ParamQuery (0)	2013/04/11
[HighCharts JS] 자바스크립트만으로 다양한 챠트를 그려낼 수 있는 챠트 라이브러리 (2)	2013/01/15
[구글챠트] 솔루션없이도 클라이언트에서 구현하는 구글 챠트(Google Chart) (0)	2012/12/28
[DataTables] 테이블 출력을 위한 막강한 기능의 jQuery 플러그인, DataTables (1)	2012/12/14
[PHP] 윈도우 서버에 PHP 5.4 설치하기 (0)	2012/11/05
[프로그래밍 도서] 뇌를 자극하는 ASP.NET (0)	2012/10/24

[구글챠트] 솔루션없이도 클라이언트에서 구현하는 구글 챠트(Google Chart)

라스모르 — Fri, 28 Dec 2012 00:22:08 +0900

asp나 asp.net과 같은 서버쪽 웹개발이 주 업무다 보니 이쪽에서 챠트를 구현할 때는 ChartFX와 같은 외부 솔루션을 사용하거나 최근에는 MS Chart를 사용해왔다. 그마저도 부담스러운 솔루션 비용때문에 라이센스가 있는 서버에만 설치해놓고 다른 서버에서는 챠트 페이지를 링크걸어 사용하다보니 불편한 점이 한두가지가 아니다. 머 어쩃든... 최근에는 구글에서도 다양한 챠트를 구현할 수 있도록 라이브러리를 제공하고 있다. 기실 상당한 비용을 내고 산 솔루션을 사용한다고 해도 기껏 바 챠트나 단순한 라인 챠트를 그리는 것이 대부분인데 그러하다면 굳이 제약이 많은 외부 솔루션보다 구글 챠트를 이용하는 것이 훨씬 비용대비 효과나 고객 만족도는 더 높지 않을까 싶다.

구글 개발자 페이지에서 여러 모양의 다양한 기능을 가진 챠트를 볼 수 있다. 일단 본인의 경우 관리하고 있는 사이트가 얼마나 지속적으로 정상적인 서비스를 제공하고 있는지를 수치화된 데이터와 챠트를 통해 시각화하고 싶은 욕구가 있었다. 일반적으로 웹사이트가 다운되지 않고 정상적으로 서비스를 제공하는 것에 대한 수치적 판단은 Uptime 데이터를 통해 할 수 있다. (Uptime이 무언지 알고 싶다면 'What is Uptime?'를 참고하면 도움이 될 것이다.) 이 데이터는 자신이 관리하는 웹사이트의 Uptime 결과 데이터를 제공하는 외부의 무료 웹서비스(http://www.uptimerobot.com/)를 통해 제공받고 있는데 최근 일주일이나 한달간 또는 서비스 개시부터 지금까지의 누적 Uptime 데이터를 % 형식으로 제공 받을수 있다. 만일 이 값이 100%라면 쉽게 말해 서비스가 개시후 지금까지 한번도 중단되지 않고 정상적으로 서비스되고 있다는 뜻으로 해석할 수 있다.

등록한 웹사이트의 Uptime 모니터링 결과 데이터를 무상으로 제공하는 사이트

본인은 이렇게 얻은 데이터를 가지고 이 수치가 기준 수치 이하일 경우 빨간색으로 된 시각적 경고 표시를 보여주고 싶었는데 그것을 만족시켜줄 수 있는 가장 적합한 챠트가 바로 Gauge 챠트였다.

구글이 제공하는 게이지 챠트

웹서비스가 얼마만큼 정상적으로 유지되고 있는지는 Uptime 수치 값을 통해 판단할 수 있지만 관련 지식이 부족한 관리자나 상위 조직장에게는 단순히 이러한 수치만으로는 의미있는 메시지 전달이 되지 못하기 때문에 이 수치가 현재 얼마이며 그 값이 통상적으로 경계해야 할 수준의 상태인건지 아니면 정상수준의 서비스를 제공하고 있는 상태인 것인지를 바로 알 수 있게 하는데는 게이지만한 시각적 의미전달 수단이 없을 것이라는 생각에서였다.

어쩃든...

구글이 제공한 예제를 보면 구현하는 것은 꽤 수월한 편이다. 많은 양의 코드가 필요하지 않다. 단순히 구글이 제공하는 자바스크립트만으로 클라이언트상에서 스크립트와 HTML 코드만으로 구현하는 것이기때문에 미리 정해진 데이터를 가지고 게이지 챠트를 그리는 것이라면 아주 쉽게 구현이 가능하다.

<html>
  <head>
    <script type='text/javascript' src='https://www.google.com/jsapi'></script>
    <script type='text/javascript'>
      google.load('visualization', '1', {packages:['gauge']});
      google.setOnLoadCallback(drawChart);
      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Label', 'Value'],
          ['Memory', 80],
          ['CPU', 55],
          ['Network', 68]
        ]);

        var options = {
          width: 400, height: 120,
          redFrom: 90, redTo: 100,
          yellowFrom:75, yellowTo: 90,
          minorTicks: 5
        };

        var chart = new google.visualization.Gauge(document.getElementById('chart_div'));
        chart.draw(data, options);
      }
    </script>
  </head>
  <body>
    <div id='chart_div'></div>
  </body>
</html>

하지만 본인의 경우처럼 사이트별로 다른 데이터를 받아와 그 수치에 맞는 챠트를 보여주려한다면 ajax를 이용하여 실시간 챠트를 그려야 한다. 하지만 위의 코드를 통해 구글의 게이지 챠트가 어떻게 구현되는지 파악할 수 있다면 ajax를 이용한 실시간 챠트도 어렵지 않게 구현할 수 있다.

www.uptimerobot.com 사이트와 연동하여 uptime 값을 게이지 챠트로 구현한 화면

구글 게이지 챠트를 위해서는 기본적으로 3~5행의 자바스크립트 코드 선언부가 반드시 필요하다. 그리고 HTML 부분에서는 챠트를 그릴 대상이 되는 div 태그를 선언해두어야 한다. 이렇게 선언된 div 태그에 구글의 google.visualization.Gauge 클래스가 가진 draw 메소드를 호출하면 해당 div 영역에 게이지 챠트가 그려진다.

'웹/모바일 개발 > 웹개발' 카테고리의 다른 글

[ParamQuery] 그리드 시각화를 위한 jQuery Grid Plugin - ParamQuery (0)	2013/04/11
[HighCharts JS] 자바스크립트만으로 다양한 챠트를 그려낼 수 있는 챠트 라이브러리 (2)	2013/01/15
[구글챠트] 솔루션없이도 클라이언트에서 구현하는 구글 챠트(Google Chart) (0)	2012/12/28
[DataTables] 테이블 출력을 위한 막강한 기능의 jQuery 플러그인, DataTables (1)	2012/12/14
[PHP] 윈도우 서버에 PHP 5.4 설치하기 (0)	2012/11/05
[프로그래밍 도서] 뇌를 자극하는 ASP.NET (0)	2012/10/24

[DataTables] 테이블 출력을 위한 막강한 기능의 jQuery 플러그인, DataTables

라스모르 — Fri, 14 Dec 2012 02:15:02 +0900

업무를 관리하기 위한 관리자 기능을 갖춘 내부 관리 페이지를 개발해야 할 경우, 그것도 대고객 사이트가 아닌 경우 디자이너 인력의 공식적인 지원을 받을 수 없는 경우가 많다. 같은 고객을 상대하는 같은 조직이라해도 돈을 대는 클라이언트를 위해 M/M이 책정되어 있는 인력을 쉽게 제공받을 수는 없는 더러운(!) 현실에 부딪히게 된다. 이럴 경우 어쩔 수 없이 개발자가 직접 HTML 테이블 코드를 작성해야 하는데 아무래도 그 결과를 보면 아무리 겉보기보다 그 내용이 중요하다지만 왠지 허전하고 허접해보이기까지 하는 건(?) 어쩔 수 없다. 고생해서 만들었는데 고생한 티(?)가 하나도 나지 않고 왠지 대충 만든 듯한 느낌이 든다면 정말 의욕이 나지 않는다. 해서 디자이너의 도움을 받지 않고도 깔끔한 레이아웃과 뷰를 가진 테이블을 쉽게 붙일 수 있는 방법이 없을까 고민하다가 우연히 다른 블로거가 추천한 포스팅을 통해 DataTables라는 jQuery 플러그인의 존재를 알게 되었다.

DataTables (http://www.datatables.net/)는 jQuery 플러그인으로 직접 테이블을 디자인하지 않고도 깔끔하면서도 이쁘고 다양한 기능을 가진 테이블을 손쉽게 만들어준다.

단 몇 줄의 코딩만으로 이런 테이블을 그릴 수 있다.

디자이너를 통해 이쁘게 포장된 HTML 페이지를 제공받을 수 없었던 입장에서는 최소한의 노력으로 이쁜 룩을 가진 테이블을 핸들링할 수 있으니 나에게는 관심을 가질만 했다. 물론 원하는 양식과 기능대로 이 플러그인을 사용하기 위해서는 그만큼 그 기능과 사용법을 파악하는데 적지 않은 시간이 들지만 추후 많은 다른 페이지에서도 재활용이 가능한만큼 비용대비 기대효과는 더 낫다는 판단이 들었다.

DataTables의 존재를 알고 그것을 이용해 내가 원하는 기능을 구현하는데 약 일주일간의 시간이 걸렸다. 비록 한 페이지 짜리지만 순수 개발만을 위해 정직 개발자에게 주어지는 시간은 사실 많지 않기에... (변명인가)

현재 배치전용서버에서 약 300개 정도의 예약작업을 관리하고 있는데 매일 오전에 매일을 발송하여 그날에 실행된 예약작업의 실행결과를 리포팅하도록 하고 있었지만 메일을 발송한 시점 이후에 대해서는 실제로 DB 로그를 살펴보지 않는 한 알 수 없었기 때문에 상위 관리자들이 전체 예약작업의 실행결과를 보고자 하는 니즈가 있을 것으로 예상했다.

결국 DB에 남긴 작업로그를 소스로 하여 일별로 해당 날짜의 로그정보를 보기 위한 페이지가 필요했고 여기에 다양한 필터링 기능과 즉각적으로 원하는 데이터를 보여줄 수 있는 기능을 갖춘 테이블이 필요했다. 필터링과 페이징을 위해 별도의 서버 호출을 할 필요가 없어야 하고 가져와 데이터로 클라이언트에서 사용자가 보고 싶어하는 데이터에 빠르게 접근할 수 있는 기능을 제공해야 했다.

물론 DataTables 를 전체 다 파악한 것은 아니다. 관리역할을 맡은 나와 같은 사람에게 그럴만한 시간을 주지 않기 때문에 필요한 기능을 구현할 수 있는 정도의 시간만 투입했는데 그 시간이 대략 일주일이었던것 같다.

그래서 현재는 메일을 통해 별도의 작업로그용 페이지를 볼 수 있도록 하였고 여기서 원하는 날짜를 선택하여 해당 날짜에 실행된 전체 예약작업 결과를 볼 수 있도록 하였다.

이 페이지 개발에는 DataTables 플러그인과 날짜 선택을 위한 DatePicker 플러그인을 사용하였다. 둘다 jQuery 플러그인이다. 관련 js 파일과 css 파일만 다운받으면 쉽게 구현할 수 있는 것들이다.

DataTables는 테이블에 출력할 데이터로 ajax 소스를 지원하기 때문에 jQuery의 ajax 메소드 정도가 사용되었다. 그리고 이를 위해 DB에서 지정한 날짜의 작업로그를 가져와 JSON 타입으로 제공하는 별도의 웹서비스를 하나 만들었다. 물론 닷넷에서는 XML기반의 SOAP 웹서비스를 통해 쉽게 구현이 가능하지만 JSON 타입의 데이터를 주고 받는 웹서비스를 구현해보고 싶었다. 그리고 이를 위해 Json.NET이라고 하는 코드플렉스에 등록되어 있는 닷넷용 JSON 프레임웍을 사용하였다.

닷넷에서 JSON 타입의 데이터를 다룰 수 있도록 해주는 Json.NET 프레임웍

이것이 공유의 힘인가... 필요한 것은 이미 다 어디에선가 제공되고 있어서 나같이 무늬만 개발자도 그게 어디에 있는지만 검색해보면 비교적 수월하게 일을 시작할 수 있었다.

웹서비스의 크로스도메인 문제는 ajax의 jsonp 옵션으로 해결이 가능하다.

DataTables 사이트에서는 이 테이블을 활용할 수 있는 여러가지 예제와 매뉴얼을 제공하고 있다. 대부분 예제코드를 통해 원하는 기능의 테이블을 출력할 수 있다. 다만 정말 자기 입맛에 맞는 레이아웃이나 룩을 가진 테이블을 렌더링하고 싶다면 좀 더 깊은 공부가 필요할 듯 싶다. api도 많고 옵션도 엄청 많아 예제와 다르게 구성한다면 쉽지 않는 부분이 있긴 하다.

대부분의 활용가능한 예제가 이미 코드와 함께 제공된다.

하지만 내부 관리자를 위한 관리용 사이트에서 데이터 중심의 테이블을 그려야 한다면 딱 좋은 선택이 되지 않을까 싶다.

'웹/모바일 개발 > 웹개발' 카테고리의 다른 글

[HighCharts JS] 자바스크립트만으로 다양한 챠트를 그려낼 수 있는 챠트 라이브러리 (2)	2013/01/15
[구글챠트] 솔루션없이도 클라이언트에서 구현하는 구글 챠트(Google Chart) (0)	2012/12/28
[DataTables] 테이블 출력을 위한 막강한 기능의 jQuery 플러그인, DataTables (1)	2012/12/14
[PHP] 윈도우 서버에 PHP 5.4 설치하기 (0)	2012/11/05
[프로그래밍 도서] 뇌를 자극하는 ASP.NET (0)	2012/10/24
[크롬 개발자도구] 티스토리 블로그가 늦게떠서 확인해보니 믹시 플러그인이 범인~ (2)	2012/10/18

[PHP] 윈도우 서버에 PHP 5.4 설치하기

라스모르 — Mon, 05 Nov 2012 10:39:44 +0900

PHP를 마지막으로 설치한 지가 언제인지 기억나지 않는다. 마지막 PHP 책을 출간한 때가 2006년인것 같은데 그러고보면 적어도 5,6년은 훌쩍 지난듯 하다. 그때는 막 5.0이 나오고 PHP에도 OOP가 소개되었던 시절이었는데 지금보니 5.4 버전이 나와있다. 해마다 먼가 1.0씩 올라가는 MS의 버전변화에 비교하면 어찌보면 큰 변화가 없었네 하는 생각도 드는데 실제로 얼만큼 변했을지 알 수가 없다. 어쨋든 node.js 관련 데모를 보려고 보니 생각보다 PHP와 함께 구현된 코드가 많아 옛 추억(?)도 떠올릴겸 겸사겸사 서버에 설치해봤다.

PHP 윈도우용 버전 다운로드부터.

업무가 끝나고 퇴근하기 전에 좀 쉽게 가려고(!) 네이버에서 검색해봤다. 윈도우서버에서 PHP 설치하는 방법에 대해 스크린샷으로 친절하게 설명해놓은 사이트가 있지 않을까하고... 근데 생각보다 나에게 도움이 될 만한 블로그가 없다. 하긴.. 5,6년만에 설치하는 PHP를 (그것도 윈도우버전을) 10분안에 끝낼 수 있는 방법을 친절하게 설명해줄 만한 사이트를 기대하는것도 무리이긴 하다.

그래서 마음을 접고 정석대로... 우선 PHP 사이트(http://www.php.net)에서 윈도우 버전을 다운로드받았다.

5.4 버전과 5.3 버전이 나란이 있는데 왜 그런지는 모르겠다. 머 보통 홀수버전은 개발버전, 짝수버전은 안정버전 머 그런 전통적인 규칙같은게 있긴한데 관련내용을 찾아보니 그런건 아닌거 같고 그냥 5.3과 5.4 버전에서 큰 차이가 있어서 기존 5.3 버전으로 개발한 사이트를 배려(backward compatibility 라고하던가...)하기 위해 그런듯.

암튼 처음 설치하는 나에게는 큰 차이는 없어서 5.4 버전을 다운로드. 자동 인스톨러 버전을 다운받은게 아니라서 설치라고 해봐야 따로 없다. 그냥 압축풀어서 "C:\php" 폴더에 복사하면 끝.

그리고 install.txt를 열었다. 사실 그냥 이걸 보는게 가장 빠른 방법이다.

PHP 환경설정 : IIS 6.0 환경하에서는 ISAPI 보다는 FastCGI 방식으로 설치를 권장

일단 윈도우 2003 서버다.

기억을 더듬어보면 예전에 윈도우 서버에 PHP를 세팅했을 때에는 보통 CGI가 아닌 ISAPI 방식으로 설치하고 IIS에서 필터역할을 하는 DLL을 ISAPI 필터로 등록해주면 되었다. 그런데 이번 5.4 버전을 보니 이 ISAPI 모듈 파일이 없다.

* sapi/php5isapi.dll - ISAPI Module for ISAPI compliant web servers

like IIS 5.0 or newer. However the FCGI SAPI is recommended with

IIS

분명 있긴 한듯 한데 어쨋든 이런 코멘트가 있는걸 보았다.

The FastCGI is significantly

more stable and can be faster than the ISAPI module with IIS.

IIS에서는 ISAPI 보다는 FastCGI가 더 빠르고 안정적이라 권장한다고 하니 이 방식으로 설치진행하기로 했다. 그리고 설치하려는 서버가 IIS 6.0이 설치된 2003 서버라 PHP에서 제공하는 IIS 6.0용 가이드 문서를 참조하기로 했다.

http://kr1.php.net/manual/en/install.windows.iis6.php

우선 PHP 환경설정을 해야 하니 php.ini 파일을 만든다. 다운로드 파일에서 제공하는 php.ini-development 파일과 php.ini-production 파일 중 하나를 php.ini로 쓰면 된다.

IIS 6.0 기반의 윈도우서버에서 PHP를 FastCGI 방식으로 구동하기 위해서는 php.ini에 필수적으로 위의 값을 세팅해야 한다고 한다. 인자의 자세한 내용은 install.txt 를 참조.

그리고 나서 cscript 명령을 준다. 이건 윈도우 서버가 PHP 스크립트에 요청(보통 확장자 .php에 대한 HTTP Request)이 들어올 경우 Fast CGI 방식으로 이 스크립트를 처리하도록 하기 위한 것이다.

도스창을 열어 위와 같이 그대로 입력해보면 아래와 같이 php.ini 파일에 무언가 저장했다는 것을 볼 수 있다.

이 명령은 .php 확장자를 가진 스크립트에 대한 요청이 들어올 경우 IIS가 이것을 FastCGI 방식으로 처리할 수 있도록 매핑하는 역할을 한다.

나머지 install.txt 파일을 보면 몇가지 추가적인 내용들이 있는데 일단 부가적인거라 패스... 웹서버를 띄우고 index.php 파일을 하나 만들어봤다. (기특하게도 phpinfo() 함수 하나가 기억났다! )

<?
phpinfo();
?>

브라우저로 띄워보니 정상적으로 세팅이 된 듯... 일단 이렇게 기억을 더듬어가며 install.txt 파일과 감(!)으로 설치 및 세팅완료.

'웹/모바일 개발 > 웹개발' 카테고리의 다른 글

[구글챠트] 솔루션없이도 클라이언트에서 구현하는 구글 챠트(Google Chart) (0)	2012/12/28
[DataTables] 테이블 출력을 위한 막강한 기능의 jQuery 플러그인, DataTables (1)	2012/12/14
[PHP] 윈도우 서버에 PHP 5.4 설치하기 (0)	2012/11/05
[프로그래밍 도서] 뇌를 자극하는 ASP.NET (0)	2012/10/24
[크롬 개발자도구] 티스토리 블로그가 늦게떠서 확인해보니 믹시 플러그인이 범인~ (2)	2012/10/18
[.NET] TextFieldParser 클래스를 이용하여 CSV 파일 파싱하기 (0)	2012/10/17

[KT] 올레사이트에서 3G 데이터 사용내역 조회기능이 사라졌네요. 사용내역 조회하려면 ?

라스모르 — Wed, 31 Oct 2012 13:02:23 +0900

지난번 포스팅에서 자신의 스마트폰 3G 데이터가 어디에 사용되었는지 그 세부내역을 뽑을 수 있다고 하였는데 그 포스팅 이후 2달도 채 안되어 해당 메뉴가 올레사이트에서 쏘옥 사라졌습니다. 대신 세부내역을 뽑으려면 신청서를 작성해서 직접 올레플라자로 가야만 한다고 합니다. (왜 이러는 걸까요;;;)

2012/09/07 - [아이폰/아이패드 활용] - [KT] 내 스마트폰에서 사용한 3G 데이터 사용내역 조회하기

KT 올레사이트에서 나의 3G 데이터 사용내역을 보려면 모바일 이용 신청서를 작성해야.

KT에 문의해보니 예전 포스팅에서 볼 수 있었던 데이터 사용내역 보기 메뉴는 사라졌습니다.

대신 통화내역 메뉴에서 모바일 통화내역을 조회할 수 있다고 합니다. 하지만 그러려면 먼저 모바일 이용신청서라는 것을 작성하여 제출해야만 합니다. 즉, 예전에는 SMS 인증만 받고 자기의 데이터 사용내역을 뽑아볼 수 있었지만 이제는 신청서를 가지고 직접 고객센터를 찾아가 접수해야만 이후 사이트에서 해당 내역을 뽑을 수 있도록 절차가 변경되었습니다.

아무래도 개인정보와 관련되어 있어 간단히 SMS만으로 인증을 받는 절차만으로는 부족하여 동의서를 직접 받는 방식으로 절차를 강화한 것으로 보입니다.

온라인으로 접수하는 것도 아니고 직접 센터를 가야 하는 점이 불편하네요. 어쩃든 개인데이터 사용내역이 필요하다면 이런 절차를 받아 내역을 뽑을 수 있습니다. 참고하세요.

'아이폰/아이패드 활용' 카테고리의 다른 글

[KT] 올레사이트에서 3G 데이터 사용내역 조회기능이 사라졌네요. 사용내역 조회하려면 ? (1)	2012/10/31
[KT] 내 스마트폰에서 사용한 3G 데이터 사용내역 조회하기 (4)	2012/09/07
[Newsify] MobileRSS를 대체할 구글 리더기, Newsify (0)	2012/06/08
Pocket (Formerly Read It Later) : 컨텐츠에 태그(tag)를 달아 관리하기 (0)	2012/04/26
Pocket (Formerly Read It Later) : 구글리더(Google Reader)에서 Pocket으로 보내기 (0)	2012/04/25
Pocket (Formerly Read It Later) : 당장 시간이 없을 때 나중에 읽을 컨텐츠를 관리하는 법 (5)	2012/04/19

[프로그래밍 도서] 뇌를 자극하는 ASP.NET

라스모르 — Wed, 24 Oct 2012 13:19:46 +0900

뇌를 자극하는 ASP.NET 2.0 프로그래밍: 국내도서>컴퓨터/인터넷; 저자 : 이시환; 출판 : 한빛미디어 2006.06.26

상세보기

- 이 책을 보게 된 이유

1년 반 동안의 프로젝트 파견으로 개발관리와 DB 중심의 업무를 하다가 다시 웹개발로 돌아온지 이제 몇 달이 된 것 같습니다. 그 사이 이쪽의 웹개발은 웹과 모바일을 굳이 경계지을 필요나 의미가 없어질만큼 모바일로 뻗어나갔고 서버사이드(Server-side) 중심의 전통적(!) 웹개발이 사용자 경험을 중시하게 되는 모바일 환경을 맞아 프론트 웹개발이 새로이 조명받고 있는 것 같습니다.

그래서 요즘 Node.js 와 같은 프론트 웹개발에 매우 관심이 많습니다. Node.js와 jQuery 책도 몇 권보고 따라하면서 '아 이게 이런거구나'하는 감을 가지고 있는 정도지요. 매우 아쉽게도 그런 바램과 달리 제가 있는 위치에서 회사가 원하는 역할은 코딩이 주된 일이 아니기에 그쪽분야에 도전할만한 프로젝트를 해보고 싶어도 환경이나 여건이 쉽게 허락하지 않습니다.

그래도... 어쨋든 개발자로 시작을 했고 더 나이가 들어도 계속 개발을 하고 싶은 마음은 있으나 제 위치는 그런 바램을 쉽게 허락하지 않는지라 이번에도 서버사이드쪽 ASP.NET에 대한 감을 잃지 않기위해 집어든 책이 바로 이 책입니다. 이책을 고른 이유는 없습니다. 옆자리 팀원의 책장에 ASP.NET 관련 책이 보이길래 집어들었습니다.

- 기존 닷넷 1.1 경험이 있는 개발자에게는 2.0에 대한 개념을 파악할 수 있는 참고서

비주얼 스투디오 2003 기반의 ASP.NET 1.1이었을 때도 사실 처음부터 새로 만들어본 경험은 없습니다. 유지보수 중심의 개발업무다보니 기존 코드의 문제점을 파악하여 수정하는 정도의 개발을 했었습니다. 사실 개발이라기 보다는 개발관리에 가까웠죠. 어쨋든 지금은 2.0 이상이 기본이라 닷넷 2.0은 어떠한가 궁금해서 살펴보았습니다.

1.1 경험이 있다면 이 책은 2.0에 대한 이해를 돕고 빠른 시간내 파악을 할 수 있게끔 도와주는 참고서라고 볼 수 있을 것 같습니다. 충분한 경험이 있다면 특별한 내용이 없다고 느낄 수도 있는, 그리 도움이 되지 않을 뻔한 내용이라고 생각할 수 있기에 능숙한 중급이상의 개발자보다는 처음 시작하거나 1.1에 대한 기본적인 지식을 가지고 있는 개발자에게 더 큰 도움이 될 수 있을 것 같다는 생각이 듭니다.

- 자동화된 콘트롤을 이용한 실전 예제는 정작 실무에서 쓰이지 않는다?

다만 닷넷 2.0의 기준에 너무 맞추려해서인지 예제로 사용된 코드들이 실제 업무에서는 그렇게 크게 사용되지 않을만한 내용인 것 같습니다. 가령 로그인 콘트롤이나 멤버자격 등등의 자동화된 콘트롤들이 2.0의 주요 특징적 기능이기는 하지만 실질적인 실무 프로젝트에서 과연 이러한 콘트롤들을 얼만큼이나 많이 사용하게 될 것인가 생각해보면 ... 이러한 콘트롤이 제공하는 기능으로 구현한 게시판이나 자료실 등의 실전 예제가 실상 그닥 소용이 없는 것 아닌가 하는 생각이 듭니다.

어느 정도의 기본 지식을 가진 개발자에게는 빠른 파악을 도와주는 참고서이지만 실무적 측면에서 도움이 될 만한 개발서로 접근한다면 현실감이 떨어져 기대에 미치지 못하는 느낌? 그 정도로 얘기할 수 있을 것 같네요.

그래도 어쨋든 저에게는 도움이 되었습니다. 약 10여일 정도 투자해서 얻을것은 얻은 그런 느낌이네요.

'웹/모바일 개발 > 웹개발' 카테고리의 다른 글

[DataTables] 테이블 출력을 위한 막강한 기능의 jQuery 플러그인, DataTables (1)	2012/12/14
[PHP] 윈도우 서버에 PHP 5.4 설치하기 (0)	2012/11/05
[프로그래밍 도서] 뇌를 자극하는 ASP.NET (0)	2012/10/24
[크롬 개발자도구] 티스토리 블로그가 늦게떠서 확인해보니 믹시 플러그인이 범인~ (2)	2012/10/18
[.NET] TextFieldParser 클래스를 이용하여 CSV 파일 파싱하기 (0)	2012/10/17
[프로그래밍 도서] 웹 개발자를 위한 웹을 지탱하는 기술 (2)	2012/06/07

[크롬 개발자도구] 티스토리 블로그가 늦게떠서 확인해보니 믹시 플러그인이 범인~

라스모르 — Thu, 18 Oct 2012 14:11:11 +0900

크롬 브라우저의 [도구] 메뉴에는 [개발자 도구]라는 메뉴가 있다. 당신이 웹사이트 개발자이거나 개발자가 아니더라도 포스팅을 즐기는 나름 블로거라면 알아두어도 좋을 기능이 있는 유용한 메뉴이다. 개발을 해서 사이트를 오픈하거나 포스팅을 올렸는데 해당 페이지가 예상보다 오래 걸린다면 개발자 도구를 열어놓고 어떤 녀석이 웹페이지 로딩시간을 잡아먹는지 확인할 수 있다.

포스팅할 블로그 내용 중에 소스코드가 들어가야 하는 부분이 있어 티스토리 블로그에 SyntaxHighlighter를 설치했습니다.

그런데 생각보다 웹페이지가 로딩이 완료되기까지의 시간이 너무 오래걸리는 것이었습니다. 그래서 크롬 브라우저에서 [도구] 메뉴에 있는 [개발자 도구]를 열어놓고 해당 웹페이지를 다시 띄워봤죠.

개발자 도구의 Network 탭을 클릭하여 웹페이지를 로딩할 때 걸리는 시간을 측정해보니 무려 21초라는 시간이 나왔습니다.

여기서 그림에서처럼 오른쪽 Timeline을 통해 웹페이지의 각 리소스 (이미지, 스크립트파일, CSS 파일 등)를 가져오는데 걸리는 시간을 확인할 수 있는데요. 저의 경우 mixsh 사이트에 있는 loader.html 파일을 가져오는데 20초가 넘는 시간이 걸려 이 파일을 가져올 때까지 페이스북 플러그인과 SyntaxHighlighter 가 모두 뜨지않는 문제가 발생했습니다.

그래서 일단 관리자 페이지에서 이 믹시 플러그인을 사용중지했습니다.

그리고 다시 로딩하였더니 이제는 3,4초대로 제대로 나오는 것을 확인할 수 있었습니다.

로딩에 장애가 되는 믹시 플러그인을 사용중지하니 모든 컨텐츠와 이전에 설치한 플러그인 기능들이 3,4초안에 모두 로딩되어 정상작동하는 것을 볼 수 있었습니다.

이러한 개발자 도구 또는 인스펙터 등은 크롬이나 사파리, IE 등 대부분의 브라우저에 그 기능이 있으니 이러한 경우에 사용하시면 도움이 되는 정보나 또는 힌트를 얻을 수 있습니다.

참고하세요~!

'웹/모바일 개발 > 웹개발' 카테고리의 다른 글

[DataTables] 테이블 출력을 위한 막강한 기능의 jQuery 플러그인, DataTables (1)	2012/12/14
[PHP] 윈도우 서버에 PHP 5.4 설치하기 (0)	2012/11/05
[프로그래밍 도서] 뇌를 자극하는 ASP.NET (0)	2012/10/24
[크롬 개발자도구] 티스토리 블로그가 늦게떠서 확인해보니 믹시 플러그인이 범인~ (2)	2012/10/18
[.NET] TextFieldParser 클래스를 이용하여 CSV 파일 파싱하기 (0)	2012/10/17
[프로그래밍 도서] 웹 개발자를 위한 웹을 지탱하는 기술 (2)	2012/06/07

[.NET] TextFieldParser 클래스를 이용하여 CSV 파일 파싱하기

라스모르 — Wed, 17 Oct 2012 14:04:44 +0900

SCHTASKS 명령으로 웹서버에 등록되어 있는 예약작업을 CSV 포맷의 문서로 뽑아보니 무려 250개가 훨씬 넘는 배치작업 정보가 나왔다. 그래서 이렇게 저장한 CSV 문서를 읽어들여 DB에 저장하려고 닷넷으로 split() 메소드를 이용한 파싱 프로그램을 만들어 돌려보았는데 예약작업정보를 세부적으로 기술하는 컬럼에 개행문자가 들어가 있어 제대로 데이터를 가져오지 못하는 문제가 생겼다. 어떻게 해야 할까?

검색해보니 역시 정답이 있었다!

보통 CSV 문서를 파싱할 때는 개행문자를 구분자로 하여 건(레코드) 수를 구분하고 이렇게 구분된 각각의 개별 건은 다시 콤마(,)를 구분자로 하여 각각의 컬럼으로 나누어지는데 만일 어떤 컬럼이 두 줄 이상의 내용을 포함하고 있다면 개행문자 때문에 제대로 파싱이 되지 않는 겁니다.

그래서 찾아보니 역시 이런 문제를 해결할 수 있는 파싱 클래스가 있네요. 바로 TextFieldParser라는 클래스입니다. 친절하게도 개행문자가 있어도 제대로 파싱하여 가져오는 것을 확인할 수 있습니다.

다음과 같은 코드를 통해 CSV 포맷의 파일을 파싱할 수 있겠습니다. 코드를 보니 개행문자(\r\n)을 단순히 'n'으로 치환하여 처리하네요. 이 클래스를 사용하기 위해서는 참조경로에 Microsoft.VisualBasic 구성요소 DLL을 추가해야 합니다. 참고하세요.

using Microsoft.VisualBasic.FileIO;

... 

TextFieldParser ps = new TextFieldParser("localFileName.csv", Encoding.Default);
using (ps)
{
    ps.TextFieldType = FieldType.Delimited;
    ps.SetDelimiters(",");
    while (!ps.EndOfData)
    {
	i++;
	Console.WriteLine("[" + i + "]번째 행");
				
	k = 0;
	string[] row = ps.ReadFields();
	foreach (string fd in row)
	{                            
	    string f = fd;
	    f = f.Replace("\r\n", "n");

	    Console.WriteLine("[" + k + "] " + f + "\t");
	    k++;
	}

	... // 데이터처리 코드
    }
}

'웹/모바일 개발 > 웹개발' 카테고리의 다른 글

[DataTables] 테이블 출력을 위한 막강한 기능의 jQuery 플러그인, DataTables (1)	2012/12/14
[PHP] 윈도우 서버에 PHP 5.4 설치하기 (0)	2012/11/05
[프로그래밍 도서] 뇌를 자극하는 ASP.NET (0)	2012/10/24
[크롬 개발자도구] 티스토리 블로그가 늦게떠서 확인해보니 믹시 플러그인이 범인~ (2)	2012/10/18
[.NET] TextFieldParser 클래스를 이용하여 CSV 파일 파싱하기 (0)	2012/10/17
[프로그래밍 도서] 웹 개발자를 위한 웹을 지탱하는 기술 (2)	2012/06/07