inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

묻고 답해요

172만명의 커뮤니티!! 함께 토론해봐요.

React-Native 신규 강의 계획 있으시나요!!

해결됨

배달앱 클론코딩 [with React Native]

안녕하세요 제로초 선생님 국내 잘 없는 리액트 네이티브 강좌의 한줄기 빛 같은 소중한 강의 정말 감사하게 잘 듣고 있습니다! 리액트 네이티브 신규 강의 계획이 있으신 지 궁금합니다! 아직 기존 강의도 이제 시작했지만, 신규 강의를 희망하는 마음에 글 작성해봅니다 ㅎㅎ 본질과 원리 이해의 중요성을 일깨워 주시는 강의에 진심으로 감사합니다. 프로그래밍 강의를 해주셔서 정말 감사합니다. 남은 올해 마무리 잘 되시길 바라며, 내년에도 좋은 일 가득하시길 바랍니다 😊

  • react-native
Thankyou 댓글 1 좋아요 1 조회수 366

안녕하세요

미해결

따라하며 배우는 리액트 네이티브 기초

지금 강의를 듣고있는데 섹션5 [React Nagivation을 이용해서 라우팅 구현하기] 여기에서 IOS로만 하시는데 윈도우에서 안드로이드로 강의를 따라가고 있는 입장에서는 어떻게 해야하는 걸까요? 제가 expo 부분부터 widow- android studio로만 강의를 따라왔었는데 expo 에서 window - IOS 로도 개발을 따라 했었어야 했을까요?ㅜ Android Studio로는 실행을 어떻게 해야할지 안내가 안되어 있어서 막막해서요 제가 뭘 놓친건지 헷갈리네요 갑자기ㅠㅠ

  • react
  • react-native
  • expo
DV.ROY 댓글 1 좋아요 0 조회수 259

에뮬레이터가 안켜지는데 없이 강의를 진행해도 되나요?

미해결

핸즈온 리액트 네이티브

에뮬레이터가 안켜지는데 에뮬레이터없이 강의를 진행해도될까요? expo go 어플을 통해서 휴대폰과 연결은 되어있습니다. 현재 리액트네이티브 페이지에서 설명하는 버전을 설치하고 실행을 해봤고 강의내용과같은 버전에서 실행을 해봤으나 에뮬레이터가 실행되다가 꺼지거나 Android Emulator closed unexpectedly 이런문구가 뜨던가, 실행이 되어있다가 npx expo 를 실행해서 안드로이드를 연결하려고 하면 꺼지고 있습니다. 문제점을 검색해봤을때 저장공간이 부족할때도 있다고 하던데 2GB정도만 있어도 괜찮다고하여 문제는 아닌것같고, 환경변수를 찾아보았지만 sdk manager의 주소와 일치하였습니다, 또 system image를 확인해서 강의내용과 똑같이 설치했음을 확인했습니다. 이 과정을 버전을 다를때 두번다 체크했습니다.

  • react-native
jinhwan kim 댓글 1 좋아요 0 조회수 462

VIsual studio code 에서 react-native run-android 실행시 오류

미해결

iOS/Android 앱 개발을 위한 실전 React Native - Basic

