cat tag


node.js - listen EADDRINUSE 에러. JavaScript

node.js:201

        throw e; // process.nextTick error, or 'error' event on first tick

              ^

Error: listen EADDRINUSE

    at errnoException (net.js:646:11)

    at Array.0 (net.js:747:26)

    at EventEmitter._tickCallback (node.js:192:41)


이미 이 어플리케이션이 실행 중이거나, 해당 포트가 사용 중이거나 하는 상황이므로,

어플리케이션이 실행 중인지, 해당 포트가 사용되고 있는지 체크할 것.


[책] 코딩 호러의 이펙티브 프로그래밍 Vook

프로그래밍 공부를 처음 하면서부터 꾸준히 들었던 이야기들. 하지만 실제 사용하고 적용하기란 어렵지...


[책] 이카루스 이야기 Vook

개인적으로 좋아하는 취향의 내용을 가진 책.

http://www.yes24.com/24/goods/11816111

jQuery plugin 생성 기본 jQuery

제이쿼리를 사용해서 개발을 진행한 경험은 여러번 되지만, 실제 제이쿼리 플러그인을 직접 만들어서 사용해본 적은 얼마 되지 않았지만, 상당히 흥미롭고 재미있는 부분이다.

개발을 하면서 지금까지 남이 짜놓은 제이쿼리나 플러그인들의 소스를 살펴보면서 헤맸던 경험이 상당히 많았고, 앞으로도 많을 것 같은데, 제이쿼리 플러그인을 간단하게 나마 직접 만들어보니 제이쿼리를 사용하기만 했었거나, 자바스크립트를 함수만 만들어서 사용했었던 것보다 훨씬 고차원의 개발을 진행할 수 있었던 것 같다.

실제 제공되고 있는 제이쿼리 플러그인의 경우 특정 태그와 클래스로 작성된 엘리먼트를 추가시켜 놓으면 이 엘리먼트를 통해 속성과 함수만 정의해서 콜백으로 넘겨준다면, 간단히 플러그인을 사용할 수 있는데 예를 들어 slidejs의 경우 

<div id="slides">
<img src=""/>
<img src=""/>
<img src=""/>
<img src=""/>
<img src=""/>
</div>
엘리먼트를 작성 후

$("#slides").slidesjs({
width:940,
height:520
});
이런 식으로 간단히 속성만 정의해준다면 해당 엘리먼트들을 화려하게 슬라이드할 수 있는 이벤트를 제공해준다.
물론, 해당 플러그인의 자바스크립트 소스가 존재한다는 가정 하에 실행되는 것이다.
아마 해당 플러그인 내부의 선언부에 $.fn.slidesjs = function(config) {}와 같은 소스코드가 담겨져 있을 듯하다.
해당 플러그인의 확인이나 참고는 http://www.slidesjs.com/ 여기에.

처음엔 기존에 있던 제이쿼리 플러그인들을 까본다거나 고치는 등의 작업을 통해 소스코드를 파악하고 직접 만들어보려는 작업을 했음에도 불구하고 특정 엘리먼트 내부에 리스트를 생성하는 간단한 플러그인을 만드는데, 엄청 고민하면서 코딩했던 기억이...
만든 플러그인을 실제 사용하는 코드는 제이쿼리 사용하는 코드와 비슷하게 사용된다.


* 사용 코드
var list = $(element).styledlist('ul', 'list');
list.add({
label : '',
id : '',
class : ''
});
// 이 코드면 내부에 ul 엘리먼트를 생성하면서 기본 아이템 하나 추가
// 단, 아이템 하나마다 내용이 각가 다르므로 아이템을 추가할 때마다 add 함수를 호출해야 함
// 추가하려는 아이템을 소트할 경우
list.sort();
// 를 호출. 기본옵션은 아이디로 되어있지만, 실제 다른 정보로 소트할 경우 약간의 코드가 수정됨


* 플러그인 코드
(function($, undef) {
    $.fn.styledlist = function(list, clazz) {
        var $this = initialize(this, list, clazz);

        this.add = function(data) {
            var item = new Item(data);
            $this.append(item);
            return item;
        };

        this.sort = function() {
            $this.children('li').sort(function(a,b){
                return $(a).attr("id") < $(b).attr("id");
            }).each(function(){
                $this.prepend(this);
            })
        };

        this.getAll = function() {
            return $this.children('li');
        };

        return this;
    }

    function initialize(root, list, clazz) {
        if (list == 'ul') {
            var ul = $('<ul></ul>');
            ul.addClass(clazz);
            root.append(ul);
        } else if (list == 'ol') {
            var ol = $('<ol></ol>');
            ol.addClass(clazz);
            root.append(ol);
        } else {

        }

        var styledlist = root.find(list);

        return styledlist;
    }

    function Item(options) {
        var data = $.extend(true, {}, $.fn.styledlist.default_item_option, options);

        this.item = $(
                '<li>' +
                (data.number ? ('<span>' + data.size + '</span>') : ('')) +
                '<a data="' + data.id + '">' +
                data.title +
                '</a>' +
                '</li>'
        );

        for (var i = 0; i < data.list.length; i++) {
            if (data.card == data.list[i].cardId) {
                this.item.find('span').addClass('exist');
                break;
            }
        }

        if (data.create_time !== null) this.item.attr('id', data.create_time);
        this.item.on('click', data.onclick);
        this.item.on('mouseover', data.mouseover);
        this.item.on('mouseout', data.mouseout);

        return this.item;
    };

    $.fn.styledlist.default_item_option = {
        number : true,
        size : 0,
        create_time : null,
        id : '',
        title : '',
        card : '',
        list : [],
        onclick : function() {},
        mouseover : function() {},
        mouseout : function() {}
    }
})(jQuery);

http://learn.jquery.com/plugins/basic-plugin-creation/ 에 기본설명이 잘 되어 있으므로, 참고!

자바스크립트 객체지향 흉내내기 JavaScript

자바스크립트는 기본적으로 함수를 만들어서 많이 사용하지만, 객체를 생성해서 코드를 개발하는 것을 흉내? 낼 수 있다.

function Timeline(id) {
// private field
this.id = id;

// private function
this.initialize = function () {
// initialize
};
}

// public function
Timeline.prototype.addTimeline = function(data) {
// add time line

// use private function
var $this = this;
$this.initialize();
}


// 사용
var timeline  = new Timeline('timeline');
timeline.addTimeline($element);

실제 객체를 생성해서 개발을 진행할 수 있는데, 자바스크립트라는 언어 자체가 자유도가 원체 높기 떄문에, 여러 가지 형태로 개발을 해볼 수 있다.

객체를 생성하는 부분에서 initialize 함수에는 접근할 수 없다. 특정 필드에 접근을 하는 것도 get, set 함수를 생성해서 접근하는 방식을 취한다.



1 2 3 4 5 6 7 8 9 10