React-Native 8

[React-Native][iOS] app store 언어 한국어 설정

velog에 적었던 글들을 차근차근 tistory로 옮길 예정입니다. [react-native] app store 언어 한국어 설정처음 앱 출시를 하게 되면서 승인을 기다리고, 여러번 반려당하고, 드디어 출시를 하게 됐는데...! 앱 언어가 영어로 설정되어있었다.처음 출시하다보니 이를 빌드할때 따로 설정해줘야하는지velog.io 처음 앱 출시를 하게 되면서 승인을 기다리고, 여러번 반려당하고, 승인되어 출시할 수 있게 되었다.출시하고 기쁜마음으로 확인해보니, 앱 언어가 영어로 설정되어 있었다.처음 출시하다보니 이를 빌드할때 따로 설정해줘야하는지 몰라서 그랬던 거라, 급하게 수정해서 다시 빌드 후 다시 심사받고 재출시를 해야했다.앱 언어 설정은 간단하게, Info.plist파일에서 Localizatio..

React-Native 2024.11.01

[React-Native][iOS] react-native-iap 간단하게 인앱결제 복원하기 구현

velog에 적었던 글들을 차근차근 tistory로 옮길 예정입니다. [react-native][IOS]react-native-iap 간단하게 인앱결제 복원하기 구현안드로이드의 경우에는 앱을 삭제했다가 다시 설치해도 구매했던 구독을 자동으로 불러와 적용해주지만, IOS는 자동으로 복원되지 않기 때문에 복원하기 버튼을 만들고 이를 구현해줘야한다.velog.io  iOS 인앱결제 복원하기  안드로이드의 경우에는 앱을 삭제했다가 다시 설치해도 구매했던 구독을 자동으로 불러와 적용해주지만, iOS는 자동으로 복원되지 않기 때문에 인앱결제가 있을 경우에는 복원하기 버튼을 필수로 구현해줘야한다. (구현하지 않으면 앱스토어 심사에서 반려된다.)현재 개발 중인 앱의 경우에는 프리미엄 구독 기능이라는 인앱결제가 있기 때..

React-Native 2024.10.15

[React-Native][Android] 안드로이드 인앱 결제 시 결제 테스트 라이선스 등록

velog에 적었던 글들을 차근차근 tistory로 옮길 예정입니다. [react-native][android]안드로이드 인앱 결제 시 결제 테스트 라이선스 등록안드로이드 인앱 결제 테스트 중 ‘이 버전의 application에서는 google play를 통한 결제를 할 수 없습니다’라는 오류를 받았다. 찾아보니 이는 이것은 해당 빌드 버전과 콘솔에 등록된 버전이 다를velog.io  라이선스 테스트 등록 안드로이드 인앱 결제 테스트 중 ‘이 버전의 application에서는 google play를 통한 결제를 할 수 없습니다’라는 오류를 받았다. 찾아보니 이는 이것은 해당 빌드 버전과 콘솔에 등록된 버전이 다를 경우나, 인앱 상품만 등록하고 라이선스 테스터 등록이 안됐을 때 나오는 오류라고 한다.라이선..

React-Native 2024.10.12

[React-Native][Expo] IOS Deploy 오류해결

velog에 적었던 글들을 차근차근 tistory로 옮길 예정입니다. [Expo] [react-native] IOS Deploy 오류해결안드로이드 빌드 중 expo doctor에서 문제가 생겼었다. 그리고 해결해 빌드를 완료했고 이번에는 ios빌드를 시작하게 되었다. 당연히 이미 문제들을 해결했기 때문에 쉽게 될거라고 생각했지만... covelog.io Expo IOS DeployAndroid 빌드를 완료하고, Expo IOS 빌드를 시작하게 되었다. IOS빌드는 우선 Apple Developer 계정을 가입한 후 진행하면 되는데, 나는 preview로 확인해보기 위해서#preview 구성으로 ios 플랫폼에 대한 빌드 생성eas build --profile preview --platform iospre..

