챗지피티취미독학

✅ 1. 프로젝트 생성npx @react-native-community/cli init WebViewApp ✅ 2. 필수 패키지 설치React Native에서 웹뷰를 구현하려면 공식 웹뷰 모듈을 설치해야 합니다.npm install react-native-webview설치 후 iOS는 아래 명령으로 네이티브 모듈을 연결합니다:cd ios && pod install && cd ..✅ 3. WebView 사용 예시App.js를 다음과 같이 수정합니다:import React from 'react';import { SafeAreaView, StyleSheet } from 'react-native';import { WebView } from 'react-native-webview';export default fu..

✅ 1단계: API 키 받기OpenWeather 공식 사이트에서 회원가입 후Current Weather Data → API Key 발급📁 2단계: 프로젝트 생성 및 구조npx @react-native-community/cli init WeatherAppcd WeatherAppnpx pod-install 폴더 구조:WeatherApp/├── App.js└── src/ ├── screens/ │ └── WeatherScreen.js └── api/ └── weather.js🧩 3단계: 필요한 패키지 설치npm install react-native-geolocation-service axiosnpx pod-install ios/Info.plist에 위치 권한 추가:NSLoc..

🧭 전체 흐름 (앱 구동 기준)firebaseConfig.jsfirebase 초기화 App.js앱의 진입점. 로그인 여부에 따라 LoginScreen 또는 FeedScreen을 보여줌LoginScreen.js로그인/회원가입 UI 및 Firebase 인증 기능 처리 ① 앱 시작 (App.js)Firebase의 onAuthStateChanged()로 로그인 상태 확인로딩 중이면 화면을 안 보여줌 (return null)② 로그인 상태 확인 결과에 따라🔹 로그인 O → FeedScreen 보여줌예전 로그인 기록이 남아 있으면 자동 로그인아직 FeedScreen은 비어있어도 앱은 정상 작동함 (빈 화면이라도 정상)🔹 로그인 X → LoginScreen 보여줌로그인/회원가입 UI가 나타남이메일/비밀번호 입력..

✅ 1. 핵심 기능 정의회원가입 / 로그인Firebase Auth 연동피드 목록게시물 리스트 + 좋아요 기능게시물 업로드이미지 선택 & Firebase Storage 업로드프로필 화면내 게시물, 팔로워 수 표시댓글간단한 댓글 기능실시간 알림 (선택)Firebase Cloud Messaging 또는 알림 전용 탭 ✅ 2. 기술 스택 (2025년 기준)React Native CLI (v0.74 이상)TypeScriptFirebase (Auth, Firestore, Storage)React Navigation v7react-native-image-pickerreact-native-fast-image (이미지 캐시)zustand 또는 recoil (전역 상태 관리)react-native-vector-icons ..

1. 학습 목표ToF 센서 원리와 Camera2 DEPTH16 포맷 이해ARCore Depth API 구성 및 Depth 데이터를 획득하는 방법 학습Android 네이티브 모듈 작성 및 React Native 연동 방법 실습실시간 Depth 기반 AR 환경(가상 오클루전, 물리적 상호작용) 구현 2. Camera2 DEPTH16 구현 (복습)CameraManager로 카메라 ID 조회 및 열기ImageReader.newInstance(width, height, ImageFormat.DEPTH16, 2) 생성CaptureRequest.Builder에 TEMPLATE_PREVIEW와 REQUEST_AVAILABLE_DEPTH_STREAM 설정setRepeatingRequest()로 지속 depth 캡처 요청..

1. 학습 목표ToF 센서 원리와 Camera2 API DEPTH16 포맷 이해Android 네이티브 모듈 작성 및 React Native 연동 방법 학습실시간 depth 데이터를 React Native 화면에 표시하는 방법 구현거리 데이터 기반 간단한 UI 인터랙션 적용 2. 사전 준비ToF 센서 지원 Android 기기(API 29 이상)React Native 개발 환경: Node.js, npm, React Native CLIAndroid Studio 설치 및 SDK 설정 완료Java/Kotlin 네이티브 모듈 개발 경험3. ToF 센서 개요원리: 빛 펄스 발사 → 반사 후 수신 소요 시간 측정 → 픽셀별 거리 계산출력: DEPTH16 포맷 depth map(16-bit)활용: AR, 거리 측정, 3..

✅ 오늘 목표사용자가 스토리 화면을👉 오른쪽을 터치하면 다음 스토리,👈 왼쪽을 터치하면 이전 스토리로 이동하게 만들자!📦 구현 흐름 요약단계설명1터치 영역을 왼쪽/오른쪽으로 나누기2터치한 위치에 따라 이전/다음 스토리 이동3가장 처음/마지막에서는 적절히 처리🛠️ 1단계: 터치 감지 준비✅ Pressable 또는 TouchableWithoutFeedback 사용StoryDetailScreen.js에 터치 감지 추가:import { View, Image, Pressable } from 'react-native';import { Video } from 'expo-av';🛠️ 2단계: 터치 구역 나누기StoryDetailScreen.js 전체 구조 예시export default function Stor..

