I. 목표 웹뷰 기반의 하이브리드 앱에서는 카메라를 이용하여 바코드를 스캔할수 있는 기능을 연구한다. II. 연구 및 개발내용 1. 라이브러리 설치 npm install react-native-camera-kit –save IOS의 경우 추가적으로 pod를 설치해야 한다. cd ios pod install 2. 카메라 권한 가. 안드로이드 ./android/app/src/AndroidManifest.xml파일에 아래와 같이 권한 추가 <uses-permission android:name=”android.permission.CAMERA” /> 나. IOS ./ios/npc/Info.plist 파일에 아래키를 추가한다. […]
I. 목표 웹뷰 기반의 하이브리드 앱에서는 바코드를 스캔할수 있는 기능을 연구한다. II. 연구 및 개발내용 일반적인 네이티브앱에서는 바코드 스캐너는 구현하기 쉽다. 하지만, 웹뷰 기반의 하이브리드 앱에서는 네이티브로 플러그인을 구현하여 웹으로 전달해야 한다. 1. 플러그인 모듈 프로젝트 생성 1) create-react-native-module 설치 yarn global add create-react-native-module 또는 npm install -g create-react-native-module 2) 모듈생성 create-react-native-module NpcBarcode […]
I. 목표 앱상에서 웹상에 있는 PDF를 출력하는것을 목표로 한다. II. 연구 및 개발내용 1. 모듈설치 npm install –save react-to-print 2. 구현 가. 모듈 Import import RNPrint from “react-native-print”; 나. PDF 출력 웹으로 부터 URL을 수신받아 RNPrint.print({filePath: PDF경로}}) 명령을 이용하여 출력한다. if(consts.MSG_REQUEST_LABEL_PRINT == strMsgId) { let strUrl = objData.msgData; console.log(“=================================”); console.log(“*MSG_REQUEST_LABEL_PRINT, strUrl:”+ […]
I. 목표 원래 네이티브 앱에서 전표출력은 쉽게 할수 있으나, WebView로 사이트롤 불러와 보여주는 하이브리드 앱에서는 좀더 복잡한 방식으로 프린트를 해야해서 출력하는 방법에 대하여 정리하였다. II. 연구 및 개발내용 구입한 해당 전표출력 프린터는 블루투스 방식으로 통신하는 제품이다. 일단 웹에서 PDF로 출력을 누르게 되면 PDF가 나타난다. 해당 PDF의 출력을 누르게 되면 아래처럼 프린터를 추가할수 있게 된다. […]
I. 목표 React Native 로 개발한 앱을 플레이스토어 또는 앱스토어에 배포하기 위해서 릴리즈 모드로 빌드한다. II. 연구 및 개발내용 1. 안드로이드 1) 버전정보 수정 스토어에 올리기 위해서는 우선 앱의 버전을 올려야 한다. ./android/app/build.gradle에서 versionCode 및 versionName을 수정 2) 번들 파일 생성 터미널에서 npm run android:bundle:release 명령을 실행하면 프로젝트의 android/app/build/output/bundle폴더에 번들 파일이 생성되는데 이 파일을 플레이스토어에 […]
I. 목표 안드로이드 및 IOS 개발을 한 소스에서 개발하기 위하여 React Native를 선택하였고, 개발을 위한 환경설정을 해본다. II. 연구 및 개발내용 1. 관련 어플리케이션 설치 본 매뉴얼은 iMac (macOS, Ver 13.6.1)에서 작성되었으나, Android의 경우는 Windows 10에서도 동작가능 합니다. 1) Node.js 설치 가. 맥 : Homebrew를 이용하여 설치 brew install node 나. Windows https://nodejs.org/에서 다운로드하여 […]
I. 목표 React Native Webview로 앱을 만들었을때 칼렌더가 영어로 출력되어, 한글로 로케일을 바꿀수 있도록 한다. II. 연구및 개발내용 Input type이 date로 지정하고 웹뷰로 보면 아래와 같이 칼렌더가 나타난다. <input id=”prodtCmdDt” name=”prodtCmdDt” type=”date” value=”” class=”form-control-date”> 2. 그러나 위와 같이 영어권에서 같은 칼렌더가 출력되는 문제가 있어 info.plist에 아래와 같이 지원하는 로케일을 설정한다. <key>CFBundleLocalizations</key> <array> <string>en</string> […]
1. 프로젝트 생성 1.1 프로젝트 생성 react-native init ElcantoDeepp –package=com.elcanto.deepp 1.2 프로젝트 실행 1) 안드로이드 cd ElcantoDeepp react-native run-android 2) IOS cd ElcantoDeepp react-native run-ios 1.3 Vscode에서 프로젝트 열기 파일 > 열기.. 선택후 해당 디렉토리인 ElcantoDeepp폴더를 선택 1.4 Webview 컨트롤 추가 Vscode의 터미널에서 아래 명령으로 webview 컨트롤을 […]
스마트폰 SDK가 최신버전으로 업그레이드시 npm 을 통해 받은 node_modules들이 예전에 작성하고 업데이트가 안되어 있는 경우 아래처럼 직접 수정해야 하는경우가 발생하여 간단히 정리해봄. 1. 타이머(react-native-background-timer) 1) 위치 node_modules\react-native-background-timer\android\src\main\java\com\ocetnik\timer\ 2) 에러내용 Error: Tag name should use a unique prefix followed by a colon … 3) 수정사항 this.wakeLock = powerManager.newWakeLock(PowerManager.PARTIAL_WAKE_LOCK, “rohit_bg_wakelock”); 에서 this.wakeLock = powerManager.newWakeLock(PowerManager.PARTIAL_WAKE_LOCK, ” ocetnik:rohit_bg_wakelock”); 로 […]
1. React Native 1) react-native-crypto-js 추가 npm install react-native-crypto-js –save 2) 사용방법 전화번호를 비밀키를 이용하여 암호화한다. import CryptoJS from “react-native-crypto-js”; let strPhoneNo = “01012345678”; let strSecretKey =”1234″; let strEncrypt = CryptoJS.AES.encrypt(strPhoneNo , strSecretKey).toString(); 3) 전송 위의 strEncrypt를 이용하여 Node.js 서버로 전송 2. node.js 서버 1) crypto-js 추가 npm install crypto-js –save 2) 사용방법 수신된 전화번호를 […]