묻고 답해요
130만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
해결됨배달앱 클론코딩 [with React Native]
네이버맵 패키지 연동후 iosSimulator로 빌드시 에러입니다.
네이버맵 패키지 연동후 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=PUKOWrOuC0c0. 숫자 0부터 시작한 이유는 1보다 더 중요한 것이기 때문입니다. 에러가 났을 때 해결을 하는 게 중요한 게 아닙니다. 왜 여러분은 해결을 못 하고 저는 해결을 하는지, 어디서 힌트를 얻은 것이고 어떻게 해결한 건지 그걸 알아가셔야 합니다. 그렇지 못한 질문은 무의미한 질문입니다.1. 에러 메시지를 올리기 전에 반드시 스스로 번역을 해야 합니다. 번역기 요즘 잘 되어 있습니다. 에러 메시지가 에러 해결 단서의 90%를 차지합니다. 한글로 번역만 해도 대부분 풀립니다. 그냥 에러메시지를 올리고(심지어 안 올리는 분도 있습니다. 저는 독심술사가 아닙니다) 해결해달라고 하시면 아무런 도움이 안 됩니다.2. 에러 메시지를 잘라서 올리지 않아야 합니다. 입문자일수록 에러메시지에서 어떤 부분이 가장 중요한 부분인지 모르실 겁니다. 그러니 통째로 올리셔야 합니다.3. 코드도 같이 올려주세요. 다만 코드 전체를 다 올리거나, 깃헙 주소만 띡 던지지는 마세요. 여러분이 "가장" 의심스럽다고 생각하는 코드를 올려주세요.4. 이 강좌를 바탕으로 여러분이 응용을 해보다가 막히는 부분, 여러 개의 선택지 중에서 조언이 필요한 부분, 제 경험이 궁금한 부분에 대한 질문은 대환영입니다. 다만 여러분의 회사 일은 질문하지 마세요.5. 강좌 하나 끝날 때마다 남의 질문들을 읽어보세요. 여러분이 곧 만나게 될 에러들입니다.6. 위에 적은 내용을 명심하지 않으시면 백날 강좌를 봐도(제 강좌가 아니더라도) 실력이 늘지 않고 그냥 코딩쇼 관람 및 한컴타자연습을 한 셈이 될 겁니다.
-
해결됨핸즈온 리액트 네이티브
unable to resolve module 에러
수업중에 만들었던 컴포넌트를 팀원들에게 사용하라고 깃허브에 올렸는데 이런 에러가 발생했습니다. 수업과는 상관 없는 질문이라 죄송합니다. 항상 강의 잘 듣고있습니다. 컴포넌트 내용은 똑같습니다.
-
미해결따라하며 배우는 리액트 네이티브 기초
깃허브에서 클론받아온 파일을 실행하려면 어떻게 해야하죠..?
react-native run-ios 해도 안돼요...파일을 새로만들어서 하는게 아니라 클론받아서 하는건데 다른방법이있는건지궁금해요
-
미해결배달앱 클론코딩 [with React Native]
Layout 관련해서 질문드립니다.
따로 프로젝트를 진행중에 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> ); };
-
해결됨핸즈온 리액트 네이티브
8.4 질문
8.4 까지 진행했을 때 firebase 초기화 관련해서 이런 경고가 뜹니다You are initializing Firebase Auth for React Native without providingAsyncStorage. Auth state will default to memory persistence and will notpersist between sessions. In order to persist auth state, install the package"@react-native-async-storage/async-storage" and provide it toinitializeAuth: 그리고 getAuthErrorMessages로 받아온 메세지를 출력하면 항상 default 값만 출력됩니다https://github.com/JIWONKIMS/photo
-
미해결따라하며 배우는 리액트 네이티브 기초
안녕하세요 borderbottomcolor가 작동되질 않습니다.
안녕하세요 수업 잘 듣고 있는데요 안드로이드로 작동하고 있는데 borderbottomcolor가 작동되지 않습니다. margintop이나 이런건 잘 먹이는 데 color만 되질 않아요 왜 그런지 알 수 있을까요?
-
미해결따라하며 배우는 리액트 네이티브 기초
키보드 숫자 키패드의 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 함수가 실행되도록 하려면 어떻게 코드를 작성해야 하나요?
-
미해결배달앱 클론코딩 [with React Native]
socket의 emit에 관하여 질문있습니다!
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 입니다.
-
미해결배달앱 클론코딩 [with React Native]
pod install
npm으로 라이브러리를 다운 받았을 때마다 pod install을 해주는걸로 이해했는데 맞게 이해한걸까요 ?
-
미해결핸즈온 리액트 네이티브
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 후 이런 문구가 뜹니다.
-
해결됨비전공자를 위한 진짜 입문 올인원 개발 부트캠프
상품추천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.jsmodule.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을 못불러오는거같은데.뭐가문제일까요??
-
미해결비전공자를 위한 진짜 입문 올인원 개발 부트캠프
상품상세페이지 구현-2 와 3 사이에 빠진 내용이 있는거같아요
다른 수강생분들에게도 문제 해결에 도움을 줄 수 있도록 좋은 질문을 남겨봅시다 :) 1. 질문은 문제 상황을 최대한 표현해주세요.2. 구체적이고 최대한 맥락을 알려줄 수 있도록 질문을 남겨 주실수록 좋습니다. 그렇지 않으면 답변을 얻는데 시간이 오래걸릴 수 있습니다 ㅠㅠex) A라는 상황에서 B라는 문제가 있었고 이에 C라는 시도를 해봤는데 되지 않았다!3. 먼저 유사한 질문이 있었는지 꼭 검색해주세요! 상품상세페이지 구현-2 마지막에 보면 css를 적용하고자,product폴더내에 Index.css를 만드는데, Index.js에 css를 import하지 않고 넘어가서 상세페이지구현-3 영상에서는 그냥 css를 적용하고 적용되는 모습이 영상에 담겨있습니다.원래 자동으로 Import 되는게 아니라면, 이부분에 대한 추가적인 제안이 필요할거같습니다. import "./index.css";
-
해결됨비전공자를 위한 진짜 입문 올인원 개발 부트캠프
에뮬레이터에 화면 흰색만나오는 문제
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 태그로 최상단에 묶어주니 저 오류는 사라졌는데,애뮬레이터의 화면이 출력되지 않는 문제가 발생합니다.서버는 잘 연결되어있는걸 확인햇습니다..뭐가문제일까요
-
미해결비전공자를 위한 진짜 입문 올인원 개발 부트캠프
deploy후에 접속시 오류발생
안녕하세요, 설명 우선 launch를 할때 port를 8080으로 설정하고 setting을 해도fly.toml 파일과 dockkerfile에 port번호가 3000으로 자동으로 설정되는 문제가있어 해당파일의 port번호를 수동으로 8080으로 다시 설정하고 deploy완료했을 때 해당 주소로 접속시에 접속이 안되는 오류가발생합니다. 이미지fly.tomldockkerfilehttps://h-market-server.fly.dev/접속시 오류구글링, 다른분들의 질문을 찾아봤는데도해결하지못해, 질문드립니다. 파일을 지우고 다시런치 후 배포프로젝트를 다 지우고 gitclone해서 런치 후 배포등 다른방법들을 다 진행해봐도 해결되지않아 질문남깁니다.
-
해결됨비전공자를 위한 진짜 입문 올인원 개발 부트캠프
import- export 필수
약 7분경 css는 그냥 import로 불러오시는 강의 내용이 있는데요, 이전에 import를 하기 위해선 원본 파일에서 꼭 export를 해줘야한다고 말씀해주셨던 것 같아서요.js파일과 다르게 css 파일을 불러올때는 꼭 export를 하지 않아도 되는 걸까요?
-
미해결배달앱 클론코딩 [with React Native]
node, react-native 버전 호환
사용중인 node 버전이 v20.10.0. 입니다.react-native 버전 0.66 실행에 문제가 있나요?
-
미해결배달앱 클론코딩 [with React Native]
node_modules 폴더의 위치
FoodDeliveryApp 폴더 안에 node_modules 폴더가 있어야 하는 걸까요? 아니면 C:\Users\이름\AppData\Roaming\npm 에 있어야 하는걸까요?
-
미해결비전공자를 위한 진짜 입문 올인원 개발 부트캠프
그림 링크 아무것도 안뜹니다.
수업 영상강의처럼 진행하는데 같은 링크를 걸어도 그림이 안뜹니다!!<html> <head> <title>Hello World</title> </head> <body> <h1>Hello World</h1> <h2>Hello World</h2> <h3>Hello World</h3> <h4>Hello World</h4> <h5>Hello World</h5> <p>안녕하세요 그랩입니다.</p> <p>안녕하세요 그랩입니다.</p> <p>안녕하세요 그랩입니다.</p> <br /> <p>안녕하세요 그랩입니다.</p> <a href="https://naver.com">네이버 넘어가기</a> <img src="https://cdn.pixabay.com/photo/2015/03/26/09/47/sky-690293__340.jpg" alt="구름 사진" /> </body> </html>
-
미해결따라하며 배우는 리액트 네이티브 기초
createStore를 통해 middleware를 등록할 때 오류 (5.0.1 버전)
const store = createStore(rootReducer, middleware);강의와 같이 위처럼 코드를 작성할 시 에러가 발생합니다. 버전은 5.0.1 버전입니다.공식 문서에서 createStore 부분을 보면 reducer와 enhancer이외에 preloadedState라는 값이 있는데 해당 값을 넣어주니 정상적으로 작동했습니다.const preloadedState = { counter: 0, }; const store = createStore(rootReducer, preloadedState, middleware);preloadedState는 선택적으로 사용할 수 있다고 되어 있는데 왜 사용하지 않으면 에러가 발생하는지 궁금합니다.또한 preloadedState는 store의 초기 상태를 나타내고 있다고 하는데 todos의 초기 상태를 어떻게 설정해야할지 궁금합니다. (그냥 undefined로만 적어도 상관없을까요)
-
해결됨비전공자를 위한 진짜 입문 올인원 개발 부트캠프
강의에 사용되는 노션 링크가 어디있을까요?
다른 수강생분들에게도 문제 해결에 도움을 줄 수 있도록 좋은 질문을 남겨봅시다 :) 1. 질문은 문제 상황을 최대한 표현해주세요.2. 구체적이고 최대한 맥락을 알려줄 수 있도록 질문을 남겨 주실수록 좋습니다. 그렇지 않으면 답변을 얻는데 시간이 오래걸릴 수 있습니다 ㅠㅠex) A라는 상황에서 B라는 문제가 있었고 이에 C라는 시도를 해봤는데 되지 않았다!3. 먼저 유사한 질문이 있었는지 꼭 검색해주세요! 강의에 사용하시는 노션 링크가 영상 하단에 있다고 커뮤니티에서 찾아보았는데, 아무리 찾아도 없어서, 혹시 어디서 찾아볼수있을까요?