React

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" 디렉티브를 활용한 대응 방법을 공유합니다.

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

Toss의 SLASH 21 컨퍼런스에서 발표된 React Clean Code의 핵심 개념인 응집도, 단일 책임, 추상화를 실제 코드 예제와 함께 정리해서 공유합니다.

React의 렌더링이란 무엇인지, 렌더 페이즈와 커밋 페이즈의 차이, Fiber 오브젝트, Key와 렌더링, 배치 처리, 클로저와 state 스냅샷 등 React 렌더링의 기본 개념과 동작 방식에 대해서 공유합니다..

React 렌더링 성능 최적화의 필요성, React.memo, shouldComponentUpdate, PureComponent 등의 최적화 API, 참조 문제와 useCallback/useMemo를 활용한 Props 참조 최적화, 불변성, 성능 측정 방법, React Compiler에 대해서 공유합니다.

Vite를 사용하여 생성한 TypeScript 기반 React 프로젝트에 CSS-in-JS 환경에서 스타일(CSS)을 검사하기 위해 Stylelint를 추가하는 방법에 대해서 알아보도록 하겠습니다.