| User Agent

User Agent는 사용자가 웹사이트에 접속할 때 브라우저가 서버로 보내는 문자열입니다.

이 문자열에는 브라우저의 정보, 운영 체제, 기기 정보 등이 포함되어 있어

이를 파싱 하면 사용자의 접속 환경을 알 수 있습니다.

자바스크립트에서는 브라우저의 navigator객체를 통하여

해당 문자열을 확인할 수 있습니다.

console.log(navigator.userAgen);

또한 기기나 브라우저로 출력되는 User Agent는 다음과 같습니다.

iOS Chrome

Mozilla/5.0 (iPhone; CPU iPhone OS 17_5 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) CriOS/125.0.6422.80 Mobile/15E148 Safari/604.1

iOS Safari

Mozilla/5.0 (iPhone; CPU iPhone OS 17_5_1 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/17.5 Mobile/15E148 Safari/604.1

IOS Kakao

Mozilla/5.0 (iPhone; CPU iPhone OS 17_5_1 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Mobile/15E148 Safari/604.1 KAKAOTALK/10.8.0

Android Chrome

Mozilla/5.0 (Linux; Android 13; Pixel 6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/91.0.4472.114 Mobile Safari/537.36

Android Kakao

Mozilla/5.0 (Linux; Android 13; Pixel 6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/91.0.4472.114 Mobile Safari/537.36 KAKAOTALK/10.8.0

이런 식으로 출력되는 문자열을 확인하고, 정규식을 검사하여

사용자가 어떤 기기의 어떤 브라우저로 접속했는지 확인할 수 있습니다.

const getDeviceType = () => {

const userAgent = navigator.userAgent;

// iOS 기기 판별

if (/iPad|iPhone|iPod/.test(userAgent)) {

if (/CriOS/.test(userAgent)) {

return "iOS Chrome";

} else if (/Safari/.test(userAgent) && !/CriOS/.test(userAgent)) {

return "iOS Safari";

} else if (/KAKAOTALK/.test(userAgent)) {

return "iOS Kakao";

} else {

return "iOS";

}

}

// Android 기기 판별

if (/android/i.test(userAgent)) {

if (/Chrome/.test(userAgent)) {

return "Android Chrome";

} else if (/SamsungBrowser/.test(userAgent)) {

return "Android Samsung Browser";

} else if (/KAKAOTALK/.test(userAgent)) {

return "Android Kakao";

} else {

return "Android";

}

}

// 웹 브라우저 판별

return "Web";

};

console.log(getDeviceType());

[Javascript] (User Agent) 사용자가 접속한 브라우저, 기기 확인하기