react-native 5

[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