우아한테크러닝 - 2020-09-03 (목) - 2차시

틀린 글이 상당 수 있을 수 잉ㅆ습.

재미를 기록. 정보기록(x)

 

 

- 다들 많이 열심히 하는것같아서 나는 그냥 끝까지 듣는 것에 만족하겠음. ㅎㅎㅎ 

- 잡지식이라도 늘긴하는것같아서 ㅇㅇ 

- 흡수할수있을만큼만 흡수한다.는 마음으로 (이런건 그냥 해외 유명 요리유투버가 멋있게 요리하는 것을 굉장히 단축 및 편집 된 조리예랑 비슷해서 내가 바로 실행할 순 없다. 그치만 인사이트를 얻기에는 좋죠. 먼가 일이 술술풀리는걸 보면서 쾌감두 들구. 또는 실수하는 모습을 볼때 동질감(?)도 느끼고 좋습네다...,,,)

 

---

 

글은 대부분 수도 코드로 정리하겠고, 그냥 잡담나눈것을 기록하는게 더 좋아서 그렇게 하기로...!

 

 

대가의 어깨에 올라타 대가의 시야에서 보이는 지적 유희들을 같이 즐기는 시간. 정도로.

어차피 수련은 개인이 하는 것.

정리를 너무 깨끗이 해버리면

외려 그 당시 느낀 재밌음이 살아나지 않기에 정리는 최소한으로. 오타도 웬만하면 남긴다.

 

 

이번 시간에는

- 함수

- 자바스크립트에서 함수

- 함수의 형태. 가 변해두 현혹되지 ㅁ ㅏ라 ㅎ

- 함수의 종류(즉시실행함수.. 일급함수...)

 

- 스코프. 클로저.(== 커링). this. 접근을 원쿠션해서 막는게 왜 중요한가. (코드조금짜야 퇴근일찍하자나 ㅎ).

- 실행 컨텍스트

- 리덕스 

- 비동기. 비동기는 왜 어려운가. 비동기의 발전 모습 (promise, async await)

 

의 키워드를 능구렁이 담 넘듯 배움 ㅎ

.

.

.

.

.

 

---

- ㅎㅎ js는 쨌든 양키들이 만든거니께. 그들만의 문화가 담겨있다. <- 이런게 바로 대가 들이 할수있는 얘기졍. 

재밌네. 대가의 눈에서 보이는 지적 유희? 체험.

 

- 자바스크립튼는 거의 모든 것이 값.

 

- 함수도 값. ㅇㅇ

 

- 값을 반환한다????

-> 명시적 (return)

-> undefined 

-> new 는 명시적 리턴없이도 객체를 반환하죵~

 

 

const bar = function bar() {

};

// bar(); ㅇㅣ거는 첫번째 bar 임. 두번째 bar는 모름

// 함수가 값으로 취급되고있기땜에 이름을 생략할수있는것이긔 ㅇㅇ
--> 복기할때보니  ㅋㅋ 이것도 읭? 싶네. 아직 내것이 아닌 지식.


(function() {}); 
//<- 이것역시 값으로 취급햇기에 이름생략.

(function(){})(); 
// <- 만들자마자 바로 즉시 호출. 이름도 없고 다시불릴일도없는 행인 1 같은 놈 행인1도 아니고 무명씨.

// 민태님 : 맞어 이런거본적이 없는데... 오픈소스같은데서 있대
// 컨텍스트 어렵쪄? 한땀한땀 벗겨보면 별거 아니라는거..


foo(function(){})
// 함수도 값으로써 함수에 전달되는 모습...


function foo(x) {
    x();
    return function () {} // 당연히 값을 리턴할 수 있는 거겟져 이렇게... 콜백인거겠쪄~
} 
// 사람은 형태에 익숙하지 않으면 ㅎㅎ 낯설어한다.
// 여러형태로 변주가 가능한때까지 가야 내것이 된것이제


const y = foo(function() {})
// 콜백 ㅎㅎ 위임한 꼴. 심부름.
// 함수를 실행하는 순간에 만들어내는 테크닉. -> 소프트웨어 공학적으로는 함수 합성. 하이오더 컴포넌트??? 일급함수???
// 컴포넌트를 넣고 더 좋은 컴포넌트가 되어서 튀어나온다 !! ->  like 리액트


