키보드로 물고기 잡기 키보드로 물고기 잡기

그동안 회사일이 바빠 잠시 개인 프로젝트를 하지 못했다. 2~3달 동안 React native 에 익숙해져 가는 시간이 조금 있었고 세부적으로 다음 기술들을 사용 및 적용 하였다. 1. Redux 2. axios 3. secure storage, tabs, navigator 등 4. 기타 UI 제작을 위한 여러가지 라이브러리 캘린더, 헤더스크롤 애니메이션 뷰, 모달, 간략한 차트 아직도 javascript는 나에게 조금 힘든 언어같다. c++, java 컴파일러형 언어에 익숙해져 있어서 그런가보다. 아마 다시 프로젝트를 시작한다면 typescript로 하지 않을까 생각이 된다. 얻게된 것은 모바일 OS 에 대해 기존보다 조금은 이해를 하게 됐다. 대부분의 RN 라이브러리들이 래핑이 잘 되어있어 Platf..

잘 실행되던 React native 앱이 안드로이드 에뮬레이터에서 빌드 실패함. 에러 내용은 아래와 같음 > Task :app:installDebug FAILED Installing APK 'app-debug.apk' on 'Pixel_3a_API_30_arm64-v8a(AVD) - 11' for app:debug 166 actionable tasks: 2 executed, 164 up-to-date Unable to install /Users/test/git/test/test/android/app/build/outputs/apk/debug/app-debug.apk com.android.ddmlib.InstallException: INSTALL_FAILED_INSUFFICIENT_STORAGE at co..

https://github.com/react-native-picker/picker 를 이용해 알림 시간 설정을 구현했는데 앱의 기본 백그라운드 색상이 어둡다 보니 문제가 발생되었다. 기본적으로 react-native-picker는 안드로이드에 modal, dropdown 두가지 방식을 지원하는데 피커 아이템 텍스트 컬러는 뒷 배경이 어둡기 때문에 밝은색으로 설정해 보이지가 않는 문제가 발생 함 또, 픽커 선택의 화살표 색상도 고정되어 있었으며 react-native-picker 에서는 별도의 arrow color 스타일 시트 조정 옵션을 제공하고 있지 않았다. IOS, ANDROID 두가지 앱의 통일성을 최대한 맞추기 위해 안드로이드만 별도 백그라운드 컬러를 넣는 방식은 적절하지 않아서 한참을 어떻게 할..

오늘의 목표(가칭) 리액트 네이티브를 이용해 간단한 일정관리 앱을 만들고 있습니다. 아직 모바일에 대한 이해 및 리액트 네이티브에 대한 이해도가 크질 않아 간단한 토이프로젝트가 될 것 같네요. 1차 목표 1. 목표를 설정하고 리스트에서 볼 수 있다. 2. 목표를 달성한 날과 그렇지 않은 날을 구분할 수 있다 3. 설정한 값들은 redux-persist를 이용해 유지되도록 한다. 4. 서비스를 이용한 알람 기능을 설정한다. 이후 서버와 연동해 간단한 커뮤니티 기능을 넣을 생각입니다.

리액트 네이티브 component 외부에서 redux state에 접근할 경우 다음과 같이 store를 이용하면 된다. 나의 경우 restapi 호출전 accessToken을 axios header에 설정해줘야 했다. 먼저 store 를 생성 import { createStore } from 'redux'; import reducer from './reducer'; const store = createStore(reducer); export default store; 그리고 store에 저장되어 있는 redux state를 가져올땐 아래와 같이 하면 된다. import store from './store'; export function doSomething() { const state = store.ge..

최근 react native 를 이용해 앱 개발중 구현 사항이 시뮬레이터에 반영이 되질 않거나 메트로 서버 비정상 동작 등 여러가지 문제를 겪어왔다. react native에 익숙하지 않기도 했고 여러 검색 결과 아직은 메트로 서버가 불안정해 나와 같은 이슈를 겪는 사람이 많은걸 확인 이 문제들을 해결 했던 방법을 나열 해 봄 1. 파일을 추가한 경우 메트로 서버 재시작 2. 개발중 npm 추가 모듈을 설치한 경우 ios 시뮬레이터에 개발 결과물 반영을 위해서는 pod install 실행 필요 2.1 cd ios && pod install diaz ~/git/realforceman/three_day_app/ios pod install Auto-linking React Native modules for t..

리액트 네이티브로 앱 개발중 특정 화면에서 뒤로 가기를 막거나 , IOS 의 뒤로가기 제스쳐를 막아야 하는 경우가 생겼다. 예를들면 회원 가입 후, 메인 페이지 진입한 경우 뒤로 가기를 막아야 한다. StackNavigator를 사용중이라면 다음과 같이 설정시 전체 화면에 대해 제스쳐를 막을 수 있다. const RootStack = createStackNavigator(); function RootNavigator() { const initialRouteScreen = "ViewExample"; return ( ); } export default RootNavigator; 일단 상위 ScreenOptions 에 gestureEnabled 설정하니 의도한대로 모든 뷰에서 제스쳐가 동작하지 않았다. 하지만..

info Found Xcode workspace "test.xcworkspace" info Building (using "xcodebuild -workspace three_day.xcworkspace -configuration Debug -scheme three_day -destination id=20A687AF-94B9-43D4-A957-14B16B204488") error Failed to build iOS project. We ran "xcodebuild" command but it exited with error code 65. To debug build logs further, consider building your app with Xcode.app, by opening three_day.xc..