피자가게로 이해하는 디자인 패턴2026.05.21피자가게로 이해하는 디자인 패턴pizza-design-patterns-series#gof#object-oriented#design-patterns2026.05.21피자가게로 이해하는 디자인 패턴pizza-design-patterns-series#gof#object-oriented#design-patterns에이든 피자는 처음부터 복잡한 시스템을 만들 생각이 없었다. 처음에는 메뉴 몇 개만 만들면 됐다. 그런데 손님은 커스텀 주문을 넣기 시작했고, 주방은 상태를 나눠야 했고, 결제와 배달앱과 알림이 하나씩 붙었다. 코드도 가게를 닮는다. 장사가 잘될수록 이상하게 더 쉽게 망가진다. 디자인…
OpenCode + OMO 에이전트 실전 가이드2026.05.21OpenCode + OMO 에이전트 실전 가이드Agentic Codingopencode-omo-series#opencode#omo2026.05.21OpenCode + OMO 에이전트 실전 가이드Agentic Codingopencode-omo-series#opencode#omo에이전트를 많이 만든다고 작업이 자동으로 잘 굴러가지는 않는다. 오히려 역할이 겹치고, 권한이 과하게 열리고, 어느 순간부터는 사람이 에이전트들을 관리하느라 더 바빠지는 일이 생긴다. OpenCode와 OMO(Oh My OpenAgent)를 함께 쓸 때 필요한 것은 더 많은 프롬프트가…
fluo DI 시리즈2026.05.06fluo DI 시리즈fluofluo-di-series#dependency-injection2026.05.06fluo DI 시리즈fluofluo-di-series#dependency-injectionDI 컨테이너는 겉으로 보면 꽤 조용한 도구다. 클래스를 하나 달라고 하면 인스턴스가 나오고, 모듈을 부트스트랩하면 provider들이 알아서 이어진다. 문제는 “알아서”라는 단어가 커질수록 코드가 점점 마법처럼 보인다는 데 있다. 마법은 데모에서는 멋지지만, 장애가 나면 갑자기 로그를…
메모리 비용 관점에서의 Proxy 객체와 공유 프로토타입 비교2026.07.14메모리 비용 관점에서의 Proxy 객체와 공유 프로토타입 비교Javascript#dsl#proxy#tanstack+2 more categories or tags2026.07.14메모리 비용 관점에서의 Proxy 객체와 공유 프로토타입 비교Javascript#dsl#proxy#tanstack+2 more categories or tags예전에 Proxy를 이용해 브라켓 문법을 DSL로 확장하는 실험을 한 적이 있다. obj[WHERE](predicate)[VALUES]()처럼, 자바스크립트의 기본 문법은 그대로 두되 그 해석만 바꿔 작은 쿼리 엔진처럼 동작하게 만드는 글이었다. 그때는 "문법은 고정되어 있지만 해석은…
Dialog.Root는 정말 번들 크기를 키울까?2026.07.09Dialog.Root는 정말 번들 크기를 키울까?ReactNext.js#performance#component+3 more categories or tags2026.07.09Dialog.Root는 정말 번들 크기를 키울까?ReactNext.js#performance#component+3 more categories or tagsDialog.Root 같은 API를 볼 때마다 약간 궁금했다. 이거, 번들 크기에는 괜찮을까? 겉으로 보기에는 별문제 없어 보인다. Dialog.Root, Dialog.Trigger, Dialog.Content처럼 이름이 잘 묶여 있고, 사용하는 쪽에서도 읽기 쉽다. React 컴포넌트…
OpenCodeReview를 Ollama Cloud와 같이 쓰기2026.07.07OpenCodeReview를 Ollama Cloud와 같이 쓰기Agentic Coding유용한 도구들#ollama#ai-agent+2 more categories or tags2026.07.07OpenCodeReview를 Ollama Cloud와 같이 쓰기Agentic Coding유용한 도구들#ollama#ai-agent+2 more categories or tagsAI 코드 리뷰 도구는 이제 너무 많다. Claude Code에게 “현재 변경사항 리뷰해줘”라고 말할 수도 있고, Codex나 Cursor에서도 비슷한 일을 시킬 수 있다. 문제는 그 다음이다. 리뷰라는 작업은 생각보다 귀찮게 정확해야 한다. 어떤 파일을 봐야 하는지, 어느 라인에 코멘…
Next.js에서 Active NavLink 컴포넌트 만들기2026.07.05Next.js에서 Active NavLink 컴포넌트 만들기ReactNext.js번역#navigation+4 more categories or tags2026.07.05Next.js에서 Active NavLink 컴포넌트 만들기ReactNext.js번역#navigation+4 more categories or tags이 포스트는 Vercel의 Next.js 팀 소속 개발자 Aurora Scharff가 자신의 블로그에 올린 Building an Active NavLink Component in Next.js 게시글을 번역한 것이다. 번역 과정에서 약간의 의역이 있고, 일부에는 내 의견도 섞여 있다.…
Fragment는 빈 태그가 아니었다2026.06.30Fragment는 빈 태그가 아니었다React#readability#frontend2026.06.30Fragment는 빈 태그가 아니었다React#readability#frontend리액트에서 리스트를 렌더링하다 보면 손이 먼저 움직이는 순간이 있다. 한 아이템에서 여러 요소를 반환해야 하니 일단 <>...</>로 감싼다. items.map((item) => ( <> <span>{item.title}</span> <span>{item.description}</spa…
Zustand 미들웨어를 읽는 순서로 돌려놓기2026.06.22Zustand 미들웨어를 읽는 순서로 돌려놓기TypescriptReact유용한 도구들#readability+3 more categories or tags2026.06.22Zustand 미들웨어를 읽는 순서로 돌려놓기TypescriptReact유용한 도구들#readability+3 more categories or tagsZustand로 스토어를 만들다 보면 처음에는 코드가 꽤 단정해 보인다. 상태 타입을 만들고, create()에 생성 함수를 넘기고, 필요한 미들웨어를 하나씩 감싸면 된다. persist를 붙이면 새로고침 뒤에도 값이 남고, devtools를 붙이면 Redux DevTools에서 변경을…