다음과 같이 오류가 나옵니다. 안드로이드 에뮬레이터는 실행되지만 APP.js에서 작성한 코드를 띄우려 시도 불가입니다. FAILURE: Build failed with an exception. * What went wrong: Could not initialize class org.codehaus.groovy.runtime.InvokerHelper > Exception java.lang.NoClassDefFoundError: Could not initialize class org.codehaus.groovy.reflection.ReflectionCache [in thread "Daemon worker"] * Try: Run with --stacktrace option to get the stack trace. Run with --info or --debug option to get more log output. Run with --scan to get full insights. * Get more help at https://help.gradle.org BUILD FAILED in 4s error Failed to install the app. Make sure you have the Android development environment set up: https://facebook.github.io/react-native/docs/getting-started.html#android-development-environment. Run CLI with --verbose flag for more details. Error: Command failed: gradlew.bat app:installDebug -PreactNativeDevServerPort=8081 FAILURE: Build failed with an exception. * What went wrong: Could not initialize class org.codehaus.groovy.runtime.InvokerHelper > Exception java.lang.NoClassDefFoundError: Could not initialize class org.codehaus.groovy.reflection.ReflectionCache [in thread "Daemon worker"] * Try: Run with --stacktrace option to get the stack trace. Run with --info or --debug option to get more log output. Run with --scan to get full insights. * Get more help at https://help.gradle.org BUILD FAILED in 4s at checkExecSyncError (child_process.js:616:11) at execFileSync (child_process.js:634:13) at runOnAllDevices (C:\Users\82107\kkk\my_first_app\node_modules\@react-native-community\cli-platform-android\build\commands\runAndroid\runOnAllDevices.js:94:39) at process._tickCallback (internal/process/next_tick.js:68:7)

  • react
  • react-native
  • es6
이퀭 댓글 2 좋아요 0 조회수 885

expo프로젝트 생성후 연결하는과정

미해결

핸즈온 리액트 네이티브

