실행함수

render(
  "<http://localhost:3000/1>",
  "<http://localhost:3000/2>",
  "<http://localhost:3000/3>",
  "<http://localhost:3000/4>"
);

Sequential Async

순차적 비동기? 비동기는 무조건 병렬아냐?

• 순차처리와 병렬 처리를 같이하고픈 경우가 많다
  • 예를 들면 api1 은 1초 api2는 5초 api3은 2초 걸릴때 호출은 병렬적으로 하더라도 그리는 순서가 1 2 3가 되야 된지

[Promise.all을 이용한 parallel하게 처리한 코드]

const render = (...urls) => {
  Promise.all(urls.map(url => fetch(url).then(res => res.json()))).then(arr => {
    console.log(arr);
  });
};

• 제일 느린애를 기준으로 찍힌다
• parallel 문법은 async await 문법이랑 잘 안어울린다 → 많은 개조 필요

[Sequential 하게 처리한 코드]

const render = (...url) => {
  const loop = () => {
    if (url.length) {
      fetch(url.shift())
        .then(res => res.json())
        .then(json => {
          console.log(json);
          loop();
        });
    }
  };
  loop();
};

• 차근 차근 진행
• 관심사 분리가 하나도 안되있어서 도메인특성이 다르거나 렌더링 특성이 다를때 대처가 안된다는 큰 문제점이 있다

Generator & Executor

• 리액트 사가가 이걸로 되어있다 넘기면 실행은 내부에서