Javascript Scroll Top Bottom Move
JavaScript 스크롤 가장 위, 아래로 이동하기웹사이트 개발시 푸터 하단에 Top버튼 클릭시 상단으로 이동하는 이벤트 핸들러에 적용된다. body 스크롤 위로 이동 12345//Javascriptdocument.body.scrollTop = 0;//jQuery$('html, body').scrollTop(0); div (overfl
아카이브: 2017/2
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({
Backbone.js View
Backbone ViewModel을 어떻게 보여줄지 View와 관련된 Event를 Listen & React 하는 역할.화면에 나타나는 UI를 담당하며 프론트엔드의 특성상 view가 controller의 성격도 가지고 있다. 12345678910111213141516171819<input type="input" placehol
Backbone.js Model
Backbone ModelMVC패턴에서의 Model로 개별 데이터를 나타낸다. 12345678910111213141516171819202122232425//모델 선언var Person = Backbone.Model.extend({ //모델 생성시의 초기값 설정 defaults: { age: 30, nam