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

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

다음 글은 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)로 유..

JavaScript SDK를 활용한 Facebook 로그인 및 게시물 포스팅 방법을 소개해드리겠습니다.페이스북 계정만 있으면, 웹사이트에 10분만에 예제코드를 적용시킬 수 있습니다. 먼저 아래의 사이트로 접속합니다https://developers.facebook.com Facebook API를 이용하여 특정사이트나 앱에서 이용하기 위해서는 등록절차가 필요합니다.새앱 추가 버튼을 통해 앱을 등록합니다. 등록절차를 마치면 앱이 생성됩니다.앱을 선택하면 아래와 같이 대시보드에서 앱 ID와 앱 시크릿 코드를 확인할 수 있습니다.앱 ID와 앱 시크릿 코드는 Facebook API를 이용하는데 필요한 정보로 활용됩니다. 기본설정에서 플랫폼 추가 버튼을 눌러줍니다. 원하는 플랫폼을 선택해줍니다. 반영할 사이트의 UR..

[웹포넌트 차트] webPonent Visual Gauge Chart webponent CHART 2.0.6 버전이 릴리즈 되었습니다. (짝짝짝)2.0.6버전에 맞추어 새롭게 추가된 Gauge Chart에 대해 작성해보려 합니다. gauge chart는 크게는 원형 게이지(angular), 선형 게이지(Linear), 실린더(cylinder), 온도계(thermometer) 이렇게 크게는 4가지, 세부적으로는 8가지 타입으로 구성되어져 있습니다. 디자인 테마로는 기본 디자인(Basic), 블랙 디자인, 라이트 그레이 디자인 3가지 종류가 있습니다. 여기에 option과 style을 주어 원하는 색상의, 모양의 게이지를 만드실 수 있습니다.예를 들면, 하나의 실린더도 필요에 맞게, 나만의 스타일로 변경 가..

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

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

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

현재 IT업계에서는 기존 Monolithic 방식의 개발방식에 대한 많은 문제점을 인식하고 있는 상황입니다. 그에 따른 대안으로 Microservice Architecture나 Serverless Architecture등 다양한 방안 찾고 있지만 일반 기업에서 선뜻 아키텍처를 바꾸지는 못하는 상황입니다. 첫 번째 이유는 IT서비스 전문 기업 외에는 아직 일반기업에서 적용한 성공적인 사례가 찾아보기 힘든 점이 있고, 기업 내 자체 IT 인력이 이러한 MSA에 대한 이해도나 실제 구현 및 적용하기 까지 지식이나 경험이 부족한 상태입니다.두 번째로 이러한 부분을 해결하기 위한 솔루션 제품들이 아직 성숙되지 않은 문제도 있습니다. 하지만 불과 몇 년만 C/S 환경에서 웹 기반 아키텍처로 순식간에 변화했듯이 웹 ..

[JAVA]Composite 패턴과 재귀호출로 파일탐색기 만들기 - 1 요즘 날씨가 너무 덥습니다. 밤에 잠이 오지 않을 정도인데요, 그래서 저는 요즘 밤마다 책을 보고 있습니다.(!) (책을 읽으면 잠이 잘 온다지요ㅎㅎ) 몇 권 돌려가면서 그날그날 기분에 따라 읽고 싶은 책을 읽고 있는데, 그 중 한 권이 바로 'Java 언어로 배우는 디자인 패턴 입문'입니다. 이 책은 입문용이라서 그런지 디자인 패턴 이해를 돕기위해 예제 코드가 아주 단순화되어있습니다. 그래서 꽤나 술술 읽히는 책입니다. 그 중에 'Composite 패턴'이라는 디자인 패턴을 읽다가 문득 예제 코드를 좀 더 응용시켜보고 싶어졌습니다. 예제 코드는 '컴퓨터 파일 시스템' 구조를 패턴에 적용시킨 것인데, 실제로 java.io 패키지의 F..