useEffectEvent가 Stale Closure를 해결하는 원리를 React 내부 구현과 함께 분석하고, React Compiler의 fire()가 이를 어떻게 자동화하는지 살펴봅니다.

리멤버에서의 4.5년을 돌아보며, 테크리드 경험과 성장에 대한 고민, 그리고 이직, 그리고 FEConf 발표와 필름 작업 등 올해의 기억들을 정리해봅니다.

CSS에 새롭게 추가된 `if()` 함수를 통해 조건부 스타일링을 구현하고, CSS로 논리 게이트를 만들어보는 방법을 소개합니다.

최근에 판단을 해야하는 일들이 많아졌다. 나는 머릿속으로 이것저것 따지느라 판단을 빨리 하지 못하는 스타일이다. 그래서 순간적인 판단에는 좀 약한 편인데 이를 좀 훈련해보고자 판단의 프로세스를 정리해보고 있다.

Promise.try 의 기원과 제안과정, 그리고 구현에 대해서 같이 살펴보자. Promise.try 이것이 표준으로 올라왔다고 했을때, 살펴봤었지만. 무엇을 위한 것인지를 바로 이해하기는 쉽지 않았다. 분명 어떤 목적을 가지고 탄생했을텐데... 오히려 엄청난 기능이면 몰라도, 이런 소소한 것이 추가된 것에는 분명 스토리가 있을 것 같았다. 설령 대단한 이야기는 아니더라도. 오늘은 고고학자가 되어 이번 기회에 그 기원과 제안과정, 그리고 구현에 대해서 같이 살펴보자.

오슬로에서의 첫날

타원의 수학적 아름다움과, 당들랭의 구를 통한 원기둥 단면의 기하학적 성질을 탐구하는 글입니다. 고등학교 시절의 호기심에서 시작된 타원 둘레 계산에 관한 여정과 3D 시각화를 통해 직관적으로 이해하는 과정을 담았습니다.

TopLayer(dialog, popover API)를 사용할 때 React DevTools의 하이라이트와 인스펙터가 정상적으로 표시되지 않는 문제와 이를 해결하기 위해 React 오픈소스에 직접 기여한 경험을 공유합니다.

스발바르 여행을 준비하며...

Norsk er et veldig vanskelig språk.

2024년 마지막날

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

Proxy와 Reflect는 ES6에서 추가된 기능이다. Proxy는 객체의 기본 동작을 가로채는 기능을 제공하고, Reflect는 객체의 기본 동작을 대신하는 메서드를 제공한다. 예시를 통해 알아보자.

React Compiler의 SSA 변환에 대해 알아보자. SSA는 Static Single Assignment의 약자로, 최적화를 위해 사용되는 중간 표현 중 하나입니다. SSA는 변수가 한 번만 대입되도록 제한하는 특징이 있습니다. SSA 변환 알고리즘의 핵심은 phi함수를 어디에 놓을지를 결정하는 것입니다. React Compiler의 경우 어떤 알고리즘을 사용하고 있을까요?

React Compiler의 Lowering 과정을 살펴보자. AST를 HIR로 변환하는 과정이다.

React Compiler의 주요 구성 요소 중 하나인 useMemoCache에 대해 깊게 알아보자, useMemoCache의 동작 원리와, 구현을 살펴보고, 실험적인 기능인 enableNoCloningMemoCache에 대해 알아보자.

React Compiler에 대해 깊이 파헤쳐보고자 한다. 우선은 바벨 플러그인을 통해 컴파일러의 진입점을 살펴보자.

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

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

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

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

React에도 form action이라던지 useFormState, useFormStatus 같은 폼에 관련된 hook이 있다. 이런 훅들은 어떤 동작을 하는 것인지 살펴보고자 한다. useActionState 비동기 액션을 처리하기 위한 훅이다. useFormState에 대해서 살펴보고 있었는데, 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,이 두 개의 프로퍼티를 받는다.

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

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

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

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