[카테고리:] 프로그래밍

작성일자

[JavaScript] 모조 클래스

자바스크립트에서 클래스(엄격히 말해 모조 클래스)를 작성하는 내용에 대한 정리입니다. 일반적으로 다음과 같이 5단계에 걸쳐 클래스를 정의합니다.

  1. 생성자 함수 정의
  2. 인스턴스 프로퍼티 정의
  3. 인스턴스 매서드 정의
  4. 클래스 매서드 정의
  5. 클래스 프로퍼티 정의

위의 5단계를 Complex라는 클래스를 자바스크립트 방식으로 정의해 보는 예를 통해 정리하면, 먼저 생성자 함수의 정의는 다음과 같습니다.

function Complex(real, imaginary)
{
    // ..
}

클래스의 이름은 첫자를 대문자로 하여 비록 함수이지만 클래스라는 의미를 강조합니다. 다음으로 인스턴스 프로퍼티를 정의하면…

function Complex(real, imaginary)
{
    this.x = real;
    this.y = imaginary;
}

생성자 함수 안에 this라는 키워드를 통해 새로운 인스턴스 변수를 추가합니다. 이제 인스턴스 매서드를 정의하는데, 매서드는 하나의 클래스에 대한 모든 인스턴스가 공유하도록 하기 위해 prototype 객체를 사용하며 예로 다음과 같습니다.

Complex.prototype.magnitude = function()
{
    return Math.sqrt(this.x * this.x + this.y * this.y);
}

이제 클래스 매서드를 추가하는 방법입니다. 클래스 매서드는 인스턴스를 대상으로 하는 것이 아니므로 this를 사용할 수 없으며 생성자 함수(자바스크립트에서 클래스) 이름으로 접근할 수 있습니다. 예로 다음과 같습니다.

Complex.sum = function(a, b)
{
    return new Complex(a.x+b.y, a.y+b.y);
}

끝으로 클래스 프로퍼티입니다. 

Complex.ZERO = new Complex(0, 0);

이 글은 인사이트 출판사의 자바스크립트 완벽가이드를 참고로 하여 정리한 글입니다.

작성일자

[JavaScript] 함수 인자의 타입 검사

자바스크립트에서 함수를 만들어 사용할때 그 함수의 인자에 대한 타입은 암묵적인 약속입니다. 이 말은 “이 함수의 인자의 타입은 … 이다”라는 개념에 지나지 않다는 의미입니다. 그러한 개념에서 벗어나 보다 엄격하게 그 타입을 지키도록 하는 방어책이 필요할때 아래의 예를 참고하고자 이 글로 정리해 둡니다.

