CyberImagination BLOG 217

HTML5 websocket - 실시간 양방향 통신

안녕하세요. 이번에는 HTML5에 기능 중 websocket에 대한 이야기를 해볼까 합니다. 과거 우리는 순수 웹 환경에서 채팅과 같은 실시간 응용프로그램들을 구현하기 위하여 참 많은 노력을 해왔습니다. 이제는 구시대의 전유물이 되어버린 hidden iframe을 통한 재 요청 방법, 이후 Ajax의 등장으로 인해 비동기를 통한 반복 요청, 그 이후 Comet의 등장으로 서버의 데이터를 수신 후에 재 요청을 가능하게 하는 방법 등 실시간을 위한 노력은 계속해서 발전하게 되었습니다. 하지만 위 모든 방식은 공통점은 polling 방식이라는 점입니다. 서버가 클라이언트에게 데이터를 push하는 방식이 아니라 클라이언트가 서버에게 데이터를 요청하는 방식이라는 것입니다. 브라우저가 일정한 시간을 주기로 HTTP..

프론트엔드 2015.07.10

책 안읽는 대한민국… 한달에 한 권도 안산다

책 안읽는 대한민국… 한달에 한 권도 안산다 가구당 월평균 도서구입비 1만 8154원 2003년 관련통계 작성 이후 최저 수준 출판시장의 불황과 독서인구 감소 추세가 지속되면서 가구당 월평균 도서구입비가 역대 최저 수준을 기록했다. 4일 통계청에 따르면 지난해 가구당 월평균 도서구입비는 1만 8154원으로 나타났다. 이는 전년보다 2.9% 줄어든 것으로 2003년 관련 통계 작성 이후 최저치다. 도서구입비의 감소는 문화·여가·취미 등에 지출하는 비용이 매년 꾸준히 증가한 것과 뚜렷이 대비된다. 지난해 가구당 오락·문화지출비는 월평균 14만 6814원으로 전년보다 5.6% 늘어났다. 이는 2003년 관련 통계 작성 이후 최대치로 오락·문화지출은 2005년 이후 10년 연속 증가세를 보였다. 반면 오락·문화..

유용한 정보 2015.07.06

국내 브라우저 및 플랫폼 이용현황 분석

