프론트엔드 69

ajax 개미지옥 callback hell !!!

javascript 에서 ajax를 통한 비동기 식으로 개발을 하다 보면 callback 함수로 인해 다들 엄청난 스트레스를 받았을것으로 예상된다. 이 callback함수로 인해 코드의 복잡성이 증가하고 가독성은 말할것도 없다. 다음과 같은 시나리오를 보자 1. /test/returnValue.jsp?value=1 을 호출 2. 리턴 값이 1이면 /test/returnValue.jsp?value=2 호출 3. 리턴 값이 2이면 /test/returnValue.jsp?value=3 호출 4. 리턴 값이 3이면 정상 alert5. 각 상황시 조건이 맞지 않으면 실패를 alert 이와 같은 형태의 시나리오는 우리가 개발을 하다 보면 종종 맞닥뜨리는 상황이다. 다음의 상황을 jQuery의 ajax를 통해 일반적..

프론트엔드 2016.07.15

Raphael로 웹에 낙서를 해봅시다. -TEXT편-

안녕하세요?DJ.VUD 입니다. 지난시간에 Raphael.js 에 대한 기본적이고 기초적인 내용에 대해서 알아보았습니다.(http://cyberx.tistory.com/85) 이번에는 TEXT 에 대하여 알아보겠습니다. TEXT 생성일단 TEXT는 크롬:개발자 도구로 살펴볼때 이러한 형태를 가지고 있습니다. 마치.. 에 을 넣어 style로 관리하는 모양새랑 비슷합니다. Raphael TEXT를 만드는 방법은 아주 간단합니다. var text = paper.text( x좌표, y좌표, '텍스트 입력'); TEXT도 다른 도형 또는 path와 마찬가지로 기본 색상은 검정색입니다.폰트명은... 크롬에서 기본만 딱 그려봤습니다. 폰트명은 Arial이고 폰트크기는 10px 입니다. (브라우저마다 폰트모양은 조금..

프론트엔드 2016.07.14

API 서비스 개요 및 Business 관점의 특징

2015년 BCS(Chartered Institute for IT)는 간부급 IT전문가 350명을 대상으로 향후 12개월의 단기 계획과 3~5년간의 중장기 계획을 조사했는데 향후 12개월 동안 대다수의 기업에서 우선순위가 높은 3개로 정보보안(60%), 클라우드 컴퓨팅(55%), 모바일 컴퓨팅(53%)이 꼽았습니다.그러나 회사가 우선으로 하는 IT동향과 경영 문제를 해결할 만한 충분한 자원이 없다고 느낀다는 IT임원이 무려 92%나 됐었고, 조사에 응한 IT임원의 절반 이상인 53%는 기존 인력 가운데 고급 IT인력과 충분한 자격을 갖춘 IT인력들이 현재와 동일한 수만큼 더 필요하다고 답했습니다. 충분한 인력 자원을 보유하고 있다고 말한 응답자는 8%에 불과했습니다.위에서 볼 수 있는 대부분의 IT 관리..

프론트엔드 2016.07.04

Raphael로 웹에 낙서를 해봅시다.

RaphaelJS는?RaphaelJS는 IE8 이하의 브라우저에서 SVG를 사용하게 하기위한 오픈소스 라이브러리 입니다. 즉, 하위 브라우저에서는 VML로 변환시켜 줌으로써, 국내 브라우저 환경을 대응 할 수 있도록 하는 감사한 Cross-browser를 돕는 adapter 입니다. 현재는 http://dmitrybaranovskiy.github.io/raphael/ 라는 github 에서 관리, 배포되고 있습니다. 기본 사용법SVG가 사용될 영역 엘리먼트를 만듭니다.영역 엘리먼트와 넓이, 높이를 지정하여 라파엘을 초기화 합니다.그리고 그립니다. /* 영역 엘리먼트 작성 */ 결과> 크롬브라우저 결과> IE11에서 개발자도구로 IE8 버전 이렇게 안에 SVG 또는 VML이 자동생성 됩니다. 제공하는 기본..

프론트엔드 2016.06.14

핀테크 오픈플랫폼 구축 방안

금융위원회는 2015년 7월 핀테크 산업 발전을 위한 인프라 구축의 필요성을 느끼고 금융권과 핀테크 기업의 의견을 수렴하여 금융권 공동 핀테크 오픈 플랫폼 구축 계획을 발표합니다. [핀테크 오픈 플랫폼 개념도] 창조경제를 지향하며 금융 서비스 활성화 및 핀테크 기업의 사업 활성화 방안으로 핀테크 오픈플랫폼 구축 사업을 계획하고 시작하였습니다. 계획대로 올해 핀테크 오픈 플랫폼 서비스를 시작한다면 세계 최초의 금융 오픈 플랫폼을 운영하는 나라가 된다고 합니다.OPEN API 방식으로 핀테크 오픈 플랫폼이 구축되면 , API 방식으로 서비스를 구축하고 이용할 수 있어서새로운 금융 서비스를 손쉽게 개발하고 이용자들이 그 서비스를 보다 빠르게 접해볼 수 있는 이점이 있어서 핀테크 관련 업체나 일반 사용자 모두에..

프론트엔드 2016.06.09

무한스크롤, 페이징 혹은 "더보기" 버튼? 어떤 걸 써야할까

사이트를 기획하다보면 리스트 형식의 결과들을 어떻게 나타낼 것인지를 고민하게 됩니다. 적당한 개수를 정하여 페이징 처리를 할 것인지, 아니면 무한 스크롤을 적용하여 비동기 방식으로 스크롤이 맨 아래일 때 그 다음 결과를 불러올 것인지, 그것도 아니면 "더보기" 버튼을 둘 것인지 말이죠. 쇼핑몰이나 소셜 커머스처럼 수많은 결과들을 취급하는 웹사이트라면 더욱 리스트 처리 방법에 대해 고민이 되리라 생각합니다. 그래서 외국 사이트를 보던 중 좋은 글을 발견하여 일부 번역하여 포스팅 해보도록 하겠습니다. 무한스크롤, 페이징 혹은 "더보기" 버튼? eCommerce에서의 사용성 조사 결과 e-commerce 웹사이트에서 상품을 보여줄 때 가장 좋은 UX 패턴은 무엇일까? 페이징, "더보기"버튼 혹은 무한 스크롤?..

프론트엔드 2016.05.30

컨테이너 기반 가상화

Micro Service Architecture 에서 인프라 적으로 중요한 개념으로 꼽으면 아래와 같이 2가지로 정리할 수 있다. Application Programming Interface (API) 가상화 (virtualization) API는 이미 많은 개발자 및 인프라 측면에서 필요성을 느끼고, 서비스를 위한 기업에서는 많이 채택되는 기술이다. 가상화 기술 또한 이미 국내 기업에서도 많이 사용되고 있는 기술이지만, 그에 따른 개발자나 인프라 관리하는 운영자 측면에서 아직 낯설고 이용을 하더라도 그에 따른 문제점을 재기하는 사람들 또한 많다. 이번 글에서는 가상화 서비스 중 요즘 이슈가 되고 있는 컨테이너 기반의 가상화에 대해 소개해 보도록 하겠다. 서버 가상화란 요즘은 클라우드 컴퓨팅 기술의 활용..

프론트엔드 2016.02.19

HTML5 로 데스크탑 어플리케이션 만들기 3

HTML5 로 데스크탑 어플리케이션 만들기3 안녕하세요. CX 사업본부 MD 왓썹입니다.지난 포스팅에서는 node-webkit 을 이용하여 간단한 데스크탑 어플리케이션을 만들어 테스트해보는 시간을 가졌는데요. 이번 포스팅에서는 node-webkit이 실제 프로젝트에 적용되어 어떻게 사용되는지 알아보도록 하겠습니다. 1. 프로젝트 소개먼저 node-webkit 을 적용할 프로젝트는 웹포넌트 팀에서 개발한 webPonent-publisher 로 조금은 생소하지만 아주 편리한 웹 코드 편집 툴 입니다. 웹포넌트 퍼블리셔는 프로토타입 및 샘플 소스 작성 등에 특화된 실시간 웹 코드 에디터로, 웹포넌트 차트&그리드의 각 기능에 해당하는 다양한 샘플 코드 (HTML, CSS, JS) 를 사용자에게 제공하고 있으며,..

프론트엔드 2016.01.15

모놀리틱 시스템에서 MSA로 전환

SW산업은 그 어느 산업보다 빠른 속도로 변하고 있다고 느낄지 모르겠지만, Software 개발자로서 IT밒 소프트웨어 개발 트랜드를 면면히 살펴 본다면 사실 하나 하나 계단을 밟아가는 듯이 점진적으로 발전을 해왔다 . 그 동안 계속 필자가 다루고 있는 Micro Service Architecture(이하 MSA)도 지금 개발 패러다임에서 급진적으로 보일지 모르겠지만, 그 동안으로 개발역사를 살펴 본다면 하나씩 하나씩 점진적으로 발전되어 나온 하나의 결과물이다 MSA는 기본 사상은 Service Oriented Architecture (SOA) 사상에서 출발하여 발전 하고 있다. SOA도 기존에 있었던, 1990년대 CORBA( Common Object Request Broker Architecture)..

프론트엔드 2015.12.12

HTML5 로 데스크탑 어플리케이션 만들기 2

HTML5 로 데스크탑 어플리케이션 만들기2 안녕하세요. CX 사업본부 MD 왓썹입니다.지난 포스팅에서 HTML 데스크탑 어플리케이션에 대해 알아보았는데요. 이번 포스팅에서는 node-webkit 을 이용하여 데스크탑 어플리케이션을 직접 만들어 보도록 하겠습니다. 1. 설치NodeJS - https://nodejs.orgnode-webkit 은 NodeJS 를 기반으로 하기 때문에 기본적으로 NodeJS 가 설치되어 있어야 합니다.NodeJS 는 위에 링크된 공식 홈페이지에서 각자의 OS 에 맞는 인스톨러를 다운로드 하여 설치하실 수 있습니다. NodeJS 설치가 완료 되었다면 node-webkit 을 설치하셔야 하는데요. OS (Window, Linux, Mac) 별로 설치법이 다소 차이가 있기 때문에..

프론트엔드 2015.12.04