React & Next.js

React 애플리케이션에서 사용자의 브라우저와 OS 정보를 가져오는 방법

0

웹 애플리케이션을 개발할 때 사용자의 브라우저 및 운영체제(OS) 정보를 파악하는 것은 매우 유용합니다. 이 정보는 사용자 경험을 최적화하고, 특정 환경에서 발생할 수 있는 문제를 해결하는 데 도움이 됩니다. 이 글에서는 리액트 애플리케이션에서 `ua-parser-js` 라이브러리를 사용하여 브라우저와 운영체제 정보를 쉽게 추출하는 방법을 알아보겠습니다.

`ua-parser-js`

`ua-parser-js`는 사용자 에이전트(User Agent) 문자열을 파싱하여 브라우저, 운영체제, 장치 정보를 추출하는 자바스크립트 라이브러리입니다. 이 라이브러리를 사용하면 복잡한 사용자 에이전트 문자열을 간단하게 분석할 수 있습니다.

설치 및 기본 사용법

먼저, `ua-parser-js` 라이브러리를 설치합니다. npm 또는 yarn을 사용하여 설치할 수 있습니다.

npm install ua-parser-js

설치가 완료되면, 리액트 컴포넌트에서 이 라이브러리를 사용할 수 있습니다. 아래 예제는 사용자 브라우저와 운영체제 정보를 추출하는 간단한 리액트 컴포넌트를 보여줍니다.

import React, { useEffect, useState } from 'react';
import UAParser from 'ua-parser-js';

const App = () => {
  const [browser, setBrowser] = useState({});
  const [os, setOs] = useState({});

  useEffect(() => {
    const parser = new UAParser();
    const uaResult = parser.getResult();

    setBrowser(uaResult.browser);
    setOs(uaResult.os);
  }, []);

  return (
    <div>
      <h1>Browser Information</h1>
      <p>Name: {browser.name}</p>
      <p>Version: {browser.version}</p>

      <h1>Operating System Information</h1>
      <p>Name: {os.name}</p>
      <p>Version: {os.version}</p>
    </div>
  );
};

export default App;

코드 설명

위 코드에서는 `UAParser` 객체를 생성하고, `getResult()` 메서드를 호출하여 사용자 에이전트 정보를 가져옵니다. `useEffect` 훅을 사용하여 컴포넌트가 처음 렌더링될 때 사용자 정보를 설정합니다.

  • `setBrowser`: 브라우저 정보를 상태로 설정합니다.
  • `setOs`: 운영체제 정보를 상태로 설정합니다.

다크 모드와 언어 설정 감지

웹 애플리케이션에서 사용자 환경을 더 잘 이해하기 위해 다크 모드와 사용자 언어 설정을 감지하는 방법도 중요합니다.

다크 모드 감지

사용자의 다크 모드 설정을 감지하려면 `window.matchMedia`를 사용합니다.

import React, { useEffect, useState } from 'react';

const App = () => {
  const [isDarkMode, setIsDarkMode] = useState(false);

  useEffect(() => {
    const matchMedia = window.matchMedia('(prefers-color-scheme: dark)');
    setIsDarkMode(matchMedia.matches);

    const handler = (e) => setIsDarkMode(e.matches);
    matchMedia.addListener(handler);

    return () => matchMedia.removeListener(handler);
  }, []);

  return (
    <div style={{ background: isDarkMode ? '#333' : '#fff', color: isDarkMode ? '#fff' : '#000' }}>
      <h1>{isDarkMode ? 'Dark Mode' : 'Light Mode'}</h1>
    </div>
  );
};

export default App;

사용자 언어 설정 감지

사용자의 언어 설정은 `navigator.language` 속성을 사용하여 얻을 수 있습니다.

import React, { useEffect, useState } from 'react';

const App = () => {
  const [language, setLanguage] = useState('');

  useEffect(() => {
    setLanguage(navigator.language || navigator.userLanguage);
  }, []);

  return (
    <div>
      <h1>Your language is: {language}</h1>
    </div>
  );
};

export default App;

결합하기

다크 모드와 사용자 언어 설정을 결합하여 사용자의 환경을 더 잘 컨트롤할 수 있습니다.

import React, { useEffect, useState } from 'react';
import UAParser from 'ua-parser-js';

const App = () => {
  const [browser, setBrowser] = useState({});
  const [os, setOs] = useState({});
  const [isDarkMode, setIsDarkMode] = useState(false);
  const [language, setLanguage] = useState('');

  useEffect(() => {
    const parser = new UAParser();
    const uaResult = parser.getResult();

    setBrowser(uaResult.browser);
    setOs(uaResult.os);

    const matchMedia = window.matchMedia('(prefers-color-scheme: dark)');
    setIsDarkMode(matchMedia.matches);

    const handler = (e) => setIsDarkMode(e.matches);
    matchMedia.addListener(handler);

    setLanguage(navigator.language || navigator.userLanguage);

    return () => matchMedia.removeListener(handler);
  }, []);

  return (
    <div style={{ background: isDarkMode ? '#333' : '#fff', color: isDarkMode ? '#fff' : '#000' }}>
      <h1>Browser Information</h1>
      <p>Name: {browser.name}</p>
      <p>Version: {browser.version}</p>

      <h1>Operating System Information</h1>
      <p>Name: {os.name}</p>
      <p>Version: {os.version}</p>

      <h1>{isDarkMode ? 'Dark Mode' : 'Light Mode'}</h1>
      <h2>Your language is: {language}</h2>
    </div>
  );
};

export default App;

결론

`ua-parser-js` 라이브러리를 사용하면 사용자 브라우저와 운영체제 정보를 쉽게 추출할 수 있습니다. 또한, 다크 모드와 언어 설정 감지를 통해 사용자 경험을 더욱 향상시킬 수 있습니다. 이러한 기능들을 활용하여 사용자 환경에 맞는 최적화된 웹 애플리케이션을 개발해 보세요.

Leave a Reply