// 용가리 통뼈 모냥 <- 용가리 통뼈??? ㅋㅋㅋㅋㅋㅋㅋㅋㅋ 뭔지 몰름ㅋㅋㅋㅋㅋ


// 함수의 종류
// 일급함수. 함수를 받는 함수.
// 등등.
// 함수는 코드를 묶고 있는 값 묶고있는 코드. -> 호출이 되쥬!
// 함수를 이러케 보면 좋다,,


// 4가지 함수를 배웟대,,, 머야머야 ㅎㅎㅎㅎ 난 모르겟어;; @.@


const foo = function foo() {
    foo() // 이건 두번째 foo임ㅋㅋㅋㅋㅋㅋ 굳이굳이 재귀적으로 호출할때
};


// 쨌든 이렇게 이름을 생략하긔
const foo = function (x) { // 

};


const bar = (x) => { // 애로우함수 람다식
    // 작성자 : 죄송하지만 애로우함수에서 에로.. 가 생각났습니다.
};


/* 식 ? 문 ? */

0;
1*10;
foo(); 
// 식. 값과 값. 

/* 문?
if()
while()
*/

// 식 문
// 식의 마무리는 세미콜론. 문법적인 차이로는.
// 문은 그냥 컨디셔널문. 과 반복문 2개밖에 없다

// for-each 는 식. map이나 그런것들.




// 이때 좀 딴생각 했음

// 강의를 들을때 심지어 딴짓을 해도 좀 유익한 딴짓을 하게됨
// 대가의 직관을 보는 것이 즐거움



const y = (x,y) => {
    return
} 
// 당연히 애로우 함수에서는 이름이 없으니까 재귀가 안되는게 당연하져 저기여! 가 아니라 음~ 으로는 사람을 부를 수 없응꼐 ㅋㅋ 이런게 잼잇


function foo() {
    this.fds = 10; // 여기서 this 는 빈객체
}


/*
// 이런게 동적바인딩이긔
const x = {};

x.name = 10; 
*/


/*
// new 연산자는 이렇게 새로운 객체를 만들어내는구나?!
// prototype 으로 내부적으로는...
function foo() {
    this.name=10;
}

const y = new foo();


*/


if (y instanceof foo) {
    // 자바스크립트는 유연하니까
    // 프로퍼티 다 확인해줘야하고
    // 프리머티브 타입아니구 다른거까지 확인해야하면 집에못가니까
    // instanceof 만 되면 맞는걸로 하기로~
    // 공증처럼 ㅇㅇ 
    // 타입 인터페이스? 처럼
    // 간이로
    // 신용사회를 달성하기위해서 
    // ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ
    // 민태님 : new로 왜 만들어야하지? 객체리터럴로만들어도되는데 생각하는 분들있을겁니다~
    // 작성자 : 이거 완전 내가햇던생각;...
}


/* 
function foo(){
    this.name = 10;
}

class bar {
    constructor () {
        this.name 
    } // 걍 foo 보다 명시적이지 뭐!~
} */
// 그래서 클래스 는 syntax sugar로 여겨지기도함
// 민태님 : 그래도 머가 있긴하대...


// Foo()로 만들면 new로 호출할수잇음 // 애절한 과거의 자바스크립트 개발자들

// this는 실행컨텍스트. 실행컨텐스트 지시어

///// 8시28분
//////10분 쉬자
// (고해놓고 또 강의)
// 자료구조 운영체제 네트워크
// 프론트엔드는 이런거 빡세게 안물어봄
// 자바스크립트로 만든자료구조
// 자바스크립트가 실행될 시점의 운영체제
// 이벤트루프 콜백 싱글스레드
// 메모리 관리

// 나는 웹개발자니까 브라우저가 운영체제 라면????
// 현실적으로 컨버팅하기
// 솔직히 운영체제 넘 장엄하자나


// 타입스크립트는 그냥 Doc 보기. 페이퍼서적은 다 따라갈수가없어
// 코테는 알고리즘



// 운동을 많이 하신다고!!!
// 자전거. 지난주엔 100km 넘게?!?!?!
// 겨울엔 스키.
// 평소에 스케이트보드도...
// 탁구 당구 테니스 


