최신글

ESLint의 react/jsx-boolean-value 규칙을 사용하여 JSX에서 Boolean Props를 간결하게 작성하는 방법에 대해서 알아봅시다.

Vitest 기반 React 프로젝트에 @vitest/coverage-v8을 활용한 테스트 커버리지 측정 환경을 구축하는 방법을 소개합니다.

기존 Jest로 작성된 React 프로젝트에 Vitest를 추가하여 View 테스트와 로직 테스트를 분리하는 방법을 소개합니다. 모노레포 환경에서의 설정 방법과 CI 통합까지 다룹니다.

Vitest Browser Mode와 Playwright를 사용하여 React 컴포넌트의 VRT(Visual Regression Testing)와 접근성 테스트 환경을 구축하는 방법을 공유합니다. Docker를 활용한 일관된 렌더링 환경과 CI 통합까지 다룹니다.

Jest와 Puppeteer를 활용하여 React 컴포넌트의 VRT(Visual Regression Testing) 환경을 구축하는 방법을 공유합니다. 컴포넌트를 서버 사이드 렌더링 후 Puppeteer로 스크린샷을 찍어 jest-image-snapshot으로 비교하는 구조입니다.

Storybook Test Runner와 jest-image-snapshot을 활용하여 React 컴포넌트의 VRT(Visual Regression Testing)와 접근성 테스트를 구축하는 방법을 공유합니다.

모노레포 환경에서 React 공통 컴포넌트의 테스트 방침을 정하는 과정을 공유합니다. Props/State에 의한 View 테스트, 이벤트 테스트, 접근성 테스트를 Jest, Storybook, Vitest로 비교하고, 최종적으로 Vitest를 선택한 이유를 공유합니다.

6개의 앱과 공유 패키지로 구성된 모노레포에 React Compiler를 일괄 도입한 과정과 마주친 문제들, panicThreshold 선택, eslint-disable 전략, ref.current 오탐지 대응, 그리고 문제 발생 시 "use no memo" 디렉티브를 활용한 대응 방법을 공유합니다.

GitHub Actions에서 GITHUB_TOKEN으로 push하면 다른 워크플로우가 트리거되지 않는 문제의 원인과, PAT와 GitHub Apps를 사용한 해결 방법을 비교하고 GitHub Apps 설정 가이드를 소개합니다.

7개의 앱과 공유 컴포넌트 라이브러리를 포함한 대규모 모노레포를 React 19로 업그레이드하면서 겪었던 실전 경험을 공유합니다. forwardRef 제거, RefObject 타입 통합, useRef 초기값 필수화, JSX 네임스페이스 변경 등 주요 변경 사항과 마이그레이션 전략을 다룹니다.

.nvmrc, package.json의 engines 필드, 그리고 Yarn Berry 커스텀 플러그인을 조합하여 로컬 개발 환경과 CI 환경 모두에서 Node.js 버전을 강제하는 방법을 소개합니다.

모노레포 환경에서 lodash의 import 방식을 변경하여 번들 사이즈를 547KB에서 97KB로 약 82% 감소시킨 경험을 공유합니다. 번들 분석 환경 구축부터 ESLint 규칙을 통한 재발 방지까지의 과정을 다룹니다.