학습 목표

• store, view 상태관리(reduce), Flux 아키텍처, 리팩토링과 테스트, 함수형 프로그래밍, 프론트엔드 빌드, 리액트

async/await

Promise 내부 구조

class Promise {
 constructure(callback) {
    this.status = 'pending';
	callback(this.resolve, this.reject);
 }
  
  then() {
  	 
  }
  
  
  resolve () {
    try {
      
    } catch {
    }
    this.status = 'fulfilled"
  }
  
  reject () {
    this.status = 'rejected'
  }
}

const promiseA = new Promise((resolve, reject) => {
resolve(777);
});

https://v8.dev/features/top-level-await

await

async function as() {
   console.log(‘async function’);
   var result = await new Promise(resolve => setTimeout(()=> resolve(‘대기끝’),0));
   console.log(‘result : ’, result);
   console.log(“abcd”)
    return result;
}
function sync(num) {
  console.log(‘sync’, num);
}
(function() {
   sync(1);
   var result = as();
   result.then((data) => console.log(“data: “, data));
   sync(2);
})();

ESM

• 모듈화: 재사용성을 높이기 위해 사용
• 사이드이펙트: 한 곳을 수정했는데 다른 곳에 버그가 생김
• 독립적으로 작업할 수 있기 때문에 해당 코드의 복잡도를 낮출 수 있음 (전체 코드의 복잡도는 올라감)
• 코드를 재사용할 수 있기 때문에 코드의 생산성을 높일 수 있습니다.
• 어떤게 어떤 것을 의존하는지 안보인다.

번들러

• 런타임에 분석하지 않고 빌드 타임에 의존성을 분석하고, 하나의 파일로 만드는 것을 번들러라고 함
• 최적화: 공백 같은 것을 지워서 최적화할 수 있음, 코드명을 난독화해서 압축화함
• http 수가 줄어들어서 라운드 트립 수가 줄어든다. 빨라짐
• http2와 http3 달라진 점을 알아보자...

default export / named export

• export 하면 마치 객체처럼 import 된다.
• alias 를 사용해서 as 를 사용할 수 있음
• 내부적으로 캐시 보관을 해서 한번 불러온 파일을 또 가져오지 않음
• 순환 참조는 안좋음.

버전

1.3.2
메이저.마이너.패치 업데이트