// 현대의 js는 세미콜론을 알아서 붙여준다...


// 대부분의 현대개발자들은 타이핑 하는거 시러한다.
// 애로우 펑션 애용하신다고 
// 나는 현대개발자가 아녔음

// 채팅창 : prettier 써라 ㅎ 



// 호이스팅
// 함수표현식은 언제? 선언식은 언제?
// 바인딩
// -> 이때 잘 안들었는데. 바인딩은 요새 잘 안쓴다고. 
// -> 그런데 지금 개발되는 컴포넌트들은 안써도 기존개발된것들 이해하려면 지식은당연히 있으야 할듯; 



// 문제를 해결할때는
// 서로 관련성이없을때까지 분해해서
// 하나씩 해결하세요



// 김민태 기술이사님도 
// 고졸이라는?? -> 실화인가? . ?
// 앞으로 20년동안은 끄덕없을 학력차별없는 직엄


// 실행컨텍스트
// 호출한 시점에 
// 소유자에게 ... (놓침)
// 호출자가 있어야돼



const person = {
    name: '김민태'
    getName() {
        return this.name;
    }
}
console.log(person.getName())
person.getName.call(person); // this가 person이 됨
// 이거모르면 광탈입니다. 
// 안써도 이해하는건 중요하니까요..! (기술이사의 면모... 갑자기???)
const man = person.getName;

console.log(man()) // 호출자가 누군지몰라. 그럼 전역은 windows인데 name이 없자나
button.addEventListener('click', person.getName.bind(person)) //이게


// 사용자가 언제 save를 누를지 모르니까
// 윈도우즈야 이걸 줄테니까 사용자가 누르면
// 이걸 실ㅇ행해줘
// 전형적인 콜백
// 이벤트 리스너 들.



// 컴퓨터사이언스 지식이 있어야
// 에러메시지를 읽을 수 있다.
// 이걸 복사해서 검색하는 매크로머신이 되지 마세요



// 클로저 나의 밖 스코프 같이 들고있는거 ??? 
/*
function foo(x) {
    return function () {
        return x; // <-  클로저는  이 함수만이 접근가능함.  값을 보호할때 !!!!!!!!!!! 
    }
}
*/


/*
const person = {
    age: 10,
}
person.age = 500;

age 못바꾸게 못막아 */


// 그래서 옛날 js 개발자들은

function makePerson() {
    let age = 10;
    return {
        getAge() {
            return age;
        }
        // 만약 setAge하고싶으면
        setAge(x) {
            age = x > 1 // alsjdlkasjfdl; 대충 아무런 컨디셔널 문 쓸수있다~ 
            /* 이런식으로 age를 보호하는 식으로
            모듈패턴
            그러지않으면 계속 validation을 해줘야함
            쓸데없는 코드가늘어나면? 퇴근이 늦어져요 */
        }
    }
}
let p = makePerson();
console.log(p.getAge());


// 형태에 현혹되지 않게. 미혹되지 않게
// 심호흡을 하고
// 하나씩 하나씩 분해해보는
// 용기를 가지고 도전해보라

// 새로운 형태를 개발해내는 사람
// 새로운 개념은 또 드물기때문에 ㅋㅋ
// 아무 연습도 안하고 이틀이 지나면 다 까묵겟져?


// 클로저 배웠다
/////////////////////////////////////////////////////////////////////////////

// 비동기
// 비동기 어려워 ㅠ . ㅠ
// 인간은 동기적으로 생각헌께
// 비동기가 어렵다.
// 아 나는 개발이 안맞나?
// 그런게 아니고 모든사람이 다 어려워요
// 똑똒한 사람들과 소시민들의 차이
// 아 그래 ?어려워? 아 그러면 안어렵게 만드느 방법을 찾아보자



// 그들은 비동기코드를 동기적으로 보이게끔 만드는 시도를 
// 해왔다...!


/*
function foo(x) {
    console.log('앗싸')
}

setTimeout(foo, 5000);
*/

// 비동기예제에서 흔히 셋타임아웃을 쓰죵 ㅎ

// 이때부턴 별로 안적었음.