React-Native 2024.10.08

[React-Native] React-Native CLI / Expo EAS CLI Deploy, Build

CLI란?명령줄 인터페이스(CLI)는 키보드를 이용해 운영 체제와 상호 작용하는 방식이다. 명령줄 인터페이스를 사용하면 텍스트 명령을 입력하여 모든 서버 또는 컴퓨터 시스템에서 프로그램을 구성, 탐색 또는 실행할 수 있다. Linux, macOS와 Windows를 포함한 모든 운영 체제는 시스템과 더 빠르게 상호 작용할 수 있는 CLI를 제공한다.참조 : https://aws.amazon.com/ko/what-is/cli/  React-Native는 앱 개발을 위한 다양한 도구와 CLI(Command Line Interface)를 제공한다. 특히 두 가지 주요 CLI 도구가 있는데, 바로 React-Native CLI, Expo CLI 이다. React Native CLI란?React Native CLI..

React-Native 2024.08.05

[React-Native] Expo CLI란?

velog에 적었던 글들을 차근차근 tistory로 옮길 예정입니다. [react-native] Expocreate-react-app 처럼 react native의 앱 종류 중 하나이다. 가장 큰 장점은 안드로이드, ios 공용 웹앱 리액트앱을 만들 수 있다. 그리고 리액트 네이티브 SDK가 관리를 위해 점점 작아진 반면 Expo SDK에는velog.io 앱 개발을 위해 간단하게 react-native를 공부하게 되었다.노마드 코더의 리액트 네이티브 강의를 듣고 공부하였다.  Expocreate-react-app 처럼 react native의 앱 종류 중 하나이다. 가장 큰 장점은 안드로이드, IOS의 크로스 플랫폼, 웹앱 리액트앱을 만들 수 있다. 그리고 리액트 네이티브 SDK가 관리를 위해 점점 작아..

React-Native 2024.07.31

[React-Native] 버튼을 누르면 0.3초 뒤 순서가 바뀌는 리스트 UI 만들기

사용자 맞춤형 운동 루틴 AI생성 서비스인 'fitnee' 프로젝트 진행 중 나를 막히게 한 UI 구현이 있었다.    처음에는 피그마로 정적인 이미지만 확인하고 구현을 시도했는데, 아래가 그 이미지이다. 구현해야 하는 기능 운동 중에는 타이머가 진행되며, 세트 완료 버튼을 누르면 오른쪽의 체크박스가 회색 → 민트색으로 변해 운동이 완료된다. 완료한 세트는 위쪽으로 올라가 사라진다. 그와 동시에 아래에서는 새로운 세트가 올라오며, 다음으로 진행할 세트에는 더 진한 색으로 변화를 줘서 사용자에게 알려준다. 이 상태를 0.3초 유지해 이를 더 쉽게 인지할 수 있도록 한다. 이러한 애니메이션이 진행됨과 동시에 바로 오른쪽의 ‘휴식 시간’ 페이지가 나온다. 사용자는 최대 30초의 휴식 시간을 갖을 수 있고, 만..

React-Native 2024.06.21

[React-Native] ScrollView와 FlatList 중 어떤 것을 쓰는게 좋을까?

리액트 네이티브에는 리액트와 다르게 'ScrollView'와 'FlatList'라는 것이 있다.  리액트에서는 단순히{ overflow : auto } 를 사용해주면 되는 일이지만, 리액트 네이티브에서는 react-native의 라이브러리를 이용해 구현한다.  ScrollView와 FlatList는 기본적으로는 같은 기능을 한다. 하지만 ScrollView는 한번에 스크롤되는 모든 요소가 렌더링되는 반면, FlatList는 스크롤을 내리기 전, 현재 화면에서 렌더링이 될 요소만 렌더링을 하기 때문에 프로그램 성능에 더 긍정적인 영향을 줄 수 있다. 따라서 ScrollView보다는 FlatList를 사용하는 것이 더 바람직하다.      ScrollView · React NativeComponent tha..

React-Native 2024.06.21