function sum(a /* Array */)
{
    var isArray = (a instanceof Array);
    var isLikeArray = (a && typeof a == "object" && "length" in a);
  
    if(isArray || isLikeArray)
    {
        var total = 0;
    
        for(var i=0; i        {
            var element = a[i];
            if(!element) continue;
            if(typeof element == "number") 
                total += element;
            else 
                throw new Error("원소는 숫자여야 함");
        }

        return total;
    }
  
    throw new Error("인자는 배열이어야 함");
 }

var a = [1,2,3,4,5];
try 
{
    document.write(sum(a));
} 
catch(e)
{
    document.write(e.message);
}

3번 코드가 전달 받은 인자의 타입이 배열인지를 확인하는 것이고 4번은 배열과 비슷한 객체인지, 즉 length 프로퍼티를 제공하는지를 확인하는 코드입니다. 14번 코드는 배열의 원소가 숫자인지를 확인하는 코드입니다.

이 코드는 인사이트의 JavaScript 완벽 가이드라는 책의 코드를 조금 변형한 것입니다. 자바스크립트에 관해 좋은 책이라고 생각합니다.

작성일자

[JavaScript] 가변 길이 인자를 갖는 함수

자바스크립트는 긍정적으로 본다면 매우 유연한 언어입니다. 이러한 유연한 부분 중 함수에서 가변 길이 인자에 대한 예를 정리해 봅니다. 함수에서 가변 인자를 사용하기 위해 arguments라는 식별자를 사용합니다.

function func(/*a, b*/)
{
    if(arguments.length != 2)
    {
        throw new Error("인자가 옳바르지 않음.");
    }

    var arg0 = arguments[0];
    var arg1 = arguments[1];

    document.write(arg0 + ", " + arg1);
}

try 
{
    func(1,2);
} 
    catch(e)
{
    document.write("catch error");
}

위의 코드에서 정의한 함수 func는 2개의 인자를 받도록 되어 있습니다. 2개의 인자인지 arguments의 length 속성을 사용합니다. 각각의 인자는 마치 배열처럼(배열은 아님) 0부터 시작하는 인덱스 값을 사용합니다.

끝으로 arguments는 callee라는 프로퍼티를 통해 자신에 대한 함수 자체를 참조할 수 있도록 합니다.

작성일자

[ActionScript] GroupingCollection2 클래스를 이용한 그룹핑(Grouping)

플래시빌더 4.7은 언제 정식 출시되나.. 지금 사용하고 있는 4.6의 차트 컴포넌트에 약간의 버그가 있고 4.7에서는 해결되기를 기대해 봅니다. 특히 4.7은 스레드 개념을 지원함으로써 더욱 유연한 개발이 가능할 것으로 기대됩니다. 이 스레드 개념은 HTML5의 Worker 기능에서 많은 힌트를 얻어 이번에 추가한 기능이 아닌가 싶습니다. 여튼………

어떤 데이터가 있다면.. 동일한 값을 가지는 녀석들을 묶는데.. 이렇게 1차적으로 묶인 녀석들에 대해서 또 한번 다른 필드의 동일한 값으로 또 묶어 그룹핑하는데 요긴하게 사용한 클래스입니다. 이 클래스의 존재를 모른체 직접 코드를 한땀.. 한땀.. 땀 한방울.. 땀 두방울 흘리며 코딩했답니다. 물론 지금은 이 클래스를 이용해 기능 개발을 했구요.

var grouping:GroupingCollection2 = new GroupingCollection2();
grouping.source = new ArrayCollection(rows);
grouping.grouping = new Grouping();
grouping.grouping.fields = 
    [ new GroupingField("FIELD1"), new GroupingField("FIELD2") ];
grouping.refresh();

성의없이.. 막 코드로 시작합니다. rows가 그룹핑할 배열(Array)입니다. 이 배열의 요소는 FIELD1과 FIELD2라는 이름의 속성값이 있습니다. 일단 FIELD1에 대해 동일한 요소들을 한번 묶고.. 다시 이렇게 묶인 그룹들을 대상으로 FIELD2로 또 한번 묶습니다.

결과적으로 그룹핑된 컬렉션은 grouping 객체(위의 코드 참조)의 getRoot 매서드를 통해 얻습니다. getRoot()의 결과에 대한 클래스 타입은, 배열을 대상으로 그룹핑 했으므로 ArrayCollection 타입입니다.

그룹핑되기 이전에는 단순한 1차원 배열이였던 것이 GroupingCollection2 클래스를 통해 그룹핑되면 3차원 배열이 됩니다. 이 3차원으로 재가공된 배열(실제로는 ArrayCollection 클래스 타입)의 원소들을 하나 하나 참조해야할 때가 있습니다. 설명하기엔 무척….. 염병같고……………. 걍 코드.. 예제 코드 나갑니다. ;-|

var groupingRows:ArrayCollection = grouping.getRoot() as ArrayCollection;
var driverNameAndCarNumber:Object = new Object();
for(i=0; i{
    var D1:Object = groupingRows.getItemAt(i);
    D1["iconIndex"] = 0;
     
    var carName:String = D1.GroupLabel;
    var D2:ArrayCollection = D1.children as ArrayCollection; 

    for(var j:int=0; j    {
        var item:Object = D2.getItemAt(j);
        var driverName:String = item.GroupLabel;
        item["iconIndex"] = 1;
      
        var D3:ArrayCollection = item.children as ArrayCollection;
        for(var k:int=0; k        {
            var lastItem:Object = D3.getItemAt(k);
            lastItem["iconIndex"] = 2;
        }
      
        var sortField:SortField = new SortField();
        sortField.name = "GroupLabel";
        var sort:Sort = new Sort();
        sort.fields = [sortField];
        D3.sort = sort;
        D3.refresh();
    }
}

이 코드는 그룹핑된 내부의 요소드를 또 다시 정렬해줌과 동시에 아이콘 적용을 위해 아이콘 인덱스 번호를 넣어주는 코드입니다. 시간이 지난후에 이 코드를 보고 제 스스로 이해할 수 있다면… 과연 그럴 수 있을까.. 싶습니다.,

작성일자

[ActionScript] 날짜로 요일 계산하기

아래의 getDay 함수는 액션스크립트로 구성된 요일을 계산해 반환하는 함수입니다. 이 getDay 함수의 파라메터는 날짜로써 년(예:2012), 월(1 ~ 12), 일(1 ~ 31)입니다.

private function getDay(year:int, month:int, day:int):String
{
    const dayStrings:Object = {
        0:"일요일",
        1:"월요일",
        2:"화요일",
        3:"수요일",
        4:"목요일",
        5:"금요일",
        6:"토요일"
    };
    
    if (month == 1 || month == 2) year--;
    month = (month + 9) % 12 + 1;
    var y:int = year % 100;
    var century:int = year / 100;
    var week:int = ((13 * month - 1) / 5 
        + day + y + y / 4 + century / 4 - 2 * century) % 7;
    if (week < 0) week = (week + 7) % 7;

    return dayStrings[week];
}

이처럼 날짜로부터 요일을 계산하는 함수를 직접 작성해 사용할 수 있지만 다음처럼 액션스크립트에서 이미 제공하고 있는 Date 클래스를 사용해 보다 간단히 요일을 계산할 수 있습니다.

 const dayStrings:Object = {
        0:"일요일",
        1:"월요일",
        2:"화요일",
        3:"수요일",
        4:"목요일",
        5:"금요일",
        6:"토요일"
    };
     
    var d:Date = new Date(2012, 10-1, 4);
    Alert.show(dayStrings[d.day]);

여기서 주의해야할 점은 월(Month)은 1부터 시작하지 않고 0부터 시작한다는 것입니다. 그래서 11번 코드에서 지정한 (10-1)은 9월이 아니라 10월을 의미합니다.