[JavaScript] 접속한 모바일, PC 브라우저 정보 확인하기

728x90

목 차

• 1. 웹 브라우저 정보 가져오는 방법
• 2. navigator 객체 주요 속성
  • navigator.userAgent
  • navigator.platform
  • navigator.language
  • navigator.languages
  • navigator.vendor
  • navigator.online
  • navigator.cookieEnabled
• 3. 사용 예제
• 4. 브라우저 종류와 버전 확인하는 예제
• 5. 추가적으로 사용할 수 있는 속성들

반응형

 

1. 웹 브라우저 정보 가져오는 방법

자바스크립트에서 사용자가 접속한 웹 브라우저 정보를 가져오려면, 브라우저의 navigator 객체를 사용하면 됩니다. 이 객체는 클라이언트(사용자)의 브라우저와 관련된 다양한 정보를 제공합니다.

 

---

 

2. navigator 객체 주요 속성

navigator.userAgent

• 사용자의 브라우저와 운영 체제에 대한 문자열 정보를 반환합니다.
• 예시: "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/112.0.0.0 Safari/537.36"

 

navigator.platform

• 클라이언트의 운영 체제 플랫폼 정보를 반환합니다.
• 예시: "Win32", "MacIntel", "Linux x86_64"

 

navigator.language

• 브라우저의 기본 언어를 반환합니다.
• 예시: "en-US", "ko-KR"

 

navigator.languages

• 사용자가 선호하는 언어 목록을 배열로 반환합니다.
• 예시: ["ko-KR", "en-US", "en"]

 

navigator.vendor

• 브라우저 공급업체 정보를 반환합니다.
• 예시: "Google Inc.", "Apple Computer, Inc."

 

navigator.online

• 네트워크 연결 상태를 불리언 값으로 반환합니다.
• 예시: true (온라인), false (오프라인)

 

navigator.cookieEnabled

• 브라우저에서 쿠키가 활성화되어 있는지 여부를 반환합니다.
• 예시: true (활성화됨), false (비활성화됨)

 

---

 

3. 사용 예제

// 사용자 브라우저 정보 출력하기
console.log("User Agent:", navigator.userAgent);
console.log("Platform:", navigator.platform);
console.log("Language:", navigator.language);
console.log("Languages:", navigator.languages);
console.log("Vendor:", navigator.vendor);
console.log("Online Status:", navigator.onLine ? "Online" : "Offline");
console.log("Cookies Enabled:", navigator.cookieEnabled);

 

---

 

4. 브라우저 종류와 버전 확인하는 예제

예제 코드:

function getBrowserInfo() {
    const ua = navigator.userAgent;
    let browserName, fullVersion;

    if (ua.indexOf("Chrome") > -1 && ua.indexOf("Edg") === -1 && ua.indexOf("OPR") === -1) {
        browserName = "Chrome";
        fullVersion = ua.match(/Chrome\/([\d.]+)/)[1];
    } else if (ua.indexOf("Firefox") > -1) {
        browserName = "Firefox";
        fullVersion = ua.match(/Firefox\/([\d.]+)/)[1];
    } else if (ua.indexOf("Safari") > -1 && ua.indexOf("Chrome") === -1) {
        browserName = "Safari";
        fullVersion = ua.match(/Version\/([\d.]+)/)[1];
    } else if (ua.indexOf("Edg") > -1) {
        browserName = "Edge";
        fullVersion = ua.match(/Edg\/([\d.]+)/)[1];
    } else if (ua.indexOf("OPR") > -1) {
        browserName = "Opera";
        fullVersion = ua.match(/OPR\/([\d.]+)/)[1];
    } else {
        browserName = "Unknown";
        fullVersion = "Unknown";
    }

    return { browserName, fullVersion };
}

// 브라우저 정보 출력
const browserInfo = getBrowserInfo();
console.log(`Browser: ${browserInfo.browserName}, Version: ${browserInfo.fullVersion}`);

예제 실행:

 

 

---

 

5. 추가적으로 사용할 수 있는 속성들

• navigator.hardwareConcurrency: CPU 코어 수를 반환.
• navigator.deviceMemory: 디바이스의 RAM 용량(GB)을 반환 (지원되는 경우).
• navigator.geolocation: 사용자의 위치 정보 (GPS) 가져오기.

 

★ 위치 정보 가져오는 사용 예제

if ("geolocation" in navigator) {
    navigator.geolocation.getCurrentPosition(
        (position) => {
            console.log("Latitude:", position.coords.latitude);
            console.log("Longitude:", position.coords.longitude);
        },
        (error) => console.error("Error getting location:", error.message)
    );
} else {
    console.log("Geolocation is not supported by this browser.");
}

 

---

 

관련글

• [JavaScript] 자바스크립트 innerText 사용법
• [JavaScript] 자바스크립트 setInterval()과 clearInterval() 함수
• [JavaScript] 자바스크립트 삼항 연산자 사용법 및 예제