inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

묻고 답해요

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

73버전 cocoapod 다운로드 질문입니다.

미해결

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

안녕하세요 현재 android 와 ios앱 제작을 위해 강의를 시청하고 있습니다 . 운영체제 : win10 react-native버전 : 0.73 # Do you want to install CocoaPods now? 뜨면 y 입력현재 프로젝트를 받을때 CocoaPods 관련 다운 내용이 안 나와서 (묻지않았음..) 수동으로 다운로드 받으려고 합니다. 아래 내용은 그때 생긴 에러 입니다. ------------------------------------- PS C:\Users\asus\FoodDeliveryApp1> ^C Need to install the following packages: pod-install@0.2.0 Ok to proceed? (y) y Scanning for pods... CocoaPods is only supported on darwin machines PS C:\Users\asus\FoodDeliveryApp1> react-native-cli -version --------------------------------------------------- 공심홈페이지 나 stackoverflow 에서 윈도우에선 다운받을 수 없다고 하는 것 같긴한데.. 혹시 윈도우환경에서 다운받을 수 있는데 제가 잘못하고 있는 것인지 궁금해 질문들렸습니다 ... 추가로 정 안된다면 일단 안드로이드 위주로 개발을 진행하여 완성 한 후 ios환경에서 시험하려고 하는데요 추후에 pod-install 같은 ios 관련 환경을 추가해 앱이 동작하는지 확인할 수 있나요? 아니면 현재 프로젝트를 만들때 모두 준비되어있어야 하는지.. 궁금합니다 감사합니다!

  • react-native
이승언 댓글 2 좋아요 1 조회수 481

npm install -g sequelize sqlite3 설치가 안되네요

미해결

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

윈도우 11에서 npm install -g sequelize sqlite3 설치가 안됩니다 유사 답변 참고해도 설치가 안되네요 아래 문구가 나왔을 땐 어떻게 어떤 방법으로 접근하는 게 좋을까요? npm WARN deprecated @npmcli/move-file@1.1.2: This functionality has been moved to @npmcli/fs added 146 packages in 6s 13 packages are looking for funding run npm fund for details

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

React Native CLI 환경 대신 expo에서 개발가능할까요?

미해결

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

커리큘럼 내용상 cli 환경에서 인스타그램 클론 개발이 진행되는데 혹시 expo 환경에서 개발이 가능할까요?

  • react
  • react-native
  • expo
petie_gosse 댓글 1 좋아요 0 조회수 518

postman에서 오류가 있습니다

미해결

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

눈동자 모양 no enviorment에서 grab-market-mock-server로 전환이 안됩니다

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

리덕스강의는 없나요?

미해결

처음 배우는 리액트 네이티브

context api 강의는 있는데 리덕스가 안보여서 질문올립니다.

  • javascript
  • react-native
duddnd 댓글 1 좋아요 0 조회수 282

네이버맵 패키지 연동후 iosSimulator로 빌드시 에러입니다.

해결됨

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

