All posts

Lighthouse를 돌리고 나면 늘 비슷한 충동이 생긴다. 점수가 낮다. 그러니 priority를 붙이고, 이미지를 줄이고, 렌더링을 쪼개고, 캐시를 더 얹어야 할 것 같다. 몇 개를 한꺼번에 고친 뒤 점수가 오르면 마음도 편해진다. 다만 그때부터는 무엇이 효과가 있었는지, 무엇은 사…

이 포스트는 Vercel의 Next.js 팀 소속 개발자 Aurora Scharff가 자신의 블로그에 올린 The Precompute Pattern: Encoding Dynamic Data into URLs in Next.js 게시글을 번역한 것이다. 번역하는 과정에서 다소 의역이 있을…

유튜브에서 그런 영상을 본 적이 있다. LG에서 코지 제의가 왔을 텐데 왜 현장으로 돌아가지 않은건지 묻는 질문에 박용택 해설위원은 "돈 때문"이라 대답했다. 자식도 있고 이미 늘어난 씀씀이를 유지하려면 코치 월급으로는 어림도 없다. 현역 시절 벌어들인 수입에 맞춰 생활이 커져버렸으니,…

저장소 메서드 위에 붙은 @ZodSchemaParse를 다시 보게 된 것은 API 응답의 has_next를 hasNext로 바꾸고 싶어서였다. 스키마에 transform을 붙이면 런타임 값은 바뀐다. 그렇다면 호출부의 호버도 자연스럽게 hasNext를 보여줄 것 같았다. 하지만 커서를…

장바구니와 위시리스트는 새로고침해도 남아 있어야 한다. 너무 당연한 요구라서 처음에는 Zustand의 persist를 붙이면 끝이라고 생각했다. 상태를 localStorage에 넣고, 다음에 페이지를 열면 다시 읽는다. 이름부터 persist니까 그 정도는 해주겠지 싶었다. 그런데 Ne…

예전에 Proxy를 이용해 브라켓 문법을 DSL로 확장하는 실험을 한 적이 있다. obj[WHERE](predicate)[VALUES]()처럼, 자바스크립트의 기본 문법은 그대로 두되 그 해석만 바꿔 작은 쿼리 엔진처럼 동작하게 만드는 글이었다. 그때는 "문법은 고정되어 있지만 해석은…

Dialog.Root 같은 API를 볼 때마다 약간 궁금했다. 이거, 번들 크기에는 괜찮을까? 겉으로 보기에는 별문제 없어 보인다. Dialog.Root, Dialog.Trigger, Dialog.Content처럼 이름이 잘 묶여 있고, 사용하는 쪽에서도 읽기 쉽다. React 컴포넌트…

AI 코드 리뷰 도구는 이제 너무 많다. Claude Code에게 “현재 변경사항 리뷰해줘”라고 말할 수도 있고, Codex나 Cursor에서도 비슷한 일을 시킬 수 있다. 문제는 그 다음이다. 리뷰라는 작업은 생각보다 귀찮게 정확해야 한다. 어떤 파일을 봐야 하는지, 어느 라인에 코멘…

이 포스트는 Vercel의 Next.js 팀 소속 개발자 Aurora Scharff가 자신의 블로그에 올린 Building an Active NavLink Component in Next.js 게시글을 번역한 것이다. 번역 과정에서 약간의 의역이 있고, 일부에는 내 의견도 섞여 있다.…

리액트에서 리스트를 렌더링하다 보면 손이 먼저 움직이는 순간이 있다. 한 아이템에서 여러 요소를 반환해야 하니 일단 <>...</>로 감싼다. items.map((item) => ( <> <span>{item.title}</span> <span>{item.description}</spa…

Zustand로 스토어를 만들다 보면 처음에는 코드가 꽤 단정해 보인다. 상태 타입을 만들고, create()에 생성 함수를 넘기고, 필요한 미들웨어를 하나씩 감싸면 된다. persist를 붙이면 새로고침 뒤에도 값이 남고, devtools를 붙이면 Redux DevTools에서 변경을…

처음에는 단순히 ESLint를 설정하는 과제라고 생각했다. 프론트엔드 프로젝트에서 ESLint와 Prettier를 붙이고, Husky와 lint-staged를 연결하고, 커밋 전에 어느 정도 코드 품질을 확인하게 만드는 일. 익숙한 일까지는 아니어도, 적어도 낯선 일은 아니라고 생각했다…

AI 에이전트에게 API 문서를 건네는 것과 도구를 건네는 것은 다르다. 사람은 문서를 읽고 endpoint를 고르고, 필요한 header와 body를 맞춰서 요청을 만든다. 모델도 어느 정도는 그렇게 할 수 있지만, 매번 그렇게 시키면 작업이 API 사용법 설명으로 흘러간다. 자동화를…

async function에서 Promise를 반환하면 조금 이상한 일이 일어난다. 아래의 코드를 보면 async function은 원래 Promise를 반환하고, 그 안에서 다시 Promise.resolve(1)을 반환했으니 결과가 Promise<Promise<number>>처럼 남아…

UI를 만들다 보면 내용은 없는데 wrapper만 남는 경우가 있다. 카드의 보조 설명 영역, 필터 결과 안내 영역, 혹은 children을 받아서 그리는 작은 레이아웃 컴포넌트가 그렇다. 실제로 보여줄 내용은 없는데 padding이나 border가 적용된 부모 요소만 화면에 남으면,…

AI 에이전트나 스킬을 만들다보면 비밀값을 어떻게 관리하면 좋을지 하는 생각을 자주 하게 된다. API를 호출하려면 API Key가 필요하고, 특정 기능을 자동화하는 과정에서 아이디와 비밀번호가 필요할 수도 있다. 그런데 그 값을 프롬프트에 박아버리면 대화 기록에 남고, 명령어 인자로…

이 포스트는 Vercel의 Next.js 팀 소속 개발자 Aurora Scharff가 자신의 블로그에 올린 Component Architecture for React Server Components 게시글을 번역한 것이다. 번역하는 과정에서 다소 의역이 있을 수 있으며, 일부 번역에는…

상황 어느날 서비스를 살펴보시던 팀장님께서 이런 말씀을 slack에 남기셨다. 진호님, 예측 차트에서 zoom을 계속하면 어느 순간 라인 차트가 아니라 단일 스캐터 차트처럼 보이는 데, 이거 수정하면 좋을 거 같아요. 어느정도 zoom을 하면 그 이후로는 zoom이 안 되도록 할 수 없…

상태 관리 코어를 작게 유지하려고 하면 곧바로 한 가지 질문을 만나게 된다. 상태를 읽고, 바꾸고, 구독하게 해주는 것만으로 충분한가. 처음에는 충분해 보인다. 하지만 실제 애플리케이션으로 들어가면 업데이트를 기록하고 싶고, 잘못된 값은 막고 싶고, 들어온 값을 정규화하고 싶고, 상태가…

외부 상태는 프레임워크 내부에서 만들어진 상태가 아니다. React의 useState, Vue의 ref, Svelte의 $state, Solid의 createSignal처럼 프레임워크가 직접 소유하고 추적하는 값이 아니라, 프레임워크 바깥에서 먼저 존재하고 바깥에서 변하는 값이다. We…