자바스크립트에서 Ternary 연산자로 디바이스 감지

08 Nov 2023

javascript

디바이스 감지는 웹 개발에서 중요한 요소 중 하나입니다. 자바스크립트를 사용하여 현재 사용자의 디바이스를 감지하고, 그에 따른 동작을 수행할 수 있습니다. 이번 글에서는 Ternary 연산자를 사용하여 간단한 디바이스 감지 로직을 작성하는 방법을 알아보겠습니다.

디바이스 감지

디바이스 감지는 사용자가 웹사이트를 어떤 디바이스로 접속했는지를 판별하는 것을 의미합니다. 대표적으로 모바일 디바이스와 데스크톱 디바이스를 구분하는 경우가 있습니다. 감지된 디바이스에 따라 웹사이트의 레이아웃이나 기능을 조정하는 등 다양한 동작을 수행할 수 있습니다.

Ternary 연산자

Ternary 연산자는 JavaScript에서 조건문을 작성할 때 사용하는 간단한 문법입니다. 다음은 Ternary 연산자의 기본 구조입니다.

(condition) ? (expression1) : (expression2);

위의 코드에서 (condition)은 참 또는 거짓을 평가하는 조건식입니다. 조건식이 참인 경우 (expression1)이 실행되고, 거짓인 경우 (expression2)이 실행됩니다.

디바이스 감지 로직 작성

자바스크립트를 사용하여 디바이스 감지 로직을 작성하기 위해서는 먼저 navigator.userAgent 속성을 사용하여 사용자의 브라우저 정보를 확인해야 합니다. 이 정보를 기반으로 디바이스를 감지할 수 있습니다.

다음은 Ternary 연산자를 사용하여 모바일 디바이스인지 여부를 판별하는 예시입니다.

var isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);

var deviceType = isMobile ? 'Mobile' : 'Desktop';

console.log('Device Type:', deviceType);

결과 확인하기

위의 코드를 실행하면 콘솔에 디바이스 타입이 출력됩니다. 모바일 디바이스인 경우 'Mobile', 데스크톱 디바이스인 경우 'Desktop'이 출력됩니다.

자바스크립트의 Ternary 연산자를 활용하면 간단하게 디바이스를 감지하고, 조건에 따른 동작을 수행할 수 있습니다.

참고 자료

#javascript #디바이스감지