10월 4주차 기록

정신 차려!

배워가기

mox-react-lite의 useObserver hook

observer 함수 내부에서 observable의 변경을 감지하기 위해 매개변수로 받은 컴포넌트를 useObserver 함수로 감싸서 사용한다.

Ref https://velog.io/@kskim625/MobX-observer-함수

inode

• inode란 리눅스나 유닉스 파일시스템에서 소유권, 데이터의 물리적 주소, 링크, 파일 타입, 크기, CMA(create, modify, access) 시간 등 파일의 모든 정보를 갖고 있는 구조체를 가리킨다.
• 파일은 inode 고유 값과 자료구조에 의해 주요 정보를 관리한다. 컴퓨터를 사용하는 사람은 파일 이름으로만 인식하지만, 실제 컴퓨터는 파일이름:inode로 파일과 inode 번호를 매칭시켜 인식한다.

👩‍🏫 참고

• 파일 링크
  • 심볼릭 링크 ln -s source target
  • 하드 링크 ln source target

Ref https://velog.io/@redgem92/운영체제-파일-시스템-inode-방식에-대하여

pnpm patch <pkg>

특정 패키지를 임시 디렉토리에 추출하여 일부 수정해서 사용할 수 있다.

npm은 patch 기능을 별도로 지원하지 않아 [patch-package](https://www.npmjs.com/package/patch-package) 라는 라이브러리를 설치하여 사용해야 한다.

Ref https://pnpm.io/cli/patch

React getSnapshotBeforeUpdate

가장 마지막으로 렌더링된 결과가 DOM 등에 반영되기 전에 호출된다.

이 메서드를 사용하면 컴포넌트가 DOM으로부터 스크롤 위치 등과 같은 정보를 이후 변경되기 전에 얻을 수 있다.

이 생명주기 메서드가 반환하는 값은 componentDidUpdate()에 인자로 전달된다.

Ref https://ko.legacy.reactjs.org/docs/react-component.html#getsnapshotbeforeupdate

Next.js 14

• Rust 기반 Turbopack으로 구동 시 서버가 빨라졌다
  • 로컬 서버 시작 시 53.5%
  • Fast Refresh 업데이트는 94.7%
  • next dev --turbo 로 테스트 가능
• Server Actions
  • 서버 API 엔드포인트를 프론트 코드와 더 쉽게 사용할 수 있다
  • 캐싱 & revalidating과 통합
  • 간단한 함수 호출, form 기본 동작과 함께 작동
  • API route가 필요없는 경우, 서버에서만 동작하는 함수를 만들고 React Component에서 호출할 수 있다
• Partial Prerendering(Preview)
  • 초기 정적 응답이 더 빨라짐
  • 동적 콘텐츠 스트리밍
  • Suspense 경계에 있는 fallback 컴포넌트가 사전 렌더링된다
• Next.js learn에서 next.js 배울 수 있다

Ref https://nextjs.org/blog/next-14

이것저것

• <input> 태그의 accept 속성은 100% 믿을만하지 못하다. 파일 업로드 시 옵션을 ‘사용자 지정 파일’이 아닌 ‘모든파일’로 하면, accept의 제한이 소용 없기 때문에 이벤트핸들러나 서버에서 한번 더 검증해주는 작업이 필요하다.

기타공유

msw 2.0

• 갑자기 함수형 프로그래밍에 영감을 받았나보다…

  Copy

  res(
    ctx.status(201),
    ctx.json({
      id: "abc-123",
      title: "Introducing MSW 2.0",
    })
  );

• Node.js v16 지원을 중단하고 표준 Fetch API를 사용하기 시작했다. 화끈하네

• 2.0부터 새로운 요청 핸들러를 쓰는 방식은 다음과 같다.

  Copy

  import { http } from "msw";
  
  http.get("/resource", async ({ request }) => {
    const user = await request.json();
    return new Response(`Hello, ${user.name}`);
  });

Ref https://mswjs.io/blog/introducing-msw-2.0

CRDT와 그 구현

CRDT는 ‘Conflict-free Replicated Data Type’의 약자로, 서로 다른 컴퓨터(peer)에 저장될 수 있는 데이터 구조를 가리킨다. 각 peer는 다른 peer의 네트워크 요청과 상관없이 스스로의 상태를 즉시 업데이트할 수 있다. CRDT 데이터 구조는 다음 인터페이스를 따른다.

interface CRDT<T, S> {
  value: T;
  state: S;
  merge(state: S): void;
}

• T: 프로그램이 관여하는 나머지 영역
• S: 같은 값에 동의하기 위해 peer들 간에 공유하는 메타데이터
• merge function: 어떤 상태를 받아서 local 상태와 병합하는 함수

출처에서 CRDT를 사용한 더 구체적인 예시들을 볼 수 있다!

Ref https://jakelazaroff.com/words/an-interactive-intro-to-crdts/

Arc 브라우저 릴리즈 영상

거의 매주 업데이트를 하고, 힙하게 유튜브에 릴리즈노트를 올리는 브라우저 제작팀.

그리고 미국에서 만든 새 브라우저를 미국 사람보다 많이 쓰는 한국인의 위엄을 볼 수 있다.

Ref https://www.youtube.com/watch?si=8NrQ7BhkbEzpU9m_&v=vXi8L99p_D0&feature=youtu.be

마무리

슬슬 정신없이 바빠지는 중. 영양제를 추가했다. 이것은 마치 포션

정신 차리자!