shiwoo.dev logoshiwoo.dev

뉴스레터about me
  • GitHub
  • LinkedIn
  • Email
© 2026 Shi Woo, Park (custardcream98)
All rights reserved.
← 지난 이슈

프론트엔드 뉴스레터

#06

2026년 10월 11일3개 소식

이번 이슈 한눈에

  • React Aria Sheet는 브라우저의 스크롤 제스처로 펼치거나 닫아요.
  • React의 parent와 owner 관계를 한 그림에서 구분해요.
  • Ink 8은 React 19.3 이상이 필요하고, 최소·최대 너비와 stream 타입이 바뀝니다.
  1. 01

    react-aria.adobe.com

    React Aria Sheet는 브라우저 스크롤 제스처로 펼치거나 닫아요

    react-aria-components 1.22.0에 브라우저의 스크롤 제스처를 사용하는 Sheet가 추가됐어요. snapPoints로 일부만 열린 상태를 지정하면 첫 snap point에서 열리고, 위로 밀어 완전히 펼치거나 아래로 밀어 닫을 수 있습니다.

    Sheet와 SheetBackdrop의 swipeAnimation에는 CSS keyframe 애니메이션 이름을 지정해요. 스와이프 제스처와 진입·퇴장 애니메이션에 맞춰 재생됩니다.

    원문 읽기 ↗
  2. 02

    julesblom.com

    React의 parent와 owner 관계를 한 그림에 겹쳐 보여줘요

    Jules Blom이 컴포넌트가 어디에 놓이는지와 누가 그 JSX를 만들었는지를 한 그림에 표시하는 표기법을 제안했어요. children이나 다른 prop으로 JSX를 넘기면 parent와 owner가 달라지는데, 트리 위에 별도의 곡선을 그려 이 관계를 구분합니다.

    Context를 읽을 수 있는 범위는 parent tree를 따르고, props는 owner 관계를 따라 전달돼요. 같은 그림에서 Suspense의 fallback이 대체하는 범위와 Client Component의 children으로 전달된 Server Component도 확인할 수 있습니다.

    • 시각화 도구는 아직 작고 선별된 예제에서 동작하는 단계입니다. 실제 대규모 코드베이스를 탐색하는 도구로 완성된 것은 아니에요.
    원문 읽기 ↗
  3. 03

    github.com

    Ink 8, 스크롤 영역을 추가하고 너비·stream 타입을 바꿨어요

    Ink 8에서는 Box의 contentOffsetX·contentOffsetY를 overflow="hidden"과 함께 써서 스크롤 영역을 만들 수 있어요. incrementalRendering 모드는 줄 전체를 다시 쓰지 않고 바뀌지 않은 앞부분을 건너뛰어 출력량과 깜빡임을 줄입니다. React 19.3 이상이 필요하며, @types/react를 사용하는 프로젝트에서는 타입 패키지도 19.3 이상으로 맞춰야 해요.

    • Box의 minWidth·maxWidth는 숫자만 받습니다. 퍼센트 문자열은 Yoga가 잘못된 조상을 기준으로 계산하던 문제 때문에 제외됐어요. 퍼센트 기반 최소·최대 너비가 필요하면 useWindowSize()나 부모의 useBoxMetrics()로 계산해야 합니다. width는 계속 퍼센트 문자열을 지원해요.
    • render()와 stream hooks의 타입이 일반 Node.js stream으로 바뀌어 stdout.columns 같은 TTY 속성에 바로 접근할 수 없습니다. 화면 크기는 resize 때도 다시 렌더링하는 useWindowSize()로 읽습니다.
    원문 읽기 ↗

다음 이슈 받아보기

읽어볼 만한 프론트엔드 소식과 글을 골라 보내드립니다.

언제든 구독을 취소할 수 있어요.

← 뉴스레터 #5 · 2026-10-10