javascript 고급

@ 2022년 01월 22일

자바스크립트 Promise

• pythontutor.com/javascript.html
• setTimeout - 비동기통신에서 중요한?
• typescript를 해석하기위한 swc
• add -D types - 로 설치

• 리액트는 따로 설치할 필요없음

• 프로미스 객체를 본다. 프로미스 동작보기,
• Async, Away가 promise와 연동되어 어떻게 동작하는지

• Promise()

• developer.mozilla.org/ko/docs/web/javascript/reference/global_object
• 대기, 이행, 거부

동기 비동기

• 비동기 Asynchtonous
  • 산발적으로 수행되기 때문에 특점 지점을 알수가 없다.
• 동기 synchronous : 같이 동시적으로 실행된다 : run-to-completion
  • 모든 내용을 순차적으로 시작하기 때문에 어떤 시점에 대한 이벤트를 잡기가 쉬워짐
• 작업의 시작은 알 수 있으나 작업의 끝은 알 수 없다.
• 코어(물리적 연산 분리), 스레드(논리적 연산 분리)

• Task(프론트엔드 단에서의 스레드같은 개념)

• 프론트 엔드에서의 무거운작업 수행시 UI가 굳는 현상을 방지하기 뒤한 방법. Ajax(화면을 새로고침하지 않고 부분적으로 처리)

• worker를 이용하여 스레드를 사용할수 있지만 사용하고 있지 않다.

• setTimeout이나 promise 같은 비동기 코드들

• macrotask(중요한), microtack(덜 중요한)
• callback - 이전까지 비동기를 처리하던 방식?

  const asuncFunc = async () -> {
    await delay(100);
    return "hello";
  }
  
  const delay = ( t = 0 ) -> {
    return new Promise(resolve -> {
      setTimeout(() -> {
        resolve(t);
      }, t);
    });
  };

• async가 붙으면 무조건 promise 리턴 타입이 된다.

  async function hello() { return "Hello" };
  hello();

제너레이터

  function* f(){
    let i = 0;
    while(true){
      yield i++;
    }
  }

• f.next();로 수행요청을 할수 있나봄

 고차함수 
  function f2(){
    let i =0;
    return i;
  }

• 고차함수(컨티뉴에이션 모나드) <- 제너레이터 <- async-await
• 이렇게 의존성이 있어요

Javascript macrotask

• setTimeout(); setInterval();

Javascript microtask

• promise();

• Event Loop가 받아서 순차로 처리함

• 옵셔널 체이닝 : func?. (); : 없을 경우에는 함수를 수행하지 않음

콜백체인

• new Promise((resolve, reject) –> { })
• then, finally, catch

  print("hello")
  .then(() -> print("world"))
  .then(() -> print("foo"))
  .catch()
  .finally();

  try{
  }catch(e){
  }finally{
  }

Trailing comma

• https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Trailing_commas
• Trailing comma라고 해서 기능입니다 문제 안 되어용
• Trailing comma 시 공란이라면 for문이 하나 덜 돌거나 length가 하나 적게 표시되거나 그러는건가? 신기하네

Promise

• Promise.all : 배열로 promise를 받아서 모든 promise를 수행했다가 .then 체인을 수행함
  • 리턴값 배열
• Promise.race : 선착순
  • 리턴값 단독

• Promise 체인닝의 리턴값은 Promise로 돌아온다. await으로 Promise 리턴을 받아서 이어나간다.

• https://developer.mozilla.org/ko/docs/Learn/JavaScript/Asynchronous/Async_await
• async를 사용하면 아무거나 return해도 promise로 감싸져서 되돌아간다.

새로운 기능

• console.time(“test”);
• console.timelog(“time”,”say test”);

• console.timeEnd(“test”);

• process.exit(); 프로세스 종료

람다식

• 람다식 예제

• 기존 자바 문법

  new Thread(new Runnable() {
     @Override
     public void run() { 
        System.out.println("Welcome Heejin blog"); 
     }
  }).start();

• 람다식 문법

  new Thread(()->{
        System.out.println("Welcome Heejin blog");
  }).start();