Sharing the experience of encountering an issue where React DevTools highlights and inspectors don't display correctly when using TopLayer (dialog, popover API), and contributing directly to the React open source project to fix it.

Preparing for a trip to Svalbard...

Norsk er et veldig vanskelig språk.

2024년 마지막날

무더운 어느날, 도형나라 개발자 '세모'는 4살때 '엄마 아빠'보다 'hello world'를 먼저 외친 천재 개발자이다. '세모'는 자라서 도형나라에서 핵심 개발자가 되어 일필휘지로 코드를 암산하듯 써내려가는 개발자로 이름을 날렸다.

Proxy and Reflect are features added in ES6. Proxy provides functionality to intercept the basic operations of an object, while Reflect provides methods that replicate these basic operations. Let's explore through examples.

Let's explore the SSA transformation in React Compiler. SSA stands for Static Single Assignment, which is one of the intermediate representations used for optimization. SSA has the characteristic of restricting variables to be assigned only once. The core of the SSA transformation algorithm is deciding where to place phi functions. What algorithm does React Compiler use?

Let's explore the Lowering process of React Compiler. We'll examine how it converts AST to HIR, how it handles hoisting during this process, and why it's done this way.

Let's take a deep dive into useMemoCache, one of the key components of React Compiler. We'll explore the operating principles of useMemoCache, examine its implementation, and learn about the experimental feature enableNoCloningMemoCache.

We aim to deeply explore the React Compiler. Let's start by examining the compiler's entry point through the Babel plugin.

샌프란과 산호세에서의 일상을 먼저 적으려다가, 어느새 베가스 까지 오게 되었다. 본래 목적지였던 라스베이거스, React Conf 2024가 열리는 곳이다. 3년만에 열리는 것이라 그런지 참석자들이 많다. 공항에서 리조트 까지는 거리가 꽤 있는지라 컨퍼런스 디스코드에서 같이 탈 사람을 구하기로 했다.

벌써 3일차가 되어간다. 한국은 일요일이 끝났지만, 여긴 이제 일요일을 시작한 오전 10시쯤 이다. 매일매일 자기전에 기록을 남겨두고자 하였는데, 시차에 시달리며 촬영한것들 정리하고, 긴장이 풀려 씻고 나니 잠들게 되었다.

고도 33,000피트 태평양 상공 어딘가에서 와이파이를 쓸 수 있을 줄 몰랐다. 잔뜩 오프라인 저장 해온 유튜브 영상들이 무색해졌다. 비행중에 커밋 한줄 남겨보고자 글을 써보고 있다.

오늘은 출국일이다. React Conf를 보러 미국으로 간다. 어제 무사히 PR을 머지하고 배포도 완료했으니, 머리는 가벼운데, 문제가 있을까 마음은 무겁다 큰 일정이 없는 한 연차를 잘 쓰지 않았던 편이라 올해 첫 연차이기도 하고, 본래 FOMO가 심한 편이라, 뭔가 놓치는 것이 있을까 걱정이다. 일로 부터 잘 떨어져 회복하고 오는 것도 효율적인 개발자이겠지...

React has hooks related to forms such as form action, useFormState, and useFormStatus. I want to explore how these hooks work. useActionState is a hook for handling asynchronous actions. I was looking at useFormState, but it has been renamed to useActionState.

먼저 form이 무엇인가? 누군가 이 질문을 던진다면 뭐라고 답할 것인가? Hypertext Markup Language - 2.0 에 따르면 form은 다음과 같이 정의된다. A form is a template for a form data set and an associated method and action URI.

서두에 붙여둔 영상이다. 일론머스크가 스타쉽 관련해서 계획을 이야기하는 영상이다. 올해안에 6개의 부스터와 스타쉽을 건조하고, 내년까지 공중에서 기체를 잡는 '메카질라' 발사대도 네개나 건설할 계획이라고 한다.

정말 빠르게 1분기가 흘러갔다. #운동 작년 1월 부터 시작한 f45를 1년 가까이 다니다 잠시 쉬었다. 운동을 즐겨하던 타입은 아니였어서, 항상 강제성이 동반된 운동을 하였었는데, 마침 유산소, 근력 적절히 섞인 f45가 나에게 잘 맞았다.

문제를 맞닥뜨리고, 그것들을 해결하는 일을 한다. '문제'를 계속 마주하게 되면, 부정의 기운에 둘러쌓이기 마련이다. 부정적인 감정은 주변을 너무 쉽게 오염시킨다. 긍정적인 기운을 주는 사람이 되자.

