Blog
2024
- Decorator로 직조하기무더운 어느날, 도형나라 개발자 '세모'는 4살때 '엄마 아빠'보다 'hello world'를 먼저 외친 천재 개발자이다. '세모'는 자라서 도형나라에서 핵심 개발자가 되어 일필휘지로 코드를 암산하듯 써내려가는 개발자로 이름을 날렸다.
- Proxy와 Reflect 어디다 쓰나?Proxy와 Reflect는 ES6에서 추가된 기능이다. Proxy는 객체의 기본 동작을 가로채는 기능을 제공하고, Reflect는 객체의 기본 동작을 대신하는 메서드를 제공한다. 예시를 통해 알아보자.
- Fly Me To The Moon
- React Compiler, How Does It Work? [4] - SSA Transformation (Theory and Implementation)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?
- 발표
- React Compiler, How Does It Work? [3] - HIR Transformation (Lowering)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.
- React Compiler, How Does It Work? [2] - useMemoCacheLet'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.
- React Compiler, How Does It Work? [1] - Entry Point through Babel PluginWe aim to deeply explore the React Compiler. Let's start by examining the compiler's entry point through the Babel plugin.
- React Conf 2024 하루 전샌프란과 산호세에서의 일상을 먼저 적으려다가, 어느새 베가스 까지 오게 되었다. 본래 목적지였던 라스베이거스, React Conf 2024가 열리는 곳이다. 3년만에 열리는 것이라 그런지 참석자들이 많다. 공항에서 리조트 까지는 거리가 꽤 있는지라 컨퍼런스 디스코드에서 같이 탈 사람을 구하기로 했다.
- 팔로알토벌써 3일차가 되어간다. 한국은 일요일이 끝났지만, 여긴 이제 일요일을 시작한 오전 10시쯤 이다. 매일매일 자기전에 기록을 남겨두고자 하였는데, 시차에 시달리며 촬영한것들 정리하고, 긴장이 풀려 씻고 나니 잠들게 되었다.
- 비행기 안에서고도 33,000피트 태평양 상공 어딘가에서 와이파이를 쓸 수 있을 줄 몰랐다. 잔뜩 오프라인 저장 해온 유튜브 영상들이 무색해졌다. 비행중에 커밋 한줄 남겨보고자 글을 써보고 있다.
- 출국오늘은 출국일이다. React Conf를 보러 미국으로 간다. 어제 무사히 PR을 머지하고 배포도 완료했으니, 머리는 가벼운데, 문제가 있을까 마음은 무겁다 큰 일정이 없는 한 연차를 잘 쓰지 않았던 편이라 올해 첫 연차이기도 하고, 본래 FOMO가 심한 편이라, 뭔가 놓치는 것이 있을까 걱정이다. 일로 부터 잘 떨어져 회복하고 오는 것도 효율적인 개발자이겠지...
- useActionState (form 이 뭘까 2)React에도 form action이라던지 useFormState, useFormStatus 같은 폼에 관련된 hook이 있다. 이런 훅들은 어떤 동작을 하는 것인지 살펴보고자 한다. useActionState 비동기 액션을 처리하기 위한 훅이다. useFormState에 대해서 살펴보고 있었는데, useActionState라는 이름으로 변경되었다.
- form 이 뭘까먼저 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개의 부스터와 스타쉽을 건조하고, 내년까지 공중에서 기체를 잡는 '메카질라' 발사대도 네개나 건설할 계획이라고 한다.
- 2024_1분기정말 빠르게 1분기가 흘러갔다. #운동 작년 1월 부터 시작한 f45를 1년 가까이 다니다 잠시 쉬었다. 운동을 즐겨하던 타입은 아니였어서, 항상 강제성이 동반된 운동을 하였었는데, 마침 유산소, 근력 적절히 섞인 f45가 나에게 잘 맞았다.
- 긍정문제를 맞닥뜨리고, 그것들을 해결하는 일을 한다. '문제'를 계속 마주하게 되면, 부정의 기운에 둘러쌓이기 마련이다. 부정적인 감정은 주변을 너무 쉽게 오염시킨다. 긍정적인 기운을 주는 사람이 되자.
- text-wrap balance 그 뿌리를 찾아서 [1]`text-wrap: balance` 아직 들어보지 못한 사람들도 있겠지만, 위의 구글 문서에서 살펴볼 수 있는 것 처럼 크롬 114버전 부터 지원된 [CSS Text Level4](https://www.w3.org/TR/css-text-4/#text-wrap)에 속하는 CSS 속성이다.
- HTML element attributes 에 대해 알아보자요 발표의 내용의 일부를 보충해서 정리해보았다. React.HTMLAttributes<HTMLButtonElement>, React.HTMLProps<HTMLButtonElement>, JSX.IntrinsicElements['button'], React.ButtonHTMLAttributes<HTMLButtonElement>
- 걸어서 정규표현식 까지 [유한오토마타]시작은 정규표현식에 대한 궁금증에서 시작된다. 정규표현식을 크나큰 생각없이 사용하다가, 이게 무엇이길래? 여러 언어들에서 통용되고 있는것일까? 라는 생각이 들었다.
- 여가활동미드저니 랜딩페이지가 너무 맘에들어서 무슨 라이브러리 썼나 찾아보다가. 클로닝한 영상을 찾게되었다.이분 작업을 보니깐 코드양이 그리 많지는 않아서, 나도 한번 클로닝을 해보았다. 트랜스폼 로직만 조금 분리해내서 파이프라인형태로 넣을 수 있게 만들었다. 만든뒤 lit element로 잘 말아주었다.
- 어떻게 문제를 풀 것인가?설에 집에 들렸다가 고등학교 2학년 때 즈음인가 사두었던 책을 발견했다. 국문으로는 `어떻게 문제를 풀 것인가? - 수학적 사고 방법 -` 라는 책이다. 아마 기억하기로는 Calculus 바이올린 책을 사야해서 교우사 홈페이지를 들어갔다가 발견했던 것 같다.
- Axios 요청을 Cancel해보자 [2]cancelToken이 요청의 config로 들어갈 때, 어떻게 subscribe 되는지를 알아보았다. 이번에는 CancelToken의 구현과 함께, 어떻게 직접적으로 cancel되는 것인지를 알아보자. 먼저 CancelToken의 구현체를 살펴보자.
- Axios 요청을 Cancel해보자 [1]Axios 요청을 Cancel해보자. axios 요청을 보낼 때 cancelToken을 넘겨주면 취소할 수 있다. cancelToken을 넘기면 어디로 흘러갈까?
- 블로그의 미래내일 (토요일) 밤샘 서비스 점검이 있을 예정이라 회사에서 새벽을 보내야해.. 리듬을 맞춰두기 위해 잠을 잘까 말까 고민이다. 그치만 자야겠지. 그래야 내일 일을 할 수 있으니까. 블로그를 만든 이유는, 공부한 것을 올리기 위한 용도도 있지만,
- 내가 궁금한 것들에 대한 기록집앞에 맘스터치가 하나 있는데, 언젠가 어디서 맘스터치의 매콤 김떡만이 그리 맛있다는 이야기를 들었다. 무슨 맛일까? 칠리 소스가 들어간 것일까? 아니면 그냥 매콤한 맛인가? 출퇴근 그 앞을 지나갈 때마다, 아 오늘은 먹어봐야지 하고 생각만 하다가 매번 놓치고 지나갔다.
- 서버에서 styled 컴포넌트 사용하기(부제 : React.cache)제목은 이런데, 사실 찐 styled-components를 사용하는 내용은 아니다. [dream-css-tool](https://github.com/joshwcomeau/dream-css-tool)라는 시도를 하고 계신 분을 발견했다. styled 같은 방식으로 서버컴포넌트에서도 동작하게끔 만드는 시도를 하고 있었다. 우선 사용법 부터 보자. 아래와 같이 사용할 수 있다.
- 붕어빵집앞에 붕어빵 포장마차가 하나 있는데 가격이 한마리에 1,000원이다. 그제 만든 컴포넌트를 정리해보자 처음엔 YouTube 임베드를 위해 적당히 래핑해서 쓰는 lit 컴포넌트를 만들었었다. 유튜브 링크를 받을 src와 캡션을 받기위한 caption,이 두 개의 프로퍼티를 받는다.
- 스발바르_1저 멀리 노르웨이와 북극점 사이 스발바르 제도 라는 곳이 있다. 언젠가 그곳에 가야겠다라는 다짐을 하고 살고 있다. 눈이 쌓인 날들을 참 좋아한다. 하얀 캔버스 같은 느낌도 있고, 멀리서 바라볼땐 깨끗해 보여서 좋다. 눈이 무릎까지 쌓여서 걷기 힘든 날들을 상상해보곤 하는데, 아직까진 그런 날들은 없었다. 그런 곳에 가지 못했기 때문이겠지.
- 블로그[Astro 4.0](https://astro.build/blog/astro-4/)이 릴리즈 되었다는 소식을 들었다. 블로그도 업데이트 할겸 겸사겸사 업데이트를 했다. 아일랜드 아키텍쳐.. 기타 ... 등등.. Astro가 가진 장점들에 대해서는 깊게 파악하고 선택한 것은 아니였다.
2023
- 2023년_회고올해 내 상반기 그리고 절반의 하반기를 가득 채웠던 마이브릿지. 마이브릿지는 일본에서 운영하고 있는 리멤버의 일본 버전인 명함 관리 서비스이다. 리멤버에서 2년째 접어드는 시점 그리고 2023년의 시작과 함께 신사업 Crew라는 새로운 조직이 만들어졌고, 6월 초를 목표로 기존에 일본에서 무료로 운영하던 마이브릿지에 유료화 하는 작업이 시작되었다.
- Top Layer 애니메이션모든 엘리먼트 위에 랜더링 되는 엘리먼트 지원되는 엘리먼트 `<dialog>` popover속성 `<div popover=auto>` 목표는 이 엘리먼트들을 animatable 하게 만드는 것