4월 3주차 기록

감기 돌았니 🤒

배워가기

ES6 Module의 순환 참조

ES6 Module은 cyclic dependencies(순환 참조)를 지원하도록 설계되었다.

순환 참조는 근본적으로 나쁜 것이 아니다. 특히 객체를 다루면서, 이러한 의존성이 필요할 수도 있다. 예를 들어, 몇몇 트리에서(ex. DOM 문서) 부모는 자식을 가리키고 자식은 다시 부모를 가리키는 경우가 있다.

라이브러리들에서는 섬세한 설계로 순환 참조를 피할 수 있다. 하지만 규모가 큰 시스템에서, 특히 리팩토링 시 순환 참조가 발생할 수 있다. 이때 모듈 시스템이 순환 참조를 지원하는 것이 좋다.

Node.js에서 순환적인 require()가 발생하면, 의존하는 대상이 반환될 때까지 모듈은 실행을 끝내지 않는다. (예제는 Node.js 문서 에서 확인 가능). 다만 순환 참조 과정에서 import된 값이 아직 초기화되지 않아 undefined일 때 문제가 발생할 수 있는 것이다!

Ref https://exploringjs.com/es6/ch_modules.html#sec_design-goals-es6-modules

RTL에서는 render 함수 대신 screen을 사용해요

Kent C Dodds에 따르면, RTL에서는 render 함수 대신 screen을 쓰는 것이 권장된다.

screen을 사용하면 필요한 쿼리를 추가/제거할 때 render 호출의 destructure(?)를 최신 상태로 유지할 필요가 없다. 에디터가 알아서 자동완성해줄 것이다.

이게 대체 무슨 뜻인가 했더니 나 말고도 이해 못한 사람들이 있어서 다행이다. 👉 https://stackoverflow.com/questions/61482418/react-testing-library-screen-vs-render-queries

render는 구조 분해 할당할 수 있는 객체를 제공한다. 예를 들면 이렇게.

const { getByText } = render(<MyComponent />);

만약 다른 쿼리를 쓰고 싶다면, 이 구조 분해 할당 객체를 업데이트해야 한다. 예를 들면 이렇게.

const { getByText, getByLabelText } = render(<MyComponent />);

근데 screen 을 사용하면, 바로 객체에서 함수를 사용할 수 있다. 이렇게. screen.getByText, screen.getByLabelText

👉 그래서 항상 최신 상태의 쿼리를 날릴 수 있다!

// ❌
const { getByRole } = render(<Example />);
const errorMessageNode = getByRole("alert");

// ✅
render(<Example />);
const errorMessageNode = screen.getByRole("alert");

Ref https://kentcdodds.com/blog/common-mistakes-with-react-testing-library#not-using-screen

npx command options

• -p - npm에서는 --parseable의 약자지만, npx에서는 --package의 약자다.
• -c - --call의 약자로, 뒤에 실행하고자 하는 커맨트가 따라붙는다 (command의 약자가 아니었다니)
  Copy

  npx -- <pkg>[@<version>] [args...]
  npx --package=<pkg>[@<version>] -- <cmd> [args...]
  npx -c '<cmd> [args...]'
  npx --package=foo -c '<cmd> [args...]'

Ref https://docs.npmjs.com/cli/v9/commands/npx

ResizeObserver

Entry.contentBoxSize의 하위 프로퍼티로 ResizeObserver가 있다.

• blockSize: width 에 대응되는 값
• inlineSize: height에 대응되는 값

👩‍🏫 Entry.borderBoxSize 도 동일하다. 다만 context box인지 border box인지만 다르다.

RPC(Remote Procedure Call)

RPC(Remote Procedure Call)는 프로세스간 통신을 위해 사용하는 IPC(Inter Process Communication) 방법의 한 종류다.

💡 참고: gRCP (Google Remote Procedure Call)

• 구글에서 개발한 최신 오픈 소스 고성능 RPC 프레임워크
• 기본적인 개념은 RPC와 동일, HTTP/2 기반으로 양방향 스트리밍 지원

Node 16 EOL 일정 연기

node 16 EOL(end of life)의 일정이 기존보다 7개월 앞당겨진 2023년 9월 11일로 변경되었다. 이는 OpenSSL 1.1.1의 지원 종료 일정과 맞추기 위한 결정이라고 한다. 이에 따라 vite도 버전 5부터 node 14, 16의 지원을 모두 중단하기로 1차 합의되었다. Vite 5 Discussion