네이버맵 패키지 연동후 iosSimulator로 빌드시 에러입니다. 빌드하니 첫화면이 RCTView.로 시작하는 에러엿고 Dismiss누르고 별문제가 아닌줄 알았지만 곧바로 CH4. 네이버맵 연동하기의 17분처럼 클릭했을때 맵이 뜨길바랬는데 topClick에러가 발생했어서 더이상 진전이 안되네요ㅠㅠ { "name": "FoodDeliveryApp", "version": "0.0.1", "private": true, "scripts": { "android": "react-native run-android", "ios": "react-native run-ios", "lint": "eslint .", "start": "react-native start", "test": "jest" }, "dependencies": { "@react-native-async-storage/async-storage": "^1.21.0", "@react-navigation/bottom-tabs": "^6.5.11", "@react-navigation/native": "^6.1.9", "@react-navigation/native-stack": "^6.9.17", "@reduxjs/toolkit": "^2.1.0", "axios": "^1.6.7", "i": "^0.3.7", "npm": "^10.4.0", "react": "18.2.0", "react-native": "0.73.2", "react-native-config": "^1.5.1", "react-native-encrypted-storage": "^4.0.3", "react-native-flipper": "^0.212.0", "react-native-keyboard-aware-scrollview": "^2.1.0", "react-native-nmap": "github:ZeroCho/react-native-naver-map", "react-native-safe-area-context": "^4.8.2", "react-native-screens": "^3.22.1", "react-redux": "^7.2.6", "redux-flipper": "^2.0.2", "rn-flipper-async-storage-advanced": "^1.0.5", "socket.io-client": "^4.7.4" }, "devDependencies": { "@babel/core": "^7.20.0", "@babel/preset-env": "^7.20.0", "@babel/runtime": "^7.20.0", "@react-native/babel-preset": "0.73.19", "@react-native/eslint-config": "0.73.2", "@react-native/metro-config": "0.73.3", "@react-native/typescript-config": "0.73.1", "@types/react": "^18.2.6", "@types/react-test-renderer": "^18.0.0", "babel-jest": "^29.6.3", "eslint": "^8.19.0", "jest": "^29.6.3", "prettier": "2.8.8", "react-test-renderer": "18.2.0", "typescript": "5.0.4" }, "engines": { "node": ">=18" } } [제로초 강좌 질문 필독 사항입니다] 질문에는 여러분에게 도움이 되는 질문과 도움이 되지 않는 질문이 있습니다. 도움이 되는 질문을 하는 방법을 알려드립니다. https://www.youtube.com/watch?v=PUKOWrOuC0c 0. 숫자 0부터 시작한 이유는 1보다 더 중요한 것이기 때문입니다. 에러가 났을 때 해결을 하는 게 중요한 게 아닙니다. 왜 여러분은 해결을 못 하고 저는 해결을 하는지, 어디서 힌트를 얻은 것이고 어떻게 해결한 건지 그걸 알아가셔야 합니다. 그렇지 못한 질문은 무의미한 질문입니다. 1. 에러 메시지를 올리기 전에 반드시 스스로 번역을 해야 합니다. 번역기 요즘 잘 되어 있습니다. 에러 메시지가 에러 해결 단서의 90%를 차지합니다. 한글로 번역만 해도 대부분 풀립니다. 그냥 에러메시지를 올리고(심지어 안 올리는 분도 있습니다. 저는 독심술사가 아닙니다) 해결해달라고 하시면 아무런 도움이 안 됩니다. 2. 에러 메시지를 잘라서 올리지 않아야 합니다. 입문자일수록 에러메시지에서 어떤 부분이 가장 중요한 부분인지 모르실 겁니다. 그러니 통째로 올리셔야 합니다. 3. 코드도 같이 올려주세요. 다만 코드 전체를 다 올리거나, 깃헙 주소만 띡 던지지는 마세요. 여러분이 "가장" 의심스럽다고 생각하는 코드를 올려주세요. 4. 이 강좌를 바탕으로 여러분이 응용을 해보다가 막히는 부분, 여러 개의 선택지 중에서 조언이 필요한 부분, 제 경험이 궁금한 부분에 대한 질문은 대환영입니다. 다만 여러분의 회사 일은 질문하지 마세요. 5. 강좌 하나 끝날 때마다 남의 질문들을 읽어보세요. 여러분이 곧 만나게 될 에러들입니다. 6. 위에 적은 내용을 명심하지 않으시면 백날 강좌를 봐도(제 강좌가 아니더라도) 실력이 늘지 않고 그냥 코딩쇼 관람 및 한컴타자연습을 한 셈이 될 겁니다.

  • react-native
민성 김 댓글 3 좋아요 0 조회수 868

unable to resolve module 에러

해결됨

핸즈온 리액트 네이티브

수업중에 만들었던 컴포넌트를 팀원들에게 사용하라고 깃허브에 올렸는데 이런 에러가 발생했습니다. 수업과는 상관 없는 질문이라 죄송합니다. 항상 강의 잘 듣고있습니다. 컴포넌트 내용은 똑같습니다.

  • react-native
