Component Detector는 웹사이트가 어떤 프론트엔드 프레임워크를 사용하는지 자동으로 식별하고, 전체 컴포넌트 트리를 보여줍니다. React, Vue, Angular, Svelte 컴포넌트 이름, props/state 값, 중첩 계층 구조를 하나의 검사 패널에서 모두 확인할 수 있습니다.
특정 웹사이트가 어떤 프레임워크로 만들어졌는지 궁금하거나, 복잡한 UI가 어떻게 컴포넌트로 분해되었는지 보고 싶을 때가 있습니다. Component Detector는 이 두 가지 질문에 즉시 답을 줍니다. 페이지에서 프레임워크 고유의 시그니처(React fiber 노드, Vue 컴포넌트 인스턴스, Angular zone 마커, Svelte 컴포넌트 메타데이터)를 스캔하여 프레임워크 종류, 버전, 전체 컴포넌트 트리를 식별합니다. React와 Vue의 경우 컴포넌트 props와 state 값까지 보여주어 각 UI 조각을 어떤 데이터가 구동하는지 이해할 수 있습니다. 트리에서 컴포넌트를 클릭하면 페이지에서 해당 DOM 요소가 강조 표시되고, 페이지의 요소를 클릭하면 트리에서 해당 컴포넌트를 찾아줍니다. React DevTools나 Vue DevTools와 비슷하지만, 가벼운 플로팅 패널 형태로 페이지에 내장되어 있습니다.
React(Next.js, Gatsby, Remix 포함), Vue(Nuxt 포함), Angular, Svelte(SvelteKit 포함), Preact, Solid 등 다양한 프레임워크를 자동으로 감지합니다. 프레임워크 이름, 정확한 버전 번호, 렌더링 모드(클라이언트 사이드, SSR, 하이브리드)를 표시합니다.
접을 수 있는 트리 뷰로 완전한 컴포넌트 계층 구조를 보여줍니다. 최상위 App 컴포넌트가 Navbar를 포함하고, Navbar가 NavLinks를, NavLinks가 개별 Link 컴포넌트를 포함하는 구조를 명확하게 확인할 수 있습니다.
React와 Vue 컴포넌트의 현재 props와 state 값을 볼 수 있습니다. Dashboard 컴포넌트가 title="Overview", loading=false, columns=2를 받고 있는지 확인할 수 있어 데이터 흐름을 이해하는 데 매우 유용합니다.
트리 패널에서 컴포넌트를 클릭하면 페이지에서 해당 DOM 요소가 색상 오버레이로 강조 표시됩니다. 또는 페이지의 요소를 클릭하면 트리에서 해당 부모 컴포넌트를 찾아 선택합니다. 원하는 방향으로 자유롭게 탐색할 수 있습니다.
페이지에 렌더링된 총 컴포넌트 수, 고유 컴포넌트와 반복 인스턴스 수, 가장 자주 등장하는 컴포넌트를 보여줍니다. 페이지 복잡도를 이해하고 재사용 패턴을 파악하는 데 유용합니다.
압축된 프로덕션 빌드에서도 프레임워크를 감지합니다. React의 fiber 트리, Vue의 __vue__ 마커, Angular의 ng 속성은 프로덕션 모드에서도 유지되므로 빌드 설정과 관계없이 감지할 수 있습니다.
어떤 웹사이트든 방문해서 React, Vue, Angular, Svelte 중 어떤 것으로 만들어졌는지, 정확한 버전까지 즉시 확인할 수 있습니다. Site Stack 도구와 함께 사용하면 CDN, 분석 도구, CMS까지 완전한 기술 감사를 할 수 있습니다.
프로덕션 애플리케이션이 UI를 어떻게 컴포넌트로 분해하는지 공부할 수 있습니다. Stripe 가격 페이지 구조, Linear 대시보드 구성, 또는 잘 만들어진 앱이 레이아웃, 내비게이션, 콘텐츠를 어떻게 컴포넌트로 나누었는지 확인할 수 있습니다.
컴포넌트가 제대로 렌더링되지 않나요? 해당 컴포넌트의 props와 state를 검사하여 실제로 어떤 데이터를 받고 있는지 확인하세요. 예상 값과 실제 값을 비교하면 데이터 흐름이 어디서 끊어졌는지 console.log 없이 파악할 수 있습니다.
프론트엔드 인터뷰를 준비 중인가요? 프로덕션 사이트를 둘러보며 실제 컴포넌트 패턴을 확인하세요. 컨테이너/프레젠테이셔널 분리, render prop 사용, context provider, HOC wrapper 등이 컴포넌트 트리에 모두 보입니다.
동일한 기능을 다른 프레임워크로 만든 사이트를 방문해 컴포넌트 구조를 비교하세요. React 앱과 Vue 앱이 내비게이션, 폼, 데이터 테이블, 모달 같은 UI 패턴을 어떻게 다르게 접근하는지 이해할 수 있습니다.
DevSuite Pro 플로팅 독을 열고 Component Detector 아이콘을 클릭하세요. 도구가 페이지 DOM에서 프레임워크 고유 마커를 스캔하여 컴포넌트 트리를 구축합니다.
패널 상단에 감지된 프레임워크(React, Vue, Angular, Svelte), 버전, 렌더링 모드가 표시됩니다. 프레임워크가 감지되지 않으면 바닐라 HTML/CSS/JS로 보고합니다.
트리에서 컴포넌트를 펼치고 접으며 계층 구조를 탐색하세요. 컴포넌트 이름과 들여쓰기로 중첩 깊이가 표시되며, 반복되는 컴포넌트는 인스턴스 수가 표시됩니다.
트리에서 컴포넌트를 클릭하면 하단 세부 정보 섹션에 현재 props와 state 값이 표시됩니다. React의 경우 props, state, hooks를, Vue의 경우 props, data, computed 속성을 볼 수 있습니다.
트리의 컴포넌트를 클릭하면 페이지에서 해당 DOM 요소가 색상 테두리와 반투명 오버레이로 강조 표시됩니다. 페이지 요소를 클릭하면 트리에서 해당 컴포넌트를 찾아줍니다.
DevSuite Pro를 무료로 설치하고 브라우저용 39개 이상의 개발자 도구를 사용해보세요.
