CyberImagination BLOG 217

디자인 구현을 위한 원칙

디자인 구현을 위한 9가지 원칙 웹 사이트를 구축하는 프로젝트는 보통 '기획-디자인-개발-테스트' 순서로 진행됩니다. 기획자가 사이트를 기획하면 기획서를 바탕으로 디자이너가 디자인을 합니다. 그 후 디자이너가 만든 화면 이미지를 보고 퍼블리셔나 개발자가 HTML을 퍼블리싱하고 프로그램 요소를 추가하게 됩니다. 저는 프로젝트에서 종종 퍼블리싱과 프로그래밍을 동시에 하는 롤을 맡아왔습니다. 디자인된 결과 이미지를 보고 브라우저에서 디자이너가 디자인한 결과물과 동일하게 나오도록 HTML 마크업과 CSS 스타일을 작성합니다. 이러한 작업을 할 때 저는 디자인된 화면과 픽셀 단위까지 동일하게 나오는 것이 중요하다고 생각하고 공을 들이는 편입니다. 최근에는 모 사이트를 기존의 것과 화면은 동일하게 하되, 서버단 일..

프론트엔드 2017.11.02

NoSQL 데이터 모델링

NoSQL 데이터 모델링 기존에 우리가 많이 사용하고 있는 RDMBS와 NoSQL은 전혀 다른 성격을 갖고 있고, 모델링 접근 방식 또한 다릅니다. 이 글에서는 먼저 NoSQL의 특징에 대해 알아보고, NoSQL의 데이터 모델링 패턴과 데이터 모델링 절차에 대해 알아보겠습니다. 1.1 NoSQL 특징NoSQL은 RDBMS와 다른 형태의 데이터 저장 구조를 총칭합니다. NoSQL의 특징을 RDBMS와 비교하여 살펴보겠습니다. 1.1.1 RDBMS vs NoSQL 특징 비교 구분 RDBMS NoSQL 데이터의 관계 Foreign Key 등을 이용하여 데이터의 관계를 정의한 후 JOIN 등의 관계형 연산을 수행 데이터 간의 관계를 정의하지 않음 확장성 데이터의 무결성 및 정합성 보장하기 위해 정규화된 데이터 ..

빅데이터 2017.10.30

underscore 알아보기 (3)