setTimeout(function(x) {
    console.log('앗싸')
}, 1000);
// foo bar 양키센스 귀엽 -> 동의
// 동양은 철학적인데 -> 쌉 동의


setTimeout(function(x) {
    console.log('앗싸')
    만약 또 호출해야하면
    setTimeout(function(y) {
        console.log('웃싸'); -> 뎁스가 깊어진 순간 뜨헣;;
    }, 2000)
}, 1000);


// 만약에 에라가 나면...?! 에러처리 어떻게 하지...?
// 4뎁스정도되면 ㅇㅇ 

-> 프라미스가 만들어짐 



그러나 첨엔 인기가 없었음. 쉬워보이지 않고
타이핑을 쫌 해야햄


맞아 나두 프라미스 싫어했어


덜 좋아도 쉬운게 세상을 지배한다 
ㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎ


// resolve 확정됏다 // reject 거절됐따는 함수를 넘겨줌
const p = new Promise((resolve, reject) => {
    // 하나 프로미스 객체를 만들져
    resolve(); 호출하면 function() {} 이거 호출해주구
    reject();를 호출하면 catch 안에잇는애를 호출해준다
}); // 이 안에 있는 resolve도 클로저 영역 안에 있는 애

p1.then(); //이건 댄어블 객체
p1.then(function() {});
p1.then(function() {}).catch(function() {})

그외 뭐 체이닝. 이런거 있고.

여기서 p2()를 호출을 못하셧는데 
왠지 재밋엇뜜 ㅋㅋㅋㅋㅋㅋㅋㅋㅋ 



const delay = ms => new Promise(resolve => setTimeout(resolve, ms))
결국 delay는 Promise를 리턴한다.

async function main() {
    console.log('1');
    await delay(2000);
    console.log('2');
}
출력결과
1
(2초 뒤)
2

찍힘


async를 함수앞에 써놓으면
await 을 지시어로 쓸수있게됨

내부적으로는... 비동기예요
비동기를 쓰는이유는 자바스크립트가 싱글스레드라서
브라우저에 주도권을 줘야함 안그러면 멈춤

reject는 try {} catch{} 문으로 잡아주기



할튼 async await은 인간이 보기 쉽게 발달한 것일뿐.
내가 2depth 정도 감당하겟다면 콜백인거지 뭐.
뭐~
아 뭐~~~~~~~~~~~~ 





////////////////////////////////////
오늘은 제너레이터는 못할고같네요

6개월에 한번 지원 가능 -> 우아한 형제들

아주 작더라도 온전히 돌아가는 서비스를 만들어보면서 학습해라




////////////////////////////////////////////////////////////////////////////////////////////////////////////
/* 
인자를 나누는것 : 커링 테크닉
    function foo(a,b,c){}

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

*/
질문 : 커링 vs 클로저 ? 
-> 민태찡 : 클로저는 항상 커링이 된다; 동어반복이긔
// 작성자 : 그래두 이렇게 질문하는 사람들 멋있었다. 난 쫄보라 질문도 못했눈데. 많은 사람들 앞에서 질문도 하고!
// 믓찌다!



// https://fastcampus-js-bootcamp.herokuapp.com/
// 한달에 만원 내는 저렴이 써버 ㅎㅎ 역싀 세상엔 돈이 있어야...
// 오타나 내용교정 



// 관심없는 애까지도 상태를바꿔줘야함
// store에 저장하즈아

// VDOM을 만들고 DOM으로 옮김
// 바뀐 VDOM을 기존이랑 비교해서 바뀐부분만
// DOM에 반영함

// VDOM diff 성능 좋다고함
// vuejs 가 요즘은 더빠르다고함ㅋㅋ  올ㅋ


// 리덕스가 더 잘해서 업계표준됨
// 제일 좋은 학습은 직접만들어보는게..
// 버추얼돔 궁금해! -> 만들어봐...; 그게 어렵지 ㅋㅎ;

////////////////////////////////////////////////////////////////////////////
리덕스
스토어 하나. (객체)
export function createStore(){
    
    return {

    }
}
// 작성자 : 머 이런건 다 알지 export 하ㅏ는건 (이 글의 유일한 잘난척)

리덕스의 첫번째규칙
컴포넌트는 그냥 데이터 받아 그리기만 한다.


