2018년 상반기 스터디 - react.js 1주

Posted by 서동우 on March 18, 2018

1장 리액트 소개

리액트란?

  • 리액트는 사용자 인터페이스(UI)를 설계할 때 사용하는 유명한 라이브러리(프레임워크가 아니다.)
    • 프레임워크가 아니기 때문에 ajax 통신에 사용되는 함수나 router 같은 기능을 제공하지 않는다.
    • 라이브러리이기 떄문에 현재 운영 중인 서비스에 특정 모듈로 개발해서 적용이 가능하다.
  • 재사용 가능한 UI 컨포넌트로 구성
  • 특징
    1. Declarative
      1. Declarative(선언형)
        • 무엇을?
        • Table for two, please.
            function double (arr) {
                return arr.map((item) => item * 2);
            }
          
            function add (arr) {
                return arr.reduce((prev, current) => prev + current, 0);
            }
          
            <Btn
            onToggleHighlight={this.handleToggleHighlight}
            highlight={this.state.highlight}>
                {this.state.buttonText}
            </Btn>            
          
      2. Imperative(명령형)
        • 어떻게?
        • 창가에 위치한 테이블이 비어있다. 나와 친구는 그쪽으로 걸어가서 앉았다.
            function double (arr) {
                let results = []
                for (let i = 0; i < arr.length; i++){
                    results.push(arr[i] * 2)
                }
                return results
            }
          
            function add (arr) {
                let result = 0
                for (let i = 0; i < arr.length; i++){
                    result += arr[i]
                }
                return result
            }
          
            $("#btn").click(function() {
            $(this).toggleClass("highlight")
            $(this).text() === 'Add Highlight'
                ? $(this).text('Remove Highlight')
                : $(this).text('Add Highlight')
            })
          
    2. Component-Based
    3. Learn once, Write Anywhere

장애물

  1. 리액트는 라이브러리이다.
  2. 새로운 ECMAScript
  3. 함수형 자바스크립트가 유명해짐.
  4. 자바스크립트 툴링 피로
    1. webpack
    2. grunt
    3. jasmine
    4. jest
    5. lodash
    6. ….

리액트의 미래

웹 뿐만 아니라 여러 분야에서 애플리케이션을 개발할 수 있는 토대를 갖추기 시작

변화하는 기술 계속 따라잡기

  1. https://reactjs.org/blog/2018/03/01/sneak-peek-beyond-react-16.html
  2. https://www.facebook.com/groups/react.ko/

2장 최신 자바스크립트

1.const, let

  • 변수를 선언하는 최신 방법
  • const, let의 차이는 재할당이 가능한지 여부
  • var와의 차이는 const, let은 {} scope를 가진다는 것이고, var는 function scope를 가진다는 것이다.

2.template literals

  • literals : 값을 생성하는 문맥상 구조.
  • 변수를 넣는 기능을 지원하는 멀티 라인 String 리터널
    const firstName = 'Jane';
    console.log(`Hello ${firstName}!
    How are you
    today?`);

    // Output:
    // Hello Jane!
    // How are you
    // today?        
  • tag literals : template literals 을 통해서 제공하는 파라미터를 통해서 특정 함수를 호출하는 literals
    function raw(strs, ...substs) {
        let result = strs.raw[0];
        for (const [i,subst] of substs.entries()) {
            result += subst;
            result += strs.raw[i+1];
        }

        console.log(strs);
        //['A \tagged\ template ', ' wdwdwd\t\t\t\ ', '']
        console.log(substs);
        //[1000, 2000]
        return result;
    }
    const aaaa = 1000;
    const bbbbb = 2000;

    console.log(raw`A \tagged\ template ${aaaa} wdwdwd\t\t\t\ ${bbbbb}`);
// output : 'A \tagged\ template 1000 wdwdwd\t\t\t\ 2000'

3.default parameter

    function f(x, y=12) {
        // y 값을 사용하지 않거나 undefined 로 값을 주면 12를 기본 값으로 지정
        // null 인 경우는 그냥 null 로 인식을 한다.
        return x + y;
    }
    f(3) == 15
    f(3, null) == 3

4.Arrow function

    var odds = evens.map(v => v + 1);  // function(v) {return v+1;}
    var nums = evens.map((v, i) => v + i);  // function(v,i) {return v + i;}

    // 상태 바디
    nums.forEach(v => {
        if (v % 5 === 0)
            fives.push(v);
        });

        var bob = {
        _name: "Bob",
        _friends: [],
        printFriends() {
            this._friends.forEach(f => console.log(this._name + " knows " + f));   //this : bob object
        }
    };


    const a = {a: () => this};      
    a.a();                      //windows 객체를 타나낸다.

    // 기본적으로 함수를 실행할 때 그것을 실행한 주체가 누구냐에 따라서 this 값이 변형이된다.
    // 그러나 arrow function의 경우는 구현할 당시에 this 값을 그대로 사용한다.

    function square() {
        let example = () => {
            let numbers = [];
            for (let number of arguments) {         //arguments는 square의 arguments 값을 나타낸다.
                numbers.push(number * number);
            }

            return numbers;
        };

        return example();
    }

    square(2, 4, 7.5, 8, 11.5, 21); // 결과 값: [4, 16, 56.25, 64, 132.25, 441]

