프로그래머스 FE 생존키트 스터디 4주차

<picture>
  <!--
    source tag에서 srcset을 Nx를 기준으로 comma로 분리해서 src를 제공하면 맞는 이미지를 사용할 수 있다. 
    아래 예시는 window.devicePixelRatio를 기준으로 다른 이미지를 부르게된다. source tag와 srcset를 지원하지
    않는 브라우저는 img태그의 src를 바라보게 된다.

    항상 devicePixelRatio로 기준으로 나누는 것이 최선은 아닐 수 있지만, 가장 합리적인 방법이라고 생각하고 있다.
    조금 더 자세한 내용은 달아드린 링크에서 더 깊게 확인하실 수 있다.
  -->
  <source srcset="https://cdn2.thecatapi.com/images/tt01SNoSH.png 1x,
    https://cdn2.thecatapi.com/images/e7-hS3gey.jpg 2x,
    https://cdn2.thecatapi.com/images/Pqtwt4FCq.jpg 3x" />
  <img src="https://cdn2.thecatapi.com/images/tt01SNoSH.png" width="200px" />
</picture>

// webp라는 새로운 이미지의 포맷은 기존에 많이 사용하던 png, jp(e)g보다 훨씬 더 사이즈도 작고 좋은 퍼포먼스를
// 내는데에 도움이 되기 때문에 가능하다면 webp를 사용하고 지원하지 않는 브라우저를 위해 jpg, png와 같은 포맷을 fallback으로 추가하는 것이 필요하다.
// 위쪽의 devicePixelRatio와 format까지 다 고려해서 source 태그들을 작성하면 훨씬 더 퍼포먼스가 좋은 웹을 구현할 수 있다.

<h4>Image Formats (Webp)</h4>
<picture>
  <source type="image/webp" srcset="/assets/white-cat.webp">
  <source type="image/jpeg" srcset="/assets/white-cat.jpeg">
  <img src="/assets/white-cat.jpeg" width="200px" />
</picture>

<!-- #1 해당 페이지가 작동하기 위해서는 꼭 필요한 리소스를 preload -->
<link rel="preload" href="/assets/lazysizes.min.js" as="script" />

<!-- #2 해당 페이지에서 곧 필요해질 리소트 prefetch -->
<link rel="prefetch" href="/assets/lazyLoadModule.js" />

<!-- #3 해당 페이지에서 곧 요청할 외부 도메인 preconnect -->
<link rel="preconnect" href="https://fonts.google.com/" />

resetError() {
  this.setState({ ...this.state, error: null });
  this.componentDidMount();
}

renderOnSuccess() {
  const { images } = this.state;
  this.$target.innerHTML = images.map((url) => `
    <img src=${url} class="child" />
  `).join('');
}
    
renderOnLoading() {
  this.$target.textContent = 'Loading...'
}
    
renderOnError(error) {
  this.$target.innerHTML = `
    <div>
      <div>
        Error occurred: ${error.message}
      </div>
      <div style="margin-top: 16px;">
        <button type="button">RESET ERROR</button>
      </div>
    </div>
  `;
  this.$target.querySelector('button').addEventListener('click', this.resetError.bind(this));
}

// window.requestIdleCallback은 browser compatibility가 그렇게 좋지는 않지만
// polyfill해서 사용할 수도 있다. requestIdleCallback을 통해서 등록된 callback들은
// 브라우저가 할 일없이 쉬고 있을 때 미리 데이터들을 준비해두도록 요청할 수 있다.
function addIdleCallbacks(callbacks) {
  callbacks.forEach((callback) => {
    window.requestIdleCallback(callback);
  });
}