2015년 2월 17일 화요일

[JavaScript] 자바스크립트 Object(객체)

자바스크립트의 Object 데이터 타입

자바스크립트(ECMAScript)의 Object 데이터 타입은 다른 프로그래밍 언어의 Object 와 같이 여러개의 자료(Data)들과 함수(Function)들의 집합이다(자바스크립트도 객체지향프로그래밍언어(Object Oriented Programming language)이다). 주로 객체라 불리며 자바스크립트의 유일한 Composite/Reference Data Type 이다(다른 reference data type은 모두 object 타입의 하위 타입).

참고로 자바스크립트에서 Primitive Data Type들을 제외한 모든것들이 다, 심지어는 함수까지 모든게 Object 타입이다. 또한 Primitive Data Type 마져 접근될시에는 자바스크립트 VM에의해서 Object 타입으로 변환되어 사용된다. 즉 모든게 Object 타입이라 할 수는 없지만 모든게 Object 타입처럼 작동한다고 할 수 있다.
이러한 이유로 Object(객체) 자료형은 모든 자료형의 최상위 타입이라고 할 수 있다. 객체 자료형을 포함 하위 타입의 자료형들은 총 7개의 함수들과 속성들을 가진다.

자바스크립트(ECMAScript)의 Object 타입은 모든 다른 객체들이 파생된 Base Type 이다. Object 타입은 기본적으로 총 7개의 프로퍼티(Property)들과 메소드(Method)들을 가진다.
  • constructor
    • Object를 생성하는 생성자
  • hasOwnProperty(속성이름)
    • 객체에 주어진 속성이 있는지를 확인하는 메소드
  • isPrototypeof(Object)
    • 객체가 파라미터로 주어진 Object 의 Prototype 인지를 확인하는 메소드
  • propertyIsEnumerable( 속성이름)
    • 객체의 속성들이 for-in 구문으로 Enumerated(열거) 될 수 있는지
  • toLocaleString()
    • 객체를 실행 환경에 알맞은 형태의 String으로 표현한다
  • toString()
    • 객체를 String으로 표현한다
  • valueOf()
    • object 의 primitive value(원시 값)을 반환한다. 
    • 즉 객체에 가장 알맞는 표현을 string, number, boolean 값 중 1개로 반환한다.

    자바스크립트(ECMAScript)에서의 Object(객체)는 자바처럼 new 연산자를 이용해서 선언거나 Object Literal Notation을 이용해서 선언 될 수 있다. 그리고 개발자들은 새로운 객체를 선언하면서 또는 선언한 후, 속성과 기능(메소드)들을 추가함으로써 자신만의 객체를 만들 수가 있다.

    
    //New 연산자를 사용해서 선언
    var objectVariable = new Object();//이게 표준
    var improperObjectDeclaration = new Object;//괄호가 없어도 되지만 되도록이면 괄호를 붙이도록 하자.
    var demoObject1 = new Object();
    demoObject1.name = "Demo Object 1";//속성(Property) 부여
    demoObject1.message = "This is Demo Object";//속성(Property) 부여
    
    //Object Literal Notation을 이용해서 선언
    var demoObject2 = {
     name : "Demo Object 2",
     message : "This is Demo Object 2"
    };
    
    var demoObject3 = {
     "name" : "Demo Object 2",
     "message" : "This is Demo Object 3",
     3 : "Three", //숫자를 속성 이름에 사용할 수도 있다. 이 경우에는 이름이 자동으로 String 형으로 변환된 후 저장된다
            "This is" : 7798 //속성 이름에 스페이스가 들어갈 수도 있다.
    };
    
    var demoObject4 = {}; // new Object() 와 같다
    demoObject4.name = "Demo Object 4";
    demoObject4.message = "This is Demo Object 4";
    

    위와 같이 선언된 객체의 속성들은 Dot Notation 을 통하거나 Bracket Notation을 이용해서 접근이 가능하다
    단 Dot Notation을 이용할 경우에는 숫자로 이름 지어진 속성이나 이름에 스페이스가 들어가는 속성에는 접근이 불가능하다. 이는 JavaScript의 문법(Syntax)적 한계이니, 이러한 경우에는 Bracket Notation을 이용하면 된다

    
    // Dot Notation
    console.log(demoObject3.name);
    console.log(demoObject3.message);
    console.log(demoObject3.3); // Syntax 에러
    console.log(demoObject3.This is); // Syntax 에러
    demoObject3.message = "New Message";
    
    // Bracket Notation
    console.log(demoObject3["name"]);
    console.log(demoObject3["message"]);
    console.log(demoObject3["3"]);
    console.log(demoObject3["This is"]); 
    // Bracket Notation의 경우에는 이런식의 접근도 가능하다
    var propertyName = "name";
    console.log(demoObject3[propertyName]);
    demoObject3[propertyName] = "new Demo Object";
    


    2015년 2월 7일 토요일

    [Eclipse] 이클립스 Papyrus(파피루스) UML 클래스 다이어그램을 자바(Java) & C++ 코드로 변환하기

    papyrus 로고
    papyrus 로고

    지난번에 설명했던 Eclipse 개발팀에서 만든 모델링 툴인 Papyrus(파피루스), 파피루스는 추가 확장 소프트웨어로써 프로그램 모델링 툴을 지원한다. 보통 UML 다이어그램을 그릴 때 사용하며, UML 클래스다이어그램을 코드로 변환시키거나 코드를 UML 다이어그램으로 변환하는 기능도 제공한다. 언어는 현재 C++와 J링ava만을 지원한다.

    Eclipse 파피루스 간단 사용법은 다른글을 참고하도록 하자, 이 글은 파피루스로 그린 클래스다이어그램을 코드로 변환시키는 기능에 대한 글이다.

    우선 추가확장 프로그램을 설치하자. 새로운 소프트웨서 설치창에 Papyrus 업데이트 사이트를 등록해준다. 참고로 파피루스 버젼별 업데이트 사이트는 여기서 확인이 가능하다.

    현재 최신 버젼 이클립스인 Luna 용은 주소가 요렇다.
    http://download.eclipse.org/modeling/mdt/papyrus/updates/releases/luna
    저 주소를 등록해주도록 하자.

    파피루스 확장 repository 추가

    등록을 끝마친 후 사이트를 골라 아래 체크박스 옵션에서 Group items by category 체크를 해제해주면 아래와 같은 추가 확장프로그램 리스트들을 보게 될것이다. 




    자바(Java) 프로그래머들은 필요에 따라 아래 2개를 선택한 후 설치하고
    • Papyrus Java class Generator (Incubation)
      • 다이어그램 -> 자바코드로
    • Papyrus Java Reverse (Incubation)
      • 자바 코드 -> 다이어그램으로
    C++ 프로그래머들은 
    •   Papyrus C++ profile, view and code generation (Incubation)
    를 설치하도록 하자.




    아직 설치가 끝난게 아니다. Papyrus Java classes Generator & Reverse 는 QVT Operational SDK 라는 추가 라이브러리를 요구한다. 만약 이걸 설치하지 않을시에는, 코드 변환을 하려고 버튼을 누른 순간 아래와 같은 에러 메시지를 보게될것이다.

    No classes or packages produced from the transformation. Nothing is generated.
    and exception "org.eclipse.papyrus.java.generator.metamodel.jdt.jdtmm.visitor.JDTVisitorException"

    그렇니 다시 Install New Software 페이지에 들어가서, 이번에는 본인의 이클립스 업데이트 사이트를 선택한 후에 Modelling 카테고리 아래에서 QVT Operational SDK를 찾아 설치해주자자자




    이 설치를 완료했다면, 이클립스 재시작후 UML 클래스 다이어그램 페이지로 가서




    코드로 변환하기 원하는 클래스들을 선택한 후에, 우클릭 Java -> Generate Java Code를 선택하면 자동으로 자바클래스 파일들이 생성된다.

    2015년 2월 6일 금요일

    [Eclipse] 이클립스 Papyrus(파피루스)를 이용해서 UML 다이어그램 그리기

    papyrus 로고

    UML 다이어그램을 그리는 모델링 툴, Eclipse 확장 프로그램 Papyrus, Eclipse 개발팀에서 직접 개발했다. 이 툴을 이용해 클래스 다이어그램(Class Diagram), 엑티비티 다이어그램(Activity Diagram), 시퀀스 다이어그램(Sequence Diagram) 등 각종 UML 다이어그램을 그릴 수가 있다

    우선 Eclipse 를 켜 본인 Eclipse 버젼에 알맞는 Papyrus 를 다운로드 하자.
    Modelling 카테고리에 있다.

    이클립스 파피루스 소프트웨어 설치 페이지
    이클립스 소프트웨어 설치 페이지


    Papyrus UML 소프트웨어를 골라 설치하면



    새로 만들기 창


    새로 만들기 창에 이런 문서들을 보게 될 것이다. 파피루스 모델을 생성하자


    파피루스 모델 언어 설정 페이지



    언어는 UML로 고르고 완료를 누르게 되면 아래와 같은 창을 보게될 것이다.


    아직은 텅 빈 파피루스 모델

    아직은 텅 비었다. 다이어그램을 생성해야지 그림을 그릴수가 있다

    Perspective 왼쪽 아래 Model Explorer에 model 을 우클릭 하면


    새 다이어그램 생성 메뉴


    이런 메뉴를 보게되는데, 여기서 필요한 다이어그램을 클릭하면(나는 Class Diagram 을 클릭했다),
    아래와 같은 팔레트가 오른쪽에 생성될 것이다, 거기서 필요한 다이어 그램을 끌어서 놓은 다음 속성을 수정하면 쉽게 UML 다이어그램을 그릴 수가 있다.



    파피루스를 이용해 생성된 UML 클래스 다이어그램


    혹시 저런 화면 구성이 보이지 않는다면
    이클립스 Perspective를 Papyrus 용 Perspective로 바꿔주자

    이클립스 Perspective 설정 페이지

    2015년 1월 28일 수요일

    [JavaScript] 자바스크립트 String(문자열) 자료형

    자바스크립트 String 데이터 타입

    16bit 유니코드 문자들로 이루어지는 String(문자열) 데이터 타입 이다. 이 또한 다른 프로그래밍 언어에서도 볼 수 있는 흔한 타입이다. 자바스크립트(ECMA 스크립트)에서 String 타입은 쌍따옴표(")와 단따옴표(') 로 문자열을 감쌈으로써 선언이 가능하다. 단 문자열을 감싸는 따옴표가 같은 따옴표여야 한다.

    
    var stringVar1 = "StringTest1";
    var stringVar2 = 'StringTest2';
    var stringVar3 = "StringTest2';//에러가 나게된다.
    
    

    String 데이터 타입의 메모리 관리


    사실 String(문자열) 타입은 따로 특별히 다룰게 없는데, String 데이터 타입의 메모리 매니지먼트는 알아두는게 좋다. Number, Boolean 등 다른 Primitive Data Type(원시 자료형)들이 변수 값의 수정시 추가적인 메모리 할당을 하지 않는 것에 반해, String 자료형은 변수값이 변경될 때마다 새로운 메모리를 할당해줘야한다. 물론 이건 자바스크립트 엔진이 할 일이니 코딩시 개발자들이 따로 특별한 코드를 부가해야하는 것은 아니다. 이런 일들이 벌어지게되는 이유는 바로 String(문자열) 데이터 타입이 이름에서도 잘 알 수 있듯 "문자들의 열"로 이루어져있기 때문이다. 16bit 유니코드 문자들의 열로 이루어진 ECMAScript 의 String 자료형은 문자 1개당 2바이트의 메모리를 소모하게 되다. 그렇다면 한번 생각해보자.

    ABCDEFGH 라는 스트링을 저장해야한다고 할 때

    [A][B][C][D][E][F][G][H]
    처럼 16 바이트의 연속되는 메모리를 할당하는게 좋을까?

    아니면

    [A][ ][ ][ ][ ][ ]
    [ ][B][C][D][ ][ ]
    [ ][ ][F][G][ ][E]
    [ ][ ][ ][H][ ][ ]
    처럼 각기 떨어져있는 메모리들을 할당하는게 좋을까?

    물론 당연히 전자의 경우가 훨씬 효과적일 것이다. 전자의 경우에는 메모리가 서로 연속되있어, RAM에 엑세스할시에 후자에 비해 훨씬 빠른속도로 전체 엑세스가 가능하다. 하지만 후자의 경우에는 각기 떨어져있는 메모리에 엑세스하느라 전자에 비해서는 느리게 읽게될것이다. 물론 이는 매우 미세한 차이지만, 메모리 관리의 효율성 관점으로 보았을 때, 후자의 경우대로 관리해서는 절대로 안될 것이다.

    어쨋든 이게 String 값이 변경될 때 새로운 메모리를 할당해야된다는 것과 무슨 관련이 있나면,
    스트링 변수에 주어진 메모리 바로 옆에 새로운 값이 할당되는것과 같은 아래의 경우와 같은 일이 발생할 수도 있다는건데

    [A][B][C][D][E][F][G][H][0][N][E][W][V][A][L][U][E]

    만약 이 경우에 새로운 메모리블록을 할당하지 않고 ABCDEFGH라는 스트링 값에 IJK를 추가해야 한다면, 아마 [0][N][E][W]가 저장된 메모리와 그 뒤의 메모리들이 순차적으로 뒤로 밀려나거나(매우 비효율적인 방법), [0][N][E][W]라는 메모리를 그냥 무시하고 [I][J][K][0]로 그냥 덮어 씌울 수도 있겠다. 하지만 이 경우에는 결국 NEWVALUE라는 값이 저장된 변수를 훼손하게 된다. 이런 이유 때문에 스트링값의 변경이 있을시에 새로운 메모리 블락을 할당해주고, 그 전 블락을 풀어주게 되는건데, 코드로 보자.

    
    var stringVar1 = "ABCDEFGH";//[A][B][C][D][E][F][G][H]
    var stringVar2 = 'NEWVALUE';//[A][B][C][D][E][F][G][H][0][N][E][W][V][A][L][U][E]
    var stringVar1 = stringVar1 + "IJK";
    
    

    위의 코드가 실행되면 메모리 할당은 아래와같이 바뀌게 된다

    [ ][ ][ ][ ][ ][ ][ ][ ][ ][N][E][W][V][A][L][U][E]
    [ ][ ][ ][ ][ ][ ][ ][ ][ ][ ][ ][ ][ ][ ][ ][ ][ ]
    [A][B][C][D][E][F][G][H][I][J][K][ ][ ][ ][ ][ ][ ]

    이 모든게 개발자들이 보는 모니터 뒤에서 일어나는 일이기는 하지만, 이 때문에 자바스크립트 엔진 String 데이터 타입 관리에 따라서, String Concatenation(문자열 연결) 작업에 걸리는 시간이 좌지우지 되고, 나아가선 자바스크립트 엔진의 성능차이가 발생하는 원인이 되기도 한다.

    String(문자열) 타입의 자동 타입 변환


    타 자료형의 String 타입으로의 변환은 toString() 함수나, String() 함수로 손 쉽게 가능하다.
    그리고 코드 작성시 보게되는 텍스트를 그대로 스트링타입으로 변환하니, 변환 불가능한 값이 없다고 말할 수 있다

    
    var boolTrue = true;
    var stringVar1 = boolTrue.toString(); //"true"
    
    //toString()함수는 파라미터로 radix를 넣어서 2, 8, 10, 16진수로 변환 할 수도 있다.
    var var1 = 33;
    var stringVar1 = var1.toString(2); //"100001"
    var stringVar2 = var1.toString(8); //"41"
    var stringVar3 = var1.toString(16); //"21"
    
    //단 null 이나 undefined 값은 toString() 함수로 변환하기가 불가능하다. 
    //그렇기 때문에 필요한 경우에는 될 수 있으면 String() 함수를 이용해주자
    
    var stringVar4 = String(null); //"null"
    var stringVar5 = String(undefined); //"undefined"
    var stringVar6 = String(2); //"2"
    
    //또 따옴표를 이용할 수도 있다
    var stringVar7 = '\"' + var1 + '\"'; //"33"
    
    

    2015년 1월 27일 화요일

    [JavaScript] 자바스크립트 Boolean 자료형

    자바스크립트의 Boolean 데이터 타입

    어떤 프로그래밍 언어에도 존재하는 자료형, 값이 true 또는 false, 총 2개밖에 존재하지 않는 자료형, 바로 Boolean 자료형이다. Boolean 자료형은 아래와 같이 선언된다.

    
    var trueVariable = true;
    var falseVariable = false;
    
    //대소문자를 가리니, True 나 False 를 어싸인할시에는 에러가 뜬다
    
    var trueVariable0 = True;
    var falseVariable0 = False;
    

    Number 자료형이 Number() 함수, parseInt() 함수를 사용해서 자료형을 변환할 수 있는 것처럼 Boolean 자료형도 Boolean 함수를 이용해서 다른 자료형을 Boolean 자료형으로 변환이 가능하다.

    
    var booleanVar1 = Boolean("String");
    var booleanVar2 = Boolean(null);
    var booleanVar3 = Boolean(undefined);
    var booleanVar4 = Boolean(4);
    var booleanVar5 = Boolean(true);
    

    자바스크립트 Boolean() 함수 자료형 변환 표


    자료형
    변환시 Boolean 값
    truefalse
    Booleantruefalse
    String공을 제외한 모든 스트링 값스트링이 "" 처럼 공일때
    Number0 보다 큰 모든 수들0 or NaN
    Objectnull 을 제외한 모든 object 들null
    Undefined해당 사항 없음undefined
    Null해당 사항 없음null