[Vue.js] PC, Mobile 접속 정보 확인(Browser 정보)

1. 접속 브라우저 정보 확인.

- 웹개발을 진행 하다보면, 접속한 클라이언트의 기기 정보를 확인해야 할 경우가 있다. 

1. 서버에 클라이언트의 행동(Action)을 넘기고 로그를 남기기 위해.
2. 접속 기기에 따라 다른 page 제공. 

- 해당 글에서는 Vue.js 플랫폼에서, 접속한 브라우저의 정보를 확인하고, 화면에 출력해주는 예제를 설명할 예정이다.(JS)

 

 

2. 정보 확인 객체 정보

2-1. Navigator 

• 해당 객체는 JS의 내장객체 이며, 브라우저의 정보를 제공한다.
• 브라우저에서 활용 할 수 있는 코드 작성을 돕는다. 

 

2-2. 브라우저 정보 속성 확인 객체

• userAgent : 브라우저 정보를 모두 담고 있는 객체. (아래의 객체들이 deprecated 되었을때, 해당 객체를 활용해서 정보를 확인한다.) 
• appName: 브라우저명
• appCodeName: 브라우저 코드명
• platform: 브라우저가 설치된 시스템환경 (mac, window)
• appVersion: 웹 브라우저의 버전

-> 2023.05.06 현재 userAgent를 제외한 객체는 Deprecated 되었다. 

브라우저의 정보를 확인하고자 한다면, userAgent 객체에 담긴 정보를 활용하자(모든 정보가 제공됨.)

 

 

3. 사용 예제 (code)

- 정보 가져오기 -> 데이터 객체 바인딩 -> 출력 순서로 확인 

 

3-1.  data()

data() {
	return {
    	browserInfo: reactive({
            name: '',
            code: '',
            platform: '',
            userInfo: '',
            version: '',
      }),
  }
}

 

3-2.  method

methods: {
	
    init() {
    	this.checkBrowser();
    },
    
    // Browser 정보 
    checkBrowser() {
    	 this.browserInfo.name = navigator.appName;
         this.browserInfo.code = navigator.appCodeName;
         this.browserInfo.platform = navigator.platform;
         this.browserInfo.userInfo = navigator.userAgent;
         this.browserInfo.version = navigator.appVersion;
     },
 }

 

3-3. 화면 출력

    <div>
      <h4>Connection Browser Info</h4>
        브라우저명: {{ browserInfo.name }} <br>
        브라우저 코드명: {{ browserInfo.code }} <br>
        플랫폼 정보: {{ browserInfo.platform }} <br>
        사용자 정보: {{ browserInfo.userInfo }} <br>
        브라우저 버전: {{ browserInfo.version }} <br>
    </div>

 

3-4. 결과

- 접속한 사용자의 정보들이 출력되고 있는것을 확인 할 수 있다. 

- userAgent 부분인, '사용자 정보' 항목을 보게 된다면, 다른 정보들을 모두 포함하고 있다는 것을 확인할 수 있다. 

 

 

4. 모바일 기기 확인 방법.

- 모바일 기기로 접속 했을 경우, 기기정보에 '모바일' 이라는 텍스트를 출력해주도록 해보자. 

 

4-1. PC, 모바일 확인 

    // Mobile 인지 확인
    isMobile() {
      const info = navigator.userAgent;
      var flag = false;

      if( info.indexOf("iPhone") > -1
          || info.indexOf("Android") > -1
          || info.indexOf("iPad") > -1
          || info.indexOf("iPod") > -1
      ) {
        flag = true;
      }
      this.deviceInfo = flag;
    }
  },

- 모바일 기기로 접속 했을시, return flag 는 false, PC 로 접속시 true 를 반환한다.

- 모바일 기기는 아이폰,아이패드,아이팟, 안드로이드로 확인, 구분할 수 있다.

- 결국 true 반환시, 모바일 기기라는 것이다.

 

data() {
	deviceInfo: ''
	}, 

methods: {
	init() {
    		this.isMobile();
    },
    
	// Mobile 인지 확인
    isMobile() {
      const info = navigator.userAgent;
      var flag = false;

      if( info.indexOf("iPhone") > -1
          || info.indexOf("Android") > -1
          || info.indexOf("iPad") > -1
          || info.indexOf("iPod") > -1
      ) {
        flag = true;
      }
      this.deviceInfo = flag;
    }
}

 

4-2. 출력 확인 

<div>
	접속 기기 종류: {{deviceInfo ? '모바일' : 'PC'}} <br>
</div>