Vue.js를 이용한 Todo리스트 예제 만들기(1) 프론트엔드 개발에 관심이 있으시다면 Vue.js를 한 번 쯤은 들어보거나 이미 프로젝트에서 사용하신 경험이 있으시리라 생각합니다. 저는 실무에서 Vue.js를 사용해볼 경험이 없어서, 'Vue.js라는 javascript 프레임워크가 있다.' 정도만 알고, 공식 사이트에 가서 대충 내용만 훑어본 적이 있습니다. 그런데 최근에 주위에서 실시간 데이터 바인딩이 필요한 프로젝트에서 Vue.js를 사용한다는 이야기를 들었습니다. 저도 머지않아 실무에서 사용할 일이 있을 것이라는 생각이 들어, 개인적으로 공부를 해보기로 하였습니다. 가이드 문서가 아주 잘 정리되어 있어서, 가이드 문서만 쭉 읽어내려가다보니 이론적으로만 접근하는 것은 무언가 부족한 느낌이 들었습..

안녕하세요. 계속해서 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('현재..

안녕하세요. 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 ..

안녕하세요.자바스크립트 라이브러리인 언더스코어에 다한 포스트를 하려고 합니다.매우 작은 용량과 간단한 사용이 장점이며자바스크립트로 array []나 object {}를 다룰때 필수적으로 필요한 라이브러리입니다.약 100여가지의 함수가 있지만 ES5, ES6를 거치면서 안쓰게 되는 함수도 있고 (ES5, ES6의 내장함수가 더 빠르기 떄문)쓰임이 겹치는 경우도 있습니다. 문장 몇개와 예제 하나면 이해가 되는 함수들이 있는 반면에 난해한 함수도 있습니다.활용도가 높은 함수 위주로 설명하겠습니다. 테스트를 진행할 샘플 데이터 입니다.var data = [ { "productName": "Change Gout", "mf_compony": "Jam3", "mf_country": "Canada", "date": "..

이 글은velocity.js 라는 javascript 기반 라이브러리가 애니메이션 효과에 대해서 jquery 라이브러리나 css보다도 성능이 우수하다는 글입니다.css가 jquery 애니메이션보다는 빠르다는건 이해가 잘 되는데자바스크립트 라이브러리가 css보다 빠르다는건 솔깃할만한 이야기 입니다.영문으로 되어 있어 번역 해봅니다.출처는https://davidwalsh.name/css-js-animation입니다. 구글이나 어도비 같은 회사들이 모바일 페이지에서 native app 같은 페이지 성능을 내는 이유는 무엇일까요?이 글은 velocity.js, GSAP 같은 DOM 라이브러리를 소개합니다. 이들은 jquery animation이나 css보다 빠릅니다. 우선 jquery부터 살펴봅니다.jquery..

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

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

TypeScript란?TypeScript는 대형 자바스크립트 애플리케이션에 적합한 대안 언어이다. TypeScript를 활용하여 개발하여도 기존의 소프트웨어 컴포넌트와 자바스크립트 라이브러리의 동작 방식과는 충돌하지 않는다. 또한, 동적인 모듈 로딩을 지원하여 네이밍 충돌 문제를 줄일 수 있게 해주며, 추가된 타입 체계를 바탕으로 생산성을 높여주는 여러가지 툴과 사례(정적 타이핑, 심볼 기반 네비게이션, 구문 완성, 코드 리펙토링 등)를 활용할 수 있다.TypeScript는 ES5 (ECMAScript 5) 문법의 상위 집합(Super Set)이다. 모든 자바스크립트 프로그램은 TypeScript 프로그램이기도 하다. TypeScript 컴파일러는 TypeScript 문법을 자바스크립트 문법으로 변환시켜..

HTML5 로 데스크탑 어플리케이션 만들기! 안녕하세요. CX 사업본부 MD 왓썹입니다. 이번 포스팅에서는 HTML5 로 데스크탑 어플리케이션을 만드는 방법을 알아보도록 하겠습니다. 어플리케이션은 music player 나 채팅 프로그램 등과 같이 어떤 종류의 작업을 돕기 위해 설계된 프로그램으로 응용 프로그램이라고도 합니다.따라서 데스크탑 어플리케이션은 windows 나 맥, 리눅스와 같은 os 에 설치된 응용 프로그램을 말하는데요. 지금까지 데스크탑 어플리케이션을 만들기 위해 윈도우에서는 C++ 을, 맥에서는 Object C 를 이용해 만들어왔기 때문에 웹개발자의 입장에서는 거리가 먼 존재라는 인식을 가지고 있었죠. 하지만 이제는 C++ 이나 Object C 에 대해 잘 모른다 할지라도 HTML과 C..