웹서비스를 구축하고 해당 서비스가 지원하는 디바이스가 많으면 많을수록 좋은것이 사실 입니다 하지만 서비스하는 디바이스가 늘수록 유지보수가 힘들고 관리가 어렵다면 있느니만 못한 상황이 됩니다. 일반적으로 반응형 웹으로 작성하여 모든 디바이스를 지원하라고 말하지만 어느정도 규모가 있는 기업내부 시스템 또는 대외 서비스를 반응형으로 구축한다는것은 매우 힘든 작업입니다. 이러함 다양한 디바이스를 지워하는 사이트를 구축하기전에 일반적으로 브라우저 이용현황 및 Platform(PC,Mobile,Tablet) 에 대한 이용현황 분석이 필수입니다. 국내브라우저 이용형태 분석을 위한 데이터로서는 다음 사이트에 제공하고 있습니다. KISA - KOREA HTML5 (https://www.koreahtml5.kr) stat..

유용한 정보 2015.07.06

정규직 임금 4.3% 오를 때 비정규직 0.5% 찔끔 인상

정규직 임금 4.3% 오를 때 비정규직 0.5% 찔끔 인상 비정규직과 정규직 사이의 임금격차가 더 벌어지고 있는 것으로 나타났다. 비정규직은 고용의 질을 나타내는 지표인 사회보험 가입률도 떨어지고 있다. 통계청이 28일 발표한 '경제활동인구조사 근로형태별 부가조사 결과'를 보면 올해 1∼3월 임금근로자의 월평균 임금은 작년보다 3.6% 늘어난 231만4천원이다. 이 가운데 정규직 임금은 271만3천원으로 4.3% 늘었지만, 비정규직은 146만7천원으로 0.5% 증가에 그쳤다. 이로 인해 올 3월 기준으로 통계청이 분석한 비정규직과 정규직 간 월평균 임금격차는 1년 전보다 0.8%포인트 확대된 12.0%로 나타났다. 이 수치는 근로형태에 따른 임금차이만을 나타내기 위해 성별, 연령, 혼인상태, 교육수준 등..

유용한 정보 2015.07.06

자녀 사교육비도 부모 소득에 따라 차이난다

자녀 사교육비도 부모 소득에 따라 차이난다 고소득층과 저소득층이 자녀 사교육비로 쓰는 지출 차이가 더 벌어진 것으로 나타났다. 교육부와 통계청은 지난해 6월과 10월 전국 초·중·고 1189개교 학부모·학생 7만 8000명을 대상으로 조사한 ‘2014년 사교육비·의식조사’ 결과를 27일 발표했다. 이번 조사에서는 영유아 대상 사교육비, 방과후 교육활동이나 어학연수 비용, EBS 교재비 등은 사교육비 산정에 포함되지 않았다. ◇ 사교육비 총 규모 5년 연속 감소 지난해 우리나라의 사교육비 총 규모는 18조 2297억 원으로 전년(18조 5960억 원)보다 2.0%(3663억 원) 줄었다. 사교육비 총 규모는 2009년 이후 계속 줄고 있다. 물가상승분을 감안하면 사교육비 총 규모는 약 15조 6000억 원..

유용한 정보 2015.07.06

스타트업 성장의 열쇠, 그로스 해킹(Growth Hacking) - 1

스타트업 성장의 열쇠, 그로스 해킹(Growth Hacking) 스타트업에 관심이 있으신가요? 스타트업을 직접 하려고 하시나요? 혹은 이미 스타트업을 운영중이신가요? 세 가지 경우 중 하나라도 해당되신다면 아마도 '린 스타트업(lean startup)'이라는 용어를 들어보셨을겁니다. 아, 못들어보셨다고요........? 그렇다면 스타트업의 아버지격인 '에릭 리스'의 '린 스타트업(lean startup)'을 정독하시기를 추천합니다. 극도의 불확실성으로 가득찬 이 시대에 성공적으로 스타트업을 운영하기 위한 힌트를 얻으실 수 있습니다! 이 포스팅에서 소개하려고 하는 이름도 생소한, '그로스 해킹(Growth Hacking)'은 '린 스타트업'의 개념에 바탕을 둔 마케팅 전략입니다. 어느날, 여러분에게 기막힌..

유용한 정보 2015.07.06

반응형 웹 디자인의 단점

[번역글]반응형 웹 디자인의 단점(원제: You may be losing users if responsive web design is your only mobile strategy) 반응형 페이지로 사이트를 제작하고서, 브라우저를 크기를 조절하며 아마도 뿌듯한 미소를 지을겁니다. 모바일에 우호적인 웹사이트 제작이라는 목적을 달성했다고 생각할 것입니다. 그러나 반응형 웹 디자인이 전체 목적이자 모바일을 위한 유일한 해결책이라면, 사용자와 아마도 그에 따른 수입을 잃게 될지도 모릅니다. 어떻게 하면 반응형 디자인을 현명하게 적용할 수 있는지부터 시작해서, 왜 모바일에서의 퍼포먼스가 중요한지, 왜 반응형 디자인이 웹 사이트의 최종 목표가 되어서는 안되는지, 마지막으로 문제를 이해하도록 도와줄 반응형 디자인의 ..

프론트엔드 2015.07.03

웹에서의 그래픽 다루기 (1편 : HTML5 SVG 소개)

웹에서의 그래픽 다루기 (1편 : HTML5 SVG 소개) 1. SVG 란?W3C (World Wide Web 컨소시엄) 의 권장 사항인 SVG (Scalable Vector Graphics) 는 XML 에서 2차원 그래픽을 설명하기 위한 언어로 웹 페이지에 표시할 빠르고 가벼운 그래픽을 만들기 위해 사용할 수 있는 매우 효과적인 도구입니다. 2. SVG 사용 예SVG를 잘 활용한다면 그림의 설명 상자와 같은 간단한 작업부터 게임까지 다양한 분야에서 사용 할 수 있습니다. 특히 근래 데이터 시각화가 이슈화 되고 있는 시점에서 SVG는 차트나 다이어그램, 지도 등을 구현하는데 아주 유용하게 쓰일 수 있습니다. * 아래 링크는 SVG를 잘 활용한 사례로 참고하시면 좋을 것 같습니다. 3. Browser Su..

프론트엔드 2015.06.25

PhantomJS로 GRID&CHART를 PDF 출력하기 (1편 : 시작하기)

웹포넌트 그리드와 차트는 웹 상에서 표현된 데이터를 Excel, CSV, PDF 등의 파일로 추출하는 기능을 가지고 있습니다. 데모 보러가기 클릭!! 그 중 PDF를 추출하는 기능은 PhantomJS 라는 툴을 이용하여 만들었는데요, PDF추출 기능을 구현하며 처음 사용해 된 PhantomJS! 세상 모든것들이 그렇듯 잘 사용하기만 하면 아주 유용한 녀석입니다. 만들면서 많은 시행착오를 겪게 되었는데요, 앞으로 몇 회에 걸친 글을 통해 구현하면서 얻게 된 Know How와 Tip들을 공유해보도록 하겠습니다. 그 첫 시간으로 PhantomJS란 과연 무엇인지에 대한 간략한 설명과 함께 기본적인 Screen capture에 대해 설명하도록 하겠습니다. 1. PhantomJS 란? PhantomJS 공식 홈페..

자바스크립트 소팅, 멀티 소팅

자바스크립트 소팅, 멀티소팅에 관하여 웹포넌트 그리드에는 기본기능으로 소팅, 멀티소팅이 있습니다. 기능을 구현하면서 많은 시행착오가 있었습니다. 이 글에서는 당시에 얻은 "자바스크립트를 이용한 클라이언트사이드 소팅"관한 지식을 공유하려고 합니다.자바스크립트의 Array.prototype.sort()메서드에 대해서 알아보고 메서드의 응용, 멀티소팅은 어떤식으로 구현했는지 소개하려고 합니다.sort()메서드의 동작방식sort()메서드를 아무인자도 주지 않고 실행 시키면 사전식으로 정렬이 됩니다. 1 2 3 var letters = ["R","O","F","L"]; letters.sort(); alert(letters); //produces ["F","L","O","R"] cs 하지만 실제세계에서는 날짜비교,..

프론트엔드 2015.06.19