카테고리: Frontend

D3.js Axis API

D3.js axis API차트에서 축은 너무나 자주 사용되므로 축을 생성하는 기능을 d3.js안에 내장 되어있다. 축에서는 눈금을 표현해야하고 적당한 값을 넣어줘야하는 등 복잡한 일이 많다만, 이러한 복잡성을 d3.js가 간단히 처리해준다.2차원의 차트에서 축이 올 수 있는 자리는 상하좌우이므로 다음과 같은 함수가 제공된다. axis API d3.axis

D3.js

D3.js 란D3.js (Data-Driven Documents)는 데이터 기반으로 문서를 처리하는 자바스크립트 라이브러리 이다. HTML5, CSS, SVG(Scalable Vector Graphic) 문서 객체를 데이터 기반으로 접근하여 인터렉티브한 정보시각화(그래프 차트)를 구현할 수 있다. 현재 d3.js는 2016년 6월 새롭게 런칭된 v4.x버전

Javascript Scroll Top Bottom Move

JavaScript 스크롤 가장 위, 아래로 이동하기웹사이트 개발시 푸터 하단에 Top버튼 클릭시 상단으로 이동하는 이벤트 핸들러에 적용된다. body 스크롤 위로 이동 12345//Javascriptdocument.body.scrollTop = 0;//jQuery$('html, body').scrollTop(0); div (overfl

Angular.js v1.0 Tip

Angular.js v1.0 TipngBind를 고려해 보자 앵귤러를 사용하다 보면 인터폴레이션 문자열이 순간적으로 나오는데 왜 그러는지 또 어떻게 해결해야 하는지 의문이 든다. 인터폴레이션 문법을 사용했던 손쉽게 타이핑할 수 있기 때문인데 사실은 인터폴레이션을 사용한 곳의 모든 코드를 ngBind 디렉티브로 변경해서 사용한다. 그러면 스콥 변수에 데이터가

Require.js Plugin

Require.js 플러그인 텍스트 로딩과 HTML 템플릿 관리require.js는 몇 가지 플러그인을 제공한다. 이 중 text 플러그인은 JS 파일 외에도 CSS와 HTML같은 텍스트 파일도 불러올 수 있게 한다. 간단히 다음과 같이 사용한다. 12345define([ 'text!/template.html' // 플러그인은 플

Require.js

Require.js란requirejs는 자바스크립트 코드들을 모듈화 관리가 가능한 프레임워크 이며, AMD(Asynchronous Module Definition) 모듈 로딩 표준을 따르기에 기본적으로 모든 모듈을 비동기적으로 처리한다. 또한 자바스크립트 모듈의 의존관계등의 관리도 쉽게 할수 있게 도와준다. 모듈 정의와 사용 모듈을 정의하는 기본 형태는 다

[Chrome] Developer Tools Console

Chrome 개발자도구 콘솔 명령어브라우저별 개발자 도구가 계속 발전하고 있어서 웹 개발과 디버깅 시간이 많이 단축되었다.개발자 도구에 많은 기능 중 유용한 콘솔 API만 몇가지 정리한다. 크롬 개발자 도구 콘솔 팁 1.콘솔에서 selecter 사용이 가능하다. 12// $('tagName'), $('.class'), $

Backbone.js Sync

Backbone SyncBackbone.js의 Sync기능은 기본적으로 Restful한 서버에서 동작 하며, Ajax 데이터 전송을 당담한다.CRUD method를 지원(‘create’, ‘read’, ‘update’, ‘delete’) Backbone.sync is sync(method, model, [options]); create -> POST

Backbone.js Router

Backbone Router라우터 기능으로 MVC에서의 Controller 해당되며, location.hash(url 변경)의 변경에 따른 처리를 담당한다. 1234567891011121314var Router = Backbone.View.extend({ routes: { '': 'home&#x

Backbone.js Collection

Backbone CollectionModel의 집합. View와 연결되어, Model에 변화가 생길 때 손쉽게 View(UI)를 갱신할 수 있다. 12345678910111213141516171819202122232425262728293031323334353637383940//모델 선언var Book = Backbone.Model.extend({