All posts

리액트에서 memo를 사용하다 보면 조금 이상한 상태에 놓인다. 컴포넌트는 같은 prop을 받으면 다시 렌더링하지 않도록 만들었는데, 정작 타입만 봐서는 그 prop이 다음 렌더링에서도 같은 참조로 전달될지 알 수 없다. Item[]은 배열 안에 무엇이 들어 있는지는 알려주지만, 그 배…

Webpack, Babel, TypeScript를 한 프로젝트에서 함께 쓰다 보면 역할이 겹쳐 보인다. Webpack도 코드를 변환하고, Babel도 자바스크립트를 출력하며, tsc 역시 타입스크립트를 자바스크립트로 바꾼다. 설정 파일만 보면 같은 일을 세 번 하는 것 같고, 그래서 하…

Fluo를 만들면서 중요하게 생각한 것 중 하나는, 이미 만든 기능을 다른 실행 환경에서도 다시 쓸 수 있어야 한다는 것이었다. 인증이나 검증, 데이터베이스 연동을 만들어 놓고 새로운 서버를 지원할 때마다 그 기능들을 다시 연결해야 한다면, 패키지를 나눠 둔 보람이 별로 없을 것 같았다…

이 포스트는 Linear의 개발자 Kenneth Skovhus가 리니어 팀 블로그에 올린 Styling Linear for the future with StyleX 게시글을 번역한 것이다. 번역하는 과정에서 다소 의역이 있을 수 있으며, 일부 번역에는 사견이 포함되어있기도 하다. 예상보…

통합 테스트를 짜다가, 방금 단위 테스트에서 단언한 조건을 내가 다시 단언하고 있는 걸 발견했다. 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에서 변경을…