본문 바로가기

공부 ✍

[React] User agent, 사용자 브라우저 확인 방법

User agent

User agent는 HTTP 요청을 보내는 디바이스와 브라우저 등 사용자 소프트웨어의 식별 정보를 담고 있는 request header의 한 종류이다. 브라우저 외에도 사용자 에이전트는 스크래핑 봇이나 다운로드 매니저 등이 될 수 있다. 이 문자열은 브라우저, 버전 번호 및 호스트 운영체제를 담는다.(쉽게 말하면 내가 어떤 OS를 쓰고 있고, 버전은 어떤 버전인지 웹 브라우저의 정보는 어떤 것인지 등을 담고 있는 번호판 같은 개념이다.)

 


미디어 쿼리와 다른 점

CSS 미디어 쿼리로 디바이스 유형에 따라 단일 사이트의 여러 스타일을 적용할 수 있다. 미디어 쿼리는 화면 너비, 디바이스, 비율에 따라 레이아웃을 조정하는데 사용되는 것이고 유저 에이전트는 장치 유형을 식별하고 감지하는데 사용한다. 미디어 쿼리도 모바일을 감지하는 방법 중 하나가 될 수 있다.

 

 


이번 프로젝트에서는 모바일 웹 앱 서비스이기에 모바일 이외의 디바이스에서 접근할 때 안내 메세지를 출력했다.

 

 navigator.userAgent

  const [isMobile, setIsMobile] = useState<boolean>(false);
  
  
  // 사용자 화면 모바일, PC 구분
  useEffect(() => {
    const mobileCheck = /iPhone|iPad|Android/i.test(navigator.userAgent);
    if (mobileCheck === true) {
      setIsMobile(true);
    }
    else {
        alert( "죄송합니다. 
                모바일 기기에서만 가능한 서비스로 모바일 기기로 이용 부탁드립니다." )
        navigate("/intro");
    } 
  }, []);

유저 에이전트 정보를 문자열로 반환해주기에 사용자가 모바일 기기로 웹 사이트에 액세스하고 있는지 확인할 수 있다.

 

 


사용자의 브라우저 확인방법

 

사용자 에이전트를 이용한 브라우저 감지 - HTTP | MDN

보통 브라우저마다 다른 웹 페이지 또는 서비스를 제공하는 것은 나쁜 생각입니다. 웹은 사용자가 어떤 브라우저나 디바이스를 사용하고 있는지 개의치 않고 모두에게 접근성이 용이해야 하기

developer.mozilla.org

 

What's my user agent?

What's my user agent? See what your user-agent detection library really thinks! According to useragent v2.2.1: ua rawUa: facebookexternalhit/1.1; kakaotalk-scrap/1.0; +https://devtalk.kakao.com/t/scrap/33984string:family: FacebookBotmajor: 1minor: 1patch

www.whatsmyua.info

 

 


참고자료

'공부 ✍' 카테고리의 다른 글

[BROWSER] async / defer  (0) 2023.10.16
[ERROR] octal literals are not allowed. use the syntax '0o0'  (2) 2023.10.04
[React] Memoization, useMemo  (0) 2023.04.20
[JavaScript] 호이스팅, TDZ  (0) 2022.10.17
[JavaScript] 함수(Funtion)  (0) 2022.10.17