읽은 글들 (~23.1.24)

2023. 1. 24.

시리즈 "읽은 글들"

▲

React

(번역) 리액트 상호 작용 시간 4배 향상하기

원문 저자가 본인의 서비스에서 React 성능 문제를 개선했던 경험에 대한 글이다. 대체로 AG Grid 라는 라이브러리에 의한 과도한 리렌더링으로 인해 발생하는 이슈들이었다. 크롬 개발자 도구와 리엑트 프로파일러를 이용해 이슈를 추적하고 확인한 뒤 해결하는 과정이 재미있고 유익하다.

The Ugliest Pattern In React

React 공식 문서에서 추천한 아래 코드를 비판하는 글이다.

function CountLabel({ count }) {
  const [prevCount, setPrevCount] = useState(count);
  const [trend, setTrend] = useState(null);
  if (prevCount !== count) {
    setPrevCount(count);
    setTrend(count > prevCount ? "increasing" : "decreasing");
  }
  return (
    <>
      <h1>{count}</h1>
      {trend && <p>The count is {trend}</p>}
    </>
  );
}

useEffect 를 사용해서 prop 의존적인 state 를 수정할 경우 자식 컴포넌트들도 두 번 더 렌더링되므로, 위 방법을 사용하라는 것이었다.

이에 대해 저자는 가독성도 없고 순수 함수 규칙마저 어긴다며 최악이라고 말하고 있다.

음.. 나도 쓰고 싶지 않은 코드다.

JavaScript

Promise는 왜 취소가 안 될까?

Promise 취소 기능의 표준 지정과 관련된 역사와, 본인이 맡은 서비스에서는 취소 기능을 어떻게 구현했는지 설명하는 글. 쉽게 잘 읽힌다.

Reasons to avoid Javascript CDNs

웹페이지/웹앱의 자바스크립트 파일을 저장할 곳으로 CDN 사용을 피해야 하는 이유에 대해 설명하는 글.

분명 CDN은 쉽게 사용할 수 있고 빠르다고들 말하긴 하지만, 그 못지 않은 단점이 있다고 말한다. 요약하면 아래와 같다.

프라이버시: CDN 서비스들은 개인이 어느 사이트들에 방문했는지 추적할 수 있다.
속도: 대체로 CDN 이 빠르지만 일부 경우에는 오히려 CDN 이 느릴 수 있다. (특히 자바스크립 파일 용량이 작을 경우)
보안: CDN 을 통한 해커의 공격에 노출될 수 있다. SRI 로 보안이 어느정도 해결 가능하지만, 이는 한 라이브러리를 여러 파일로 나눠 관리할 때 제대로 적용되지 않는 허점이 있다.
시스템적 위험: (AWS 나 cloudflare 가 그랬던 것처럼) CDN 서비스가 장애에 빠지면 전세계 웹의 큰 부분이 다운될 수 있다.

그리고 작성자는 특별한 이유가 없다면 CDN 보다는 웹페이지와 같은 서버에서 자바스크립트 파일을 관리하는 게 좋다고 글을 마무리한다.

자세한 내용은 본문을 참고하자.