Wakgood 댓글 1 좋아요 0 조회수 817

Layout 관련해서 질문드립니다.

미해결

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

따로 프로젝트를 진행중에 BottomTab과 SafeAreaView (react-native-safe-area-context)를 동시에 사용하는 경우 BottomTab위에 여백이 생깁니다. 찾아본 결과 edges 속성을 적용하면 없어지긴 하는데 매번 SafeAreaView를 사용할 때 마다 edges 속성을 주는건 중복이 발생하는 느낌이 들어서요! 좋은 방법이 있을까요 ? 이미지와 코드는 아래와 같습니다! function App() { return ( <NavigationContainer> <Stack.Navigator initialRouteName="BottomTab"> <Stack.Screen name="BottomTab" component={BottomTabScreen} options={{ headerShown: false }} /> </Stack.Navigator> </NavigationContainer> ); } const BottomTabScreen = ({}: BottomTabScreenProps) => { return ( <Tab.Navigator initialRouteName="Todos" screenOptions={{ headerShown: false }}> <Tab.Screen name="Todos" component={TodosScreen} /> <Tab.Screen name="AddTodo" component={AddTodoScreen} /> <Tab.Screen name="Calendar" component={CalendarScreen} /> </Tab.Navigator> ); }; const TodosScreen = ({}: TodosScreenProps) => { const renderItem = useCallback(({ item }: { item: TodoType }) => <Todo item={item} />, []); return ( <SafeAreaView> <StatusBar backgroundColor="#4367FE" barStyle="light-content" /> <FlatList data={TODOS} keyExtractor={todo => todo.id} renderItem={renderItem} /> </SafeAreaView> ); };

  • react-native
jkl154527 댓글 1 좋아요 0 조회수 188

8.4 질문

해결됨

핸즈온 리액트 네이티브

8.4 까지 진행했을 때 firebase 초기화 관련해서 이런 경고가 뜹니다 You are initializing Firebase Auth for React Native without providing AsyncStorage. Auth state will default to memory persistence and will not persist between sessions. In order to persist auth state, install the package "@react-native-async-storage/async-storage" and provide it to initializeAuth: 그리고 getAuthErrorMessages로 받아온 메세지를 출력하면 항상 default 값만 출력됩니다 https://github.com/JIWONKIMS/photo

  • react-native
Wakgood 댓글 1 좋아요 1 조회수 382

안녕하세요 borderbottomcolor가 작동되질 않습니다.

미해결

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

안녕하세요 수업 잘 듣고 있는데요 안드로이드로 작동하고 있는데 borderbottomcolor가 작동되지 않습니다. margintop이나 이런건 잘 먹이는 데 color만 되질 않아요 왜 그런지 알 수 있을까요?

  • react
  • react-native
  • expo
amozing38 댓글 1 좋아요 0 조회수 167

키보드 숫자 키패드의 Enter 기능이 작동하지 않는 문제

미해결

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

const InputForm = () => { const [currentValue, setCurrentValue] = useState(""); const dispatch = useDispatch(); const handleSubmit = () => { if (currentValue !== "") { dispatch(addTodo(currentValue)); setCurrentValue(""); } }; return ( <KeyboardAvoidingView behavior={Platform.OS === "ios" ? "padding" : "height"} style={styles.addFormcontainer} > <TextInput placeholder='할 일을 작성해주세요.' style={styles.inputField} value={currentValue} onChangeText={setCurrentValue} onSubmitEditing={handleSubmit} /> <Pressable style={styles.addButton} onPress={handleSubmit}> <Text style={styles.addButtonText}>+</Text> </Pressable> </KeyboardAvoidingView> ); }; export default InputForm; 현재 안드로이드 스튜디오 에뮬레이터 사용 중입니다. onSubmitEditing 을 통해 키보드에서도 Enter를 사용해 handleSubmit 함수를 사용할 수 있도록 구현했지만 키보드 숫자 키패드의 Enter를 사용하면 handleSubmit 함수가 실행되지 않습니다. 숫자 키패드의 Enter를 통해서도 handleSubmit 함수가 실행되도록 하려면 어떻게 코드를 작성해야 하나요?

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

