2월 3주차 기록

배워가기

Sentry replays

• 실제 유저 세션을 replay하여 이슈의 근본 원인을 찾는다
• 비주얼 디버깅 가능
• 비디오 녹화가 아닌, rrweb 녹화 라이브러리를 사용한 유저 세션 재생

Ref

• https://sentry.io/product/session-replay
• https://docs.sentry.io/product/explore/session-replay/web/

html button vs span

button 태그는 span 태그에 비해 접근성, 스타일 등 적용해야 하는 기본 설정이 많기 때문에 span 태그 대비 렌더링에 1.5배 이상의 시간을 소모한다.

Ref https://benfrain.com/we-need-a-better-button-its-too-slow-and-wont-behave/

requestIdleCallback

• window.requestIdleCallback() 메서드는 브라우저의 idle 상태에 호출될 함수를 대기열에 넣는다. 이를 통해 개발자는 애니메이션 및 입력 응답과 같은 대기 시간이 중요한 이벤트에 영향을 미치지 않고 메인 이벤트 루프에서 백그라운드 및 우선 순위가 낮은 작업을 수행 할 수 있다. 함수는 일반적으로 first-in-first-out(FIFO) 순서로 호출된다. 하지만, timeout 옵션이 지정된 callback은 제한 시간이 지나기 전에 이들을 실행하기 위해 순서에 맞지 않게 호출될 수 있다.

• idle callback 안에서 requestIdleCallback() 을 호출하여 다음 패스가 이벤트 루프를 통과하는 즉시 다른 callback을 예약할 수 있다.

• 이 API는 우선순위가 낮은 작업을 처리할 때 유용하지만, 브라우저 부하 상태에 따라 실행 타이밍이 보장되지 않는 한계가 있다.

dual package

esm, cjs를 모두 지원하는 패키지

사용 방법

// package.json
{
  "type": "module",
  "exports": {
    "import": "./wrapper.mjs",
    "require": "./index.cjs"
  }
}

// index.cjs
exports.name = 'value';

// wrapper.mjs
import cjsModule from './index.cjs';
export const name = cjsModule.name;

-> exports를 이용한 조건부 내보내기를 사용하여, wrapper.mjs는 CommonJS 모듈 index.cjs에서 내보낸 값을 가져와 ES 모듈 사용자에게 제공한다. 이렇게 하면 ES 모듈과 CommonJS 모듈 간에 일관된 인터페이스와 상태가 유지되어, 두 환경 간의 충돌을 피할 수 있다.

Ref

• https://lurgi.tistory.com/186
• https://www.brewcoldblue.com/engineering/dual-cjs-esm-package

Vitest vs Jest 주요 차이점

Ref 챗GPT

declarativeNetRequest

브라우저 확장 declarativeNetRequest는 페이지 서비스워커 fetch 이벤트가 잡아버린 요청은 (처리기 내에서 아무 처리도 안해도) 수정하지 않는다.

declarativeNetRequest가 꼭 반드시 무조건 필요하면 페이지 서비스워커를 수정해야 한다.

self.addEventListener('fetch', function (event) {
  const { request } = event;

  if (request.url.includes('localhost:4991')) {
    return event.respondWith(fetch(request.url));
  }

  // ... 나머지 ...
})

chrome.declarativeNetRequest API는 선언적 규칙을 지정하여 네트워크 요청을 차단하거나 수정하는 데 사용된다. 이렇게 하면 확장 프로그램이 네트워크 요청을 가로채거나 콘텐츠를 보지 않고도 수정할 수 있으므로 개인 정보 보호가 강화된다.

Ref https://developer.chrome.com/docs/extensions/reference/api/declarativeNetRequest?hl=ko

이것저것 모음집

• MacOS 터미널에서 say hi 를 입력하면 ‘하이’ 해준다 ✋

기타공유

eslint의 CSS 공식 지원

Ref https://eslint.org/blog/2025/02/eslint-css-support/

마무리

지난 2주 간 리프레쉬를 다녀오며 블로그를 작성하지 못했다. 내 개발자 역사상 없던(?) 일…

리프레쉬 후기라도 써보려고 했으나, 리프레쉬인 만큼 쿨하게 넘겨 보내기로 했다.

뭐든지 강박적으로 하면 오래 못 가기 때문에 - 나도 핑계 대는 사람이고 싶었나 보다.

복귀하자마자 회사에 또 다른 소식을 전하게 되었는데,

갑작스런 이야기에도 많은 분들이 응원해주시고, 또 아쉬워해주셔서 감사하고 죄송한 마음이다. 🥺

남은 몇 주의 이야기도 알차게 마무리 짓고, 또 다른 개발 인생을 시작해봐야지