귀하의 jQuery 또는 레거시 React 프런트 엔드를 최신 React 또는 Next.js로 페이지별로 이전해 드립니다.

일부 제품은 작동하고 돈을 벌지만, 프런트엔드가 변경하기 어려워졌습니다. 템플릿 전체에 퍼져 있는 jQuery, 몇 년 전의 React 클래스 컴포넌트, 또는 Pages Router에 여전히 있는 Next.js 앱 등이 그렇습니다. 전체 재작성은 제품을 몇 달 동안 정지시킵니다. 저는 다른 방법을 사용합니다. 기존 코드와 새 코드가 나란히 실행되고, 페이지가 한 번에 하나씩 이동하므로 사용자에게 대규모 전환일이 없습니다.

저는 NDA 하에 진행된 이전 프로젝트에서 정확히 이 작업을 수행했습니다. 제품이 라이브 상태를 유지하는 동안 jQuery 프런트엔드를 React 페이지별로 옮겼습니다.

Starter는 계획을 제공합니다. 저는 기존 프런트엔드를 읽고, 페이지와 공유 부분을 매핑하고, 위험 요소를 나열하며, 접근 방식의 작동 샘플로 작은 페이지 하나를 마이그레이션합니다. Standard는 최대 3개의 페이지 또는 화면을 이동합니다. Advanced는 최대 8개를 이동하고, 필요한 공유 컴포넌트를 구축하며, 데이터에 대한 TypeScript 타입과 주요 흐름에 대한 테스트를 포함합니다.

유지되는 것: 귀하의 백엔드, URL 및 사용자가 아는 동작. 변경되는 것: 코드 구성 방식, 그래서 다음 기능은 한 번에 한 곳에서 작성됩니다. 전달 후 14일 동안, 합의한 대로 작동하지 않는 모든 것을 무료로 수정해 드립니다.

페이지 순서와 계획은 통화 없이 주문 채팅에서 합의됩니다. 마이그레이션된 각 페이지는 자체적으로 배송되며, 매 영업일마다 서면 상태 알림을 받게 됩니다.

프로젝트 완료 단계
1. 기존 프런트엔드 매핑 - 템플릿, 스크립트 및 컴포넌트를 검토하고 페이지, 공유 부분 및 전역 상태 또는 인라인 스크립트와 같은 위험 요소를 나열합니다.
2. 순서 합의 - 어떤 페이지가 먼저 이동하고, 무엇이 함께 이동하며, 두 코드가 모두 존재하는 동안 기존 코드와 새 코드가 제품을 공유하는 방법에 대한 서면 계획을 받게 됩니다.
3. 브릿지 - 새 React 또는 Next.js 코드는 기존 코드 옆에 설정되며, 각 페이지를 소유하는 측으로 보내는 라우팅이 있습니다.
4. 페이지를 하나씩 이동 - 각 페이지는 재구축되고, 이전 버전과 비교되며, 자체적으로 전환되므로 문제가 발생해도 제품 전체가 아닌 한 페이지에만 영향을 미칩니다.
5. 인계 - 마이그레이션된 페이지, 남은 부분에 대한 업데이트된 계획, 그리고 다음 페이지에 따를 패턴에 대한 짧은 메모.