프론트엔드 70

마이크로서비스(Microservices) 기술 뉴스

이번달은 마이크로서비스 관련 기술뉴스를 준비해 보았습니다. 주로 3개월 내에 작성된 국외의 Microservices 관련 뉴스 및 아티클들을 주제별로 정리해 보았습니다. [2017년 향후 전망] 2017년은 기존 아키턱처에서 Microservices 롤 전환하기 위한 방법으로 API의 적극적인 활용을 언급하고 있습니다.즉 Microservices의 대규모 이동보다는 API 기술을 활용한 점진적인 변화를 예상하고 있는데요. 이와 관견된 솔루션이나 기술들을 각 기업의 IT관계자 분들은 관심을 가져야 할것 으로 보입니다. 또한 각 기업의 Cloud전환, 즉 PaaS의 전환을 마이크로서비스의 중요한 요인으로 보입니다.니다. 제가 알기로 자사의 IT 서비스를 PaaS 전환을 진행하는 기업이 많지 않다고 알고 있는..

프론트엔드 2017.02.08

html 5.1을 소개합니다.

html 5.1을 소개합니다.html 5.0에 비해 지원하는 브라우저의 제한이 있고 많은 변화가 있는 것은 아닙니다.하지만 html의 중요성이 커지고 있고w3c가 웹을 선도하는 만큼 변화를 미리미리 파악하는 것은 중요합니다. 6~7가지 정도의 변화를 소개하겠습니다. 1. 우클릭으로 menuitem(context) 설정하는 기능입니다. 태그가 하위에 태그를 가지며 type 속성에 checkbox, command(함수를 실행할수 있게 해줌), radio 속성을 주는 것입니다.현재 파이어 폭스 49이상 에서만 지원합니다. 테스트 체크박스 커맨드 체크박스 선택된 래디오 버튼 선택안된 래디오 버튼 Disabled 된 항목p { padding: 10px; color: black; display: inline-blo..

프론트엔드 2017.01.25

d3.js 를 이용하여 차트 그리기(easy)

D3.js? D3.js의 D3은 Data-Driven Documents 의 약자로 많은 양의 데이터와 이미지들을 비쥬얼적으로 표현해주는 자바스크립트 라이브러리 입니다. D3.js는 Slant(https://www.slant.co/)라는 최고의 제품을 추천해주는 외국 커뮤니티 사이트내에서 '베스트 자바스크립트 드로잉 라이브로리 1위', '최고의 비쥬얼 데이터(차트/그리드) 드로잉 라이브러리 1위' 등 드로잉 자바스크립트 관련하여 높은 랭킹을 차지하고 있습니다. 그만큼 D3.js 는 좋은 오픈소스 드로잉 라이브러리고 할 수 있죠. 그럼 어떠한 자바스크립트 라이브러리인지 같이 간단하게 알아보도록 하겠습니다. D3.js - 간단한 차트 그리기 세팅하기 공식사이트( https://d3js.org/ ) 또는 git..

프론트엔드 2017.01.09

Windows에서 Docker Web application 개발환경 구축

Docker 나 컨테이너 가상화는 무엇인지 굳이 설명을 하지 않아도 이제는 매우 일반적으로 쓰이는 IT 용어가 되었습니다. Hybrid 기반의 Cloud 환경 및 Microservices 가 앞으로 인프라 아키텍처로써 발전해 나가고 있는 시점에 컨테이너 기반 가상화의 대표주자인 Docker의 중요성은 다시 설명 드리지 않아도 될 만큼 개발자나 인프라 담당자가 꼭 알아두어야 할 시대가 된것 같습니다. 그래도 추가적인 대략적인 개념이 필요하시면 아래 글을 읽어보시면 도움이 되겠습니다. 참조 :컨테이너 기반의 가상화 (Docker) [링크] 이번 아티클에서는 대부분 개발자가 이용하고 있는 윈도우 환경에서 Docker 환경을 구축하고 Tomcat 기반의 web application (war)을 Docker im..

프론트엔드 2017.01.04

간단한 빌드시스템 GULP !

간단하여 사용하기 편리한 gulp에 대해 간략한 소개와 설치 및 플러그인 사용을 함께 해보고자 합니다. (위의 사진 클릭시, gulpjs.com 링크이동) What is 'GULP'? - 컴파일 없이 파일을 최적화하고 생산성 있게 만들어주는 자동화된 빌드 시스템 노드 스트림의 장점을 이용하여, 필요에 맞게 플러그인들을 연결해 사용할 수 있습니다.2000개 이상의 플러그인들이 있어 필요에 맞게 사용하시면 됩니다.배우기도 쉽고, 사용하기도 쉬운 도구로 프로젝트를 수월하게 진행하도록 도와줄 것입니다. GULP 설치( ※ Gulp 는 Nodejs의 스트림을 기반으로 하기에 Node.js 설치가 선행되어야 합니다. ) 1. npm을 이용하여 전역에 gulp를 설치합니다. $ npm install gulp -g 2..

프론트엔드 2016.11.14

ECMAScript6의 전달인자와 매개변수 사용

외국 사이트에서 ECMAScript 6 의 전달인자와 매개변수에 관한 글을 봤는데, 알아두면 유용할 것 같아서 일부를 번역하였습니다. 이전 버전인 ECMAScript 5와의 비교를 통해서 어떻게 달라졌는지 아주 간결하고 알기쉽게 설명하고 있습니다. 이 글에서 설명하고 있는 구문은 크롬, 파이어폭스의 비교적 최신 버전이나 엣지 브라우저에서 동작하는 것을 확인할 수 있습니다. ECMAScript 6 에서 전달인자와 매개변수를 사용하는 방법 ECMAScript 6 (ECMAScript 2015) 는 ECMAScript 표준의 새로운 버전이며, 자바스크립트 파라미터 핸들링이 눈에 띄게 향상되었다. 이제 여러가지 새로운 특징 중에서 rest parameters, default values, destructurin..

프론트엔드 2016.11.01

자바스크립트 모듈 패턴(JavaScript Module Pattern: in-depth)

다음 글은 Ben Cherry님이 쓴 자바스크립트 관련 게시글을 번역한 것입니다.확실히 동의를 구하기 위해 https://twitter.com/bcherry를 통해 메시지를 남겼지만 답장이 없네요..문제가 된다면 바로 삭제하도록 하겠습니다.Cherry! we think you are so generous 원문 글입니다.http://www.adequatelygood.com/JavaScript-Module-Pattern-In-Depth.html 자바스크립트를 코딩하면서 모듈패턴을 만드는 것은 흔한 일입니다.모듈 패턴을 만들면 이해하기 쉽고 많은 장점이 있습니다.저는 모듈 패턴에 대한 관심이 많이 있는데 제가 한번 다뤄보겠습니다. - The Basics (기초 지식)Eric Miraglia(of YUI)로 유..

프론트엔드 2016.10.28

마이크로 서비스 아키텍처를 위한 Frontend 개발패턴

그 동안 마이크로 서비스 아키텍처 관련 내용을 소개하고 관련 솔루션을 준비하면서 항상 아쉬운 부분이 있었습니다. 우선 기존에 다루었던 마이크로 서비스관련 목록을 다시 나열해 보겠습니다.모놀리틱 시스템에서 MSA 전환도메인 주도 설계마이크로 서비스의 장단점API 서버Event 기반의 Microservices 주로 마이크로 서비스 아키텍처 자체 및 비즈니스 로직이 구현에 대한 글들이 많습니다. 그러나 실제 적용하기 위해서 일반 개발자나 현업이 생각해 보는 부분은 UI 즉 frontend 구현에 대한 고민입니다. 일반적으로 마이크로 서비스 방식에서 각 채널 별 Frontend 관련 개발 패턴은 API기반인 JSON 형태 데이터를 AJAX 방식 호출을 통해 Single Page Application( SPA)을..

프론트엔드 2016.10.12

CSS Naming Conventions BEM

CSS를 작성하다 보면 이름짓기에 의외로 어려움을 겪는 경우가 많습니다.여러번의 프로젝트를 수행하다 보면 본인만의 스타일로 클래스명을 짓게되는데, 협업..특히 외주업체나 프리랜서 분들과 작업을 하다보면 자신만의 스타일을 고집하기도 애매한 경우가 허다합니다. 여기, 좋은 CSS Naming Convention을 소개합니다. BEM은 크게 Block로 영역짓고, Element로 지정하며, Modifier로 상태를 표시합니다. .block {}.block__element {}.block--modifier {} 즉, __를 쓰는 경우와 --를 쓰는 경우를 분리한 것인데,__는 명사와 같은 이름을 사용합니다. (__button, __title, __menu 등)--는 동사와 같은 상태를 이름으로 사용합니다. (-..

프론트엔드 2016.08.17

부트스트랩보다 간단한걸 찾는 그대에게, spectre.

평안하신가요어느덧 세월은 흐르고 흘러 16년도도 8월입니다. 여기 적혀있는 글이 조금이나마 도움이 되었으면 좋겠습니다. css framework를 소개하고자 합니다.spectre 라고 하고, 일반적으로는 스펙터 라고 읽습니다. 불안, 유령이라는 사전적 의미를 가지고 있습니다. 스펙터의 장점과 단점을 추려본다면, (뒤이어 나올 스펙터의 테이블 class를 적용하여 장단점 테이블을 만들어 보았습니다.)

프론트엔드 2016.08.08