export function createStore(){
    let state; <- 그래서 이 클로저를 만든다.
    
    return {

    }
}

// 민태 : 함수를 만들어조야종 ? ^ . ^

export function createStore(){
    let state; <- 그래서 이 클로저를 만든다.
    리덕스는 개발자를 믿지 않는당.

    const getState = () => { ...state}; <- 복사본을 만든다. 기존의 스테이트 애들을 펼쳐 놓는다. 새로운 객체임. 
    // 상태를 최소한 꺼내서 볼 수 있게 만듬

    // 바꾸는건 어케해?
    // 상태를 바꾸는 함수 가 리듀서 
    
    state = reducer(state. {
        type: 'abc'
    }) // 보내주면 바꾸께!!

    --> 이거 던지는것두 컴포넌트가 던지겠지만

    dispatch로 던져 ㅎㅎㅎ 

    const dispatch = (action) => {
         여기서 리듀서 호출해 
         state = reducer(state, action);
    }

    return {
        
    }
}

console.log(store.getState());
해서 상태를 보면 된다


function reducer(state, action) { //action멀 바꿀거냐
      if(action.type === 'abc') {
          return {
              ...state,
              abc: 'OK' // 이렇게 새로만들어서 보내야 애절한 젊은이의 요청을 들어준것임
          }
          state.abc = 'OK';// 그냥 이렇게 보내면ㅋㅋ 직접 변경이 되ㅓ버리니까 리덕스를 개발한 어느 젊은이의 애절함을 모른체하는것...
      }
      return state; 
 }
 
 
 const store = createStore(reducer);
// tㅏㅇ태가 바뀔때 리듀서 함수를 호출하면 
reducer(state, {
    type: 'abc' // 멀 바꿀지 모르자나 
})


store.dispatch() // 바깥쪾에서 디스패치를 호출할수있게됐어
원쿠션으로 감싸서???????? ㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎ



subscribe 부터 졸려서 제대로 못들었다.
여러 컴포넌트에서 이걸 통지받고 싶을 수 있으니까
배열로 만들엇!!!
사람마음 참 간사하네
안듣기도할텐데 막상 들으니 제대로 듣고싶은겨


이제부터 우리를 헷갈리게하는 살이 붙는다
액션타입의 상수화 하기;;

액션 넣어주는것까지 또 actionCreator로해서
액션 생성함수;; 만듬
있ability
내 맥북 배처리 2퍼 남기고 수강 끝

  

medium.com/ibare-story/e252506f8525

fastcampus-js-bootcamp.herokuapp.com/

 

그리고는 굉장히 심플하게 작동되는 redux 코드를 gist로 공유해주셨는데 넘 좋았다.

다들 리덕스라고 하면 존나 거창하게 막

액션파일 따로 막

리듀서 팡리 따로 막 (덕스 패턴이라든가?)

막

막

거창해서 보기두 싫었는데 역시 잘하는 사람들은 먼가 다르다.

 

 function createStore(reducer) {
  let state;
  const listeners = [];
  const publish = () => {
    listeners.forEach(({ subscriber, context }) => {
      subscriber.call(context);
    });
  };
  const dispatch = (action) => {
    state = reducer(state, action);
    publish();
  };
  const subscribe = (subscriber, context = null) => {
    listeners.push({
      subscriber,
      context
    });
  };
  const getState = () => ({ ...state });

  return {
    dispatch,
    getState,
    subscribe
  };
}

 const actionCreator = (type, payload = {}) => ({
  type,
  payload: { ...payload }
});


function reducer(state = {}, { type, payload }) {
  switch (type) {
    case "init":
      return {
        ...state,
        count: payload.count
      };
    case "inc":
      return {
        ...state,
        count: state.count + 1
      };
    case "reset":
      return {
        ...state,
        count: 0
      };
    default:
      return { ...state };
  }
}

const store = createStore(reducer);

store.subscribe(() => {
  console.log(store.getState());
});

store.dispatch({
  type: "init",
  payload: {
    count: 1
  }
});

store.dispatch({
  type: "inc"
});

store.dispatch(actionCreator("reset"));

const Increment = () => store.dispatch(actionCreator("inc"));

Increment();
Increment();
Increment();



// 한 파일에 정리