React Server Components를 위한 컴포넌트 아키텍처2026.06.01React Server Components를 위한 컴포넌트 아키텍처ReactNext.js번역 및 정리#suspense#architecture#react-server-components2026.06.01React Server Components를 위한 컴포넌트 아키텍처ReactNext.js번역 및 정리#suspense#architecture#react-server-components이 포스트는 Vercel의 Next.js 팀 소속 개발자 Aurora Scharff가 자신의 블로그에 올린 Component Architecture for React Server Components 게시글을 번역한 것이다. 번역하는 과정에서 다소 의역이 있을 수 있으며, 일부 번역에는…
차트는 멈췄는데 윈도우가 움직인다2026.05.26차트는 멈췄는데 윈도우가 움직인다TypescriptReactError Case#error-case#debugging#hooks2026.05.26차트는 멈췄는데 윈도우가 움직인다TypescriptReactError Case#error-case#debugging#hooks상황 어느날 서비스를 살펴보시던 팀장님께서 이런 말씀을 slack에 남기셨다. 진호님, 예측 차트에서 zoom을 계속하면 어느 순간 라인 차트가 아니라 단일 스캐터 차트처럼 보이는 데, 이거 수정하면 좋을 거 같아요. 어느정도 zoom을 하면 그 이후로는 zoom이 안 되도록 할 수 없…
store와 state가 함께 만드는 상태 미들웨어 파이프라인2026.05.11store와 state가 함께 만드는 상태 미들웨어 파이프라인ilokesto#store#state2026.05.11store와 state가 함께 만드는 상태 미들웨어 파이프라인ilokesto#store#state상태 관리 코어를 작게 유지하려고 하면 곧바로 한 가지 질문을 만나게 된다. 상태를 읽고, 바꾸고, 구독하게 해주는 것만으로 충분한가. 처음에는 충분해 보인다. 하지만 실제 애플리케이션으로 들어가면 업데이트를 기록하고 싶고, 잘못된 값은 막고 싶고, 들어온 값을 정규화하고 싶고, 상태가…
프레임워크 밖의 상태를 UI 안으로 들이는 법2026.05.10프레임워크 밖의 상태를 UI 안으로 들이는 법ilokesto#store2026.05.10프레임워크 밖의 상태를 UI 안으로 들이는 법ilokesto#store외부 상태는 프레임워크 내부에서 만들어진 상태가 아니다. React의 useState, Vue의 ref, Svelte의 $state, Solid의 createSignal처럼 프레임워크가 직접 소유하고 추적하는 값이 아니라, 프레임워크 바깥에서 먼저 존재하고 바깥에서 변하는 값이다. We…
작은 Store 클래스가 상태 관리의 출발점이 되는 이유2026.05.10작은 Store 클래스가 상태 관리의 출발점이 되는 이유ilokesto#store2026.05.10작은 Store 클래스가 상태 관리의 출발점이 되는 이유ilokesto#store상태 관리 라이브러리를 볼 때 먼저 눈에 들어오는 것은 보통 기능 목록이다. selector가 있는지, devtools와 연결되는지, persistence를 지원하는지, React 훅이 준비되어 있는지 같은 것들 말이다. 그런데 @ilokesto/store의 Store 클래스를 보면 질…
TanStack Router 파일 기반 라우팅과 타입 안전하게 React 구조 잡기2026.05.09TanStack Router 파일 기반 라우팅과 타입 안전하게 React 구조 잡기유용한 도구들2026.05.09TanStack Router 파일 기반 라우팅과 타입 안전하게 React 구조 잡기유용한 도구들React 앱의 라우팅은 처음에는 별일 아닌 것처럼 보인다. /about으로 가면 About 화면을 보여주고, /posts/1로 가면 1번 글을 보여주면 된다. 문제는 앱이 조금만 커져도 URL이 더 이상 주소표시줄의 문자열로만 남아 있지 않다는 데 있다. URL은 권한의 경계가 되고,…
Changesets 실무 운영 가이드: 내부 의존성, prerelease, 운영 Q&A2026.05.05Changesets 실무 운영 가이드: 내부 의존성, prerelease, 운영 Q&A유용한 도구들#changesets#monorepo2026.05.05Changesets 실무 운영 가이드: 내부 의존성, prerelease, 운영 Q&A유용한 도구들#changesets#monorepo이 글은 Changesets로 모노레포 릴리즈를 관리하는 시리즈의 3편이다. 1편에서는 changeset 파일을 작성하는 방법을, 2편에서는 GitHub Actions로 Version Packages PR과 publish를 자동화하는 흐름을 다뤘다. 이번 글에서는 실제 운영 중 자주 헷…
Changesets와 GitHub Actions로 릴리즈 자동화하기2026.05.05Changesets와 GitHub Actions로 릴리즈 자동화하기유용한 도구들#changesets#monorepo2026.05.05Changesets와 GitHub Actions로 릴리즈 자동화하기유용한 도구들#changesets#monorepo이 글은 Changesets로 모노레포 릴리즈를 관리하는 시리즈의 2편이다. 1편에서 changeset 파일로 변경 의도를 기록했다면, 이번 글에서는 그 파일을 기준으로 GitHub Actions가 Version Packages PR을 만들고 publish까지 이어지는 흐름을 다룬다.…
Changesets로 모노레포 버전 관리 시작하기2026.05.05Changesets로 모노레포 버전 관리 시작하기유용한 도구들#changesets#monorepo2026.05.05Changesets로 모노레포 버전 관리 시작하기유용한 도구들#changesets#monorepo이 글은 Changesets로 모노레포 릴리즈를 관리하는 시리즈의 1편이다. 여기서는 Changesets를 왜 도입하는지, 어떤 파일을 남기는지, PR 단계에서 semver 판단을 어떻게 기록하는지에 집중한다. 1편: Changesets로 모노레포 버전 관리 시작하기 2편: Change…
필요한 사람들의 세상 - omocon 후기2026.04.29필요한 사람들의 세상 - omocon 후기잡생각#omo2026.04.29필요한 사람들의 세상 - omocon 후기잡생각#omo이전 잡생각인 <너만의 월남쌈을 싸> 와 맥락적으로 이어지는 부분이 있지만, 꼭 가서 볼 필요는 없습니다. 나는 10년이라는 시간 동안 장편과 단편 소설을 썼다. 하지만 5년 전 어느 순간부터 더 이상 써야 할 이야기가 남지 않았다는 느낌을 받았고, 그 이후로는 단 한 번도 완성된 형태…
너만의 월남쌈을 싸2026.04.23너만의 월남쌈을 싸ilokesto잡생각2026.04.23너만의 월남쌈을 싸ilokesto잡생각이 포스트의 제목은 유튜브 영상 <너만의 월남쌈을 싸 - 아이네 INE>에서 따왔다. 4월 초부터 @ilokesto 네임스페이스에 속한 거의 모든 라이브러리를 리뉴얼 하고 있다. 이미 deprecated 처리는 끝났고, 새로운 기준 위에서 라이브러리의 구조를 재정의하는 단계를 거치고 있…
Code Server2026.04.17Code Server유용한 도구들2026.04.17Code Server유용한 도구들처음 코드 서버를 만들었던 건 아마도 3년쯤 전의 일이다. 맥미니만 있던 탓에 밖에서 개발하는 게 쉽지 않았고, 아이패드로 언제 어디서든 개발을 하고 싶었던 끝에 찾아낸 해결책이었다. 다행히 집에는 Synology NAS가 있었고, Docker를 통해 어렵지 않게 코드 서버를 만들 수…
Trie 자료구조2026.04.11Trie 자료구조Javascript번역 및 정리#자료구조#trie2026.04.11Trie 자료구조Javascript번역 및 정리#자료구조#trie문자열 데이터를 다룰 때 단순히 “이 단어가 있나?”만으로는 부족한 순간이 있다. 자동 완성처럼 특정 접두사로 시작하는 후보를 모아야 할 때도 있고, 어떤 키에 값을 두고 빠르게 찾고 싶을 때도 있다. 이럴 때 가장 자연스럽게 떠올릴 수 있는 자료구조가 바로 Trie이다. Trie는 무…
렌더링 전략 정리2026.03.01렌더링 전략 정리ReactNext.js2026.03.01렌더링 전략 정리ReactNext.js리액트와 Next.js에서 렌더링 전략은 단순한 옵션 선택이 아니다. 이는 서비스의 초기 로딩 속도, 서버 비용, 캐싱 전략, SEO 노출, 개발 복잡도까지 동시에 좌우하는 아키텍처 결정이다. 프로젝트 규모가 커질수록 “어디에서 HTML을 생성하는가”, “언제 자바스크립트를 실행하는가”…
함수, 펑터, 그리고 모나드2026.03.01함수, 펑터, 그리고 모나드번역 및 정리#functional2026.03.01함수, 펑터, 그리고 모나드번역 및 정리#functional복잡한 버그는 대개 거대한 기능이 아니라 사소한 데이터 변환 구간에서 시작된다. 문자열을 한 번 다듬고, 숫자를 한 번 바꾸고, 그 결과를 다음 단계로 넘기는 단순한 흐름이다. 그런데 조건이 조금씩 추가되는 순간 로직은 빠르게 복잡해진다. 값만 바꾸던 코드가 어느새 값의 부재, 비동기…
View Transition API2026.02.22View Transition APIJavascriptCSSReact2026.02.22View Transition APIJavascriptCSSReact웹 애플리케이션에서 전환 품질은 기능 완성도와 동등한 수준으로 중요하다. 사용자가 목록에서 항목을 선택해 상세 화면으로 이동할 때, 화면이 자연스럽게 이어지면 서비스는 빠르고 안정적으로 느껴진다. 반대로 동일한 기능이라도 전환이 끊기면 체감 성능과 신뢰도는 동시에 하락한다. 전환은 부가…
Proxy를 이용한 브라켓 기반 DSL 설계2026.02.14Proxy를 이용한 브라켓 기반 DSL 설계Javascript2026.02.14Proxy를 이용한 브라켓 기반 DSL 설계Javascript자바스크립트에서 obj[key]는 가장 기본적인 문법이다. 우리는 이를 단순한 프로퍼티 조회로 받아들인다. 특정 key를 넣으면 그에 해당하는 값을 반환하는, 가장 직관적인 접근 방식이다. 그러나 Proxy를 사용하면 이 동작을 가로채고 전혀 다른 의미로 재정의할 수 있다. 문법은 그대…
Git Worktree2026.02.02Git Worktree유용한 도구들#git2026.02.02Git Worktree유용한 도구들#gitGit으로 여러 작업을 병렬로 진행하다 보면 브랜치 전환 자체가 비용이 되는 순간이 잦다. 기능 개발 중에 긴급 핫픽스를 처리해야 하거나, PR 리뷰를 위해 다른 브랜치를 실행해 봐야 하는 상황에서 git checkout과 stash를 반복하는 방식은 작업 흐름을 지속적으로 끊는다. 이…
Static Hermes로 JavaScript를 C 코드로 컴파일하기2026.01.15Static Hermes로 JavaScript를 C 코드로 컴파일하기번역 및 정리#static-hermes2026.01.15Static Hermes로 JavaScript를 C 코드로 컴파일하기번역 및 정리#static-hermes이 포스트는 parcel의 메인테이너 Devon Govett가 자신의 블로그에 올린 How to compile JavaScript to C with Static Hermes 게시글을 번역한 것이다. 번역하는 과정에서 다소 의역이 있을 수 있으며, 일부 번역에는 사견이 포함되어있기도 하다…
CSS Color Functions2026.01.03CSS Color FunctionsCSS번역 및 정리#color-space#colors#design#gradients2026.01.03CSS Color FunctionsCSS번역 및 정리#color-space#colors#design#gradients이 포스트는 Sunkanmi Fafowora가 css-tricks에 올린 CSS Color Functions 게시글을 번역한 것이다. 번역하는 과정에서 다소 의역이 있을 수 있으며, 일부 번역에는 사견이 포함되어있기도 하다. 몇 달 전 누군가 저에게 “웹사이트가 돋보이려면 무엇이 필요할…