바꾸려는 동작
provide inject 과사용에서 바꿀 결과와 유지할 기존 동작을 한 문장씩 적습니다. provide/inject는 깊은 dependency 전달에 유용하지만 source와 mutation 경로를 숨길 수 있어 좁은 readonly 계약을 제공하는 편이 안전합니다.
핵심 원리
기대 결과와 실제 결과를 나누고 둘이 달라지는 가장 작은 입력·설정·상태를 찾습니다. 확인하지 않은 원인을 사실처럼 단정하지 않습니다. 현재 version의 공식 문서와 실제 설정을 확인하고 대표·경계·실패 사례를 준비합니다. Vue Devtools의 component update, watcher, effect scope와 브라우저 performance 자료를 연결한다.
| 순서 | 할 일 |
|---|---|
| 1 | 수정 전 결과와 되돌릴 기준 저장 |
| 2 | 핵심 사실과 맞닿은 한 곳만 변경 |
| 3 | 같은 입력으로 수정 전후 비교 |
단계별 적용 예시
확인된 원인과 직접 맞닿은 코드나 설정만 우선 수정합니다. 주제와 무관한 추상화나 운영 장치를 함께 추가하지 않습니다. 상태 소유권을 가까이 두고 computed, watch와 effect cleanup의 역할을 분리한다. 예상과 다르면 변경을 더 얹지 말고 처음 달라진 값으로 돌아갑니다. 렌더 횟수, commit 비용, listener·timer 정리, 키보드 흐름과 SSR hydration을 확인한다. 주제에 맞는 정상·경계·실패 조건을 다시 실행하고 수정 전 재현 사례가 사라졌는지 확인합니다.
공식 문서와 적용 범위
문서의 기본값과 동작은 version에 따라 달라질 수 있습니다. 현재 runtime·framework version, 실제 입력과 요청 흐름에서 다시 확인합니다.