Vue DevTools Performance 탭으로 프로파일링
컴포넌트 업데이트를 기록하고, 불필요한 다시 렌더링과 컴포넌트별 소요 시간을 파악합니다.
Vue DevTools Performance 탭으로 프로파일링은(는) CoddyKit의 무료 Vue Academy 강의입니다. 이것은 4개 중 2번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 Vue Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. Vue Academy 강의에는 총 4개의 강의가 포함되어 있습니다.
프로파일링하는 이유
최적화하기 전에 시간이 어디에서 사용되는지 알아야 합니다. Vue DevTools에는 컴포넌트 렌더링을 기록하는 성능/타임라인 보기가 있으므로 추측하는 대신 낭비되는 작업을 찾을 수 있습니다.
Vue DevTools 설치하기
브라우저 확장 프로그램을 설치하거나 독립 실행 앱을 실행합니다. Vite 프로젝트에서는 vite-plugin-vue-devtools 플러그인이 앱 내부 검사기를 추가합니다.
npm install -D vite-plugin-vue-devtools기록 시작하기
DevTools의 타임라인/성능 탭을 열고 기록을 누른 다음 앱과 상호 작용합니다. 기록을 중지하면 해당 시간 동안의 렌더링 활동이 저장됩니다.
컴포넌트 렌더링 타임라인
각 컴포넌트 렌더링은 타임라인에 이벤트로 표시됩니다. 컴포넌트가 언제 다시 렌더링되었는지와 렌더링에 얼마나 오래 걸렸는지를 확인할 수 있습니다.
반영 그래프
반영은 업데이트를 DOM에 한 번에 적용하는 작업입니다. 반영 그래프에는 각 반영과 그 과정에서 렌더링된 컴포넌트가 표시되므로 예상보다 훨씬 많은 컴포넌트에 영향을 주는 반영을 찾을 수 있습니다.
컴포넌트 시간 플레임 차트
플레임 차트에는 부모와 자식의 렌더링 시간이 쌓여 표시됩니다. 막대가 넓을수록 렌더링이 느리다는 뜻이고, 스택이 깊을수록 렌더링이 트리 전체로 연쇄된다는 뜻입니다.
낭비되는 렌더링 식별하기
낭비되는 렌더링은 다시 렌더링되었지만 같은 결과를 만든 컴포넌트입니다. 결과가 DOM을 변경하지 않은 반복 렌더링 이벤트로 나타납니다.
같은 출력, 새로운 렌더링
일반적인 원인은 렌더링할 때마다 새로 만든 객체나 인라인 화살표 함수를 속성으로 전달하여 메모이제이션을 깨뜨리는 것입니다. 화면에 표시되는 출력은 동일해도 자식 컴포넌트가 다시 렌더링됩니다.
<!-- new object every parent render forces child update -->
<Child :config="{ mode: 'a' }" />안정적인 참조로 수정하기
상수를 끌어올리거나 파생 데이터를 computed로 감싸 렌더링 사이에 동일한 참조가 전달되도록 합니다.
const config = { mode: "a" };
// or: const config = computed(() => ({ mode: mode.value }));상호 작용과 연관 지어 분석하기
타임라인에는 마우스 및 키보드 이벤트도 기록됩니다. 느린 커밋과 이를 유발한 상호 작용을 대조하면 최적화해야 할 정확한 코드 경로를 찾을 수 있습니다.
컴포넌트 검사기의 렌더링 횟수
컴포넌트 검사기는 컴포넌트가 업데이트될 때 이를 강조 표시할 수 있습니다. 관련 없는 상태 변경이 일어날 때마다 카운터가 깜박이는 것을 보면 과도한 렌더링을 한눈에 확인할 수 있습니다.
확인 문제
성능 탭의 커밋 그래프는 무엇을 나타냅니까?
복습
Vue DevTools의 성능/타임라인 탭을 사용하여 렌더링을 기록합니다. 커밋 그래프에는 각 DOM 반영과 그때 렌더링된 컴포넌트가 표시되고, 플레임 차트에는 느린 렌더링이 나타납니다. 출력이 바뀌지 않았는데도 다시 렌더링되는 컴포넌트인 낭비되는 렌더링을 찾으십시오. 이는 불안정한 속성 참조 때문에 발생하는 경우가 많으며, 상수를 끌어올리거나 computed를 사용하여 수정할 수 있습니다.
자주 묻는 질문
“Vue DevTools Performance 탭으로 프로파일링” 강의는 무료인가요?
네 — “Vue DevTools Performance 탭으로 프로파일링” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 Vue Academy 강의 전체를 잠금 해제할 수 있습니다. Vue Academy 강의에는 총 4개의 강의가 포함되어 있습니다.
“Vue DevTools Performance 탭으로 프로파일링”에서 뭘 배우나요?
컴포넌트 업데이트를 기록하고, 불필요한 다시 렌더링과 컴포넌트별 소요 시간을 파악합니다. 브라우저에서 직접 실행하는 실습 코드로 Vue Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.
Vue Academy을(를) 시작하는 데 경험이 필요한가요?
사전 경험은 필요하지 않습니다. CoddyKit의 Vue Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 2번째 강의입니다.
“Vue DevTools Performance 탭으로 프로파일링” 강의는 얼마나 걸리나요?
대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.
이 Vue Academy 강의에서 코드를 작성하고 실행할 수 있나요?
네. 모든 Vue Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.
이 강의의 모든 강의
- 템플릿 메모이제이션을 위한 v-memo
- Vue DevTools Performance 탭으로 프로파일링
- 대규모 목록을 위한 가상 스크롤
- Vue에서 Web Worker 사용