socket의 emit에 관하여 질문있습니다!

미해결

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

socket.emit('login', 'hello') 해당 부분에서 emit을 계속 찍어내는 문제가 발생하고 있습니다!! useEffect의 dependenciy의 의존성을 주입 안 하면 emit을 계속 안 찍는데 어떻게 하는게 맞을까요 ?? // 로그인 후 emit을 계속 보낸다. useEffect(() => { const helloCallback = (data: any) => { console.log(data); }; if (socket && isLoggedIn) { socket.emit('login', 'hello'); socket.on('hello', helloCallback); } return () => { if (socket) socket.off('hello', helloCallback); }; }, [isLoggedIn, socket]); // 로그인 후 한 번만 emit을 보낸다. useEffect(() => { const helloCallback = (data: any) => { console.log(data); }; if (socket && isLoggedIn) { socket.emit('login', 'hello'); socket.on('hello', helloCallback); } return () => { if (socket) socket.off('hello', helloCallback); }; }, []); 아래는 emit을 계속 보내는 log 입니다.

  • react-native
jkl154527 댓글 1 좋아요 0 조회수 249

pod install

미해결

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

npm으로 라이브러리를 다운 받았을 때마다 pod install을 해주는걸로 이해했는데 맞게 이해한걸까요 ?

  • react-native
jkl154527 댓글 1 좋아요 0 조회수 221

6-11 강의 nanoid 관련 에러 도와주세요

미해결

핸즈온 리액트 네이티브

https://github.com/JIWONKIMS/ReactNative/blob/master/src/components/InputFAB.js Error: ENOENT: no such file or directory, \rn-todo\node_modules\nanoid\url-alphabet\package.json' 이런 오류가 뜹니다. (추가) npm install nanoid 후 이런 문구가 뜹니다.

  • react-native
댓글 2 좋아요 1 조회수 321

상품추천api오류

해결됨

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

//상품 추천 api (feat: tensoflow) app.get("/products/:id/recommendation", (req, res) => { const { id } = req.params; //findOne으로 req을 통해 받아온 param값 id에 맞는 상품을조회한다. models.Product.findOne({ where: { id, }, }) .then((product) => { //id와 일치하는 상품에서 type값을 뽑아서, const type = product.type; //type값과 일치하는 상품들을 모두찾는다. models.Product.findAll({ where: { type, id: { //기준이되는 id와 일치하지않는 데이터만찾겠다. //예를들어 id가4번일때 4번을제외한 4번과 같은type의 상품만 보여줘야하는데 //4번도 함께 추천이되니, 4번을 제외하게해준다. [models.Sequelize.Op.ne]: id, }, }, }).then((products) => { res.send({ products, }); }); }) .catch((error) => { console.error(error); res.status(500).send("에러가 발생했습니다.."); }); }); server.js 에서 추천api를 작성하고 웹에서 확인하려고하면 에러내용 TypeError: Cannot read properties of null (reading 'type') at /Users/kimsehun/Desktop/market-prj/h-market-server/server.js:191:28 이런 에러가발생합니다. models-product.js module.exports = function (sequelize, DataTypes) { const product = sequelize.define("Product", { name: { type: DataTypes.STRING(20), allowNull: false, }, price: { type: DataTypes.INTEGER(10), allowNull: false, }, seller: { type: DataTypes.STRING(30), allowNull: false, }, description: { type: DataTypes.STRING(300), allowNull: false, }, imageUrl: { type: DataTypes.STRING(300), allowNull: true, }, soldout: { type: DataTypes.INTEGER(1), allowNull: false, defaultValue: 0, }, type: { type: DataTypes.STRING(50), allowNull: true, }, }); return product; }; 계속보고있는데, findOne부분에서 where을 통해 id값에 해당하는 상품을 못찾아서 product에 데이터가 담기지않아서, type을 못불러오는거같은데. 뭐가문제일까요??

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

상품상세페이지 구현-2 와 3 사이에 빠진 내용이 있는거같아요

