2월 3주차 기록

February 18, 2024 • ☕️ 7 min read

weekly

배워가기

SSG 제대로 알기

SSG(Static Site Generation)에서 Static 이라는 용어가 들어간 것은 HTML이 정적이라는 것이지, 페이지가 정적이라는 것이 아니다.

SSG는 Next.js에서 권장하는 렌더링 방식으로, 다음과 같은 장단점이 있다.

장점
- 빌드 타임에 HTML 파일이 생성되기 때문에 빠른 FP, FCP, TTI를 제공한다.
- 또한 매 요청마다 생성하는 것이 아니므로, SSR과 달리 일관성있게 빠른 TFB를 달성할 수 있다.이미 생성된 HTML 파일을 받기 때문에 SEO 친화적이다.
단점
- 모든 URL에 대해 개별 HTML 파일을 생성해야 한다. 따라서 URL을 미리 예측할 수 없거나 URL을 예측할 수 없으면 적용이 어렵다.

Ref https://ajdkfl6445.gitbook.io/study/web/csr-vs-ssr-vs-ssg

React useEffectEvent

기존 이벤트 핸들러들은 같은 동작을 다시 수행할 때만 다시 실행된다. 이벤트 핸들러와 달리, effect는 prop이나 state 등의 값이 지난번 렌더링과 달라지면 다시 실행된다.(re-synchronize).

이벤트 핸들러의 로직은 ‘non-reactive’하고, effect의 로직은 ‘reactive’하다고 말할 수 있다.

때로 이 두 개 동작을 섞고 싶을 수 있는데, 예를 들면 특정 값의 업데이트에만 동작하는 effect를 만들고 싶을 수 있다.

useEffectEvent hook을 사용하면 non-reactive 로직을 effect에서 분리해낼 수 있다.

before

Copy

function ChatRoom({ roomId, theme }) {
  useEffect(() => {
    const connection = createConnection(serverUrl, roomId);
    connection.on('connected', () => {
      showNotification('Connected!', theme);
    });
    connection.connect();
    return () => {
      connection.disconnect()
    };
  }, [roomId, theme]); // ✅ All dependencies declared
  // ...

theme의 값만 바뀌었을 때도 showNotification()이 실행되어버리는 버그가 있다.

after

Copy

function ChatRoom({ roomId, theme }) {
  const onConnected = useEffectEvent(() => {
    showNotification('Connected!', theme);
  });

  useEffect(() => {
    const connection = createConnection(serverUrl, roomId);
    connection.on('connected', () => {
      onConnected();
    });
    connection.connect();
    return () => connection.disconnect();
  }, [roomId]); // ✅ All dependencies declared
  // ...

onConnected는 마치 effect 로직 같지만, 이벤트 핸들러처럼 동작한다. useEffectEvent 내부의 로직은 reactive하지 않으며, 마지막 props와 state의 값을 보게 된다.

이제 useEffect의 deps에서 theme을 지우면, roomId가 바뀌었을 때만 showNotification()이 실행된다.

useEffect hook 내부에서 쓰는 값은 모조리 deps에 넣어달라고 lint가 불평하곤 했었는데, useEffectEvent hook을 사용하면, reactive해야 하는 값만 정확하게 분리해낼 수 있을 것 같다.

즉 useEffectEvent는 Effect에서 Event를 분리하기 위해 탄생한 것으로, reactive와 non-reactive한 업데이트에 대해서 생각해보면 좋을 것 같다.

Ref https://react.dev/learn/separating-events-from-effects

presigned url

일반적으로 private인 s3 버킷의 컨텐츠를 presigned URL을 통해 다른 사용자들과 공유할 수 있다.
객체를 다운로드할 수 있는 시간 제한을 두고 보안 credential을 사용하여 일시적으로 승인한다.
‘서명된 링크’라고 불리며, 미리 서명된 URL을 통해 사용자가 문서를 업로드하거나 원하는 파일을 S3 버킷에 저장할 수 있다.

Ref

키보드 이벤트 주의사항 ❗️

키보드의 cmd + k를 눌렀다가 k 먼저 떼고 cmd를 나중에 떼면 cmd의 이벤트만 발생하고 k는 무시된다.

그런데 cmd를 먼저 떼면 cmd와 k의 이벤트 둘 다 발생한다.

-> 즉, 메타키에서 손이 떼진 순간 비로소 keyup 이벤트가 발생한다.

cf) keydown과 keyup 이벤트가 항상 대칭으로 일어나는 것은 아니니 사용자 경험을 위해 커맨드를 이용한 숏컷을 만들때는 keydown 이벤트만을 이용하라는 애플의 큰그림?

pragmatic-drag-and-drop

react-beautiful-dnd의 메인테이너가 새로운 dnd 라이브러리를 만들고있다. 이미 트랠로,지라 등에 사용되고 있다고 한다.

이름은 pragmatic-drag-and-drop

아직 배포는 안됐지만 영상으로 어떤 라이브러리인지 설명한다.

react-beautiful-dnd에서는 마우스 이벤트를 사용해서 dnd를 구현했다면 이번에는 네이티브 drag-and-drop API를 이용해서 구현했다고한다. 모든 부분(성능, 번들 크기)에서 좋아졌지만 react-beautiful-dnd의 애니메이션은 사라진 것 같다. 네이티브 dnd라 어쩔 수 없는듯하다.

참고: 모든 dnd 라이브러리를 비교한 사이트

이 분은 dnd만 파신다고 한다. 멋진 외길인생…

이것저것 모음집

React에서, 상태는 특정한 render에 의존적이다. 즉 각각의 render는 각자만의 상태를 가지고 있다. 따라서 상태를 변경하는 함수가 정의되는 시점에, 특정한 상태값은 해당 render에 의존적이다.
vitest workspace를 이용해서 각 폴더를 projects로 지정하고 원하는 config파일로 테스트를 실행할 수 있다. (Ref)