Inspired World

티스토리 블로그에 애드센스 적용하기티스토리 블로그에 애드센스 좀 더 깔끔하게 다는 방법을 알아보겠습니다.상단, 하단은 티스토리 HTML/CSS 편집에 들어가서 ['##_article_ rep_desc_##'] 를 찾아위에 광고 코드, 아래에 광고 코드를 넣어서 하는 방법이 가장 보편적인데요.광고는 보통 상단, 하단도 좋지만 본문 중간에도 하나 있으면 더 효과적이라고 합니다.매번 글 쓸때마다 수동으로 광고 코드를 본문 중간에 넣어주는 방법도 있으나 번거롭기도 하고혹시나 광고 코드가 바뀌기라도 한다면 재앙이겠죠.그래서 간단히 JavaScript를 이용해서 광고를 본문 상단, 중간, 하단에 배치 하는 방법을 소개하려합니다. 광고 유닛 만들기구글 애드센스 사이트에 로그인 상단에 있는 내 광고를 클릭 반응형 선택..

망가진(?) ng-modelAngularJS를 사용할 때 angular-* 모듈들을 사용하고 Angular 방식으로 개발하는게 좋습니다. 하지만 성능 개선이나 다른 이유 때문에 Angular 방식을 벗어나서 jQuery plugin을 사용해야 한다든가 다른 방식으로 개발을 해야할 때가 생깁니다. 문제는 Model을 변경했으나 UI가 변경안될 때 생깁니다. “왜 내 ng-model 이 망가졌어!” AngularJS - Model이 작동하는 방식ng-repeat, ng-model, $resource, $http는 AngularJS의 내장 함수들이며, 각 함수들의 본연의 일과 모델을 변경하는 등의 일을 마치고 $scope.$apply()를 호출하도록 되어있습니다. 위 보이는 그림과 같이 “set up $wat..

AngularJS소개AngularJS는 구글(Google)에서 만든 Single Page App (SPA) 를 만들 때 반복되는 코드와 복잡한 코드를 줄이고 테스트를 쉽게 하도록 하기위해 만든 JavaScript MVC Framework입니다. Two-Way Data Binding 이라는 특징이 처음에 눈에 많이 띄는 요소입니다. 기존 jQuery나 JavaScript DOM API를 이용해서 어떤 데이터(Model)이 변할 때 이벤트 리스너나 특정 함수를 조건에 맞춰 호출할 때 UI를 변경했던 방식과는 달리 JavaScript 객체의 값을 변경하면 그것이 바로바로 UI에 변화가 반영되게 할 수 있다는 얘기입니다! 이런 특징 말고도 Model, Controller, Service, Dependency I..

CoffeeScript(커피스크립트)는 Verbose한 JavaScript문법의 단점을 보완하고 사람들이 헷갈리거나 실수를 할 수 있는 부분을 많이 가린 언어입니다. Python이나 Ruby를 하시는 분들이라면 문법이나 특징 등 비슷한 점이 많이 있습니다. 예) Indentation으로 code block을 인식 먼저 설치는 npm을 통해 하실 수 있구요 npm이 없다면 Node.js 패키지를 설치하면 npm이 설치 되므로 먼저 Node.js 를 설치하시면 됩니다. 설치 방법은 Node.js 공식 사이트에 가셔서 DOWNLOAD 버튼을 눌러 해당하는 OS에 알맞는 패키지를 설치합니다 설치 후에 sudo npm install -g coffee-script 를 쉘에서 입력하여 CoffeeScript를 설치하..

Callback 함수를 호출 할 때 Node.js 에서는 process.nextTick을 사용하지만 참고: JavaScript 콜백 함수의 활용 클라이언트 JavaScript에서는 전통적인 setTimeout을 이용하여 Event Loop을 지연합니다. 위 그림과 같이 JavaScript 는 Event Loop ( 이벤트 루프 )을 사용하는데요. Thread 와 달리 정확하게 말해서 완전 동시에 일을 할 수 없기 때문에 다음 일을 미루어 줌으로써 block이 되지 않게 하는 것이 포인트입니다. 그냥 단순 타이머로써 setTimeout 을 활용할 수도 있지만 callback 함수를 setTimeout을 통해 호출함으로써 이벤트를 지연할 수 있고 따라서 프로그램이 block 되지 않게 할 수 있습니다. 이것..

JavaScript에서 procedural programming과 object oriented programing을 모두 할 수 있습니다. 의외로 Object Oriented Programming ( 객체지향 프로그래밍 ), OOP 이 가능한지 모르시는 분들이 있어 이번 포스팅에서 소개하기로 했습니다. 먼저 객체 생성자 (Constructor)를 만들어볼까요? * 소멸자 (Destructor)는 따로 정의 안해도 됩니다. 기본적으로 JavaScript는 Garbage Collection을 하니까요. var Person = function ( info ) { this.height = info.height || '178cm'; this.weight = info.weight || '72kg'; this.nam..

JavaScript 에서는 콜백 함수를 아주 쉽게 구현할 수 있고 아주 강력합니다. 특히 AJAX요청과 함께 사용하면 정말 강력한데요. 예를 들어, AJAX요청을 해서 어떤 정보를 가져와 그 가져온 정보로 무엇인가를 처리해주고 싶습니다. 하지만 AJAX특성상 서버의 응답도 영향이 있기 때문에 같은 요청도 같은 컴퓨터일지라도 네트워크 환경 등 여러가지 변수 때문에 반응 속도가 천차만별입니다. 따라서 setTimeout 을 이용한다거나 여러가지 다른 방법도 있겠지만 보다 확실한 방법은 콜백 함수를 이용하는 방법입니다. 콜백함수를 이용하게 되면 "어, 나 이 작업 다 끝났으니까 뭐 할 꺼 있으면 해" 라고 메시지를 전달함으로써 확실히 가져온 데이터를 가지고 처리를 할 수 있게 됩니다. 이제 예제 소스를 보여드..