userDevise 확인하기 : iframe의 덫

본문이 모바일 사이즈의 iframe 안에서 보여지도록 만들었던 포트폴리오가 있다.
이걸 이번에 아카이브 웹사이트를 만들면서 콘텐츠로 넣어뒀는데, 사이트 보완을 하면서 하나하나 체크해보니 해당 포트폴리오는 pc를 제외한 모든 디바이스에서 404페이지를 보여준다는 것을 뒤늦게 알았다. 아카이브 웹사이트를 구직용 포트폴리오로 사용하기 때문에 이런 실수는 절대 없어야 했는데 iframe으로 모바일 화면으로 우회했다는 말이 진짜 mobile, tablet에서는 보이지 않는다는 것을 이제야 깨달은 것이다.

🤦🏻‍♀️처음엔 경로문제인 줄 알았지.

이전에 한 번 언급한 적이 있지만 나는 학원출신 비전공자다.
당연히 배움에 깊이가 상대적으로 얕다. 그말은 즉 아는 것이 없다는 말이다.
일반적으로 404페이지는 경로가 잘못 되어있을 때 나오는 것이니 이번에도 경로의 문제일 것이라고 생각했다. 그도 그럴것이 기존경로가 /index.html이었다면, 이번에 사이트를 만들면서 /product/이름/index.html로 변경되었기 때문이다. 그래서! 해당 폴더의 모든 파일의 경로를 전부 바꿔서 업로드하고 확인해봤지만 여전히 404!

그럼 뭐가 문제지...? 아 설마?🤔

불현듯 스쳐지나간 생각.
"이게 모바일화면이라고 인식하는 것이니까... 디바이스 체크를 해보면 어떨까?"

navigator.userAgent로 디바이스 체크하기

구글링을 해보니 navigator.userAgent를 사용하여 사용자의 브라우저 UserAgent 문자열을 올 수 있고, UserAgent 문자열에는 브라우저와 운영 체제에 대한 정보가 포함되어있다고 한다.

// User-Agent 문자열 가져오기
var userAgent = navigator.userAgent;

// 모바일 여부 확인
var isMobile = userAgent.match(/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i);

이걸 이용해서 아래와 같은 코드를 짰다.

    onBeforeMount(() => {
      checkDevise();
    });
    
    const is_Mobile = ref(false);
    const checkDevise = () => {
		var userAgent = navigator.userAgent;
        var isMobile = userAgent.match(
        	/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i
        );
        if(userAgent = isMobile){
        	is_Mobile.value = true;
            alert('모바일');
        }else{
        	is_Mobile.value = false;
            alert('pc');
        };
    };
    
    return {
    	is_Mobile
    }

is_Mobile의 값이 true가 되면 window.open이벤트가 실행되고, false면 실행되지 않도록 코드를 짠 것인데, 문제는 alert은 정상적으로 잘 작동이 되는데 is_Mobile.value에 값이 들어가지 않아서 변수 is_Mobile을 사용할 수 없는 것이다. 함수 자체에는 문제가 없어보이는데 답답할 노릇이었다.
그래서 사용한 꼼수.

    const openWindow = (e) => {
      const windowUrl = e.href
      if (windowUrl.includes('#')){
        alert('준비중 이에요!')
      } else if (windowUrl.includes('manyo')) {
        window.open(windowUrl,"blank");
      } else if (windowUrl.includes('knotted')) {
        // User-Agent 문자열 가져오기
        var userAgent = navigator.userAgent;
        // 모바일 여부 확인
        var isMobile = userAgent.match(/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i);
        if (userAgent = isMobile){
          alert('PC에서 볼 수 있어요!');
        } else {
          window.open(windowUrl,"blank");
        }
      } else if (windowUrl.includes('vue3'))  {
        // window.open(windowUrl,"blank");
        alert('현재 페이지에요!')
      }
      console.log('window.location', window.location.href)
    };

함수의 모양이 아름답지 못하고 복잡한 기분이라 권장하지 않을 것 같지만 일단 이것으로 문제는 해결했다.
데스트톱에서는 화면이 잘 보여지고, 모바일, 테블릿에서는 귀여운 alert이 뜬다.

👉🏻참고페이지
userAgent 사용해서 브라우저, 디바이스 정보 확인하기