리액트 네이티브 (React Native)

리액트 네이티브 스플래시 스크린 (Splash Screen) 적용하기

개요 리액트 네이티브에서 스플래시 스크린을 적용하는 방법을 알아보자. 스플래시 스크린 (Splash Screen) 이란? 앱을 켰을 때, 로고 등이 잠시 보였다가 사라지는 화면이다. 스플래시 스크린을 적용하는 이유는? 앱의 정체성을 나타내는 로고를 보여주기 위해 사용자가 알 필요 없는 작업을 가리기 위해 스플래시 스크린을 적용하는 목적에는 앱의 정체성을 나타내는 목적도 있겠지만, 사용자가 알 필요 없는 작업을 가리는 역할도 있다. 보통 로그인 처리가 필요한 앱에서는 앱이 켜진 직후 잠시동안 사용자의 토큰을 확인하고 로그인 처리등을 한다. 이 과정에서 보통 약간의 화면 깜빡임이 발생한다. 약 0.5초간 로그인 창이 떴다가 메인 화면으로 가는 등의 진행 과정이 필요할 수 있다. 또한 초기에 데이터를 받아와야..

리액트 네이티브에서 티맵 사용하는 방법

리액트 네이티브에서 티맵을 사용하는 방법 기본적으로는 공식문서 를 보고 따라하면 된다. 티맵을 이용하기 위해서는 API 키가 필요한데, 이는 이 웹사이트 에서 발급받을 수 있다. 안드로이드 gradle.build 에 의존성 추가하기 implementation files('libs/com.skt.Tmap_1.67.jar') .jar 파일에서 의존성을 가져오도록 설정하면 된다. AndoridManifest.xml 파일에 내용 추가하기 이 부분은 공식문서에 없는데, 작성하지 않으면 에러가 날 수 있다. 위 소스코드는 안드로이드에 TMap 앱이 설치되어 있는지 알아보기 위해 필요하다. 위의 내용이 필요한 이유는 안드로이드 11 이상부터 모든 패키지에 대한 공개가 이루어지지 않고 있기 때문이다. 안..

리액트 네이티브 이미지 첨부하기 (카메라, 갤러리)

리액트 네이티브 이미지 첨부 리액트 네이티브에서 이미지 첨부 기능을 이용하기 위해서는 2가지 방법이 있다. 카메라 모듈을 사용하여 즉시 찍어 올리기 갤러리에 저장된 이미지를 첨부하여 올리기 설치해야 하는 패키지 react-native-image-crop-picker 패키지를 통해 두 방식 모두 이용할 수 있다. 이미지 리사이즈를 위해 react-native-image-resizer 도 반드시 깔아주는 것이 좋다. 이미지 리사이즈 등 압축을 해주지 않으면, 요즘 스마트폰 카메라 기본 화질이 매우 좋아서 이미지 크기 자체가 매우매우 크기 때문에 서버에 큰 부담이 된다. 사용 방법 이미지 찍어 올리기 import ImageResizer from "react-native-image-resizer"; import..

리액트 네이티브 클라이언트에게 권한 받기

리액트 네이티브 권한 리액트 네이티브에서 권한을 받는 코드는 보통 react-native-permissions 라는 의존성을 통해 구현한다. 그 이유는 안드로이드와 IOS 의 권한 체계가 다른데 그것을 각자 코딩하려면 너무 공수가 많이 들기 때문이다. 그럼에도 네이티브에서 수정해야되는 내용들이 꽤 있다. IOS 네이티브 권한 설정 어떤 권한을 쓸지 명시해주기 ios/Podfile 내부에 아래와 같은 내용을 추가해주면 된다. target 'FoodDeliveryApp' do config = use_native_modules! # Flags change depending on the env values. flags = get_default_flags() permissions_path = &#3..

리액트 네이티브에 네이버 맵 넣기

