grace's dev_note

내 경우에는 react native simulator 실행 시 default 로 iPhone 13 으로 실행이 되었다. 디자이너님께서는 default device가 iPhone 11 Pro가 되길 원하셔서 simulator 변경 방법에 대해서 알아봤다. 터미널을 실행시켜주고 프로젝트 폴더 내에서 xcrun simctl list devices위 명령어를 실행하면 사용 가능한 simulator list를 확인할 수 있다. 내가 원하는 device가 실행 가능한지 먼저 확인해준다. 이제 아래의 명령어를 통해 사용하고 싶은 slmulator로 react native를 실행한다. npx react-native run-ios --simulator="iPhone 11 Pro"이렇게 해주면 같은 프로젝트를 다른 디바이..

mobile에서는 키보드를 화면에서 사용한다. 키보드가 팝업 될때 ios는 괜찮지만 android는 키보드의 세로 높이에 맞춰서 세로 화면의 길이가 달라진다. 그로 인해 애써 만들어놓은 디자인이 망가지고 하는경우가 있다. 그 문제 점을 해결하는방법은 의외로 간단하다. code change 우선 react-native project 안에서 android 폴더로 들어간다. 그곳에는 java로 작성된 안드로이드 네이티브 언어가 들어가 있다. 다음의 path로 이동! ./android/app/src/main/AndroidManifest.xml다음 파일을 실행하면 xml로 작성된 코드가 보일 것이다. android:windowSoftInputMode="adjustResize"그 안에서 activity 섹션에서 위..

yarn add @react-navigation/bottom-tabsimport { createBottomTabNavigator } from '@react-navigation/bottom-tabs'; const Tab = createBottomTabNavigator(); function MyTabs() { return ( ( ), tabBarLabel: "홈" }}/> ); } 해당 탭 네이게이션에 아이콘으로 이미지를 넣어주고 싶다면 Image source로 똑같이 넣어주면 가능

Async-Storage 모바일 앱에는 당연히 브라우저 저장소가 없겠죠? 모바일 개발환경에는 대신에 AsyncStorage가 LocalStorage 대신 사용됩니다. 기존에는 react-native에서 Async Storage를 가져올 수 있었는데요. 현재는 deprecated 되었습니다. 사용을 해도 되지만, 앞으로 업데이트 될 예정이 없다는 뜻입니다. 때문에 react-native docs를 읽어보시면 community package를 사용하라고 되어있는데요. 이 community package 안에 **@react-native-async-storage/async-storage**가 있습니다. 이 패키지는 npm에서도 확인할 수 있습니다. Installation # npm npm install @re..

React-Navigation React Native에서는 앱 내 화면 간 전환을 처리하기 위해 라이브러리로 react-navigation을 사용합니다. React-Navigaton 설치 react navigation 설치 링크 react navigation 설치 명령어 입니다. # npm npm install @react-navigation/native # yarn yarn add @react-navigation/native 또한, react-native-screens와 react-native-safe-area-context가 있습니다. 이 라이브러리는 react navigation을 통해 탐색된 컨테이너를 앱에 노출해주기 위해 사용해야하는 종속 라이브러리입니다. 이것들을 함께 설치해주도록 하겠습니다...

React-Native 작동원리 React Native의 작동원리를 이해하기 위해서 몇 가지 알아야할 것이 있습니다. React Native앱은 크게 두 가지 부분으로 구성되어 있는데요 Native부분과 JS 부분입니다. Native 부분은 Android/iOS Device(Java/Objective-C)가 담당하는 부분으로 UI를 렌더합니다. JS 부분은 React 관련 코드가 실행되는 스레드입니다. Native Bridge Main Thread와 JS Thread는 Native Bridge를 통해 소통합니다. 클라이언트-서버가 통신하는 것과 비슷한데, 각 부분에서 전달되는 정보가 JSON object 형태로 변환되어 전달됩니다. 이 부분에서 전달되는 양이 많아지면 병목현상이 생기면서 앱이 느려지겠죠?..

React-Native 설치 본격적으로 React-Native 프로젝트를 시작해봅시다. React-Native 설치 링크 모바일 개발이 처음인 경우, Expo를 사용하는 것이 좋습니다. Expo는 React Native를 기반으로 구축되었으며 Android Studio나 Xcode를 설치하지 않고도 프로젝트를 실행할 수 있어 편하지만 제공되어진 API만 사용이 가능하며 Object-C, Swift, Java, Kotlin으로 작성된 Native Module은 추가할 수 없습니다. 또한, 모든 Expo SDK 솔루션으로 빌드되어 빌드하는 데 시간이 오래걸립니다. 이와는 다르게 React Native는 설정하는 데는 오래걸리지만 모든 라이브러리를 사용할 수 있고 자유도가 높아 여러가지 기능을 사용하여 앱을 ..