✅ 오늘 목표한 명의 유저가 여러 개 스토리를 올렸을 때➡️ 스토리가 하나 끝나면➡️ 자동으로 다음 스토리로 넘어가게 만들자!📦 구현 흐름 요약단계설명1여러 스토리를 불러오기2현재 보고 있는 스토리 index 관리3하나 끝나면 다음 스토리로 자동 이동4마지막 스토리 끝나면 화면 닫기🛠️ 1단계: 여러 개 스토리 데이터 불러오기예를 들어, stories라는 배열을 가정해:const stories = [ { id: '1', mediaUrl: '...', mediaType: 'image' }, { id: '2', mediaUrl: '...', mediaType: 'video' }, { id: '3', mediaUrl: '...', mediaType: 'image' },];✅ 한 유저의 여러 스토리 (..

✅ 오늘 목표스토리 화면 상단에**얇은 바(Progress Bar)**를 만들어서시간이 지나면서 자동으로 채워지게 만들자!📦 구현 흐름 요약단계설명1Animated.View로 진행 바 생성2스토리 재생 시작 시 width를 0 → 100%로 애니메이션3스토리 끝나면 다음 스토리로 이동 (or 닫기)🛠️ 1단계: Animated 준비✅ react-native 기본 내장이라 따로 설치 필요 없음!import { Animated } from 'react-native';import { useRef, useEffect } from 'react';🧩 2단계: 프로그레스 바 컴포넌트 만들기StoryProgressBar.jsimport React, { useEffect, useRef } from 'react';i..

✅ 오늘 목표사용자가 사진/동영상을 스토리로 올리고24시간이 지나면 자동 삭제되게 만들자!📦 스토리 기능 흐름 요약단계설명1사진/동영상 업로드2Firestore에 업로드 시간 기록3스토리 리스트 화면 구성424시간 지난 스토리는 자동 숨김 (또는 삭제)🛠️ 1단계: Firestore에 스토리 저장 구조 만들기Firestore 구조 예시stories (컬렉션) ├─ userId1 (문서) ├─ stories (서브컬렉션) ├─ storyId1 ├─ mediaUrl ├─ mediaType ("image" or "video") ├─ createdAt (timestamp)✅ 포인트:유저별로 storie..

✅ 오늘 목표단순 텍스트 채팅을 넘어서✅ 사진과 ✅ 동영상을DM과 그룹채팅방 모두에서 주고받을 수 있게 만들자!📦 전체 흐름 정리단계설명1앨범에서 사진/동영상 선택하기2Firebase Storage에 업로드3다운로드 URL 받아서 Firestore 메시지에 저장4채팅창에 사진/동영상 구분해서 표시🛠️ 1단계: 앨범에서 사진 또는 동영상 선택✅ expo-image-picker 설치되어 있어야 해.import * as ImagePicker from 'expo-image-picker';const pickMedia = async () => { let result = await ImagePicker.launchImageLibraryAsync({ mediaTypes: ImagePicker.MediaTyp..

✅ 오늘 목표유저가 여러 명을 초대해서하나의 그룹 채팅방을 만들고,모두 함께 실시간 대화할 수 있도록 만들자!📦 1단계: Firestore 데이터 구조 확장✅ 기존 1:1 대화방과 거의 비슷하지만members 배열에 여러 명을 넣을 수 있게 바꿔야 해.새 Firestore 구조chats (컬렉션) ├─ chatId1 (문서) ├─ members: [userId1, userId2, userId3] ├─ groupName: "맛집 친구들" (선택) ├─ createdAt ├─ messages (서브컬렉션) ├─ msg1 ├─ msg2 members그룹에 참여하는 유저들의 ID 목록groupName(선택) 그룹방 이름 표시messages..

✅ 오늘 최종 목표새 메시지가 오면상대방에게 📲 푸시 알림이 자동으로 가게 만들자!🛠️ 1단계: Expo Push Notifications 설치 및 설정npx expo install expo-notifications expo-device✅ 설치 완료하면, 이제 푸시 토큰을 받아야 해.🧩 2단계: 유저 로그인 시 Push Token 발급 + 저장📄 firebase.js에 users 컬렉션 생성하고,유저마다 Push Token 저장import * as Notifications from 'expo-notifications';import * as Device from 'expo-device';import { setDoc, doc } from 'firebase/firestore';import { auth,..

✅ 오늘 목표단순 텍스트 채팅을 넘어서📸 이미지 전송, ✅ 읽음 처리 까지 추가해서진짜 실전 메신저로 만들자!📸 1단계: 이미지 전송 기능🧩 1-1. 이미지 선택npx expo install expo-image-picker📄 ChatRoom 화면에 추가:import * as ImagePicker from 'expo-image-picker';const pickImage = async () => { const result = await ImagePicker.launchImageLibraryAsync({ mediaTypes: ImagePicker.MediaTypeOptions.Images, allowsEditing: true, quality: 0.7, }); if (!result...

✅ 오늘 목표유저들끼리 1:1 대화를 할 수 있는 채팅 기능을 추가하고,채팅방 리스트 → 채팅방 진입 → 실시간 채팅 흐름을 완성하자!📦 1단계: Firestore 데이터베이스 구조 설계Firestore 구조 예시chats (컬렉션) ├─ chatId1 (문서) ├─ members: [userId1, userId2] // 대화 참여자 ├─ createdAt: timestamp ├─ messages (서브컬렉션) ├─ msg1 ├─ senderId: userId1 ├─ text: "안녕!" ├─ createdAt: timestamp ├─ msg2 ..