DevTools 아키텍처 업데이트: 웹 구성요소로 마이그레이션

이 게시물은 DevTools의 아키텍처에 적용되는 변경사항과 빌드 방법을 설명하는 블로그 게시물 시리즈 중 일부입니다.

수년 전 DevTools가 처음 개발되었을 때 팀은 맞춤형 UI 프레임워크를 빌드하기로 했습니다. 당시에는 합리적인 선택이었으며 DevTools에 큰 도움이 되었습니다.

하지만 그 이후로 다양한 기능이 플랫폼에 나왔으며 그 중 하나인 Web Components가 DevTools에서 새로운 UI 요소를 빌드하는 데 매우 적합합니다. 플랫폼이 제공하는 기능을 활용하면 유지관리해야 하는 맞춤형 UI 코드의 양을 크게 줄이고 맞춤형 인프라를 지원하는 대신 DevTools용 기능을 빌드하는 데 더 많이 투자할 수 있습니다.

전환을 돕기 위해 DevTools에서 UI 요소를 빌드하는 방법에 대한 가이드를 제작하여 광범위한 DevTools 팀과 공유할 수 있습니다. 일부 가이드는 DevTools 및 그 아키텍처를 대상으로 하는 것으로, 여기에는 자체적인 제약조건이 있지만, 일부는 우리가 웹 구성 요소를 구축, 구조화 및 테스트하는 데 사용한 접근 방식에 대한 일반적인 가이드라인입니다.

이제 이 문서는 goo.gle/building-ui-devtools에서 공개됩니다. 실제 대규모 애플리케이션에서 웹 구성요소가 사용되는 방식이나 구성요소를 기존의 대규모 코드베이스에 통합할 때 발생하는 문제에 대해 궁금한 점이 있으시다면 이 문서를 참고하세요. 가이드라인에 대해 궁금한 점이 있으면 언제든지 트윗을 해주세요.

미리보기 채널 다운로드

Chrome Canary, 개발자 또는 베타를 기본 개발 브라우저로 사용하는 것이 좋습니다. 이러한 Preview 채널을 통해 개발자는 최신 DevTools 기능에 액세스하고 최첨단 웹 플랫폼 API를 테스트하며 다른 사용자보다 먼저 사이트에서 문제를 찾을 수 있습니다.

Chrome DevTools팀에 문의하기

게시물에서 새로운 기능과 변경사항 또는 DevTools와 관련된 다른 항목에 대해 논의하려면 다음 옵션을 사용하세요.

  • crbug.com을 통해 제안 또는 의견을 제출하세요.
  • DevTools에서 옵션 더보기   더보기   > 도움말 > DevTools 문제 신고를 사용하여 DevTools 문제를 신고합니다.
  • @ChromeDevTools로 트윗을 보냅니다.
  • DevTools의 새로운 기능 YouTube 동영상 또는 DevTools 팁 YouTube 동영상에 댓글을 남겨주세요.