[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라는 프로퍼티를 통해 자신에 대한 함수 자체를 참조할 수 있도록 합니다.

[GIS] FingerEyes-Xr, 핑거아이즈로 생성한 밀집도(밀도도)

아래의 이미지는 웹 GIS 엔진인 핑거아이즈(FingerEyes-Xr)로 생성한 밀집도입니다. 흔히 밀집도는 Kernel Density 알고리즘을 사용해 계산됩니다. 알고리즘 명칭에 Density가 사용되어 밀집도라는 용어 대신 밀도도라는 용어가 사용될 수도 있습니다.


위의 밀집도의 대상 데이터는 교통사고 발생 지점입니다. 해외나 국내에서 웹기반의 지도 엔진에서 제공되는 밀집도 분석 결과는 HeatMap이라는 기능에서 사용된 오픈소스를 그대로 적용하거거나 개선해 구현함으로써 그 품질이 떨어집니다.

핑거아이즈는 오픈소스이므로 위의 밀집도 결과 이미지를 생성해 내는 알고리즘에 대한 코드가 제공됩니다. 혹.. 관심이 있으신 분은 해당 소스를 참고하시기 바랍니다. 핑거아이즈의 소스코드는 http://www.gisdeveloper.co.kr/?page_id=3916의 자료실을 통해 누구나 다운로드 받으실 수 있습니다.

[GIS] FingerEyes-Xr, ShapeMapLayer의 포인트에 이미지 심벌 설정

수치지도 데이터를 서비스 받아 화면에 표시하는 레이어인 XrShapeMapLayer는 도형 데이터를 표현하는 다양한 방법을 제공합니다. 단순히는 일괄적인 색상 심벌에서부터, 속성값에 따라 달라지는 다양한 심벌에까지.. 이 포스트는 포인트 타입의 수치지도 데이터에 대해서 이미지 심벌을 지정하는 코드 예입니다.

layer = new XrShapeMapLayer("LAYER_NAME", "http://www.gisdeveloper.co.kr/Xr?layerName=SPTBL");
shpTheme = layer.theme as XrSingleColorTheme;
 
var ImgSym:XrImageMarkerSymbol = new XrImageMarkerSymbol(   
    {borderEnable:false, markerUrl:"http://www.gisdeveloper.co.kr/images/0.png"});

shpTheme.markerSymbol = ImgSym;

map.layers.addLayer(layer);

포인트 타입의 수치지도의 경우 원, 사각형 등과 같은 단순 도형에서부터 위의 글에서처럼 이미지 뿐만 아니라 특수 기호 표시를 위한 텍스트 심벌을 지원합니다.