미해결

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

다른 수강생분들에게도 문제 해결에 도움을 줄 수 있도록 좋은 질문을 남겨봅시다 :) 1. 질문은 문제 상황을 최대한 표현해주세요. 2. 구체적이고 최대한 맥락을 알려줄 수 있도록 질문을 남겨 주실수록 좋습니다. 그렇지 않으면 답변을 얻는데 시간이 오래걸릴 수 있습니다 ㅠㅠ ex) A라는 상황에서 B라는 문제가 있었고 이에 C라는 시도를 해봤는데 되지 않았다! 3. 먼저 유사한 질문이 있었는지 꼭 검색해주세요! 상품상세페이지 구현-2 마지막에 보면 css를 적용하고자, product폴더내에 Index.css를 만드는데, Index.js에 css를 import하지 않고 넘어가서 상세페이지구현-3 영상에서는 그냥 css를 적용하고 적용되는 모습이 영상에 담겨있습니다. 원래 자동으로 Import 되는게 아니라면, 이부분에 대한 추가적인 제안이 필요할거같습니다. import "./index.css";

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

에뮬레이터에 화면 흰색만나오는 문제

미해결

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

import { API_URL } from "./config/constants.js"; import avatarImg from "./assets/icons/avatar.png"; import React from "react"; import { StyleSheet, Text, View, Image, ScrollView, Dimensions, TouchableOpacity, Alert, } from "react-native"; import { GestureHandlerRootView } from "react-native-gesture-handler"; import Carousel from "react-native-reanimated-carousel"; 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((result) => { const products = result.data.products; setProducts(products); }) .catch((error) => { console.log("error :", error); }); axios .get(`${API_URL}/banners`) .then((result) => { const banners = result.data.banners; setBanners(banners); }) .catch((error) => { console.log("error :", error); }); }, []); return ( <GestureHandlerRootView> <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) => { return ( <TouchableOpacity onPress={() => { Alert.alert("배너 클릭"); }} > <Image style={styles.bannerImage} source={{ uri: `${API_URL}/${obj.item.imageUrl}` }} resizeMode="contain" /> </TouchableOpacity> ); }} /> <Text style={styles.headline}>판매되는 상품들!</Text> <View style={styles.productList}> {products.map((product, index) => { return ( <View key={index} style={styles.productCard}> {product.soldout === 1 && <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> </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, }, }); 어떤 오류메세지도 뜨지않고, 에뮬레이터에 화면이 출력되지않는 문제가 발생합니다. Carousel을 적용하기전에는 화면 잘 출력되었는데, Carousel을 적용하니 화면이 출력되지않네요.. Error: PanGestureHandler must be used as a descendant of GestureHandlerRootView. Otherwise the gestures will not be recognized. See https://docs.swmansion.com/react-native-gesture-handler/docs/installation for more details. 이러한 오류가 발생해서 GestureHandlerRootView 태그로 최상단에 묶어주니 저 오류는 사라졌는데, 애뮬레이터의 화면이 출력되지 않는 문제가 발생합니다. 서버는 잘 연결되어있는걸 확인햇습니다.. 뭐가문제일까요

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

deploy후에 접속시 오류발생

미해결

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

안녕하세요, 설명 우선 launch를 할때 port를 8080으로 설정하고 setting을 해도 fly.toml 파일과 dockkerfile에 port번호가 3000으로 자동으로 설정되는 문제가있어 해당파일의 port번호를 수동으로 8080으로 다시 설정하고 deploy완료했을 때 해당 주소로 접속시에 접속이 안되는 오류가발생합니다. 이미지 fly.toml dockkerfile https://h-market-server.fly.dev/ 접속시 오류 구글링, 다른분들의 질문을 찾아봤는데도 해결하지못해, 질문드립니다. 파일을 지우고 다시런치 후 배포 프로젝트를 다 지우고 gitclone해서 런치 후 배포 등 다른방법들을 다 진행해봐도 해결되지않아 질문남깁니다.

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

인기 태그

인프런 TOP Writers

주간 인기글