추석 연휴 중이라 간단한 기술을 기록해보겠습니다!
제가 토이 프로젝트로 진행했던 서비스에서 사용했던 기술이고 또 쓰게 될 것 같아서 기록해놓겠습니다.
깃허브 레포지토리 주소
https://github.com/MenuPicker/MenuPicker_FE
1. 배경
MenuPicker는 웹앱으로 개발하려고 생각했고, PWA를 사용하여 웹앱으로 개발을 진행했습니다.
그런데 요새 나오는 웹앱은 에이블리, 무신사처럼 기존의 웹페이지와는 다른 UI를 보여주고 있었어요.
기존의 웹과는 다른게 보여지시나요?
두 개의 사진 모두 노트북으로 보는 화면이지만, 동시에 너비와 높이만 줄이면 앱처럼 보일것 같지 않나요?
그래서 이런 UI를 사용했고, 또 에이블리에서 오늘 글의 요점인 QR 코드, 기기 환경 판별 아이디어를 가져올 수 있었습니다!
에이블리 사이트에 접속하면 '앱에서 보기'란 버튼이 상단에 보이는데 누르면 QR 코드가 나오게 돼요.
저 QR 코드를 핸드폰 카메라로 찍으면 앱을 다운받을 수 있는 화면으로 이동하게 됩니다.
(모바일에서는 QR코드를 띄우는 버튼이 안 보여요)
그래서 저도 다음과 같은 기능을 추가하기로 생각했어요.
모바일이 아닌 다른 기기로 접속할 때는 QR코드를 띄우는 버튼을 보여주자!
2. QR코드 생성 구현
먼저 배포한 서버로 이동하게 하는 QR 코드를 띄우는 기능부터 구현을 했습니다.
처음 QR 코드를 만들어보는거라 걱정했는데 생각보다 너무 쉬웠어요.
바로 npm에 배포된 qrcode.react 라이브러리를 사용하면 돼요.
차례대로 작성해보겠습니다.
1) 라이브러리 설치
npm i qrcode.react
2) QRCodeCanvas import
import { QRCodeCanvas } from "qrcode.react";
3) QR코드 띄우기
<QRCodeCanvas value="https://menu-picker-fe.vercel.app" size={200} />
끝이에요! 너무 쉽죠?
가장 중요한 부분은 3번에서 value뒤에 이동하게 할 주소를 넣어주는거에요.
저는 제가 배포한 프론트엔드 서버 주소를 넣어줬습니다.
이제 기기 환경을 판별하는 방법을 알아보겠습니다!
3. 기기 환경 판별 구현
아까 말했듯이, 우리는 기기가 모바일인지만 판별하면 돼요.
모바일이 아닐 때만 QR 코드를 띄우는 버튼을 렌더링해주면 저희가 원하는 기능을 구현할 수 있어요.
마찬가지로 npm에 배포된 react-device-detect 라이브러리를 사용해서 기능 구현을 해볼게요!
1) 라이브러리 설치
npm i react-device-detect
2) isMobile import
import { isMobile } from "react-device-detect";
3) 기기 환경 판별
{!isMobile && (
<div className={indexStyle.qrDiv}>
<button onClick={clickDownloadBtn}>앱으로 열기</button>
</div>
)}
이렇게만 하면 모바일이 아닐 때만 버튼을 띄울 수 있습니다!
추가로 react-device-detect는 isMobile말고도
| 기기 감지 | isMobile, isTablet, isDesktop |
| OS 감지 | isWindows, isAndroid, isIOS |
| 브라우저 감지 | isChrome, isSafari, isFirefox |
등 여러 기능이 있으니 프로젝트에 한번 써 보시길 바라겠습니다.
4. 결과
그럼 구현 결과가 어떻게 됐는지 확인해보겠습니다.
참고로 혼자서 진행한 토이 프로젝트라 UI가 많이 구립니다,,,,,
PWA로 구현했기 때문에 모바일에선 우측 상단에 다운로드 버튼을 누르면 모바일 기기에 앱 설치가 가능합니다!
5. 마무리
이렇게 글을 마무리 지어볼텐데요, 너무 간단한 기술이라 라이브러리 소개글 같은 느낌이 드네요.
여러분들도 간단한 프로젝트에서 위 기능을 한번 사용해보시면 좋을 것 같습니다.
알게된 다른 기술에 대해 또 작성하겠습니다!
감사합니다😄
'Frontend' 카테고리의 다른 글
| MenuPicker 개발기 #2 - React에서 현재 위치 불러오기 & Kakao API를 써서 위치 검색하기 (0) | 2025.11.23 |
|---|