불용어 (noise word, stopword)

불용어란 “별 의미가 없는 단어”로, 관사, 전치사, 조사, 접속사, 의미없이 붙인 문자 숫자 등을 가리킨다.

• 자연어 처리에서 불용어
  • 빈도는 높으나 의미가 없기에 제거 처리해주어야 한다.
• 소프트웨어 네이밍에서 불용어
  • a1, a2 / productInfo, productData 와 같이 의도가 불분명한 네이밍은 지양해야한다.

이것저것

• Sanity Test - 공식적인 테스트 수행 전에 이번에 변경된 부분(또는 결함 수정한 부분)에 대해 빠르게 확인하는 테스트
• CSS touch-action 속성으로 터치 제스처를 제한할 수 있다. (e.g. touch-action: pan-y; 상하스크롤만 허용 (zoom pinch 방지 가능))

기타공유

Bard 국내 상륙

구글에서 만든 대화형 생성 AI 바드(Bard)가 국내에 상륙했다고 한다!

Ref https://bard.google.com/?hl=en

타입스크립트 5.1 베타

정작 using 선언문은 없지만 그래도 맛있네요 특히 Linked Cursors for JSX Tags

• undefined를 리턴하는 함수들에 대한 쉬운 암묵적 리턴
• Getter와 Setter에 서로 다른 타입 정의 가능
• JSX Element와 JSX Tag 타입 사이의 타입 체크 디커플링
• JSX에서 네임스페이스 속성 지원
• 모듈 해석에 typeRoots를 사용
• JSX 태그를 위한 Linked Cursors
• @param JSDoc 태그 스니펫 제공 Snippet Completions for @param JSDoc Tags

Ref https://devblogs.microsoft.com/typescript/announcing-typescript-5-1-beta/

나는 네이버 프런트엔드 개발자입니다

물론 나는 아니고

Ref https://jpub.tistory.com/1409

Node.js 20 출시

시상에 세상이 이렇게나 어마무시한 속도로 진화하고 있다 Ref https://nodejs.org/en/blog/announcements/v20-release-announce

크롬 View Transitions API

크롬 최신 버전에 새로 나온 View Transitions API로 서로 다른 DOM 상태 사이 전환에 쉽게 애니메이션을 추가할 수 있다고 한다. 애플리케이션의 상태나 뷰 전환 간에 사용자를 컨텍스트에 유지시켜두면서 사용자의 인지 부하를 줄여줄 수 있다.

function updateView(event) {
  // <a>나 <img> 태그 중 무엇에서 이벤트가 발생했는지를 구분한다
  const targetIdentifier = event.target.firstChild || event.target;

  const displayNewImage = () => {
    const mainSrc = `${targetIdentifier.src.split("_th.jpg")[0]}.jpg`;
    galleryImg.src = mainSrc;
    galleryCaption.textContent = targetIdentifier.alt;
  };

  // View Transitions를 지원하지 않는 브라우저 대응
  if (!document.startViewTransition) {
    displayNewImage();
    return;
  }

  // View Transitions를 사용
  const transition = document.startViewTransition(() => displayNewImage());
}

Ref https://developer.mozilla.org/en-US/docs/Web/API/View_Transitions_API#browser_compatibility

마무리

한국 돌아와서 신난 마음 + 갓생 살겠다고 바로 무리해서 인생 풀악셀로 달리다가 기어코 감기몸살에 걸리고 말았다.

원래 감기같은 거 진짜 안 걸리는데, 성인되고 코로나 이외에 감기 처음 걸려보는 것 같다.

하루 약 먹으면 될 줄 알았는데, 나를 너무 과대평가했지 🫠

결국 휴가까지 내고 앓아누웠더니 조금 나아진 것 같다.

‘몸’은 나아졌는데 ‘목’은 안 나아진다. 목 아프다고 죽 먹어놓고 아이스크림은 목 안아프다고 또 냠냠 하는 인생 🤷‍♀️

그나저나 고작 6주였지만 매일같이 청정한 공기 마시다가 서울 오니 진짜 매캐한 냄새가 절로 느껴진다.

하… 도시가 좋다는 말 취소 🙅‍♀️ 이거 때문에 목이 더 아픈 것 같다.