`text-wrap: balance` 아직 들어보지 못한 사람들도 있겠지만, 위의 구글 문서에서 살펴볼 수 있는 것 처럼 크롬 114버전 부터 지원된 [CSS Text Level4](https://www.w3.org/TR/css-text-4/#text-wrap)에 속하는 CSS 속성이다.

요 발표의 내용의 일부를 보충해서 정리해보았다. React.HTMLAttributes<HTMLButtonElement>, React.HTMLProps<HTMLButtonElement>, JSX.IntrinsicElements['button'], React.ButtonHTMLAttributes<HTMLButtonElement>

시작은 정규표현식에 대한 궁금증에서 시작된다. 정규표현식을 크나큰 생각없이 사용하다가, 이게 무엇이길래? 여러 언어들에서 통용되고 있는것일까? 라는 생각이 들었다.

미드저니 랜딩페이지가 너무 맘에들어서 무슨 라이브러리 썼나 찾아보다가. 클로닝한 영상을 찾게되었다.이분 작업을 보니깐 코드양이 그리 많지는 않아서, 나도 한번 클로닝을 해보았다. 트랜스폼 로직만 조금 분리해내서 파이프라인형태로 넣을 수 있게 만들었다. 만든뒤 lit element로 잘 말아주었다.

설에 집에 들렸다가 고등학교 2학년 때 즈음인가 사두었던 책을 발견했다. 국문으로는 `어떻게 문제를 풀 것인가? - 수학적 사고 방법 -` 라는 책이다. 아마 기억하기로는 Calculus 바이올린 책을 사야해서 교우사 홈페이지를 들어갔다가 발견했던 것 같다.

cancelToken이 요청의 config로 들어갈 때, 어떻게 subscribe 되는지를 알아보았다. 이번에는 CancelToken의 구현과 함께, 어떻게 직접적으로 cancel되는 것인지를 알아보자. 먼저 CancelToken의 구현체를 살펴보자.

Axios 요청을 Cancel해보자. axios 요청을 보낼 때 cancelToken을 넘겨주면 취소할 수 있다. cancelToken을 넘기면 어디로 흘러갈까?

내일 (토요일) 밤샘 서비스 점검이 있을 예정이라 회사에서 새벽을 보내야해.. 리듬을 맞춰두기 위해 잠을 잘까 말까 고민이다. 그치만 자야겠지. 그래야 내일 일을 할 수 있으니까. 블로그를 만든 이유는, 공부한 것을 올리기 위한 용도도 있지만,

집앞에 맘스터치가 하나 있는데, 언젠가 어디서 맘스터치의 매콤 김떡만이 그리 맛있다는 이야기를 들었다. 무슨 맛일까? 칠리 소스가 들어간 것일까? 아니면 그냥 매콤한 맛인가? 출퇴근 그 앞을 지나갈 때마다, 아 오늘은 먹어봐야지 하고 생각만 하다가 매번 놓치고 지나갔다.

제목은 이런데, 사실 찐 styled-components를 사용하는 내용은 아니다. [dream-css-tool](https://github.com/joshwcomeau/dream-css-tool)라는 시도를 하고 계신 분을 발견했다. styled 같은 방식으로 서버컴포넌트에서도 동작하게끔 만드는 시도를 하고 있었다. 우선 사용법 부터 보자. 아래와 같이 사용할 수 있다.

집앞에 붕어빵 포장마차가 하나 있는데 가격이 한마리에 1,000원이다. 그제 만든 컴포넌트를 정리해보자 처음엔 YouTube 임베드를 위해 적당히 래핑해서 쓰는 lit 컴포넌트를 만들었었다. 유튜브 링크를 받을 src와 캡션을 받기위한 caption,이 두 개의 프로퍼티를 받는다.

저 멀리 노르웨이와 북극점 사이 스발바르 제도 라는 곳이 있다. 언젠가 그곳에 가야겠다라는 다짐을 하고 살고 있다. 눈이 쌓인 날들을 참 좋아한다. 하얀 캔버스 같은 느낌도 있고, 멀리서 바라볼땐 깨끗해 보여서 좋다. 눈이 무릎까지 쌓여서 걷기 힘든 날들을 상상해보곤 하는데, 아직까진 그런 날들은 없었다. 그런 곳에 가지 못했기 때문이겠지.

Far away between Norway and the North Pole, there lies the Svalbard archipelago. I've made a commitment to visit there someday. I really love snowy days. They feel like a white canvas, and look so clean from a distance. I've often imagined days where the snow is knee-deep, making it difficult to walk, but I haven't experienced such days yet. That's probably because I haven't been to such a place.

[Astro 4.0](https://astro.build/blog/astro-4/)이 릴리즈 되었다는 소식을 들었다. 블로그도 업데이트 할겸 겸사겸사 업데이트를 했다. 아일랜드 아키텍쳐.. 기타 ... 등등.. Astro가 가진 장점들에 대해서는 깊게 파악하고 선택한 것은 아니였다.

올해 내 상반기 그리고 절반의 하반기를 가득 채웠던 마이브릿지. 마이브릿지는 일본에서 운영하고 있는 리멤버의 일본 버전인 명함 관리 서비스이다. 리멤버에서 2년째 접어드는 시점 그리고 2023년의 시작과 함께 신사업 Crew라는 새로운 조직이 만들어졌고, 6월 초를 목표로 기존에 일본에서 무료로 운영하던 마이브릿지에 유료화 하는 작업이 시작되었다.

모든 엘리먼트 위에 랜더링 되는 엘리먼트 지원되는 엘리먼트 `<dialog>` popover속성 `<div popover=auto>` 목표는 이 엘리먼트들을 animatable 하게 만드는 것