주소가 다르다, 로그인을 해야한다 등등 여러가지 해결방법을 찾아 해보았지만 여전히 문제가 해결되고 있지 않아서 질문드립니다. 주소가 다르다해서 ip주소 끝자리를 다시맞춰보는 방법을 해보았고, expo에서 가입한 아이디로 로그인을 하는방법도 해보았으며 현재상태는 처음엔 Uncaught Error: . java.net .SocketTimeoutException: failed to connect to /192.168.233.120(port(8081) from /192.168.233.122(port 50322) after 1000 ms 이런식으로 ip주소의 끝자리만 다르게 문제가 발생하였지만 이후엔 연결표시만 계속 뜨고있습니다. 무슨문제인지 정확히 해결방법을 모르겠어서 질문드립니다.

  • react-native
jinhwan kim 댓글 1 좋아요 0 조회수 804

expo 시작 오류

해결됨

비전공자를 위한 진짜 입문 올인원 개발 부트캠프

expo를 global로 설치하고 init까지 한 후 npm start를 했을 때 일단 아래처럼 에러가 발생합니다. Unable to find expo in this project - have you run yarn / npm install yet? -> 이건 npm install을 해서 해결 했습니다. 그런데 그 후에도 또 아래와 같은 에러가 발생합니다. PS D:\Programming\study\Inflearn\FullStack\project\grab-market-mobile> npm start > grab-market-mobile@1.0.0 start > expo start Starting project at D:\Programming\study\Inflearn\FullStack\project\grab-market-mobile Starting Metro Bundler FetchError: request to https://api.expo.dev/v2/sdks/49.0.0/native-modules failed, reason: self signed certificate in certificate chain FetchError: request to https://api.expo.dev/v2/sdks/49.0.0/native-modules failed, reason: self signed certificate in certificate chain at ClientRequest.<anonymous> (D:\Programming\study\Inflearn\FullStack\project\grab-market-mobile\node_modules\node-fetch\lib\index.js:1501:11) at ClientRequest.emit (node:events:513:28) at TLSSocket.socketErrorListener (node:_http_client:494:9) at TLSSocket.emit (node:events:513:28) at emitErrorNT (node:internal/streams/destroy:157:8) at emitErrorCloseNT (node:internal/streams/destroy:122:3) at processTicksAndRejections (node:internal/process/task_queues:83:21) 이건 어떻게 해결해야 하나요?

  • HTML/CSS
  • javascript
  • react
  • node.js
  • react-native
  • 머신러닝
  • express
  • tensorflow
이원석 댓글 1 좋아요 1 조회수 656

api 서버 호출이 안됩니다

미해결

배달앱 클론코딩 [with React Native]

안녕하세요 api 서버 호출이 안됩니다 api 서버 연결까지는 되는데 호출에서 문제가 있습니다 post가 안되는건가 싶어서 get으로 바꾸고 직설적으로 json 호출만 해보려고해도 안됩니다.. get으로 바꾸고 아예 주소에서 http://IP주소:3105/user 찍어봐도 요런화면뿐... 서버쪽 파일은 강사님이 주신 폴더 그대로 받아서 설치했습니다 폴더 위치는 root > back 이렇게 들어있는데 폴더 위치가 문제인걸까요.. axios 문제는 아닌게 다른 open api 호출은 잘만됩니다

  • react-native
  • api
위염 댓글 1 좋아요 0 조회수 479

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", }, });

  • HTML/CSS
  • javascript
  • react
  • node.js
  • react-native
  • 머신러닝
  • express
  • tensorflow
inchang0326 댓글 1 좋아요 1 조회수 381

ReferenceError: Property 'WeakRef' doesn't exist, js engine: hermes 에러 문제

미해결

배달앱 클론코딩 [with React Native]

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 부분만 사라지고 에러가 똑같이 발생합니다.

  • react-native
김민우 댓글 2 좋아요 1 조회수 780

반복문 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를 넣음으로써 어떻게 순차적으로 진행되는건지 궁금합니다

  • HTML/CSS
  • javascript
  • react
  • node.js
  • react-native
  • 머신러닝
  • express
  • tensorflow
신승아 댓글 2 좋아요 0 조회수 206

함수 리턴중에 질문

미해결

비전공자를 위한 진짜 입문 올인원 개발 부트캠프

function calculate(x) { var result = 3*x+5; return result; } 라고 입력후 var result1 = calculate(1); 이 어떻게 동작 하는 건가요 ? 괄호를 닫았음에도 아직 저 위에 함수 블록에서 작업 중인 걸로 되는 건가요?

  • HTML/CSS
  • javascript
  • react
  • node.js
  • react-native
  • 머신러닝
  • express
  • tensorflow
신승아 댓글 1 좋아요 0 조회수 209

xcode archive 오류

미해결

배달앱 클론코딩 [with React Native]

안녕하세요 yarn ios 실행 시 simulator 는 문제없이 실행되고 있습니다. xcode 에서 archive 실행 시 Undefined symbol: OBJC CLASS_$_FlipperClient 위 오류가 발생하고 있습니다. react-native : 0.72.7 react-native-flipper : 0.212.0 위 버전 사용 중입니다 답변주시면 고맙겠습니다

  • react-native
김정숙 댓글 2 좋아요 0 조회수 529

code push appcenter와 firebase distribution에 대한 질문입니다.

미해결

배달앱 클론코딩 [with React Native]

강의를 들으면서 개발 하고 있는 app을 사내 테스트를 위해 firebase distribution에 빌드한거 올려서 테스트 설치를 활용했습니다. 그런데 코드푸시를 들으면서 따라 했는데요. appcenter에 yarn codepush:android 실행까지 성공했습니다. 그러면서 드는 의문점이 있습니다. 기존의 firebase 테스트 배포는 무엇이고 appcenter는 무엇인가요? appcenter code push를 이용하면 firebase 배포는 이제 필요 없는건가요?

  • react-native
sdbang.v 댓글 3 좋아요 0 조회수 410

버전 관리 관련해서 질문드립니다

해결됨

배달앱 클론코딩 [with React Native]

강의 잘 듣고있습니다! 버전에 관해서 명확하게 이해가 가지 않아 질문드립니다 리액트 네이티브에서 packge.json version android versionCode versionName ios version build 전체 적인 버전 관리는 packge.json version 으로 관리 한다고 하셨는데 나머지 android , Ios 도 앱 스토어 제출 업데이트 할때 버전을 올릴텐데 각각 쓰임이 어떻게 되고 현업에서 관리 하시는 방법 알려주시면 감사하겠습니다

  • react-native
똘이77 댓글 1 좋아요 0 조회수 426

윈도우로 개발시 시뮬레이터를 사용할 방법이 없을까요 ?

미해결

따라하며 배우는 리액트 네이티브 기초

안녕하세요 저는 윈도우로 학습중이고, 아이폰의 expo go 어플을 사용해 코드 작성결과를 확인하고 있습니다. 시뮬레이터는 반드시 맥OS에서만 사용 가능한가요 ? 만약 맥 OS에서만 사용이 가능하다면 윈도우에서 ios 화면을 확인할 방법이 없을까요 ? expo go 어플 사용시 연결이 뒤로가기 버튼이 없는 것 같은데 매번 qr코드를 사용해 로드해야하나요 ? 확인 부탁드립니다.

  • react
  • react-native
  • expo
경이 댓글 1 좋아요 0 조회수 530

ios 코드푸시 에러

미해결

배달앱 클론코딩 [with React Native]

안녕하세요! 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", 이렇게 했는데 혹시 어떤 부분을 놓친 걸까요...?ㅠㅠ

  • react-native
paragraph 댓글 1 좋아요 0 조회수 381

노션링크

해결됨

비전공자를 위한 진짜 입문 올인원 개발 부트캠프

강의에 나오는 노션 링크는 어디에서 확인할 수 있나요?

  • HTML/CSS
  • javascript
  • react
  • node.js
  • react-native
  • 머신러닝
  • express
  • tensorflow
igh22 댓글 1 좋아요 0 조회수 313

navigation push와 navigate 질문

미해결

배달앱 클론코딩 [with React Native]

안녕하세요 바텀탭 구현 중 새로운것을 발견했습니다. 예시로 설명드려보자면 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가 다른 탭 이동시 왜 다른 동작을 보이는지 궁금합니다!

  • react-native
  • react-navigation
Oim 댓글 2 좋아요 0 조회수 413

리액트 네비게이션 설치 문제

해결됨

배달앱 클론코딩 [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개 취약점 얘기가 나옵니다.

  • react-native
김광원 댓글 2 좋아요 0 조회수 374

이름 변경이 적용 안됩니다ㅠ

해결됨

배달앱 클론코딩 [with React Native]

리액트 네이티브에서 앱 이름을 변경했음에도 불구하고 에뮬레이터에서 이름이 반영되지 않는 경우, 몇 가지 가능한 원인이 있습니다: 캐시 문제 : 때때로 에뮬레이터는 이전 버전의 앱 데이터를 캐시에 저장합니다. 이 경우, 에뮬레이터를 재시작하거나 캐시를 클리어해야 할 수 있습니다. 네이티브 설정 미반영 : 리액트 네이티브에서 앱 이름을 변경하려면 iOS의 Info.plist 와 Android의 strings.xml 에서도 변경해야 합니다. 이 파일들에서의 변경 사항이 반영되지 않았을 수 있습니다. 빌드 프로세스 문제 : 앱 이름을 변경한 후에 전체 앱을 다시 빌드해야 변경사항이 정상적으로 적용됩니다. 변경 후 적절한 빌드 과정을 거치지 않았다면, 변경사항이 반영되지 않을 수 있습니다. 이러한 문제들을 해결하기 위해 앱을 완전히 재빌드하고, 필요한 경우 네이티브 설정 파일을 확인한 후 에뮬레이터를 재시작하는 것이 좋습니다.이름 변경이 안되네요ㅠ 에뮬 다시 시작도 해보고, 에뮬에 앱 지웠다가 다시 빌드도 해보고, 앱이름 한글에서 영어로도 바꿔봤는데바뀔 생각을 안합니다. 도와주세요.

  • react-native
김광원 댓글 1 좋아요 0 조회수 778

인기 태그

인프런 TOP Writers

주간 인기글