AI Convergence

ReactJS(리액트)는 자바스크립트로 UI 컴포넌트를 만드는 프레임워크이다. 만들어진 컴포넌트를 사용할 수도 있고, 수정할 수 있고, 조합할 수 있으며 자신만의 UI 컴포넌트를 직접 만들 수 있다. 즉 프론트앤드 UI의 화면을 컴포넌트 조합으로 만들고, 화면의 데이터를 앵귤러처럼 자동 업데이트 해주지만 앵귤러와 틀리게 단방향 데이터 바인딩이다. 리액트는 앵귤러(AngularJS)의 지시자(Directive)와 비교되지만 훨씬 간단하고 성능 또한 월등하다. 이제 배우고 익혀 사용할 때가 되었다. 

개념잡기 

  - 쿼라(Quora)에서 이야기하는 장/단점을 살펴보자. 

     장점

       + Virtual DOM 을 JS로 구현해서 UI 컴포넌트의 속도가 엄청 빠르다. 

       + Component의 재사용과 복잡한 UI 컴포넌트 조합이 가능하다.

       + Uni-direction(단방향) 방식하에 데이터가 변경되면 관련된 모든 UI 컴포넌트가 변경된다.

       + commonJS / AMD 패턴과 잘 조합되고, 크롬 익스텐션을 통해 디버깅할 수 있다. 

     단점

       + 초보자들에겐 역시 러닝 커브가 존재한다.

       + 다른 프레임워크가 동작하기 위해선 부가적인 작업들이 필요하다. 

       + 앵귤러처럼 router, model등 Frontend Full Framework을 제공하지 않아서 꼭 다른 프레임워크와의 조합이 필요하다. 

  - 처음에는 무조건 공식 홈페이지의 가이드를 보자. 

      + Quick Start

      + Advanced Guides

      + Reference

  - 프리젠테이션으로 정리해 보자. 재미있게 진행되니 WTF는 날리지 말자.

    + jQuery to React 가이드

       내용중에 앵귤러를 사용하고 있는 개발자라면 앵귤러의 지사자에서 scope: { createXXX: '&' } 방식으로 자식의 부모의 함수를 호출 할 수 있다

       그리고 자식, 부모간에 scope 객체의 상속을 통해 scope 속성을 접근할 수 있다는 것도 알 수 있다. 

    + Flux 소개 아래 영상을 보면 react가 Virtual DOM을 통해 더 낳은 성능과 단순성을 통한 버그 가능성 제거를 이룰 수 있는지 가늠할 수 있다

       * Flux 사이트

오늘은 강남토즈에서 김영보선생님의 자바스크립트 객체지향 세미나를 듣고 있다. 간단히 요약해 본다 

1. OOP

  - object.method() : 전형적인 OOP 형태 

  - Object is "{}" 즉, JSON 포멧

     object is "new Function"

  - 자바스크립트에서 function은 함수가 아니라 키워드일 뿐이다 

    ex) function sales() {}  -->  { "sales" : function(){} } 으로 대치가능하다

  - 수행 순서

     + 소스

       function A() {

   function B() {}

       } 

     + A() 호출하면 A안의 내용만 { "A" : function(){} } 만 만든다 { "B": function(){} } 은 안만든다.

       즉 수행하는 시점에 해석되고 객체로 적재되어 수행한다 

     + 초기 랜더링에 필요한 부분만 해석되어 수행하면 성능 향상을 할 수 있다

  - oop의 information hiding을 위하여 closure를 사용한다 

2. 메커니즘

  - 메모리 stack 생성 -> Execution Context 저장하고 EC단위로 수행한다 

  - Executable Code type : global code, function code, eval code (eval 코드는 쓰지말라! 5차부터 에러남)

  - Execution Context : Executable code의 실행 단위.  Context : 문맥, 처리단위, 묶음 

  - Stack안에 EC가 들어가는데 가장 먼저 만들어진것이 stack의 바닥부터 위로 채워넣는다. 수행은 위에서 빼서 수행 그때 GC 발생

  - object를 EC에 바인딩 : EC = { VO : { key: value } }   *VO = Variable Object

     모든 EC는 VO와 연동한다 

  - VO 구성요소 : variable, function, function parameter 

    예) 펑션을 만나면 Variable Object를 만든다. { key: value } 이런 형태임

3. VO 메커니즘

  - Global Context, function context로 분리  

  - Global Context : 하나만 존재, Global object도 VO와 연동. 즉, Global object와 VO는 같음

  - 코드가 Hoisting되어서 function -> variable 순으로 호출됨. 즉, function 호출

  - VO의 function context는 AO와 같음 *AO = Activation Object : function 호출시 AO를 만들어 수행하는 것이다 

  - function 실행되면

    + AO 생성 : function & AO 바인딩

    + function에 아규먼트 갯수와 상관이 없으므로 arguments 객체를 만들어줌 (배열아님)

    + 내부 function을 설정, 실행하는 것이 아니다 { key: value } 로 설정

  - scope chain은 scope binding의 추상개념이다

4. Property 탐색 & 클로져

  - property = { key: value } 형태 추상개념

  - Global Context -> Inner Function AO에서 탐색 

  - 클로져 (참조)

    + 내부변수를 참조하는 함수를 리턴함 == function code + [[Scope]]의 조합

    + function 생성 시점에 클로져 설정 

