All posts

통합 테스트를 짜다가, 방금 단위 테스트에서 단언한 조건을 내가 다시 단언하고 있는 걸 발견했다. URL에서 쿼리 키를 만드는 변환은 단위 테스트에서 이미 모든 조합을 통과시켰는데, 통합 테스트의 expect가 같은 변환의 결과를 다시 확인하고 있었다. 둘 다 통과하니 안심은 됐다. 다…

이 포스트는 Vercel의 Next.js 팀 소속 개발자 Aurora Scharff가 자신의 블로그에 올린 Avoiding Server Component Waterfall Fetching with React 19 cache() 게시글을 번역한 것이다. 번역하는 과정에서 다소 의역이 있을…

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

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

좋고 나쁨을 떠나서, 개발자는 처음 라이브러리를 접했을 때 익힌 문법과 사용 방식을 관성처럼 유지하는 것 같다. 내가 처음 개발을 배우던 시절에 리액트 쿼리는 막 이름을 탠스택 쿼리로 바꾸면서 5버전을 냈다. 부트캠프에서는 4버전을 권장했지만, 딱히 강요하지는 않았고, 그리하여 나를 포…

이 포스트는 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에서 변경을…

Docker 컨테이너는 Linux 커널의 기능을 사용한다. Linux가 아닌 macOS에서는 Docker Engine을 그대로 실행할 수 없기 때문에, 어디선가는 Linux 가상 머신을 하나 띄워야 한다. Docker Desktop은 이 가상 머신과 Docker Engine, 파일 공유…

처음에는 단순히 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가 적용된 부모 요소만 화면에 남으면,…