이 글은 2024년 12월 16일 발행된 EDOCODE Advent Calendar 2024에 대한 것입니다.
이전 기사는 EDOCODE: Notion Webhooks 및 노코드 도구 "Make"를 사용한 자동 이메일 시스템의 제품 관리자인 Taiji Yamada가 작성했습니다(기사는 일본어로 작성됨).
또한, 모그룹 회사의 Wano Advent Calendar도 확인해보세요!
저희 앱인 Gojiberry는 판매자가 고객으로부터 귀중한 피드백을 수집하는 데 도움이 되는 Shopify 설문조사 앱입니다.
처음부터 우리는 앱에 버그가 없고 기존 기능을 손상시키지 않으면서 자신 있게 새로운 기능을 출시할 수 있도록 테스트 중심 개발(TDD)을 사용하여 Gojiberry를 구축했습니다. 이 기반을 통해 CRA(Create React App)에서 Vite로 마이그레이션하는 등의 대규모 변경을 최소한의 중단으로 수행할 수 있었습니다.
CRA가 더 이상 사용되지 않고 종속 항목이 오래 되었을 때 우리는 성장하는 앱을 더 잘 지원할 수 있는 최신 빌드 도구로 업그레이드해야 할 때라고 결정했습니다. 우리 코드베이스의 크기가 커서 약간의 복잡성이 추가되었지만 Vite로의 전환은 노력할 가치가 있는 것으로 입증되었습니다.
우리의 목표는 두 개의 React 프로젝트를 마이그레이션하는 것이었습니다.
실행 가능한 고객 피드백을 수집하려는 Shopify 스토어 소유자라면 지금 Shopify 앱 스토어에서 Gojiberry를 사용해 보세요!
CRA는 과거에 우리에게 많은 도움이 되었지만 더 이상 유지 관리되지 않으며 종속성이 오래되었습니다. 이로 인해 몇 가지 문제가 발생했습니다.
사용자 이벤트 v14의 가장 큰 개선 사항 중 하나는 모든 상호 작용 방법에 대해 대기를 사용해야 한다는 것입니다. 이렇게 하면 wait For에서 작업을 래핑할 필요가 없어 테스트 코드가 더 깔끔하고 유지 관리가 쉬워집니다.
이전(사용자 이벤트 v13):
import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import MyComponent from './MyComponent';
test('updates state on click', async () => {
render(<MyComponent />);
userEvent.click(screen.getByRole('button'));
await waitFor(() => {
expect(screen.getByText('Updated state')).toBeInTheDocument();
});
});
이후(사용자 이벤트 v14):
import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import MyComponent from './MyComponent';
test('updates state on click', async () => {
render(<MyComponent />);
userEvent.click(screen.getByRole('button'));
await waitFor(() => {
expect(screen.getByText('Updated state')).toBeInTheDocument();
});
});
이 변경 사항은 waitFor를 사용하여 상태 변경을 명시적으로 관리할 필요성을 제거하여 테스트를 단순화합니다. 라이브러리가 이를 자동으로 처리하므로 개발자는 더 이상 waitFor를 언제 포함할지 생각할 필요가 없습니다.
사용자 이벤트 v14 및 Vitest의 개선 사항은 이러한 많은 문제를 해결하여 더욱 깨끗하고 빠르며 일관된 개발 환경을 제공합니다.
Vite를 선택하기 전에 Next.js와 Remix를 평가했습니다. 둘 다 강력한 프레임워크이지만 코드베이스와 인프라에 상당한 변경이 필요했습니다.
Next.js 및 리믹스:
Vite를 선택한 이유:
Vite를 선택함으로써 우리는 완전한 프레임워크를 채택하는 데 따른 복잡성을 피하는 동시에 현대적이고 가벼운 빌드 도구의 이점을 누릴 수 있었습니다.
우리의 모노레포에는 두 개의 별도 npm 프로젝트가 포함되어 있으므로 마이그레이션에 체계적으로 접근했습니다. 마이그레이션을 실행한 방법은 다음과 같습니다.
작은 프로젝트부터 시작하세요:
마이그레이션 단계:
각 프로젝트의 프로세스는 다음 단계를 따랐습니다.
대규모 프로젝트에 대해 반복:
CRA에서 Vite로의 마이그레이션과 Vitest 및 user-events v14로의 전환으로 개발 워크플로가 크게 개선되었습니다.
마이그레이션은 코드베이스에 대한 자신감을 유지하면서 더 빠르게 반복할 수 있게 해 주면서 게임의 판도를 바꿔 놓았습니다.
다음은 경험에서 얻은 몇 가지 시사점입니다.
CRA에서 Vite 및 Vitest로 마이그레이션하여 작업 흐름이 크게 개선되었습니다. 이제 우리는 더욱 엄격한 TypeScript 규칙 덕분에 더욱 빠른 빌드, user-events v14를 통한 더욱 깔끔한 테스트 코드, 더욱 탄력적인 코드베이스를 누릴 수 있습니다.
이 전환을 더욱 원활하게 만든 주요 요인 중 하나는 테스트 중심 개발(TDD)에 대한 초기 투자였습니다. 포괄적인 테스트를 통해 우리는 기존 기능을 손상시키지 않으면서 자신 있게 대규모 변경을 수행할 수 있었습니다.
유사한 마이그레이션을 고려하고 계시다면 우리의 경험이 귀하의 여정을 안내하는 귀중한 통찰력이 되기를 바랍니다.
2024년 12월 17일 내일, 기사는 Gojiberry의 제품 마케팅 관리자인 Amee Xu의 B2C에서 B2B로 전환: 마케팅 담당자의 고백입니다.
와노그룹에서 채용을 진행합니다! 관심이 있으시면 아래 링크를 통해 채용 공고를 확인해 보세요:
채용정보 | 와노그룹
위 내용은 React CRA 및 Jest에서 Vite 및 Vitest로 마이그레이션하면서 배운 교훈의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
