화면 해상도 및 디스플레이 크기 감지 네트워크 작업을 위한 내 화면 해상도 도구

이 도구는 상태를 관리하고 창을 조정할 때 화면 해상도 데이터를 업데이트하는 것과 같은 부작용을 처리하기 위해 `useState` 및 `useEffect` 리액트 훅을 사용합니다. 또한 `updateData` 및 `handleCopy`와 같은 함수를 메모화하기 위해 `useCallback` 훅을 활용하여 불필요한 재렌더링을 방지합니다. 내부적으로, 이 도구는 현재 화면 해상도를 가져오기 위해 `screen.width` 및 `screen.height` 브라우저 API를 사용하며, 디바이스의 픽셀 밀도를 결정하기 위해 `window.devicePixelRatio`를 사용합니다. `gcd` 함수는 두 수의 최대 공약수를 계산하여 화면의 종횡비를 계산하는 데 사용됩니다.

이 도구가 데이터를 업데이트할 때, 브라우저 API에서 최신 값을 가져오고 파생 속성인 효과적인 너비와 높이를 재계산하는 `updateData` 함수를 사용합니다. 이 과정은 CSS 픽셀에 디바이스 픽셀 비율을 곱하여 물리적 픽셀을 생성하며, 이는 적합한 이미지 자산을 선택하는 데 사용할 수 있습니다. `formatOrientation` 함수는 화면 방향 문자열을 형식화하기 위해 responsable이며, 하이픈을 공백으로 대체하고 각 단어의 첫 번째 글자를 대문자로 바꿉니다. 이 도구는 또한 "화면 정보 복사" 버튼을 클릭할 때 형식화된 화면 해상도 데이터를 클립보드로 복사하기 위해 `@/lib/utils` 모듈의 `copyToClipboard` 유틸리티를 사용합니다.

이 도구의 UI는 조건부로 렌더링되는 리액트 컴포넌트로 구축되며, 화면 해상도 데이터의 가용성에 따라 다릅니다. 데이터가 없으면 로딩 메시지를 표시하며, 그렇지 않으면 CSS 픽셀, 물리적 픽셀, 디바이스 픽셀 비율 및 종횡비를 포함하여 화면 해상도의 자세한 내용을 표시합니다. 뷰포트 차원은 창을 조정할 때 실시간으로 업데이트되며, 관련 필드 옆에 녹색 점이 표시됩니다. 이 라이브 업데이트는 `window.addEventListener` 메서드를 통해 달성되며, 창의 리사이즈 이벤트에 이벤트 리스너를 연결하고 창 크기가 변경될 때마다 `updateData` 함수를 호출합니다.