로메오의 블로그

React 목록 Android keystore 생성 $ keytool -genkey -v -keystore my-release-key.keystore -alias my-key-alias -keyalg RSA -keysize 2048 -validity 10000 MYAPP_RELEASE_STORE_FILE=xxx.keystore MYAPP_RELEASE_KEY_ALIAS=xxx MYAPP_RELEASE_KEY_PASSWORD=xxx MYAPP_RELEASE_STORE_PASSWORD=xxx versionCode와 versionName을 확인 합니다. signingConfigs { release { if (project.hasProperty('MYAPP_RELEASE_STORE_FILE')) { storeF..

Firebase 목록 React 목록 Firebase 프로젝트 생성 Android 연동 안내에 따라 build.gradle을 수정하고 sync 합니다. app을 재실행하고 Analytics Dashboard에서 접속을 확인합니다. iOS 연동 https://github.com/firebase/firebase-ios-sdk 패키지를 추가합니다. FirebaseAnalytics를 선택하고 추가합니다. AppDelegate.mm 파일에 두개를 import 합니다. 위 코드도 추가합니다. iOS App을 실행하면 연동을 확인 할 수 있습니다. Firebase 목록 React 목록

React 목록 react-native-make 설치 $ npm install --save-dev @bam.tech/react-native-make App 아이콘 1024 * 1024 사이즈의 png 이미지로 아이콘을 준비합니다. $ npx react-native set-icon --path ./src/assets/res/icon-1024.png --background "#191919" Android와 ios에 아이콘이 사이즈 별로 생성되었습니다. Splash 이미지 $ npx react-native set-splash --path ./src/assets/res/launchImage.png --resize center --background "#191919" android와 ios에 사이즈별 splash..

React 목록 async-storage 설치 $ npm install @react-native-async-storage/async-storage App.tsx import React, {useEffect, useState} from 'react'; import { View, SafeAreaView, StatusBar, Text, TouchableOpacity, StyleSheet, } from 'react-native'; import AsyncStorage from '@react-native-async-storage/async-storage'; type Nation = { nation: string; company: string; }; const App = () => { const [list, setL..

React 목록 Chrome DevTools 설정 react-native ios에서 command + d를 누르고 Open React DevTools를 선택하면 아래의 오류가 발생합니다. error Browser exited with error:, Error: invalid url, missing http/https protocol React Native가 사용하는 Hermes 엔진을 크롬에서 직접 설정해 줘야합니다. 크롬에서 DevTools 디버깅하기 크롬에서 chrome://inspect/ 에 접속합니다. Configure를 누르고 localhost:8081을 추가합니다. 여러개의 Hermes가 표시되는 이 중 하나입니다. ㅋ inspect를 누릅니다. DevTools에서 console을 확인 할 수..

React 목록 App.tsx import React from 'react'; import {SafeAreaView, StatusBar} from 'react-native'; import {Provider} from 'react-redux'; import {store} from './src/redux/store'; import TodoHeader from './src/components/TodoHeader'; import TodoList from './src/components/TodoList'; const App = () => { const RootApp = () => { return ( ); }; return ( ); }; export default App; store.ts import {config..

React 목록 https://randomuser.me/documentation#pagination Api 더미 데이터는 위 사이트에서 가져옵니다. App.tsx import React from 'react'; import {SafeAreaView, StatusBar} from 'react-native'; import {Provider as ReduxProvider} from 'react-redux'; import UserList from './UserList'; import store from './store'; const App = () => { return ( ); }; export default App; store.ts import {combineReducers, configureStore} fr..

React 목록 설치 $ npm install @reduxjs/toolkit counter.ts $ mkdir src/redux $ touch src/redux/counter.ts import {createSlice} from '@reduxjs/toolkit'; import type {PayloadAction} from '@reduxjs/toolkit'; export interface CounterState { count: number; } const initialState: CounterState = { count: 0, }; export const counterSlice = createSlice({ name: 'counter', initialState, reducers: { increment: sta..