최신글

Claude Code의 Hooks 기능과 terminal-notifier를 활용하여 작업 완료 시 macOS 데스크톱 알림을 받는 방법을 알아봅니다. Stop Hook과 Notification Hook 설정까지 정리합니다.

Homebrew(brew)로 설치한 Claude Code는 자동 업데이트가 되지 않습니다. 수동 업데이트, 자동 업데이트 설정, 네이티브 설치로의 전환 방법을 알아봅니다.

Release Drafter의 commitish가 main에 고정되어 있을 때 발생하는 릴리스 노트 불일치 문제를 분석하고, 워크플로우를 autolabel과 release note 생성으로 분리하여 release 브랜치 기준으로 정확한 릴리스 노트를 생성하는 방법을 소개합니다.

word-break: break-word는 CSS 스펙에서 비추천(deprecated)된 레거시 속성입니다. 대안인 overflow-wrap: break-word도 intrinsic sizing 요소에서 동작하지 않는 함정이 있습니다. 올바른 대체 조합(overflow-wrap: anywhere + word-break: normal + line-break: strict)과 Stylelint 커스텀 플러그인을 통한 자동화 방법을 공유합니다.

코드 리뷰에서 기계적으로 검사할 수 있는 코딩 스타일과 규칙을 Linter와 Semgrep으로 자동화하여 코드 리뷰 시간을 줄이는 방법에 대해서 알아봅시다.

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를 선택한 이유를 공유합니다.