[우아한 테크러닝] 2회차 정리

September 03, 2020

🌟우아한 테크러닝 2회차

🎯javascript overview

자바스크립트의 함수 값을 무조건적으로 반환하게 합니다. 변수 안에 함수를 값으로 취급하여 넣을 수 있습니다.
```
//함수를 값으로 취급할떄는 function() 이름없는 함수 가능.
const bar = function bar(){
    return 0;
};
```
여기서 bar()을 호출하면 const bar를 호출하는 것입니다.
immediately call 프로그래밍 코드에서 함수를 한번만 호출되게끔 할때는 이름없이 선언할 수 있으며 맨 뒤에 ()를 붙여 호출합니다.
콜백함수 어떤 함수에게 함수의 호출을 위임하는 것을 콜백함수라고 합니다. +)HOC -> 입력된 컴포넌트를 업그레이드 하여 컴포넌트 상태로 출력하는 것을 의미합니다.
화살표함수
```
const bar2 = (x) => {
    //함수 내 1줄이면 return 안씀
return x * 2; //리턴값없으면 undefined 반환
}
```
자바스크립트 코드는 식과 문으로 이루어져 있습니다. 위의 화살표 함수는 함수가 값을 반환함으로서 식에 참여했을 때 사용합니다.
- 식 코드를 실행했을때 값으로 마무리되는 라인 세미콜론 있음 ex) 0, 3+10, function()
- 문 식을 제외한 나머자는 문 세미콜론 없음 ex) if, switch, while, for
new 연산자
```
//함수명이 대문자면 무조건 new로 호출
function foo () {
this.name = 'lee'; //동적바인딩
}
const y = new foo(); //인스턴스객체
console.log(y)
```
new 는 자바스크립트에서 공증한 온전한 객체를 만들 수 있는 함수입니다. javascript는 항상 출처를 검사하는데, new 를 통해 객체를 생성하게 되면 자바스크립트에서 자체적으로 객체의 형태를 확인할 때 온전한 형태라고 인식합니다. 객체를 생성할때는 this를 사용하여 호출 시 함수에 새로운 객체를 전달하고 이렇게 전달 된 객체에 요소들을 내부적으로 동적바인딩하여 생성합니다. (프로토타입이라는 매커니즘 사용)
```
//class 를 사용하면 좀더 명시적인 코드작성 가능.
class bar {
constructor(){
    this.name = 'lee';
}
}

console.log(new bar);
```
EC6에서는 객체 생성을 좀더 명시적으로 하기 위하여 클래스가 등장합니다.

this 와 closer

this 자바스크립트는 this를 해석할 때 실행 컨택스트 맥락상 해당 함수를 호출할 때의 소유자를 판단하여 그 소유자로 해석합니다.
```
const person = {
name : '이주형',
getName(){
    return this.name;
    //this는 person   
},
}
console.log(person.getName()); //정상작동

const man = person.getName(); //소유자가 벗겨짐

console.log(man())
//호출자가 없어서 전역객체에 연결(this가 person 이 아닌 window객체가 되므로 에러)
```
위의 코드에서는 getName의 소유자인 person이 this 가 되겠네요. 하지만 그 아래에 있는 man처럼 소유자가 벗겨진 형태로 getName을 할당하게 되면 man 을 호출했을때는 호출자가 없어서 전역객체인 window에 연결됩니다, 이렇게 벗겨진 호출에 대해서는 this를 사용자가 직접 지정해주기 위하여 bind,call함수를 사용합니다.(arrow에서는 제외)

closure closure는 보호하고싶은 값이 있을때 사용. 영역을 지정하고 캡처하여, 외부에서 임의로 값을 입력,수정하는 것을 막을 수 있습니다.

const person = {
age:10,
}
//이 명령어 막고싶을때
person.age = 500;

function MakePerson(){
let age = 10;
return {
    getAge(){
    //클로저가 이 함수를 캡쳐해서
    //age에 접근할 수 있는건 getAge만 가능
    return age;
    },
    setAge(x){
    age = x > 1 && x <130 ? x : age
    }
}
}
//클로저 캡처로 getage와 setage로만 값 접근 가능하게 만듬. 
let p = MakePerson();
console.log(p)

🎯동기 비동기

Promise 비동기 방식은 사람의 생각과는 다르게 움직이는데 코드 뎁스가 깊어지면서 에러잡기가 어려워짐에 따라 프로미스가 등장합니다.

const p1 = new Promise((resolve,reject)=>{
setTimeout(() => 
{resolve('응답');},1000);
resolve(); //성공
reject(); //실패
})
//프로미스 안에는 then이 있음
p1.then(function(x){
//성공하면 여기 있는 함수 호출
console.log(x)
}).catch(function(){
//실패하면 여기있는 함수 호출
})

async await
```
const delay = ms => new Promise(resolve => setTimeout(resolve,ms))
//delay 함수 호출시 프로미스 객체 반환
async function main(){
console.log(1);
await delay(2000);
console.log(2);
}
```
자바스크립트는 싱글스레드이기때문에 제어권을 브라우저에게 넘겨주지않으면 브라우저가 정지됩니다. 이럴땐 async를 넣어 awiat라는 프로미스 객체를 반환하고 resolve호출시 반환값을 리턴값처럼 넘겨줍니다. try catch로 예외처리를 하게되면 reject시 예외는 catch에 걸립니다.

+)pending 상태

커링테크닉

function foo(a,b,c)
function foo(a){
    function foo(b){
        return function(c){
            return a+b+c;
        }
    }
}

🎯Redux의 원리

리덕스의 기본 컨셉은 다음과 같습니다. 1. 앱에 쓰이는 상태를 한군데에 몰아넣고 이를 store 객체라는 이름의 객체에 넣어줍니다. 2. 이 객체를 컴포넌트한테 흘려보내 줍니다. 3. 이렇게 흘려보내게 되면 각자 컴포넌트들은 흘러가는 객체 속 데이터중에 자신에게 필요한것만 뽑아서 화면에 그립니다.

리액트가 나오기 전에는 이 컨셉을 구현하는 것이 불가능했습니다. 객체 속 데이터 중 하나만 바뀌어도 자바스크립트가 돔에 직접 접근해서 전체 화면을 전부 다시 그려야하는게 효율적이지 못하기 때문입니다.

하지만 리액트에서 virtual dom 이라는 개념을 가지고 나오기 시작하면서 랜더링 흐름이 다음과 같이 바뀌었습니다. Jsx -> vdom(데이터 수정) -> dom
vdom(데이터 수정 전) 이런 구조를 통해 자바스크립트가 직접적으로 dom 에 접근하는 대신 vdom을 통해 한번 걸러서 접근하고, 만약 이 구조내에서 Ui내의 데이터를 수정하게 된다면 react는 수정된 데이터를 기반으로 새롭게 vdom 을 만들어서 기존의 vdom과 비교 한 뒤 수정된 데이터만 dom 에 반영합니다.

Written by@이주형

平常心

GitHub Facebook