5. This

  - 모든 EC와 this와 관련이 있다

  - function단위로 this 오브젝트를 만든다 (this value)

  - this는 AO에 생긴다. AO는 function이다. 따라서 this는 function안에 존재한다 

  - EC = {VO/AO, value, this: value} 형태  

  - null : 프로세싱 한것. 값이 undefine에서 null이 된것이다 

    undefine : 프로세싱 안한것

  - this.a 했을 때 a가 undefine이면 this생성이 안된 경우일 것이다 (참조)

6. Prototype 

  - object는 prototype을 갖음 

  - [[function]].prototype.property_name 형식

  - this.property_name 으로 접근가능

  - prototype chain이 된다 : 상속개념 사용가능 -> 사용자제 

  - 렌더링시에 생성되어 수행되게 할려면 new 사용을 자제한다?

  - 사용이유 : prototype을 사용하면 new이후 this로 정의한 것을 접근할 수 있기 때문이다 

  - 객체를 1차레벨로 수평화 하라 -> 오브젝트를 불러서 사용한다 (Node.js의 require와 비슷하겠다) -> 접근성이 용이해 진다 

다음 강좌가 있으면 또 교육을 받아봐야 겠다. 정말 설명을 명확하게 잘 해주신다.

<참조>

  - MSDN 자바스크립트 객체지향 이야기

  - NHN이 말하는 자바스크립트의 클로져 이야기

this를 자바스크립트에서 만나게 되면 이게 어느 인스턴스의 this인지 파악하기가 난해하다. this는 context(Execute Context)와 Scope(유효범위)에 대한 부분을 잘 알아야 한다. 

1) function안에서 변수 접근 권한

function someFunc() {
    var _this = this;
    something.on("click", function() {
        console.log(_this);
    });
};

  - var _this = this; 문구는 왜 사용하는 것일까?

  - 첫번재 유효범위(First Scope)는 Global Scope 이다

    + 모든 변수(Variable)과 함수(Function)은 global이다. 

    + Global Scope는 window 객체이다 

    + window.x = 9; 라고 property를 설정하면 어디서나 접근이 가능하다 

function myFunc() {
    var x = 5;
});
console.log(x); // undefined

  - x 는 myFunc()안에서 초기화 되었고, myFunc()안에서만 접근이 가능하다 

  - var 키워드를 사용하지 않으면 자동으로 global 유효범위로 만들어진다 

  - var 키워드를 사용하면 function이 호출 될때 생성되는 context에 지역변수로(local variable) 포함된다

function myFunc() {
    x = 5;
});
console.log(x); // 5

  - Outer Function에 정의된 모든 변수는 다른 Inner Function에서 접근을 할 수 있다

function outer() {
   var x = 5;
   function inner() {
      console.log(x); // 5
   }
   inner();
}

  - Outer Function에서는 Inner Function의 변수를 접근 할 수 없다 

function outer() {
    var x = 5;
    function inner() {
        console.log(x); //5 
        var y = 10;
    }
    inner();
    console.log(y); //undefined
}

2) this의 유효범위 

  - this는 function이 호출될 때 자동으로 설정되는 변수이다 

  - 변수의 값은 function이 어떻게 호출되냐에 따라 틀려진다

  - 자바스크립트에서 함수를 호출하는 주된 몇가지 방법을 가지고 있다. (주로 사용하는 3가지 방법)

    + function이 method처럼 호출하기 : when a function is called as a method === 오브젝트.function은 메소드라 칭함

    + 자기자신위에 호출하기  : when a function is called on it's own === function 자체가 호출 오브젝트.function이 아닐 경우

    + event handler로서 호출하기 : when a function is called as an event handler == 이벤트 핸들러 수행시 호출되는 function

function foo() {
   console.log(this); //global object
};

myapp = {};
myapp.foo = function() {
   console.log(this); //points to myapp object
또는 (같은 내용)
myapp = {
   foo: function() {
     console.log(this); //points to myapp object
   }
}

var link = document.getElmentById("myId");
link.addEventListener("click", function() {
   console.log(this); //points to link
}, false);

  - addEventLister를 사용하여 function을 붙이면 this의 값이 변경된다 : this값은 caller로 부터 function에 전달된다 

$("myLink").on("click", function() {
    console.log(this); //points to myLink (as expected)
    var _this = this;  //store reference
    $.ajax({
        //ajax set up
        success: function() {
            console.log(this); //points to the global object. Huh?
            console.log(_this); //better!
        }
    });
});

  - myLink을 click하면 function이 수행된다. 이때 이벤트 핸들러로서 펑션의 this는 myLink DOM element의 참조로 설정된다

  - 그러나 ajax 정규호출의 this는 global object로 this 값을 설정한다. 이는 "event handler"도 "오브젝트 method"도 아닌 function이기 때문이다

  - 위와 같이 하는 것이 function을 호출하는 곳에서 this에 대한 값을 정확히 사용하기 위한 방법이다

3) Crockford on JavaScrpt

  - 백발의 중년 신사분이 JavaScript 언어에 대해 설명을 하고 있다. 우리나라에선 상상할 수 없는 일이겠지, 큰 세미나에 가봐야 젊은 친구들의 열정만을 엿볼 수 있는 부분을 생각해 보면 그들의 환경이 참 부럽다.

  - 15분경의 동영상에서 this의 호출에 대해서 보자 

  - 31분경에서 정확한 Closure 사용법 설명

<참조> 

  - 원문 : Scope and this in JavaScript

  - Scope 한글 블로깅 연재

  - Naver Dev JavaScript 클로져, 유효범위