웹에서 네이티브 카메라 모듈을 사용하기 위해서 웹뷰와의 통신을 한다. 웹 ( 카메라 호출 요청 ) -> 웹뷰 카메라 호출 과정 자체는 단순하나 문제가 있다. 이미 떠있는 웹뷰에서 카메라를 호출할 경우 스캔 이후에 다시 웹뷰가 초기화 된다는 것 그래서 생각해낸 방법이 웹뷰는 그대로 로드하되 오버레이 형태로 카메라 모듈을 띄우는것 {injectJavaScriptCode && fcmToken && ( {isScannerOpen && ( )} )} 위와 같이 카메라 호출을 받으면 플래그를 참조해서 카메라를 호출한다. 순서대로 보자면, 웹에서 네이티브쪽으로 카메라를 호출하는 로직은 아래와 같다. const [isLoadingCamera, setIsLoadingCamera] = useState(false) useE..

1. 수동 검사: 가장 간단한 방법은 package.json 파일을 열어서 각 라이브러리를 검토하는 것입니다. 프로젝트에서 해당 라이브러리를 사용하는지 여부를 수동으로 확인합니다. 이 방법은 시간이 많이 소요되며, 대규모 프로젝트에서는 비효율적일 수 있습니다. 2. 도구 사용: depcheck: depcheck는 노드 프로젝트에서 사용되지 않는 의존성을 찾아주는 도구입니다. 설치 후 프로젝트 디렉토리에서 depcheck를 실행하면 미사용 의존성 목록을 볼 수 있습니다. npm install -g depcheck depcheck Unused dependencies * @date-io/date-fns * @mui/x-data-grid * @types/googlemaps * apexcharts-clevisio..

준비물 : 네이버 맵 사용을 위한 클라이언트 ID 풀코드는 아래와 같음. import React, { useEffect, useRef } from 'react' import { NaverMaps, ClusteringMapProps } from '../types/naverMaps' import authConfig from 'src/configs/auth' // shopList (상점 목록)과 onShopSelect (상점 선택시 호출할 함수) 두 개의 prop을 받음 const NaverMapMarketClustering = ({ shopList, onShopSelect }: ClusteringMapProps) => { // useRef를 사용하여 지도를 표시할 DOM 요소의 참조(mapRef)를 생성 c..

Next.js에서는 React와 비슷하지만, 서버사이드 렌더링이나 정적 사이트 생성 등의 추가 기능을 제공합니다. 이 경우 Google Maps를 사용하기 위해 직접 스크립트를 로드하는 방식을 사용할 수 있습니다. 환경 변수를 사용하여 Google Maps API 스크립트를 로드하고 현재 위치에 마커를 표시하며, 2km 반경의 원을 그리는 방법에 대한 예시입니다. 먼저, public 디렉토리에 GoogleMap.js라는 스크립트 파일을 만듭니다 // public/GoogleMap.js window.initMap = function() {}; function loadScript(src, position, id) { if (!window.google) { const script = document.creat..

iPhone X 이후 모델의 노치(notch) 또는 홈 인디케이터(home indicator)로 인해 컨텐츠가 가려지는 문제가 발생할 수 있습니다. 이는 "Safe Area" 개념을 적용하여 해결할 수 있습니다. Safe Area는 노치나 홈 버튼이 존재하는 영역을 피해 콘텐츠가 올바르게 표시될 수 있도록 화면의 안전한 영역을 정의하는 것입니다. SafeAreaView 사용하기 SafeAreaView 컴포넌트는 iOS의 노치와 같은 화면의 비표준 영역을 자동으로 감지하고, 해당 영역을 피해 콘텐츠가 올바르게 표시될 수 있도록 조정해줍니다. import { SafeAreaView } from 'react-native'; StatusBar Height 조정하기 상태 표시줄(Status Bar)의 높이를 조정..

React Native에서 WebView를 사용하여 웹 콘텐츠에 GPS 위치를 제공하고자 할 때 다음과 같은 단계를 거쳐 구현할 수 있습니다. 권한 요청 모바일 애플리케이션에서 GPS 위치 정보에 접근하려면 사용자로부터 위치 정보 접근에 대한 권한을 얻어야 합니다. React Native에서는 react-native-permissions 라이브러리를 통해 이를 수행할 수 있습니다. import { PermissionsAndroid } from 'react-native'; import { request, PERMISSIONS } from 'react-native-permissions'; async function requestLocationPermission() { try { const granted = ..