11월 2주차 기록

방심한 새 겨울이 올 줄 알았지

배워가기

targetWindow.postMessage

targetWindow.postMessage(message, targetOrigin, [transfer]);

• Window 오브젝트 사이에서 안전하게 cross-origin 통신을 할 수 있게 한다.
• 페이지와 생성된 팝업 간의 통신이나, 페이지와 페이지 안의 iframe 간의 통신에 사용할 수 있다.
• form submit 시 CORS 에러가 날 때 우회하는 방식으로 사용할 수 있다 Ref https://developer.mozilla.org/ko/docs/Web/API/Window/postMessage

mobx action.bound

action.bound 주석은 this가 항상 함수 내에서 적절하게 바인딩 될 수 있도록 메서드를 올바른 인스턴스에 바인딩하는 데 사용된다.

import { makeObservable, observable, action } from "mobx";

class Doubler {
  value = 0;

  constructor(value) {
    makeObservable(this, {
      value: observable,
      increment: action.bound,
    });
  }

  increment() {
    this.value++;
    this.value++;
  }
}

TBT(Total Blocking Time)

• FCP와 TTI 사이의 모든 긴 작업들이 소요하는 시간의 총량
• TBT를 줄이기 위해서는
  • FCP와 TTI 사이에 브라우저의 메인 스레드의 작업량을 줄인다
  • 같은 양의 작업이라도 50ms를 초과하지 않는 작은 작업들로 나눈다
  • 불필요한 자바스크립트를 제거한다 - ex) 목록의 모든 컨텐츠에 붙는 이벤트리스너를 event delegation로 옮긴다 Ref https://www.nray.dev/blog/300ms-faster-reducing-wikipedias-total-blocking-time/

bull

• 빠르고 신뢰할 수 있는 Redis 기반의 queue
• Node 환경에서 동작하며, TypeScript를 지원한다
• queue를 사용하는 이유
  • 트래픽이 몰리거나 문제가 생겼을 때 어딘가에 안전하게 저장한 후 재처리하기 위함
  • 동시성 문제를 해결하기 위함
  • 기타 등등… Ref
• https://github.com/OptimalBits/bull
• https://velog.io/@kimjiwonpg98/nestjs로-queue-사용해보기-feat.-bull

git describe

git 저장소의 상태를 설명하는 데 사용된다. 일반적으로 git의 현재 위치와 가장 가까운 태그를 기반으로 설명을 생성한다.

--tags 태그를 사용하여 설명을 생성하며, --match를 사용해서 특정 패턴으로 검색할 수 있다.

Mac의 디지털 컬러 측정기

Mac에는 디지털 컬러 측정기라는 것이 있다. 가끔 색상을 표현하기 위해 opacity를 사용하는 피그마가 있는데, 투명도가 적용된 색상값을 뽑아내야할 때 유용하다.

• shift + cmd + C: 현재 커서 위치의 색상값을 복사할 수 있다.
• cmd + L: 측정 위치를 현재 커서 위치에 고정한다.

이제 브라우저에 렌더링된 색이 무슨 색이지 알기위해 개발자도구를 까볼 필요가 없다. 🙃

next.js의 라우팅

next.js 에서 라우팅 시 아래를 사용하면 클라이언트 캐시를 참조하지 않고 라우팅이 가능하다.

const router = useRouter();

// push
router.push(urlToRedirect, undefined, {
  unstable_skipClientCache: true,
});

// replace
router.replace(urlToRedirect, undefined, {
  unstable_skipClientCache: true,
});

next.js 미들웨어에서 리다이렉션 등을 하는 경우 이후 push나 replace 실행 시 무한루프에 빠지는 경우가 있는데, 일반적으로 이 해결책으로 window.location.href를 많이 사용한다. window.location.href를 사용하면 클라이언트 캐시를 모두 무시하기 때문에 정상동작할 수 있다.

하지만 window method는 next router 생태계 안에 포함된 것이 아니기 때문에 route 이벤트를 받을 수 없다. 또한 replace 동작이 되지 않고, pushState만 가능하다는 한계가 있다.

다만 위 기능의 단점은 아직 unstable 이라는 것..!

Ref https://github.com/vercel/next.js/pull/37970

이것저것

• VSCode에서 추천할 때 옆에 나타나는 텍스트는 ghostText라고 한다. 설정에서 이 고스트 텍스트의 색상/배경색/테두리를 설정할 수 있다.

기타공유

코틀린 멀티플랫폼 지원 시작

코틀린은 안 쓰지만 어떤 프로젝트에도 갖다 쓸 수 있다는 건 짱 멋지다! 있 Ref https://blog.jetbrains.com/kotlin/2023/11/kotlin-multiplatform-stable/

styleX

이제 다 거기서 거긴 것 같은 기분은 뭐지… 🫠

(Meta에서 tailwind를 검토하다가 만들었다는 얘기가 있다.)

Ref https://stylex-docusaurus-nmn.vercel.app/

Monaspace

github에서 공개한 코딩 폰트

오 예쁘다 예뻐!

당장 설치

Ref https://monaspace.githubnext.com/

마무리

지난주까진 또 덥더니.. 내 이럴 줄 알았지. 너무 춥자나!

이번 주말을 기점으로 최강 난이도 한 주 시작이당.

우선 두 번의 결혼식은 무사히 다녀왔고… 짐 정리 시작 📦