드디어 앱을 다 만들게 되어 처음으로 앱스토어에 출시해보려고 한다. 👀앱은 다 구현했지만 앱 아이콘을 넣지 못해서 아이콘 넣는 과정부터 설명하자면 애플 앱스토어에서는 1024*1024 사이즈의 정사각형 앱 아이콘을 만들어야한다.모서리는 일부러 둥글게 만들지 않아도 iOS가 자동으로 처리한다. xCode에서 xcworkspace파일을 열고 왼쪽에 Images → AppIcon을 클릭하면이 화면이 나올텐데 아이콘을 각 규격별로 슬롯에 넣으면 된다. 근데 이렇게 만들지 않아도 오른쪽 패널에서 iOS를 Single Size로 바꿔주면 1024*1024 슬롯만 나오는데Xcode가 아이폰이나 아이패드에 필요한 크기를 자동으로 만들어주니까 Single Size로 바꾸는게 낫다. 1. App Store Connec..

이전글 - [RN] React Native에서 Supabase 시작하기 (1) 1. 데이터 추가하기데이터 추가는 insert를 사용해 데이터를 저장한다.insert into public.categories (name)values ('IT'), ('소설');insert into public.books ( title, category_id, price)values ( 'PostgreSQL 입문', 1, 22000); 전에 테이블 생성할 때 추가했던 id, is_available, created_at은 기본값이기 때문에 직접 전달하지 않아도 자동으로 저장된다. 위 코드는 개발자가 SQL에서 데이터를 직접 추가하는 방식이고, 사용자가 데이터를 추가하려면 아래처럼 입력할 수 있다.const [t..

Firebase와 Supabase를 사용하는 이유는 백엔드를 빠르게 구축할 수 있기 때문이다.둘 다 리액트 네이티브 앱에서 인증, 데이터베이스, 파일 저장과 서버 기능을 제공하지만, 데이터베이스 성격에 차이가 있다. Firebase는 JSON형태의 문서를 저장하는 NoSQL 데이터베이스로 스키마를 자유롭게 구성할 수 있고, 실시간 데이터 동기화와 오프라인 지원이 강점이다.반면 Supabase는 PostgreSQL을 기반으로 해서 테이블과 행으로 데이터를 관리하여 외래키,JOIN, 제약조건, 트랜잭션 같은 관계형 데이터베이스 기능을 사용할 수 있다. 필자가 만든 앱은 실시간 동기화나 오프라인 작성기능이 없었기에 SQL과 PostgreSQL을 직접 학습해보고 싶어서 Supabase를 선택했다. 1. Supa..

사진 편집을 하기 위해 자주 사용하는 3가지 동작을 구현하려고 한다.1. 한 손가락으로 사진 이동2. 두 손가락으로 확대 및 축소3. 두 손가락으로 회전4. 세 제스처를 동시에 사용 1. 라이브러리 설명1) React Native Gesture Handler이 라이브러리는 사용자가 어떤 손동작을 했는지 인식한다.usePanGesture: 손가락 이동usePinchGesture: 확대 및 축소useRotationGesture: 회전useSimultaneousGestures: 여러 제스처 동시 인식2) React Native Reanimated이 라이브러리는 제스처에서 나온 숫자를 실제 화면 변화로 연결한다.예를 들어 사용자가 오른쪽으로 50만큼 움직였다는 값을 받으면 아래 transform을 적용한다.tr..

1. react-native-calendars?리액트 네이티브에서 많이 사용하는 iOS와 Android 공용 캘린더 컴포넌트 라이브러리이 라이브러리는 자바스크립트로 구현되어있고 커스텀이 가능하다. 아래 명령어로 설치 가능npm install react-native-calendars 또는 yarn add react-native-calendars 2. 제공하는 컴포넌트컴포넌트역할Calendar한 달 단위 기본 캘린더CalendarList여러 달을 스크롤 하는 캘린더Agenda캘린더와 일정 목록 결합CalendarProvider여러 캘린더 컴포넌트의 날짜 상태 공유ExpandableCalendar월간/주간 형태로 접고 펼치는 캘린더AgendaLIst날짜별 섹션 일정 목록WeekCalendar일주일 단위 캘린더..

오늘 작성해볼 이미지 선택 라이브러리는 react-native-image-picker와 react-native-image-crop-picker이다.이름만 보면 둘이 비슷한 기능을 가진 것 같지만 역할이 조금 다르다. react-natvie-image-picker은 시스템의 카메라와 사진 선택 화면을 호출하는데 집중하는반면,react-native-image-crop-picker은 선택한 이미지의 크롭과 압축까지 처리 가능하다. 그래서 둘 중 선택해야할 때 이미지 또는 영상을 선택하기만 하는 간단한 기능이라면 react-native-image-picker를프로필 이미지처럼 선택 직후 정해진 비율로 잘라내고 싶다면 react-native-image-crop-picker를 선택하면 된다. 1. react-na..