프론트엔드 65

Micro Service Architecuture 의 중심 API Server

2010년 이후 급격하게 보급된 스마트폰으로 인해 브라우저를 통한 웹서비스 외에도 모바일 앱를 함께 고려한 멀티 채티 서비스를 필수적으로 고민해야 되는 시기가 왔다.어떠한 서비스는 웹보다는 앱이 메인이 되는 서비스도 많이 늘어났지만 , 일반적인 기업환경에서 웹서비스를 메인으로 고객을 위한 디바이스 채널이 점점 늘리는 추세이며, 그에 따라 개발 비용 증가 및 빠른 서비스 출시에 대한 압박이 심해지고 있다. 다양한 플랫폼을 준비해야 되는 상황에서 어떻게 보다 빠르게 서비스를 출시하고 개발하기 위해 필수적인 MSA(Micro Service Architecture) 및 그 중심인 API Server에 대해 알아보도록 하겠다. Monolithic Architecture 일반적인 서버 사이드 기업용 web appl..

프론트엔드 2015.10.01

멀티 디바이스 환경을 위한 웹 표준 보안

웹 보안은 정보 접근 방법이 다양해 지고 손쉬워 지면서 점점 그 중요성이 커지는 분야입니다. 우리나라는 공인인증서라는 독특한(?) 솔루션을 바탕으로 키보드 보안, E2E, 개인 방화벽등 ActiveX 또는 OS 레벨에 설치되는 실행 프로그램을 통해 정보 보안을 처리하는 형태로 거의 20여년 동안 유지되고 있습니다. 문제는 이러한 방식이 모바일 환경이나 표준 웹 방식에서는 전혀 이용할 수 없는 비표준 방식이기 때문에 앞으로 공인인증서 기반의 보안은 없어질것으로 조심스럽게 기대해 봅니다. 그럼 모바일 환경이나 표준 웹 환경에서 보안을 강화하기 위한 웹 표준 방법으로 어떤것이 있는지 알아보겠습니다. 1.통신 보안 웹에서 통신보안의 기본은 SSL 입니다. Secure Socket Layer Protocol 기반..

프론트엔드 2015.08.26

ActiveX 및 NPAPI 이용현황

ActiveX 및 NPAPI란?ActiveX는 마이크로소프트에서 개발한 응용프로그램과 웹을 연동시키기 위해 제공되는 기술입니다. ActiveX는 웹에서 HTML의 정적인 웹 문서에서 탈피하여, 동적이고 화려한 멀티미디어 기술을 동작 할 수 있도록 하는 일종의 인터넷 익스플로러 전용 플러그인(Plug-in) 기술이라고 할 수 있습니다. 또한, NPAPI는 구글 크롬 브라우저가 지원하지 않는 각종 기능(결제, 인증, 보안 등)을 동작하도록 하는 플러그인 기술이며, 구글은 프로그램 충돌, 보안 취약성, 모바일 미지원 등의 문제를 고려하여 ’15.9월에 NPAPI 지원을 중단하겠다고 발표하였습니다. ActiveX 관련기술 ActiveX Control 웹 페이지에 내장되어 실행 가능한 객체로 C/C++. 비주얼베..

프론트엔드 2015.08.17

비단결처럼 부드러운 사이트를 만들기 위해

안녕하세요. 이번에는 부드러운 사이트를 만들기 위해 도움되는 아티클들을 소개하려고 합니다. 최근 웹에 복잡하고 화려한 UI가 많아지고 있습니다. 이러한 UI들을 잘못 구현하게 되면 사이트가 뚝뚝 끊기는 현상이 일어나 사용자들에게 불편함을 줄 수 있습니다. 최근의 브라우저들은 모니터 혹은 기기의 스크린의 화면 갱신속도에 맞춰서 웹 컨텐츠들을 리프레시하도록 설계가 되어있습니다. 최근의 거의 모든 기기들은 1초에 60번 화면을 갱신하고 있어, 브라우저들도 그 횟수에 맞춰 컨텐츠를 갱신하게 됩니다. 반대로 말하면 브라우저상에서 스크롤, 애니메이션, 트랜지션이 일어나게 되면 브라우저는 1초에 60개의 프래임을 만들어야만 합니다. 하지만 그 과정에서 과도한 자바스크립트, 과도한 리페인트등이 일어나게 되면 1개의 프..

프론트엔드 2015.08.13

Java Multi Process Programming

오늘날 H/W의 급속한 발전으로 기본적으로 multi-core 환경에서 대부분의 server side 개발자가 개발을 하고 있습니다. 하지만 일반적으로 이러한 멀티코어 환경을 잘 이해하지 못한 상태에서 일반적인 코딩을 하여 성능이점을 누리지 못하거나, 생각하지 못한 결과 값을 얻는 경우도 있습니다. 오늘은 Java 의 Multi process programming에 대해서 설명을 하려고 합니다. 사실 multi process programming을 완전히 이해하기 위해서는 Hardware상의 CPU와 Memory 간의 아키텍처에 대한 이해가 필요합니다. 다양한 CPU 아키텍처가 있겠지만 일반적인 Multi-core CPU는 다음과 같은 Hardware Architecture를 가지고 있습니다. Multi..

프론트엔드 2015.07.30

웹에서의 그래픽 다루기 (2편 : HTML5 SVG 도형)

웹에서의 그래픽 다루기 (2편 : HTML5 SVG 도형) 안녕하세요! CX 사업부의 왓썹입니다ㅎㅎ 오늘은 웹에서의 그래픽 다루기(1편:HTML5 SVG 소개) 편에 이어서 포스팅을 이어 나가도록 하겠습니다. 1편에서 SVG 소개를 간단히 하였기 때문에 더 이상의 설명은 하지 않고 바로 SVG의 간단한 사용법부터 알아보도록 하겠습니다. 코드 작성은 webPonent-Publisher 라는 웹포넌트에서 제공하는 편집 툴을 이용해서 작성 할 거에요. 작성된 코드가 실시간으로 적용되어 결과를 바로 바로 확인 할 수 있어서 사용 편의성이 좋기 때문에 자주 사용하는 툴입니다. SVG에서 제공하는 기본 도형은 line, rect, circle, ellipse, text, image, polyline, polygon..

프론트엔드 2015.07.27

HTML5 websocket - 실시간 양방향 통신

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

프론트엔드 2015.07.10

반응형 웹 디자인의 단점

[번역글]반응형 웹 디자인의 단점(원제: 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

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

자바스크립트 소팅, 멀티소팅에 관하여 웹포넌트 그리드에는 기본기능으로 소팅, 멀티소팅이 있습니다. 기능을 구현하면서 많은 시행착오가 있었습니다. 이 글에서는 당시에 얻은 "자바스크립트를 이용한 클라이언트사이드 소팅"관한 지식을 공유하려고 합니다.자바스크립트의 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