리액트 네이티브에서 네이버 맵 사용 방법 react-native-nmap 을 통해 쉽게 네이버 맵을 React-Native 모바일 앱에 붙일 수 있다. 선행 조건 1: 네이버 클라우드 콘솔 API 키 발급 네이버 클라우드 콘솔에서 API 키를 발급받아야 한다. 클라이언트 API 키 입력하기 android/app/src/main/AndroidManifest.xml 파일에 위와 같이 키를 입력해주면 된다. 선행 조건 2: Gradle 의존성 추가 android/build.gradle 파일에 아래와 같은 의존성을 추가해주어야 한다. allprojects { repositories { // 다른 maven 의존성들 ... google() jcenter() // 네이버 지도 저장소 maven { url '..

React-Native 리덕스 리액트 실무 사용 패턴

초기 구성하기 스토어 만들기 루트 경로에 redux_store 디렉토리를 생성하고 index.ts 파일을 생성한다. import { configureStore } from "@reduxjs/toolkit"; import { useDispatch } from "react-redux"; import rootReducer from "./reducer"; const store = configureStore({ reducer: rootReducer, // flipper 와 연동하기 위해서 미들웨어를 사용 middleware: (getDefaultMiddleware) => { if (__DEV__) { const createDebugger = require("redux-flipper").default; return..

리액트 네이티브(React Native) 에서 사용하는 스토리지 저장소 알아보기

리액트 네이티브(react native) 에서 사용하는 저장소의 종류 리액트 네이티브에서는 값을 저장하기 위해 Redux, React Native Config, Async Storage, Encrypted Storage 와 같은 저장소를 사용할 수 있다. Redux Javascript Redux 라이브러리에 의해 제공되는 저장소. 주로 현재 앱의 상태를 저장한다. 앱을 껐다 켜면 지워진다. 앱을 껐다 켜면 사라지기 때문에 어느정도 보안성도 있다. 데이터를 불러올 때의 성능은 가장 좋다. React Native Config Node.js 라이브러리에 의해 제공되는 저장소. .env 파일을 이용하여, 주로 API 서버 주소와 같은 설정 변수를 저장한다. 이 정보는 변하지 않고, 파일에 저장되기 때문에 당연히..

react-native-config 란? + 안드로이드 세팅 방법

react-native-config 란? react-native 에서 사용하는 설정 변수(Config variables)들을 관리할 수 있는 패키지이다. 사용법 프로젝트의 ROOT 경로에 설정 변수를 저장할 .env 파일을 생성한다. API_URL=http://10.0.2.2:3105 위는 백엔드 API 서버 주소를 설정 변수로 관리한다고 가정한 것이다. 안드로이드 에뮬레이터의 경우 localhost 대신 10.0.2.2 라는 주소를 사용하니 유의하자! IOS 에서는 다시 바꾸어주어야 한다. react-native-config 패키지를 설치한다. npm install react-native-config 소스코드 상에서 import 후 Config.변수명 으로 이용할 수 있다. // Axios call e..

리액트 네이티브 앱이 바로 꺼지거나, 로그가 남지 않을 때 디버깅 방법

문제 react-native 앱을 실행시켰을 때 다음과 같은 현상이 일어나며 앱이 작동하지 않는다. 앱이 바로 꺼진다. 아무런 로그 메세지도 보여주지 않으며 그냥 앱이 작동하지 않는다. 해결 android 의 경우에는 android studio 에서 제공하는 Logcat 을 이용하는 것이 좋다. ios 의 경우에는 xcode 를 이용하는 것이 좋다. 이 때, 계속 Metro 와 같은 react native 전용 도구로 디버깅을 하려고 하면 답이 안 나온다.

DismissKeyboardView 로 사용성 좋은 키보드 입력 구성하기

문제 리액트 네이티브에서 자체적으로 제공하는 TextInput 을 사용하다보면 키보드 사용성 때문에 몇가지 불편한 점이 있다. 다음 입력 영역을 터치하고 싶은데, 스크롤이 생기지 않아 내려가지 않는다. 내가 선택한 TextInput 에 맞게 스크롤이 내려가지 않는다. 키보드를 없애고 싶어 빈공간을 클릭해도 키보드가 사라지지 않는다. 위와 같은 사용성을 개선하기 위해 DismissKeyboardView 라는 커스텀 컴포넌트를 사용할 수 있다. 해결 방법 외부 영역을 TouchableWithoutFeedback 으로 구성해주고, 클릭 시 react-native 의 Keyboard API 를 통해 키보드를 내려준다. 단, 이게 실제 버튼은 아니므로, 접근성을 위해 스크린 리더기가 헷갈리지 않도록 acessib..

리액트 네이티브 TextInput 컴포넌트 사용 방법

React-Native TextInput 사용 방법 대부분은 리액트와 동일하다. 단, onChangeText 를 사용하고, 모바일에 특화된 애트리뷰트들이 몇개 있다. 리액트와 동일하게 useState() 를 이용해 상태 변수와 상태 세팅 변수를 만들고 연결해주면 된다. useCallback() 내부에 onChangeText 시 발현할 이벤트에 대한 함수를 작성해주고 연결해주자. 코드 예제 // 콜백 함수 작성 예제 const onChangeEmail = useCallback((text: string) => { setEmail(text); }, []); const onChangePassword = useCallback((text: string) => { setPassword(text); }, []); //..

spawnSync ./gradlew EACCES 에러 해결 방법

문제 아래와 같이 spawnSync ./gradlew EACCES 에러가 났을 때 어떻게 해결할까? Error: spawnSync ./gradlew EACCES at Object.spawnSync (internal/child_process.js:998:20) at spawnSync (child_process.js:622:24) at Object.execFileSync (child_process.js:650:13) at runOnAllDevices (/home/user/react/front-end/project/node_modules /react-native/local-cli/runAndroid/runAndroid.js:299:19) at buildAndRun (/home/user/react/front-e..