본문 바로가기

reactnative9

RN - Expo에 nativewind 설정하기 유지보수가 용이하고 효율적인 개발을 위해 CSS Library를 열심히 찾았다.기본 StyleSheet로 웬만한 것은 다 되고, 가장 사용률이 높길래 StyleSheet를 사용하려고 하다가,,,혹시나 앱이 커지면 무언가 넣어야 할 것 같았다. 시도 1 : Nativewind - gpt, claude로 해보다가 실패, unistyles 하기로 결정시도 2 : unistyles- unistyles는 expo go에서 안된다길래 다시,, nativewind로 갔다..시도 3 : 또이티브윈드- 새벽까지 gpt와 claude, gemini까지 해서 nativewind를 다시 시도해보았다. 깔았다 지웠다 난리를 쳤지만 실패,얼마나 성공하고 싶었는지 일찍 일어나서 출근 전에 node 버전도 바꿔보았는데 실패, 점심시.. 2025. 12. 17.
RN - 스크린샷 구현하기, collapsable 🎒 collapsable이란?React Native가 필요 없다고 판단한 View를자동으로 “없애버리는 기능”이야.근데 가끔 우리가 “이 View 꼭 있어야 돼!” 할 때가 있어.그때 쓰는 게 collapsable={false}. 🍱 완전 쉬운 비유📦 React Native는 진짜로 보여줄 박스만 남겨두고겉에 쓸데없는 포장박스는 다 버려버려!그런데…📷 우리가 그 박스를 사진(캡처) 찍으려고 하면?포장박스가 사라져 있으면 사진도 제대로 안 찍히겠지?그래서 말하는 거야:“야, 이 포장박스 버리지 마! 사진 찍을 때 필요해!”그 말이 바로 collapsable={false}. 🎯 실제 코드에서 왜 필요하냐면?이렇게: View ref={imageRef} collapsable={false}> ref로 크.. 2025. 12. 8.
RN - 권한 요청 01. 스크린샷 기능 구현하기미디어 라이브러리 접근과 같이 민감한 정보가 필요한 앱 -> 접근 허용, 거부 권한 요청해야함.usePermission() // permissionResponse, requestPermission() 메소드 사용하여 접근권한 요청 가능 * permissionResponse == null: 앱이 처음 로드될 때 권한 상태가 허용, 거부 되지 않은 경우* permissionResponse == granted : 권한 허용** requestPermission() 함수 사용하여 trigger 할 수 있음. import { useEffect, useState } from 'react';import * as MediaLibrary from 'expo-media-library';// .. 2025. 12. 8.
RN - useSharedValue useSharedValue는 React Native Reanimated 2 라이브러리에서 제공하는 훅으로,애니메이션에 사용되는 값을 JS 스레드가 아니라 UI 스레드에서 직접 관리할 수 있게 해주는 기능 🚀 요약useSharedValue는 Reanimated 전용 상태 저장 변수값이 바뀌면 UI 스레드에서 즉시 반영 → 부드럽고 끊김 없는 애니메이션sharedValue.value 형태로 값을 읽고 설정값을 UI 스레드로 넘겨서 JS 스레드와 독립적으로 애니메이션을 계산하게 하여 더 자연스럽고 빠른 애니메이션을 구현import Animated, { useSharedValue, useAnimatedStyle, withTiming } from 'react-native-reanimated';export def.. 2025. 12. 8.
ReactNative와 TypeScript 01. useState const [emoji] = useState ([ require("../assets/images/emoji1.png"), require("../assets/images/emoji2.png"), require("../assets/images/emoji3.png"), require("../assets/images/emoji4.png"), require("../assets/images/emoji5.png"), require("../assets/images/emoji6.png"), ]);- emoji의 값을 읽기전용으로 선언- ImageSourcePropType[]는 이미지 배열을 의미함 - 숫자열 배열.. 2025. 12. 4.
expo-cli / import 문, 사용자 지정경로 설정 import ImageViewer from '@/components/ImageViewer'; - @ in import 문: 상대 경로 대신 사용자 지정 구성 요소 및 기타 모듈을 가져오기 위한 사용자 지정 경로 별칭 (@), Expo CLI는 tsconfig.json 파일에서 자동으로 이를 설정함. 2025. 11. 23.
[ERR] Expo go : there was a problen running the requested app, Unknow error the internet connection React Native - expo 프로젝트 실행 후, 아이폰에서 QR 스캔시 expo-go에서 뜨는 오류 메시지 1. 오류메시지there was a probel running the requested app, Unknow error : the internet connection appears to be offline 2. 해결방법# VSCode 터미널에서 Ctrl+C로 중지 후npx expo start --tunnel 3. 주의사항핸드폰과 노트북이 같은 wifi 환경에 있어야한다. 2025. 11. 16.
React Native 커스텀 디자인 시스템 구현하기 (1) 1. 디자인 토큰 정의먼저 Figma에서 디자이너와 함께 디자인 토큰을 추출합니다:Colors: Primary, Secondary, Error, Background 등Typography: Font families, sizes, weights, line heightsSpacing: 8px 기준 등 일관된 간격 시스템Border radius, shadows 등 2. 기본 구조 만들기// theme/colors.jsexport const colors = { primary: '#FF6B6B', secondary: '#4ECDC4', text: { primary: '#2D3436', secondary: '#636E72', }, background: '#FFFFFF', // ...};// th.. 2025. 11. 13.
React Native 시작하기 React Native 시작하기 기록 - claude 1. 개발 환경 설정# Expo로 시작 (처음엔 이게 훨씬 쉬워요)npx create-expo-app MyAppcd MyAppnpx expo start```Expo를 추천하는 이유:- 네이티브 빌드 설정 없이 바로 시작 가능- Expo Go 앱으로 실기기 테스트 간편- 나중에 필요하면 bare workflow로 전환 가능### 2. 프로젝트 구조 예시```src/├── components/│ ├── common/ # 공통 컴포넌트│ │ ├── Button.tsx│ │ ├── Input.tsx│ │ └── Card.tsx│ └── features/ # 기능별 컴포넌트│ ├── auth/.. 2025. 11. 8.

티스토리툴바