Next.js를 안 쓴지 좀 되어서 다시 공부 시작,,,😑 1. 프로젝트 생성npx create-next-app@latest 프로젝트명cd dev-bookmarksnpm run dev 2. App Router 기본 구조프로젝트를 생성하면 app 디렉터리 중심으로 다음고 같은 구조가 만들어진다.app/├── layout.tsx├── page.tsx└── globals.css React SPA에선 보통 React Router 설정에서 URL과 컴포넌트를 연결한다.} /> 하지만 Next.js App Router는 폴더와 파일 구조가 곧 라우팅 설정이 된다.app/bookmarks/page.tsx라우팅 설정을 별도로 작성하지 않아도 된다는 점이 React SPA와 가장 먼저 체감되는 차이였다. 3. page..

앱 개발을 하면서 Xcode에 시뮬레이터로 테스트를 하고 있었는데 테스트하다보니 개발용과 운영용 데이터베이스를 분리해야된다고 뒤늦게 깨달았다. 어떻게 분리를 할 것이냐1. 로컬 Docker DB -> Migration과 RLS 자동 검사2. 원격 dev -> Xcode 디버그, 테스트3. 원격 prod -> TestFlight , 앱스토어 운영 여기서 Docker DB는 계속 관리하는 데이터베이스가 아니라 DB구조를 변경했을 때 잠깐 실행하는 검사환경이다. 1. 현재 운영 DB 상태 확인npx supabase projects list 이렇게 로그인 상태를 확인하면 되는데여기서 만약 로그인이 필요하다는 메세지가 나오면 브라우저에서 로그인을 하면 된다. npx supabase migration list 현재..

드디어 앱을 다 만들게 되어 처음으로 앱스토어에 출시해보려고 한다. 👀앱은 다 구현했지만 앱 아이콘을 넣지 못해서 아이콘 넣는 과정부터 설명하자면 애플 앱스토어에서는 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..