5. transpiling vs compiling

  • transpiling : 한 언어로 작성된 소스 코드를 가져 와서 비슷한 수준의 추상화를 가진 다른 언어로 변환하는 과정
  • compiling : 한 언어로 작성된 소스 코드를 다른 언어로 변환하는 과정

6. destructuring(Array, Object)

    // 배열 매칭
    var [a, ,b] = [1,2,3];
    a === 1;
    b === 3;

    // object 매칭
    var { op: a, lhs: { op: b }, rhs: c }
        = getASTNode()

    // object 매칭 줄여서 표현
    // 변수 명과 object의 key 값이 같은 경우 하나로 표현이 가능하다.
    var {op, lhs, rhs} = getASTNode()

    // 파라미터에서도 사용이 가능
    function g({name: x}) {
    console.log(x);
    }
    g({name: 5})

    var [a] = [];
    a === undefined;

    var [a = 1] = [];
    a === 1;

    function r({x, y, w = 10, h = 10}) {
        return x + y + w + h;
    }
    r({x:1, y:2}) === 23

7. Object literal enhancement

    var obj = {
        handler,    //handler : handler
        toString() {    //toString: function() {
            return "d " + super.toString();
        },
        // key 값을 []를 이용해서 값을 넣을 수 있다.
        [ "prop_" + (() => 42)() ]: 42
    };

8. spread operator

    function f(x, ...y) {
    // f 함수는 첫 파라미터 값을 x에 나머지 파라미터 값을 y에 배열로 등록한다.
    // 기존에는 arguments 를 이용해서 처리를 했는데 이런 식으로 좀 더 명확하게 해당 데이터를 확인할 수 있게 되었다.
        return x * y.length;
    }
    f(3, "hello", true) == 6

    function f(x, y, z) {
        return x + y + z;
    }
    // 배열에 spread operator를 이용하면 하나씩 분리되어 파라미터에 등록이 된다.
    f(...[1,2,3]) == 6        

9. promise

  • 기존 ajax나 다른 callback 관련된 것을 처리할 때 너무 연결된 것이 많을 경우 callback 지옥에 빠지게 된다.
  • 그런 콜백 지옥을 빠져나오기 위해서 promise가 나왔다.
  • 요즘은 promise도 길다고 해서 await async 를 사용한다.
    function timeout(duration = 0) {
        return new Promise((resolve, reject) => {
            setTimeout(resolve, duration);
        })
    }

    var p = timeout(1000).then(() => {
        return timeout(2000);
    }).then(() => {
        throw new Error("hmm");
    }).catch(err => {
        return Promise.all([timeout(100), timeout(200)]);
    })

10. class

  • react component를 구성하면서 class를 많이 이용하기 때문에 그 때 좀더 구체적으로 배울 예정
    class SkinnedMesh extends THREE.Mesh {
        constructor(geometry, materials) {
            super(geometry, materials);

            this.idMatrix = SkinnedMesh.defaultMatrix();
            this.bones = [];
            this.boneMatrices = [];
            //...
        }
        update(camera) {
            //...
            super.update();
        }
        static defaultMatrix() {
            return new THREE.Matrix4();
        }
    }

11. Iterators + For..Of

    let fibonacci = {
        [Symbol.iterator]() {
            let pre = 0, cur = 1;
            return {
                next() {
                    [pre, cur] = [cur, pre + cur];
                    return { done: false, value: cur }
                }
            }
        }
    }

    var fibonacci = {
        [Symbol.iterator]: function*() {
            var pre = 0, cur = 1;
            for (;;) {
                var temp = pre;
                pre = cur;
                cur += temp;
                yield cur;
            }
        }
    }        

    for (var n of fibonacci) {
        if (n > 1000)
            break;
        console.log(n);
    }
    //자바스크립트에서는 인터페이스가 지원을 하지 않지만 
    //아래와 같이 Iterable 한 객체와 Iterator, IteratorResult에 대한 
    //인터페이스를 만든다면 저렇게 가능하다.
    interface IteratorResult {
        done: boolean;
        value: any;
    }
    interface Iterator {
        next(): IteratorResult;
    }

    //
    interface Iterable {
        [Symbol.iterator](): Iterator
    }

12. module

  1. ecmasript module
  2. common.js
  3. amd
  4. 추후 react를 배우면서 좀 더 자세하게 배울 예정이다.

참고자료

  1. 러닝 리액트
  2. https://github.com/chocoma87/ToyProject/wiki/%EA%B0%9C%EB%B0%9C%EC%9D%BC%EC%A7%80-6-(Imperative-vs-Declarative-Programming)
  3. https://reactjs.org/blog/2013/06/05/why-react.html
  4. http://exploringjs.com/
  5. https://babeljs.io/learn-es2015/