내가 레퍼런스가 되자 내가 레퍼런스가 되자

작업 중인 프로젝트에서 새롭게 디자인 시스템을 도입하여 공통 컴포넌트를 작업하게 되었습니다. 디자인팀과의 협업과 개발팀 내부에서 공통 컴포넌트 작업 내용 공유를 위해 Storybook의 도입을 고려하게 되었습니다. 이전 회사에서 Storybook을 사용하며 공통 컴포넌트 개발 내역과 지속적으로 수정되는 사안들을 체크하기에 좋은 경험을 가지고 있었기 때문입니다. 그래서 이번 기회에 간단하게 Storybook에 대해 정리하고자 합니다. Storybook? Storybook은 UI 컴포넌트 개발을 돕는 도구로 Story라는 단위로 UI 컴포넌트의 상태를 렌더링 합니다. 각 UI 컴포넌트를 스토리 단위로 구성하여 구축한다면 컴포넌트 개발 시 확인을 위해 따로 코드를 작성할 필요가 없고 컴포넌트의 상태에 따른 U..

프로젝트를 진행 중에 특정 커스텀 훅에서 제대로 동작하지 못하는 버그로 인해 해당 이슈가 QA로 들어와 고치면서 단위 테스트에 대한 필요성을 많이 느끼게 되었습니다. 기존에 공용으로 사용 중인 account 모듈에 관해서만 Jest를 이용한 단위 테스트가 적용되어 있어서 현재 진행 중인 프로젝트가 Vite로 구성된 점을 토대로 Vitest를 한번 사용해보았고 간단히 구성을 소개할까 합니다. Vitest? Vitest는 Vite에서 사용되는 테스팅 프레임워크입니다. Jest에서 제공하는 API를 대체할 수 있도록 Vitest에서 호환 가능한 API를 제공하며 단위 테스트 설정에 필요한 mocking, snapshots, coverage의 기능도 포함되어 있습니다. Vitest는 다른 테스팅 프레임워크보다 ..