Jun's TID

거의 1인 모바일 앱 개발자로 개발한 회사 프로젝트에서 블루투스 온도계 연동을 하고, 그 값을 받아서 사용하도록 해보자는 의견이 나와서 이게 API문서 없이(실제 발주처에서 어떤 장비를 쓸 지 모르니...) 가능한 지 한 번 테스트 하기 위해 시작을 했다. 뭐, 패킷 까보는거야 보안기사 준비나 워게임을 하면서 많이 해봤으니까 나름 자신 있다고 생각했는데, 그 생각 보다는 삽질을 많이 했다.API 문서가 없는 서드파티 블루투스 온도계(BG-BT1W, AiLink 1001)를 연동하기 위해 수행한 리버스 엔지니어링 과정과 프로토콜 분석 내용을 정리한다.1. BLE (Bluetooth Low Energy) 개요연동 대상 기기들은 모두 저전력에 최적화된 BLE 프로토콜을 사용한다.BLE 통신의 핵심은 GATT ..

forwardRef는 부모 컴포넌트에서 자식 컴포넌트의 ref에 직접 접근할 수 있도록 해주는 기능이다.여기에 useImperativeHandle을 같이 쓰면, 단순히 DOM 접근뿐 아니라 자식의 특정 메서드나 값을 부모에서 직접 호출할 수 있게 된다. ◎App.tsx import React, {useRef} from 'react';import {Button, View} from 'react-native';import ChildComponent, {ChildRefType} from './ChildComponent';const App = () => { const childRef = useRef(null); const onPress = () => { // 자식에서 정의한 메서드 호출 child..

이번에는 가장 일반적으로 사용하는 Stack Navigation을 구현하는 컴포넌트를 typeScript를 사용해서 구성해보려고 한다. 기본적으로 아래와 같이 RootStack을 구성할 수 있는데, ◎App.tsx import React from 'react'; import {NavigationContainer} from '@react-navigation/native'; import RootStack from './screens/RootStack.tsx'; const App = () => { return ( ); }; export default App; ◎screens/RootStack.tsx import React from 'react'; import {createNativeStackNavigator}..

typeScript로 contextAPI 를 사용하는 context 컴포넌트를 만들면 createContext로 사용할 전역 변수를 인터페이스로 만들어서 관리가 가능하다는 점과 제네릭 설정을 넣어 null 값에 대한 exception 처리를 손쉽게 할 수 있다는 장점이 있다. 바로 바로 참고할 수 있게 간단한 예제 컴포넌트만 하나 확인해보자. ◎AuthContext.tsx import React, {createContext, useContext, useState} from 'react'; interface User { id: number; username: string; } interface AuthContextValue { user: User | null; setUser(user: User): void..

좀 더 typescript와 친해져보자. 기존에 자주 사용하는 Hook들을 ts를 사용하여 변경하는 예제들을 확인하려고 한다. - useState import React, {useState} from 'react'; import {Button, Text, TextInput, View} from 'react-native'; const MessageForm = () => { // string 타입 const [text, setText] = useState(''); // interface 타입 체크 or null const [lastMessage, setLastMessage] = useState(null); const onPress = () => { setLastMessage({ message: text, d..

타입스크립트의 기본적인 문법을 다뤄봤으니, 이제 이 타입스크립트를 리액트/리액트 네이티브에서 어떻게 사용을 하는 지 확인해보자. Props를 어떻게 사용하여 자식 컴포넌트에 데이터를 전달하는게 JS 환경과 어떤 차이가 있는 지, 기본적인 예제 코드를 한 번 보자. Json 형식을 사용할 수도 있지만, 타입 검사를 위해 interface를 사용한다. ◎ Profile.tsx import React from 'react'; import {Image, StyleSheet, Text, View} from 'react-native'; interface Props { name: string; // normal param isActive?: boolean; // optional param image?: string;..

어떤 언어던, 프레임 워크던 친해지는 데 가장 좋은 방법은 CRUD가 완벽하게 구현된 블로그 프로젝트이다. 이번에도 RN와 Firebase를 사용하여 아주 간단한 SNS 프로젝트를 책을 따라가면서 만들어봤다. 이 프로젝트는 회원 인증, 화면 전환, CRUD, 카메라 & 앨범 제어, 새로고침, 로딩바, 스플레시, 이벤트 Emit 등 다양한 기능이 들어간 Simple SNS 프로젝트이며, 이걸로 내 RN_비기너 타이틀...? 정도는 가질 수 있게 된 거 같다. 늘 그렇듯, 전체 코드를 따라가며 설명하는 건 너무 길고 책에서 설명하는 것과 크게 다르지 않기 때문에 따로 하지 않으려고 한다. Git: https://github.com/Choonham/publicGalleryChoon GitHub - Choonh..

react-native-splash-screen은 React Native 애플리케이션에서 시작 화면(스플래시 스크린)을 쉽게 구현할 수 있게 도와주는 라이브러리이다. 이 라이브러리를 사용하면 앱이 로딩되는 동안 사용자에게 보여줄 초기 화면을 설정할 수 있으며, 앱의 로딩 경험을 개선하는 데 유용하다. 이 글에서는 Android와 iOS 환경에서 각각 셋팅하는 방법과 기본적인 사용 예제에 대하여 설명하려고 한다. yarn add react-native-splash-screen npm install react-native-splash-screen --save Android 환경에서의 셋팅 android/app/src/main/java/[...]/MainActivity.java 파일을 열고, import or..

React Native의 EventEmitter는 컴포넌트나 모듈 간의 이벤트 기반 통신을 가능하게 하는 클래스이다. 이 클래스를 활용하여, 개발자는 특정 이벤트가 발생했을 때 리스너에 알림을 보낼 수 있다. EventEmitter는 주로 네이티브 모듈과 JavaScript 간의 이벤트 통신에 사용되지만, React Native 애플리케이션 내의 다른 용도로도 사용될 수 있다. 이 글에서는 해당 이벤트를 위해 eventemitter3 라는 라이브러리를 사용하려고 한다. yarn add eventemitter3 EventEmitter 사용법 EventEmitter 인스턴스 생성: EventEmitter의 인스턴스를 생성하여 이벤트를 발생시키고, 이에 대한 리스너를 등록한다. 이벤트 리스너 등록: addLi..

react-native-image-picker은 React Native 애플리케이션에서 사용자의 디바이스 갤러리나 카메라를 통해 이미지나 비디오를 선택할 수 있게 해주는 라이브러리이다. 이 라이브러리를 사용하면 사용자가 디바이스에서 미디어를 쉽게 선택하고, 앱 내에서 이를 활용할 수 있게 된다. react-native-image-picker는 iOS와 Android 플랫폼 모두를 지원하며, 다양한 커스터마이징 옵션을 제공한다. 설치는 뭐, 동일하다. yarn add react-native-image-picker npm install react-native-image-picker 이후에는 카메라 접근 권한을 위한 권한 설정을 해줘야 한다. - 권한 설정 ◎Android(android/app/src/main..