브라우저 및 디바이스 정보 감지 네트워크 작업을 위한 내 브라우저 정보 도구입니다.

이 도구는 `navigator` 객체를 사용하여 다양한 브라우저 속성에 접근합니다. 예를 들어 `userAgent`, `language`, `devicePixelRatio` 등이 있습니다. 그런 다음 정규식을 사용하여 `userAgent` 문자열을 파싱하고 브라우저 이름 및 버전 정보를 추출하며 Edge, Opera, Chrome, Safari, Firefox와 같은 특정 패턴을 정의합니다. `collectInfo` 함수는 제목, 아이콘 및 실제 데이터를 보유하는 `InfoField` 객체 배열이 포함된 `InfoGroup` 객체 배열을 반환합니다. 이 데이터는 React 컴포넌트를 사용하여 UI에 렌더링됩니다.

이 도구는 또한 `window.screen`과 같은 다른 브라우저 API를 사용하여 화면 크기 및 해상도에 대한 정보를 얻으며 `navigator.connection`을 사용하여 네트워크 연결 유형 및 속도에 대한 정보를 얻습니다. `Intl.DateTimeFormat` API는 사용자의 타임존을 결정하고 `Date` 객체는 UTC 오프셋을 계산하는 데 사용됩니다. 이 도구는 코드를 단순화하고 가독성을 개선하기 위해 화살표 함수, 비구조화 할당, 템플릿 리터럴과 같은 ES6+ 기능을 사용합니다.

데이터 구조에 관해서, 이 도구는 수집된 데이터를 저장 및 조작하기 위해 배열과 객체를 사용합니다. `InfoGroup` 및 `InfoField` 인터페이스는 데이터의 형태를 정의하여 필요에 따라 필드를 추가 또는 제거하는 것이 쉽습니다. 또한 UI가 데이터 변경 시 올바르게 업데이트되도록 상태를 관리하고 이벤트를 처리하기 위해 `useState` 및 `useCallback`과 같은 React 훅을 사용합니다. 전반적으로, 이 도구의 아키텍처는 모듈식, 확장 가능하며 유지 보수가 쉬우며 최신 브라우저 API 및 JavaScript 기능을 사용하여 사용자의 브라우저 및 시스템 구성에 대한 정확하고 자세한 정보를 제공하는 데 중점을 둡니다.