React Native에서 블루투스 사용하기


사실 React Native는 디바이스를 제어하는 기능을 하기에 효율적인 솔루션은 아닙니다.

기기의 디바이스적인 부분을 건드릴 때는 네이티브 코드로 작성하시는 것이 훨씬 간단하지만,

사정상 React Native를 통해 모두 구현하게 되어, React Native에서 블루투스를 사용하는 과정을 정리해 블로그에 올려봅니다.

우선 라이브러리가 필요합니다.

제가 사용할 라이브러리는 react-native-bluetooth-serial 라는 라이브러리 입니다.

NPM 또는 Yarn을 통해 설치 후, React-Native CLI를 통해 링크해주세요.

저는 Yarn을 이용해 설치하겠습니다.

yarn add react-native-bluetooth-serial
react-native link react-native-bluetooth-serial

그 다음, AndroidManifest.xml에 블루투스 관련 퍼미션을 추가해주세요.

<manifest xmlns:android="http://schemas.android.com/apk/res/android">

<uses-permission android:name="android.permission.BLUETOOTH" />
<uses-permission android:name="android.permission.BLUETOOTH_ADMIN" />

...

</manifest>


이렇게 설치는 끝났습니다.

그 다음 안드로이드의 경우 사용 전 필요한 작업이 있습니다.

react-native-bluetooth-serial의 java -> RCTBluetoothSerialPackage 클래스에서

23번째 라인의 메소드를 아래와 같이 변경해주세요.

public List<Class<? extends JavaScriptModule>> createJSModules() {
return Collections.emptyList();
}

이렇게 해주시면 사용 가능합니다.

API의 기능은 위 깃에서 확인해주세요.

React Native에서 구글 지도 사용하기


1. API 키 발급

2. 라이브러리 설치

3. 적용


API 키 발급

react-native-maps 라이브러리를 사용할 때는 구글 지도 API가 필요합니다.

구글 지도 API 사이트에 들어가 키를 발급 받아주세요.


라이브러리 설치

NPM과 Yarn 설치 방법 모두 설명하겠습니다.

NPM의 경우:

npm install react-native-maps --save

Yarn의 경우 :

yarn add react-native-maps

모듈 설치가 완료되면, 라이브러리를 링크해주셔야 합니다.

react-native link react-native-maps

링크가 완료되면, android - app - src - AndroidManifest.xml 파일을 열어 구글 지도 API 키를 추가해주세요.

<manifest xmlns:android="http://schemas.android.com/apk/res/android">

...
<meta-data
android:name="com.google.android.geo.API_KEY"
android:value="API Key"/>
</application>

</manifest>


이런 식으로 API 키를 넣어주시면 됩니다.


적용


import MapView from 'react-native-maps'; // 지도 라이브러리

export default class App extends Component {

state = {
active: "home"
}

render() {
return (
<View>
<MapView
initialRegion={{
latitude: 37.78825,
longitude: -122.4324,
latitudeDelta: 0.0922,
longitudeDelta: 0.0421,
}}
/>
)
}
}

이런식으로 써주시면 됩니다.

latitude는 경도, longitude 위도 값입니다.

Vuetify + Electron 사용하기

요즘 프론트엔드 라이브러리의 인기가 상당합니다.

페이스북에서 이끄는 React, 타입스크립트 기반의 Angular2, 항상 떠오르는 신예 취급을 받는 Vue.js 등의 라이브러리가 많은데요.

저는 Pure Javascript + Electron을 통해 데스크탑 어플리케이션 작업을 하고 있었는데, Single-Page Application (SPA)로 구성하지 않았던 앱을 SPA로 변경하려니 상당히 어려움이 많았습니다.

자바스크립트에서 SPA를 구현하려면 직접적으로 DOM을 건드려주기도 해야하구요.

그래서 SPA 관련해서 정보를 찾아보니 React, Vue.js 등의 프론트엔드 라이브러리에 관한 정보가 많이 나와 프론트엔드 라이브러리를 사용해보고,

라이브러리를 사용하는 게 더 괜찮으면 코드를 다 엎은 뒤 라이브러리를 사용하는 쪽으로 건너가려고 합니다.

처음에는 React를 사용해봤는데, 상당히 좋은 라이브러리인데 아무래도 추가적으로 배워야 하는 게 많았습니다.

특히 JSX에 관한 부분이 그랬습니다. 코드가 더러워 보이기도 하구요.

이 글에는 제가 Vue.js를 공부하면서 배운 것들을 적어보려고 합니다.

Vue + Electron 개발을 찾아보니, Vuetify.js라는 라이브러리가 나와 해당 라이브러리를 이용해 개발해 보겠습니다.


설치

당연하지만, 개발하려면 우선 설치가 필요합니다.

Vue.js 공식 사이트에서는 CDN에서 Vue.js를 가져와 사용하는 것을 추천하고 있는데,

저는 웹 어플리케이션이 아니라 데스크톱 어플리케이션을 개발하기 때문에 설치 후 작업이 필요했습니다.

우선 yarn 이라는 패키지 매니저를 설치하겠습니다.

보통 자바스크립트 패키지 매니저는 npm을 주로 사용하는 데, npm의 단점을 해결하기 위해 페이스북, 구글등의 엔지니어 그룹이 협력해서 만든 패키지 매니저라고 합니다. 보다 빠르고 안정적이라고 주장하고 있네요. 우선 설치해보겠습니다, npm이 필요합니다.

npm install --global yarn

해당 명령어를 통해 yarn의 설치가 가능합니다.

그 다음, yarn을 통해서 Vue CLI를 설치하겠습니다.

yarn global add @vue/cli

그 다음 프로젝트를 생성하겠습니다.

프로젝트 이름은 vueapp으로 하겠습니다.

vue create vueapp
cd vueapp

이제 Vuetify를 설치하고, 서버를 시작해보겠습니다.

vue add vuetify
yarn serve

서버가 시작된 뒤, 나오는 주소로 접속해보면

이런 화면을 볼 수 있습니다.

이제 이 App을 Electron으로 띄워봐야겠죠?

저는 vue-cli-plugin-electron-builder를 이용해서 만들어보도록 하겠습니다.

vue add electron-builder
yarn serve:electron

커맨드라인에서 실행하시면,

이런 식으로 Electron으로 뜨는 걸 볼 수 있습니다.

더 자세한 설명은 다음 게시글에서 하겠습니다.

읽어주셔서 감사합니다.


+ Recent posts

티스토리 툴바