043-2022-10-17.md

43번째 만남

WIL

• 지용님의 모노레포 관련 공유
• CMS ??
• 타입 추론 문제
  • 기존 코드 에서 currentSceneName 필드가 "Scene1" | "Scene2" 타입으로 추론되게 하는 법
  • 일단 찾은 해답은 이 코드
• SVG Metaballs
  • https://dev.to/antogarand/svg-metaballs-35pj
• auto-animate
  • https://github.com/formkit/auto-animate
  • react 기준 코드 두 줄이면 애니메이션 구현 가능

  •   return <div ref={parent}>
        <strong className="dropdown-label" onClick={reveal}>Click me to open!</strong>
        { show && <p className="dropdown-content" >Lorum ipsum...</p> }
      </div>

  • 이렇게 최상위 부모 컴포넌트에 ref만 지정하면 됨
• TypeScript 4.9 https://devblogs.microsoft.com/typescript/announcing-typescript-4-9-beta/
  • Promise.resolve 좀 더 타입 추론 강화했다 ~
  • File-Watching Now Uses File System Events
  • NaN
    • NaN과 비교하는 코드 작성 시 error: This condition will always return 'true'. Did you mean '!Number.isNaN(someValue)'? 에러 보여줌
  • in 키워드로 type narrowing 강화
  • satisfies ⭐️

    • type RGB = [red: number, green: number, blue: number];
      
      const palette = {
          red: [255, 0, 0],
          green: "#00ff00",
          blue: [0, 0]
          //    ~~~~~~ error!
      } satisfies Record<string, string | RGB>;
      
      // Information about each property is still maintained.
      const redComponent = palette.red.at(0);
      const greenNormalized = palette.green.toUpperCase();

    • as와 차이점? as는 단언하는거고, satisfies는 타입 만들어서 체킹해주는 느낌
    • 트위터 반응
      • getStaticProps props 타입 추론 가능 (ex. 원래는 string | any -> string 타입으로다가)
      • 역추론 가능 (ex. [''] satisfies Feature -> 배열 값이 Feature 타입으로 추론된다)
      • https://twitter.com/leeerob/status/1563540593003106306
• React RFC use라는 훅이 나온다
  • reactjs/rfcs#229
  • promise를 넘기는 방식인 것 같다. 예를 들면

    const promise = useQuery(...);
    const data = use(promise);

  • pending 상태에 대한 effect 훅이 사라지고~ 좀 더 가독성 좋아지는 것 같다.

    function Note({id}) {
      // This fetches a note asynchronously, but to the component author it looks
      // like a synchronous operation.
      const note = use(fetchNote(id));
      return (
        <div>
          <h1>{note.title}</h1>
          <section>{note.body}</section>
        </div>
      );
    }

  • 비동기 요청 끝난 후 상태 업데이트해야하는데 컴포넌트가 언마운트됐다. 상태 업데이트 막을 수 있는 방법은?
    • setState할 때 isUnmounted.current ref로 체크
    • useIsmounted 훅 만들어서 쓰는 방법
• useOverlay 무적권 쓰십쇼 여러분
  • https://github.com/toss/slash/tree/main/packages/react/use-overlay

  • const overlay = useOverlay();
    overlay.open(() => <Modal />);

잡담

• 깔끔해진 인규집 🏠
• 오늘 오랜만에 월요일 출근 (지난 2주동안 휴일,,)
• 종호님 내일 혁주님 본다구 함 oh ~~~

---

• 📆 2022.10.17 20:00 ~ 21:00
• 👥 @Seogeurim @hseoy @pumpkiinbell @jiyong1 @KangyeolLee @gomjellie