React

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

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

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

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

리액트와 Next.js에서 렌더링 전략은 단순한 옵션 선택이 아니다. 이는 서비스의 초기 로딩 속도, 서버 비용, 캐싱 전략, SEO 노출, 개발 복잡도까지 동시에 좌우하는 아키텍처 결정이다. 프로젝트 규모가 커질수록 “어디에서 HTML을 생성하는가”, “언제 자바스크립트를 실행하는가”…

화면 전환은 늘 애매한 영역이었다. 기능 명세에는 잘 안 들어가지만, 막상 없으면 서비스가 묘하게 둔하게 느껴진다. 목록에서 상세로 들어갈 때, 필터를 바꿨을 때, 카드가 확장될 때 화면이 자연스럽게 이어지면 사용자는 “빠르다”고 느낀다. 반대로 데이터는 이미 바뀌었는데 화면만 툭 끊기…

리액트로 UI를 구성하다 보면, 특정 컴포넌트를 조건부로 렌더링해야 하는 상황이 자주 발생한다. 일반적으로는 삼항 연산자 등을 활용해서 컴포넌트를 렌더링하는데, 내 경우에는 이런 조건 렌더링을 반복적으로 작성하는 게 싫어 라는 특별한 컴포넌트를 만들어 사용하고 있다. 하지만 어떤 방식으…

React를 사용하면서 useEffect 안에서 상태를 참조할 때 의외로 자주 겪는 문제가 있다. 바로 stale closure 문제다. 예를 들어 어떤 값이 변경되었는데, useEffect 내부의 콜백에서는 여전히 이전 값을 읽고 있는 현상이다. 이는 React의 클로저 구조상 자연스…

모달과 팝오버를 칼로 베듯 나눠서 생각해본 적은 별로 없었다. 화면 한가운데 떠서 다른 작업을 막으면 모달, 버튼 옆에 붙어서 옵션이나 보조 정보를 보여주면 팝오버, 정도로 느슨하게 이해하고 있었다. 실제 UI를 만들 때도 대체로 그 정도 감각이면 굴러간다. 문제는 브라우저가 이 둘을…

프론트엔드 개발자들이 모인 자리에서 “어떤 스타일링 도구 좋아하세요?”라고 물어보면 못해도 30분은 이야기할 수 있다. 내 경우에는 여러 번 말했듯이 Tailwind CSS와 CSS Module을 선호한다. 그런데 이 취향을 말하면 거의 정해진 질문이 돌아온다. “그거 동적 스타일링하기…

프론트엔드 애플리케이션이 커질수록 문제는 코드의 복잡성이 아니라 구조의 일관성에서 발생한다. 컴포넌트와 상태, 비즈니스 로직이 뒤섞이기 시작하면, 기능 추가는 점점 느려지고 변경에 대한 두려움은 커진다. **FSD(Feature-Sliced Design)**는 이러한 문제를 “어떻게 구…

나는 꽤 오래 전부터 타입스크립트를 사용해 특정한 컴포넌트만을 걸러낼 수 있을지 궁금했다. 만약 이게 가능하다면 특정한 컴포넌트만을 children으로 받게 만들 수 있어 프로젝트의 전체적인 구조가 단단해질 거라 생각했다. 실제로 특정 컴포넌트를 걸러내기 위해서 나는 타입스크립트를 가지…

이 포스트는 Dominik Dorfmeister가 자신의 블로그에 올린 You Might Not Need React Query 게시글을 번역한 것이다. 번역하는 과정에서 다소 의역이 있을 수 있으며, 일부 번역에는 사견이 포함되어있기도 하다. 리액트 서버 컴포넌트와 함께라면 리액트 쿼리…

내가 개인적으로 사용하는 독후감 기록 및 공유 서비스가 하나 있다. 이름은 onef다. 홍보에는 거의 신경 쓰지 않았기 때문에 실제 사용자는 나와 몇몇 후배들 정도에 불과하다. 하지만 전혀 문제는 없다. 이 서비스는 사용자 수를 늘리기 위한 제품이라기보다는, 구현해보고 싶은 기능을 부담…

상황 Button과 Link 및 여러 컴포넌트를 인자로 받아서 통일된 스타일을 처리해주는 Clickable 컴포넌트를 만들고 난 직후의 일이다. 로그인 페이지에서 Clickable 컴포넌트가 문제 없이 동작하는 걸 확인한 뒤 코드를 커밋했고, github action이 동작하며 라이브…

상황 진행중인 프로젝트에서 기존에 사용하던 module css가 아닌 tailwind를 사용하기로 결정되었다. 작업 빨리 쳐내야 할 때 클래스 검색하는 거로 시간을 쓰는 게 싫어서 공식문서도 읽고 카카오FE의 사용 후기도 읽어보면서 이것저것 테스트해보는 시간을 가지고 있었다. tailw…

Intersection Observer API는 웹 페이지의 특정 요소가 뷰포트(Viewport) 또는 지정한 컨테이너 요소와 교차(intersect) 하는지를 비동기적으로 감지할 수 있는 방법을 제공한다. 이 API는 스크롤 이벤트를 직접 처리하지 않고도 요소의 가시성 변화를 감지할…