Latest Posts

React + Reflux + REST api + Websocket Demo (v0.0.1)

Github 저장소 : https://github.com/trustyoo86/r3-w1-boilerplate Blog 원본 : http://lazydev.tistory.com/category/DevLab/React React는 Facebook에서 개발한 뷰단위의 컴포넌트 모듈을 제공하는 javascript 라이브러리입니다. 야후, 인스타그램, 페이스북이 현재 React를 적극적으로 사용하고 있으며, 화면에 배치되어 있는 뷰 하나하나가 모델이 되는 모던웹을 지향하고 있습니다. 또한, 단방향 데이터 통신을 지원하여 Angular.js ... »

Angular js 기반 하이브리드 앱 프레임워크 “ionic”

ionic 소개 : http://lazydev.tistory.com/category/DevLab/Ionic ionic은 Angular JS 및 cordova 기반의 Hybrid App Framework입니다. 정말 다양한 기능을 내포하고 있으나, 이번에는 간략한 소개 및 설치 방법에 대해 알아보려고 합니다. 1) 만들기 쉬운 App ionic framework는 명령어 하나만으로도 간단하게 앱을 구성할 수 있습니다. 또한, Angular JS 기반이기 떄문에, Angular JS만 익숙하시다면 금새 디자인적으로나 기능적으로 완벽한 ... »

ionic

ionic + browserify Boilerplate v0.0.1

github repo : https://github.com/trustyoo86/ionic_browserify_boilerplate Boilerplate 설명 : http://lazydev.tistory.com/entry/ionic-ionic-browserify-boilerplate-ver001 개요 Angular 기반의 Hybrid App framework인 ionic을 gulp task 및 browserify등을 이용하여 빌드할 수 있는 개발 구축 환경을 만들었습니다. 기본적으로 Hybrid App을 build할 때 필요한 www... »

gulp.js – The streaming build system

gulp.js 는 Grunt와 같은 javascript 빌드 시스템입니다. 미리 알아 두어야 할 사항 node.js npm 참고 자료 http://gulpjs.com/ http://code.tutsplus.com/tutorials/managing-your-build-tasks-with-gulpjs–net-36910 슬라이드 동영상 »

Screen Shot 2013-08-16 at 10.16.28 AM

간단한 폰갭 설치법

알고 계시다시피 폰갭이란 HTML, CSS, Javascript로 작성된 모바일웹을 어플리게이션으로 바꾸어주는 도구입니다. 기존의 웹개발 기술을 그대로 앱 개발에 응용할 수 있어 상당히 매력적인 도구라 할 수 있습니다. 그렇기 때문에 대부분의 모바일 웹을 설명하는 책들은 폰갭에 대해서도 소개하는 장을 갖고 있습니다. IT 산업이 그렇듯이 폰갭도 계속적으로 업데이트가 되고 있습니다. 업데이트라는 것이 기존 버젼을 보완, 향상하는 것이기 때문에 긍정적이기는 하지만, 업데이트 내용을 바로바로 따라가는 것은 쉽지 않기 개발자 입장에서는 항... »

Screen Shot 2013-07-25 at 2.11.54 PM

워드프레스에서 menu 작성시 drag&drop 작동 불능

워드프레스에서 새 메뉴를 등록하는 경우에, 간혹 생성된 메뉴에서 drag와 drop이 작동하지 않는 경우가 있습니다. 이 경우, ‘Use Google Libraries’ 플러그인을 다운 받아서, 활성화시켜주면 해결될 수 있습니다.     »

지도 위에서 3D 건물모양을 만들어 높이와 색상으로 데이터 시각화

지도 위에서 3D 건물모양을 만들어 높이와 색상으로 데이터 시각화

지도 위에서 3D 건물모양을 만들어 높이와 색상으로 데이터 시각화에 사용할 수 있는 데모입니다. [데모보기] 위 데모는 OSM Buildings라는 라이브러리를 사용해서 만들었고 지도는 Leaflet으로 만들었습니다. 건물모양을 만드는데 사용할 데이터는 서버에서 생성해서 가져오는 방법과 GeoJSON을 사용하는 방법이 있는데 저는 GeoJSON을 사용했습니다. 각 구별로 값을 주고 그 값이 클 수록 입체모양의 높이가 높고 색상을 진하게 표현하였습니다. 사용된 데이터는 어떤 실제 값이 아니라 데모를 만들어 보려고 5000~20000 ... »

D3.js로 만든 우리나라 지도

D3.js로 만든 우리나라 지도

D3.js로 만든 우리나라 지도입니다. [데모보기] 이 지도는 mbostock’s block #2206340을 보고 만든 것입니다. 지도 위에 시도별 영역을 표시하기 위해서 좌표정보를 담은 GeoJSON 파일이 필요했습니다. SGIS 통계지리정보서비스에서 행정구역경계 SHP 파일을 구한 다음 이 SHP 파일을 Quantum GIS를 사용해서 GeoJSON으로 변환하여 사용했습니다. 지명 표시를 On/Off 할 수 있고 마우스휠 또는 +/- 버튼으로 확대,축소를 할 수 있습니다. 각 시도를 클릭하면 해당 시도로 확대됩니다. »

[데이터 시각화] 시도별 임가수 (2010)

[데이터 시각화] 시도별 임가수 (2010)

시도별 임가수 현황을 지도위에서 파이차트로 볼 수 있도록 만들어 봤습니다. [시도별 임가수 (2010) 보기] 데이터는 임업통계연보에서 구했습니다. 지도는 ArcGIS API for JavaScript를 사용했고, 파이차트는 Chart.js를 사용했습니다. 데이터를 각 시도의 중심지점 위에 파이차트로 올리기위해서 각 시도의 좌표가 필요했습니다. 16개 시도의 좌표는 수동으로 직접 구해서 소스코드에 넣었습니다. 그리고 파이차트를 올려본 후 차트가 겹치지 않도록 좌표를 수정하였습니다. “ArcGIS API for JavaSc... »

[데이터 시각화] 산지이용 구분현황 (2007~2011)

[데이터 시각화] 산지이용 구분현황 (2007~2011)

시도별 산지이용 구분현황을 히트맵(Heat Map)으로 볼 수 있도록 만들어 봤습니다. [산지이용 구분현황 (2007~2011) 보기] 데이터는 임업통계연보 38호~42호에서 최근 5년간의 데이터를 구했습니다. 히트맵은 데이터를 테이블 형태로 표시한 다음 각 셀의 배경색을 조절하여 사용자에게 시각화하여 보여주는 방법입니다. 보통 높은 값의 경우 짙은 색, 낮은 값의 경우 옅은 색을 사용하여 수치가 높은 경우 진하게 나타나도록 합니다. 이 데모는 Create a Flexible Data Heat Map이라는 글에 나와있는 방법을 사용... »

Page 1 of 28123»