안녕하세요. 계속해서 underscore 관련 포스팅을 이어나가겠습니다. 이번에 다룰 내용은 함수입니다.bind, bindAll, partial, memoize 로 함수를 합성해보겠습니다. 1. _.bind( function, object, *arguments)원본 function파라미터에 대한 새로운 wrapper함수를 반환합니다. var accu = { currentValue : 0, add: function (val) { this.currentValue += val; }, substract: function(val) { this.currentValue -= val; } }; accu.currentValue = 5; accu.add(2); accu.substract(3); console.log('현재..

프론트엔드 2017.10.10

HBase 개념 정리

HBASE 란? 1.1 HBase 소개 Hadoop의 HDFS위에 만들어진 분산 컬럼 기반의 데이터베이스 입니다. 구조화된 대용량의 데이터에 빠른 임의접근을 제공하는 구글의 빅 테이블과 비슷한 데이터 모델을 가지며, HDFS의 데이터에 대한 실시간 임의 읽기/쓰기 기능을 제공합니다. 사용자는 HBase나 HDFS에 직접 데이터를 저장 할 수 있고, 사용자는 데이터를 읽고 접근하는 것은 HBase를 통한 임의접근을 이용한다. 1.2 HBase 특징 • 선형 확장성이 있다. • 읽기와 쓰기의 일관성을 제공 • 하둡과 연계하여 source가 되기도 하고 destination이 되기도 한다. • 클러스터를 통한 데이터의 복제 제공 1.3 Architecture 1.3.1 Master Server • Region..

빅데이터 2017.09.21

NoSQL 개념 정리

NoSQL 빅데이터, AI, 딥러닝 등 기술적인 화두들의 공통점으로 대용량 데이터에 대한 저장을 생각할 수 있습니다. 그 중에서도 NoSQL은 기존의 RDBMS를 사용함으로 해서 발생할 수 있는 문제들의 해결방안으로 손 꼽을수 있을 것입니다. 1.1 등장 배경웹 2.0 환경과 빅데이터가 등장하면서 RDBMS에서의 '데이터를 처리하는 데 필요한 비용의 증가' 이슈를 해소하기 위해 등장하였습니다.관계형 데이터베이스를 사용하면서 기하급수적으로 증가하는 데이터의 저장을 위해서는 장비의 성능이 좋아야하고 이를 위해서 하드웨어적으로 큰 비용이 발생한다. 1.2 특징 1.2.1 분산저장 • 데이터와 트래픽이 증가함에 따라 기존의 수직적 확장에서 장비의 수를 늘리는 수평적 확장(Scale-out) 방식 • 샤드 키(S..

빅데이터 2017.09.21

마이크로서비스 UI - 마이크로프론트엔드

마이크로서비스 아키텍처의 모습은 현재까지 데이터 처리 단위를 최소로 나누어 처리하는데 집중하는 모습입니다. 하지만 궁극의 마이크로서비스 아키텍처가 지향하는 모습은 데이터 처리 뿐만 아니라 web page와 같은 웹사이트 전체를 담아낼 수 있는 아키텍처를 지향합니다. 일반적인 웹 페이지 기반의 서비스를 마이크로 서비스 아키텍처로 적용하여 구축 시 현실적인 어려움점이 많습니다..Data layer에 대한 부분은 데이터 종류, 비즈니스 도메인, 또는 사용기술에 따라 분리하고 별도의 작은 서비스 단위로 설계하고 구현하는 것은 UI에 비하여 비교적 용이합니다. 그러나 Web frontend 부분은 세부적으로 나누는 기준이 애매모호합니다.이번 아티클에서는 마이크로 프론트엔드 (Micro frontend) 라는 이름..

프론트엔드 2017.09.14

underscore 알아보기 (2)

안녕하세요. underscore 알아보기 (1)에 이어 후속 내용을 이어가도록 하겠습니다. 이 전에 each, context(this), find, countBy, reduce, some, contains, every, max, min, sortBy, groupBy 를 알아보았습니다. 이번에는 reject, filter, partition, toArray, values, object, defference, shuffle, sample, invoke, first, rest, last, initial ,union, intersection, uniq, zip, compact, indexOf, range 를 알아보겠습니다. 1. _.reject, _.filter, _.partition, _.difference ..

프론트엔드 2017.09.07

thymeleaf (server-side template engine) 사용법 정리 - 2

지역변수 (Local Variables) Thymeleaf에서 지역변수의 범위는 변수가 정의된 DOM을 포함한 하위의 DOM까지를 포함합니다. 예를들면 다음과 같습니다. 1 2 3 4 5 Onions 2.41 Colored by Color Scripter cs 위 fragment는 each 속성을 통한 반복구문인데 여기에 사용된 prod는 를 포함하여 그 하위의 태그에서만 사용이 가능합니다. 위와 같이 반복문 이외에도 th:with속성을 이용하여 지역변수를 사용할수 있는데 구문은 다음과 같습니다. 1 2 3 4 5 6 The name of the first person is Tom. The name of the second person is Jeny. Colored by Color Scripter cs ..

유용한 정보 2017.08.24

이상금융거래 탐지 시스템(FDS)

2001년, 어떤 해커가 PayPal 계정에 침투하여 여러 계정에서 소액을 이체해가는 사건이 발생합니다. 이 사건을 맡은 FBI는 대대적인 수사에 착수했지만 큰 성과를 내지는 못했습니다. 이에 PayPal은 스스로를 지켜야겠다는 판단 하에 보안탐지시스템을 구축했고, FDS가 세상에 나타나게 되었습니다. 이미 FDS는 알게 모르게 우리의 실 생활에 많이 적용되어 있습니다. 아래의 사진은 FDS란 무엇인가를 알려주는 대표적인 사례라 할 수 있겠습니다. 이미지 출처 : 금융보안연구원 FDS 세미나 신한 카드사 발표 자료 핀테크, 빅데이터등 새로운 금융과 IT융합 시장이커짐에 따라 금융 보안의 패러다임이 변화하고 있습니다. 국내의 보안 규제 완화 및 간편결제 확대등 이용자의 편의성 위주로 결제 및 금융 환경이 ..

유용한 정보 2017.08.16

Tizen studio에서 Wearable기기 Web Application 만들기

요즘 스마트워치를 사용하는 분들을 종종 봅니다. 저도 삼성 기어핏2를 사용중인데요, 혹시 스마트워치는 어떤 OS 기반으로 작동하는지 알고계신가요? 막연히 안드로이드가 아닐까 생각했는데, 최근 Gear Watch Designer로 워치페이스를 제작하여 사용하던 도중 타이젠(Tizen)이라는 OS를 사용하고 있다는 것을 알게되었습니다. 타이젠은 인텔, 삼성전자, 리눅스 파운데이션 등 여러 회사가 연합하여 만든 오픈 소스 모바일 운영 체제입니다. 삼성전자의 스마트워치인 기어 시리즈와, 스마트 TV, 그리고 삼성 패밀리허브 냉장고 전면에 달린 태블릿까지 모두 타이젠 OS가 탑재되어 있습니다. 타이젠 운영체제를 기반으로한 스마트폰(Samsung Z1)도 있지만, 안드로이드와 iOS 양강체제에 밀려 시장 점유율은 ..

유용한 정보 2017.08.04