[웹포넌트 가상키보드] 웹 사이트를 안전하게 만드는 가장 손쉬운 방법 저번주 금요일, 웹포넌트 2차 리뉴얼 사이트를 오픈하면서 새롭게 webPonent VIRTUAL KEY(웹포넌트 가상키보드)를 동시에 출시하였습니다! 새롭게 출시한 제품은 여태까지 웹포넌트에서 선보인 데이터 시각화 및 처리에 유용했던 CHART, GRID와는 조금 다른 성격입니다. '웹 사이트를 안전하게 만드는 가장 손쉬운 방법'이라는 캐치프레이즈에 걸맞게 아주 간편하게 웹 사이트에 보안키패드를 사용할 수 있게 해주는 제품입니다. 시중 은행 사이트에 들어가면 꼭 보게 되는 것은 바로 가상키보드 입니다. 가상키보드는 말 그대로 물리적인 키보드가 아니라 화면에 가상으로 나타나는 키보드입니다. 멀쩡한 키보드가 있는데, 왜 굳이 불편한 가상키..

안녕하세요. CX사업부 MD 태태입니다. 오래간만에 PhantomJS 를 이용하여 PDF를 생성하는 글을 포스팅합니다. 지난 3번의 포스팅을 통하여 기본적인 PhantomJS를 통한 PDF출력에 대해 살펴보았는데, 이번 글에서는 PhantomJS에서 제공하는 다양한 Event listener에대해 살펴보겠습니다. 웹화면을 PDF형식으로 출력하다보면 예상치않은 웹상의 오류에 대해 대처해야하거나, JavaScript로직의 실행시점을 알아야 하는등 다양한 문제가 발생할 수 있습니다. 이럴 때 사용할 수 있도록 PhantomJS는 몇가지 Event listener를 제공해주고 있는데, 이번 포스팅에서는 webPonent 제품을 개발할 때 유용하게 사용되었던 것들을 중심으로 소개하고 설명해드리도록 하겠습니다. o..

[웹포넌트 그리드] 일반 HTML 테이블의 한계를 뛰어넘는 데이터 그리드! Q1. 데이터 그리드는 왜 사용할까요? 데이터를 표현하기 위해서 일반 HTML 테이블을 쓰는 것은 보편적인 관행이었습니다. 데이터에 레코드가 많지 않거나 데이터를 사용자가 조작하게 하고 싶지 않는 한 일반적인 테이블을 사용해도 전혀 문제가 없습니다. 그러나 테이블에 수 백 건의 레코드를 사용하는 웹 애플리케이션을 구축할 때라면, 일반 HTML 테이블로 데이터를 표현하는 데에 아주 큰 사용상 결함을 겪게 될 것입니다. 예를 들어, 일반 테이블로 1000건의 데이터를 표현한다고 가정해보겠습니다. 하나의 로우()당 30px 이라고 한다면, 제목(thead)영역까지 포함하여 테이블의 길이는 30,030px이 될 것입니다. 24인치 모니터..

안녕하세요!! CX사업부 MD 태태입니다!지난번에 우리가 문서 규격을 갖춘 PDF를 출력하고 헤더, 푸터 까지 출력했었죠.그런데 기억하시나요?그 때 우리는 한가지 문제에 직면했었습니다.기억을 더듬기 위해 지난번 코드의 일부를 살펴보지요.1234567891011121314151617181920212223242526272829303132page.paperSize = { format: 'A4', orientation: 'portrait', margin: { left: '1cm', right: '1cm' }, header: { height: '1cm', contents: phantom.callback(function () { var div = document.createElement('div'); var img..

안녕하세요!! CX사업부 MD 태태입니다! 지난번 글 에서 PhantomJS를 이용해서 간단히 Google(우리의 구글신) 화면을 캡쳐했었습니다! 하지만 우리가 단순히 화면만 캡쳐할 거였으면 이미지로 만들었겠죠~ 실제로 PhantomJS를 통하여 동일한 로직을 통해 이미지 파일을 추출할 수도 있습니다. (추출파일 확장자만 바꿔주면 되요) 그러나 우린 문서를 원합니다!! 이미지가 아닌 PDF 문서! 문서형식의 파일에는 여러가지 페이지에 대한 설정들이 들어가게 됩니다. 페이지 여백 설정, 방향설정, 페이지 Header, Footer설정, 페이지 크기 등 다양한 설정을 할 수 있어야 하겠지요. 그렇기 때문에 이번에는! PhantomJS로 그리드&차트 PDF 출력하기 그 두번째 내용으로 PDF 문서의 페이지설정..

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