묻고 답해요
130만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
해결됨비전공자를 위한 진짜 입문 올인원 개발 부트캠프
width must be speified for horizontal carousels 오류
안녕하세요.react-native-reanimated-carousel 사용 시,carousel의 prop으로 width를 정의했는데도,제목 처럼 "width must be speified for horizontal carousels" 오류가 발생합니다.어떻게 해결할 수 있을까요?? 강의 클론코딩 했는데, 위 오류에 앞서 "PanGestureHandler must be used as a descendant of GestureHandlerRootView" 오류가 발생했었는데, 인터넷 검색 결과로 <SafeAreaView> 바깥에 <GestureHandlerRootView> 선언하여 해결했는데, 이 영향도 일까요?? 코드 첨부합니다.import { StatusBar } from "expo-status-bar"; import { API_URL } from "./config/constant"; import avatarImg from "./assets/icons/avatar.png"; import React from "react"; import { StyleSheet, Text, View, Image, ScrollView, Dimensions, TouchableOpacity, Alert, SafeAreaView, } from "react-native"; import Carousel from "react-native-reanimated-carousel"; import { GestureHandlerRootView } from "react-native-gesture-handler"; import axios from "axios"; import dayjs from "dayjs"; import relativeTime from "dayjs/plugin/relativeTime"; import "dayjs/locale/ko"; dayjs.extend(relativeTime); dayjs.locale("ko"); export default function App() { const [products, setProducts] = React.useState([]); const [banners, setBanners] = React.useState([]); React.useEffect(() => { axios .get(`${API_URL}/products`) .then(function (result) { const products = result.data.products; setProducts(products); }) .catch(function (error) {}); axios .get(`${API_URL}/banners`) .then(function (result) { const banners = result.data.banners; setBanners(banners); }) .catch(function (error) {}); }, []); return ( <GestureHandlerRootView> <SafeAreaView style={styles.safeAreaView}> <View style={styles.container}> <ScrollView> <Carousel> data={banners} width={Dimensions.get("window").width} height={200} autoPlay={true} sliderWidth={Dimensions.get("window").width} itemWidth={Dimensions.get("window").width} itemHeight={200} renderItem= {(obj) => { retrun( <TouchableOpacity onPress={() => { Alert.alert("배너 클릭"); }} > <Image style={styles.bannerImage} source={{ uri: `${API_URL}/${obj.item.img_url}` }} /> </TouchableOpacity> ); }} </Carousel> <Text style={styles.headline}>판매되는 상품들</Text> <View style={styles.productList}> {products.map((product, index) => { return ( <View key={index} style={styles.productCard}> {product.status === "02" && ( <View style={styles.productBlur} /> )} <View> <Image style={styles.productImg} source={{ uri: `${API_URL}/${product.img_url}`, }} resizeMode={"contain"} /> </View> <View style={styles.productContents}> <Text style={styles.productName}>{product.name}</Text> <Text style={styles.productPrice}>{product.price}원</Text> <View style={styles.productFooter}> <View style={styles.productSeller}> <Image style={styles.productAvatar} source={avatarImg} /> <Text style={styles.productSellerName}> {product.seller} </Text> </View> <Text style={styles.productDate}> {dayjs(product.created_at).fromNow()} </Text> </View> </View> </View> ); })} </View> </ScrollView> </View> </SafeAreaView> </GestureHandlerRootView> ); } const styles = StyleSheet.create({ headline: { fontSize: 24, fontWeight: "800", marginTop: 10, marginBottom: 10, }, container: { flex: 1, backgroundColor: "#fff", paddingTop: 32, margin: 10, }, productCard: { width: "100%", borderColor: "rgb(230,230,230)", borderWidth: 1, borderRadius: 16, backgroundColor: "white", marginBottom: 10, }, productBlur: { position: "absolute", top: 0, bottom: 0, right: 0, left: 0, backgroundColor: "#ffffffaa", zIndex: 999, }, productImg: { width: "100%", height: 210, }, productContents: { padding: 8, }, productSeller: { flexDirection: "row", }, productAvatar: { width: 24, height: 24, }, productFooter: { flexDirection: "row", justifyContent: "space-between", alignItems: "center", marginTop: 12, }, productName: { fontSize: 14, }, productPrice: { fontSize: 16, fontWeight: "600", marginTop: 8, }, productSellerName: { fontSize: 14, }, productDate: { fontSize: 14, }, productList: { alignItems: "center", }, bannerImage: { width: "100%", height: 200, }, safeAreaView: { flex: 1, backgroundColor: "#fff", }, });
-
미해결배달앱 클론코딩 [with React Native]
ReferenceError: Property 'WeakRef' doesn't exist, js engine: hermes 에러 문제
npm run android 명령어 통해서 실행 할때 2가지 에러가 발생합니다. ERROR ReferenceError: Property 'WeakRef' doesn't exist, js engine: hermes LOG Running "FoodDeliveryApp" with {"rootTag":11} ERROR Invariant Violation: "FoodDeliveryApp" has not been registered. This can happen if:* Metro (the local dev server) is run from the wrong folder. Check if Metro is running, stop it and restart it in the current project.* A module failed to load due to an error and AppRegistry.registerComponent wasn't called., js engine: hermes구글링 했을 때 나오는 자료가 거의 없고 gpt로 찾아본 방법들로 버전 확인하거나 업데이트 시키는 명령어도 잘 실행되지 않고 hermesEnabled=false 로 설정하고 실행도 해봤는데 hermes 부분만 사라지고 에러가 똑같이 발생합니다.
-
미해결비전공자를 위한 진짜 입문 올인원 개발 부트캠프
반복문 i 질문
for(var i = 0; i < names.length; i++) { var name = names[i] console.log(name); }에서 var name = names[i] 에서 i가 0 임으로 0 값부터 시작한다고 이해 했는데 i 가 아니라 1 을 넣으니까 철수만 3번 반복 되더라구요 i를 넣음으로써 어떻게 순차적으로 진행되는건지 궁금합니다
-
미해결비전공자를 위한 진짜 입문 올인원 개발 부트캠프
함수 리턴중에 질문
function calculate(x) { var result = 3*x+5; return result; }라고 입력후 var result1 = calculate(1); 이 어떻게 동작 하는 건가요 ? 괄호를 닫았음에도 아직 저 위에 함수 블록에서 작업 중인 걸로 되는 건가요?
-
미해결배달앱 클론코딩 [with React Native]
xcode archive 오류
안녕하세요yarn ios 실행 시 simulator 는 문제없이 실행되고 있습니다. xcode 에서 archive 실행 시 Undefined symbol: OBJCCLASS_$_FlipperClient위 오류가 발생하고 있습니다. react-native : 0.72.7react-native-flipper : 0.212.0위 버전 사용 중입니다 답변주시면 고맙겠습니다
-
미해결배달앱 클론코딩 [with React Native]
code push appcenter와 firebase distribution에 대한 질문입니다.
강의를 들으면서 개발 하고 있는 app을 사내 테스트를 위해 firebase distribution에 빌드한거 올려서 테스트 설치를 활용했습니다.그런데 코드푸시를 들으면서 따라 했는데요. appcenter에yarn codepush:android 실행까지 성공했습니다.그러면서 드는 의문점이 있습니다.기존의 firebase 테스트 배포는 무엇이고 appcenter는 무엇인가요? appcenter code push를 이용하면 firebase 배포는 이제 필요 없는건가요?
-
해결됨배달앱 클론코딩 [with React Native]
버전 관리 관련해서 질문드립니다
강의 잘 듣고있습니다!버전에 관해서 명확하게 이해가 가지 않아 질문드립니다리액트 네이티브에서 packge.json version android versionCode versionNameios version build 전체 적인 버전 관리는 packge.json version 으로관리 한다고 하셨는데나머지 android , Ios 도 앱 스토어 제출 업데이트 할때버전을 올릴텐데 각각 쓰임이 어떻게 되고 현업에서 관리 하시는 방법 알려주시면 감사하겠습니다
-
미해결따라하며 배우는 리액트 네이티브 기초
윈도우로 개발시 시뮬레이터를 사용할 방법이 없을까요 ?
안녕하세요 저는 윈도우로 학습중이고, 아이폰의 expo go 어플을 사용해 코드 작성결과를 확인하고 있습니다.시뮬레이터는 반드시 맥OS에서만 사용 가능한가요 ?만약 맥 OS에서만 사용이 가능하다면 윈도우에서 ios 화면을 확인할 방법이 없을까요 ?expo go 어플 사용시 연결이 뒤로가기 버튼이 없는 것 같은데 매번 qr코드를 사용해 로드해야하나요 ?확인 부탁드립니다.
-
미해결배달앱 클론코딩 [with React Native]
ios 코드푸시 에러
안녕하세요!android는 Production으로 코드푸시가 잘 반영된 것을 확인하였습니다!그런데 Ios에서 [Error: 429: { "statusCode": 429, "message": "Rate limit is exceeded. Try again in 283 seconds." }]이런 에러가 발생하고 있습니다. 시간을 10분넘게 지나서 다시 설치했는데도 동일한 에러가 발생하고 있습니다. "version": "0.0.1", "codepush:ios": "appcenter codepush release-react -a aaaaa/aaa-app-ios -d Production --sourcemap-output --output-dir ./build -m -t 0.0.1",이렇게 했는데 혹시 어떤 부분을 놓친 걸까요...?ㅠㅠ
-
해결됨비전공자를 위한 진짜 입문 올인원 개발 부트캠프
노션링크
강의에 나오는 노션 링크는 어디에서 확인할 수 있나요?
-
미해결배달앱 클론코딩 [with React Native]
navigation push와 navigate 질문
안녕하세요바텀탭 구현 중 새로운것을 발견했습니다. 예시로 설명드려보자면A탭과 B탭이 있습니다. B탭에서는 초기화면으로 지정된 B-1스크린과 나머지 B-2스크린이 있습니다. navigate 활용: A탭에서 B-2스크린으로 이동 시 B-1스크린을 거치는게 보이면서 B-2스크린이 나타납니다. 뒤로가면 B-1스크린을 거치고 한번 더 뒤로를 눌러야지 A탭을 갈 수 있습니다. push활용: 반면에 push는 B-2스크린이 바로 나타납니다. 백을하면 바로 A탭으로 돌아갑니다. navigate와 push의 차이점은 스택이 중첩되서 쌓이냐마냐로 알고있는데 이런 현상에 대해서는 찾지 못해서 질문 남깁니다. 정리하자면 navigate와 push가 다른 탭 이동시 왜 다른 동작을 보이는지 궁금합니다!
-
해결됨배달앱 클론코딩 [with React Native]
리액트 네비게이션 설치 문제
npm i @react-navigation/native npm i @react-navigation/native-stack npm i react-native-screens react-native-safe-area-context 셋다 설치하려고 하면 같은 에러 메세지가 나옵니다... npm audit fix npm audit fix --force 해봤도 안됩니다 npm install --save-dev @babel/core 도 해봤는데 네비게이션 설치할 때랑 똑같은 메세지 나오네요. 아래 사진같은 43개 취약점 얘기가 나옵니다.
-
해결됨배달앱 클론코딩 [with React Native]
이름 변경이 적용 안됩니다ㅠ
리액트 네이티브에서 앱 이름을 변경했음에도 불구하고 에뮬레이터에서 이름이 반영되지 않는 경우, 몇 가지 가능한 원인이 있습니다:캐시 문제: 때때로 에뮬레이터는 이전 버전의 앱 데이터를 캐시에 저장합니다. 이 경우, 에뮬레이터를 재시작하거나 캐시를 클리어해야 할 수 있습니다.네이티브 설정 미반영: 리액트 네이티브에서 앱 이름을 변경하려면 iOS의 Info.plist와 Android의 strings.xml에서도 변경해야 합니다. 이 파일들에서의 변경 사항이 반영되지 않았을 수 있습니다.빌드 프로세스 문제: 앱 이름을 변경한 후에 전체 앱을 다시 빌드해야 변경사항이 정상적으로 적용됩니다. 변경 후 적절한 빌드 과정을 거치지 않았다면, 변경사항이 반영되지 않을 수 있습니다.이러한 문제들을 해결하기 위해 앱을 완전히 재빌드하고, 필요한 경우 네이티브 설정 파일을 확인한 후 에뮬레이터를 재시작하는 것이 좋습니다.이름 변경이 안되네요ㅠ 에뮬 다시 시작도 해보고, 에뮬에 앱 지웠다가 다시 빌드도 해보고, 앱이름 한글에서 영어로도 바꿔봤는데바뀔 생각을 안합니다. 도와주세요.
-
미해결틴더 파이어베이스 클론 | 리액트 네이티브
더이상 학습 진행이 안됨...
FB) 파이어 베이스 로그인 (2) - Google Auth 여기서부터 진행이 안되는데 화면에서 혹시 빼먹은 부분이 있는게 아닌가 생각이 듭니다.
-
미해결배달앱 클론코딩 [with React Native]
push noti background handler에서 userSlice를 가져오고 싶어요.
App.tsx에서요.messaging().setBackgroundMessageHandler(async remoteMessage => { console.log('Message handled in the background!', remoteMessage);});백그라운드상태에서 푸시알림이 왔을때 axios로 서버 http call을 하고 싶은데요. accesstoken과 userId를 넣어 call하려고 합니다.userSlice를 가져오는걸 어떻게 코드에 적용할 수 있을까요?예시를 해 주시면 더욱 감사합니다.
-
미해결iOS/Android 앱 개발을 위한 실전 React Native - Basic
리액트 네이티브에서 안드로이드 실행
(node:13548) Warning: Accessing non-existent property 'padLevels' of module exports inside circular dependency(Use `node --trace-warnings ...` to show where the warning was created)error Android project not found. Are you sure this is a React Native project? If your Android files are located in a non-standard location (e.g. not inside 'android' folder), consider setting `project.android.sourceDir` option to point to a new location. 이거 무슨 에러인가요ㅠㅠ
-
미해결배달앱 클론코딩 [with React Native]
혹시 매번 phone token 서버에 저장하게 되나요?
/** * token for push notification of firebase */ useEffect(() => { async function getToken() { try { if (!messaging().isDeviceRegisteredForRemoteMessages) { await messaging().registerDeviceForRemoteMessages(); } const token = await messaging().getToken(); console.log('== phone token', token); // dispatch(userSlice.actions.setPhoneToken(token)); return http.put( '/user-ms-command/v1/users/phone-token', {phoneToken: token}, { headers: { Authorization: `Bearer ${accessToken}`, }, }, ); } catch (error) { console.error(error); } } getToken().then(); }, []);강의를 바탕으로 개발에 참고 하고 있는데요. sign in 이후 메인 tab에 저 코드를 넣었는데요.매번 앱을 실행할때마도 firebase phone token을 서버 에 저장하게 되는건 아닌지요?if안으로 서버저장을 옮겨야 하는지요?
-
해결됨배달앱 클론코딩 [with React Native]
BUILD FAILED in 36s error Failed to install the app.
영상보면서 따라하고 있는데, 어플 이름 변경하고 npm run android 명령어로 실행하면BUILD FAILED in 36sFailed to install the app. 라고 나오는데 3일동안 구글링하면서 환경 변수도 다시 점검해보고 관리자권한으로 vscode 실행해서 다시 해보고껐다 켰다도 해봤는데 안되네요. 도와주세요 ㅠㅠ
-
미해결배달앱 클론코딩 [with React Native]
ios 빌드에러 Cannot read properties of undefined (reading 'transformFile')
setting 폴더 클론해서 ios 빌드했는데 시뮬레이터에서 아래와 같은 에러가 뜹니다. Node v16.13.0구글링해보니 Node 버전을 다운그레이드하라는 답변이 많아서 nvm use 16.13.0을 입력해 변경했으나 계속 같은 에러가 뜹니다. 어떤 부분을 수정해야할까요?
-
미해결iOS/Android 앱 개발을 위한 실전 React Native - Basic
vscode
이거 무슨문제인가요