UECA-React 3.2 출시: 실패한 테스트가 오류 발생 지점의 추적(trace)을 열어줍니다

Part 4. 이전 글들: vibe 기반 MVP 구축하기, 기원 이야기, 프레임워크를 테스트하는 AI 에이전트.

UECA-React 3.2가 출시되었고, 곧바로 3.2.1도 뒤따릅니다. 이 버전에서 주목할 만한 세 가지 기능이 있습니다.

실패하는 테스트가 오류 발생 지점의 추적을 열어줍니다

테스트는 무언가가 '깨졌음(broke)'을 알려줄 뿐입니다. 반면, 추적 뷰어(trace viewer)는 어떤 메시지나 바인딩이 전파를 멈췄는지('which') 보여줄 수 있습니다. 이전까지 이 두 기능은 분리되어 있었습니다.

UECA의 에이전트 스킬에 포함된 테스트 하네스(test harness)는 이제 모든 테스트를 기록하며, 실패하는 테스트는 그 추적을 저장합니다:

UECA trace: test-traces/cart.test.tsx--adds_an_item_once.json

이 파일을 추적 뷰어에 드롭하면(패키지에 포함되어 있어 업로드할 필요가 없습니다) 재생 헤드(playhead)가 테스트가 정리되기 직전에 수행한 마지막 지점에 열립니다. ←를 사용하여 아무도 응답하지 않은 메시지나 전파되지 않은 바인딩으로 되돌아갈 수 있습니다. 이 기능은 테스트 시간에 몇 퍼센트의 비용이 들며, UECA_TEST_TRACES=off 환경 변수로 끌 수 있습니다.

뷰어는 또한 주소에 이름 지어진 위치(&head=<seq>)에서도 열립니다. 기록된 세션에서 사용해 보세요.

앱 재작성은 문서화에서 시작됩니다

마이그레이션 가이드에 이제 스테이지드(staged) 경로 외에 두 번째 경로가 추가되었습니다. 이 경로는 에이전트가 세 단계에 걸쳐 수행하며, 개발자가 그 사이에 승인하는 '재작성(rewrite)' 방식입니다.

1. 문서화(Document). 에이전트가 기존 앱의 화면, 필드, 형식 및 비즈니스 규칙을 Markdown으로 작성하고, 이를 기반으로 LLM 위키를 생성합니다. 코드가 설명할 수 없는 부분은 개발자에게 질문이 됩니다.
2. 계획(Plan). 두 번째 에이전트가 이 위키와 기존 코드를 구현 계획으로 만듭니다.
3. 구축(Build). 세 번째 에이전트가 이 계획을 따라 코드 작성, 테스트, 수정, 릴리스 노트 작업을 수행합니다.

에이전트에게 'UECA로 이 앱 재작성'을 요청하면, 이제 스킬들이 먼저 문서화하도록 지시하고 승인을 위해 멈춥니다.

조용한 실수도 이제 목소리를 냅니다

• React 19와 18에서 StrictMode는 StrictMode를 사용하지 않은 것과 정확히 같은 동작을 합니다. React 18은 이제 CI에서도 실행됩니다: 총 373개의 테스트가 모두 통과합니다.
• 이전에 사라지던 오류들이 Node 환경의 실패하는 생명 주기(lifecycle) 훅을 포함하여 사용자의 에러 핸들러에 도달합니다.
• 새로운 Date, RegExp, Map 또는 Set은 더 이상 '변경 없음'으로 무시되지 않습니다. 이는 2.0.6 버전부터 존재했던 버그였습니다.
• 앱 코드의 네 가지 실수가 이제 오류를 발생시키며, 무엇을 수정해야 하는지 메시지를 알려줍니다. 예를 들어, name prop을 가진 폼 안에 <TextField id="name" />가 있는 경우입니다. 이는 3.2 버전에서 앱이 감지할 수 있는 유일한 문제점이며, 해당 코드는 이미 오작동하고 있었습니다.

또한 새로 추가된 기능으로는 모든 컴포넌트 요소에 render={false}를 적용할 수 있으며, createMessageBus를 이용해 자체 메시지 버스를 만들 수 있습니다.

업그레이드하기

npm install [email protected]
npx ueca-react-skills

두 번째 명령어는 프로젝트 내 에이전트 스킬을 새로 고칩니다.

3.2.0 버전 대신 3.2.1 버전을 사용하세요. 3.2.0에서는 앱이 가져오거나, 사용하거나, 또는 사용하지 않은 모든 컴포넌트 모듈을 프로덕션 번들에 포함시켰고, 이로 인해 한 앱의 크기가 511 KB에서 1.6 MB까지 커졌습니다. 아무것도 실패하지 않았고 테스트도 감지하지 못했지만, 오직 번들만 그렇게 했습니다. 3.2.1이 이를 수정하며, 이제 새로운 테스트는 Vite를 사용하여 작은 앱을 빌드하고 사용되지 않은 컴포넌트가 남아있으면 실패합니다. 나머지 모든 내용은 changelog에서 확인할 수 있습니다.

npm · 문서 및 데모