묻고 답해요
164만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
미해결비전공자를 위한 진짜 입문 올인원 개발 부트캠프
setProducts(products); 의 작동방식을 모르겠습니다.
setProducts(products);가 products라는 state를 변경하는 거잖아요.그런데 products는 바로 위 line에서 const로 정의되었는데 setProducts(products); 의 의미가 const 정의된 products라는 변수로 state를 변경한다는 의미인가요? 만약 state가 products가 아닌 다른 것이었다면 어떻게 되는 건가요? 정확히 어떤 과정인지 이해되지 않습니다.
-
해결됨비전공자를 위한 진짜 입문 올인원 개발 부트캠프
useEffect의 위치 조건을 잘 모르겠습니다.
useEffect를 setProducts(products);앞에 쓰는 것은 왜 에러인가요? 재실행하고 싶은 구간에만 써주면 되는 것이 아닌가요?
-
미해결
react native 윈도우 실행 오류
이번에 처음으로 앱 개발 공부를 해보려고 react native를 열심히 실행해 봤습니다.중간에 계속 에러가 나고 막히는 부분이 있었지만 겨우 마지막에 npm run android부분까지 왔습니다. 그런데 실행을 할려고 하면 계속C:\Users\aladi\MyApp\NewApp>npx react-native run-android info Starting JS server... info 💡 Tip: Make sure that you have set up your development environment correctly, by running react-native doctor. To read more about doctor command visit: https://github.com/react-native-community/cli/blob/main/packages/cli-doctor/README.md#doctor FAILURE: Build completed with 2 failures. 1: Task failed with an exception. ----------- * Where: Build file 'C:\Users\aladi\MyApp\NewApp\android\app\build.gradle' line: 2 * What went wrong: A problem occurred evaluating project ':app'. > Could not find implementation class 'com.facebook.react.ReactPlugin' for plugin 'com.facebook.react' specified in jar:file:/C:/Users/aladi/.gradle/caches/jars-9/e787d8a8f912d81d210d8e27e6fa5ed3/react-native-gradle-plugin.jar!/META-INF/gradle-plugins/com.facebook.react.properties. * 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. ============================================================================== 2: Task failed with an exception. ----------- * What went wrong: A problem occurred configuring project ':app'. > compileSdkVersion is not specified. Please add it to build.gradle * 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 12s error Failed to install the app. Command failed with exit code 1: gradlew.bat tasks FAILURE: Build completed with 2 failures. 1: Task failed with an exception. ----------- * Where: Build file 'C:\Users\aladi\MyApp\NewApp\android\app\build.gradle' line: 2 * What went wrong: A problem occurred evaluating project ':app'. > Could not find implementation class 'com.facebook.react.ReactPlugin' for plugin 'com.facebook.react' specified in jar:file:/C:/Users/aladi/.gradle/caches/jars-9/e787d8a8f912d81d210d8e27e6fa5ed3/react-native-gradle-plugin.jar!/META-INF/gradle-plugins/com.facebook.react.properties. * 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. ============================================================================== 2: Task failed with an exception. ----------- * What went wrong: A problem occurred configuring project ':app'. > compileSdkVersion is not specified. Please add it to build.gradle * 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 12s > Task :gradle-plugin:compileKotlin UP-TO-DATE > Task :gradle-plugin:compileJava NO-SOURCE > Task :gradle-plugin:pluginDescriptors UP-TO-DATE > Task :gradle-plugin:processResources UP-TO-DATE > Task :gradle-plugin:classes UP-TO-DATE > Task :gradle-plugin:jar UP-TO-DATE > Task :gradle-plugin:inspectClassesForKotlinIC UP-TO-DATE 5 actionable tasks: 5 up-to-date. 이런 에러가 뜨더라구요정말 이쪽부분은 하나도 모르는 코린이라 아무리 구글링해보고 혼자 머리 굴려봐도해결이 되지 않습니다.. 에뮬레이터까지는 뜨는데 react native화면은 뜨지 않고 저렇게 에러 메세지만 나옵니다. 어떻게 해야될까요.. 제발 도와주세요ㅜ
-
미해결핸즈온 리액트 네이티브
firebase이용 관련 앱 종료
안녕하세요 rn-photo 강의를 듣고있는 학생입니다.8.2 ~8.3 강의에서 firebase를 등록하고 SignInScreen.js파일에서 const onSubmit = async () => { Keyboard.dismiss(); if (!form.disabled && !form.isLoding) { dispatch({ type: AuthFormTypes.TOGGLE_LOADING }); try { const user = await signIn(form); console.log(user); } catch (e) { const message = getAuthErrorMesseages(e.code); Alert.alert('로그인 실패', message); } dispatch({ type: AuthFormTypes.TOGGLE_LOADING }); } }; 위 코드 중 signIn함수를 사용할때 계속 앱이 종료되버립니다.원인을 알수없어서 질문 드립니다.아래는 저의 깃허브 주소입니다.https://github.com/yunhyeonji/Hands-on-ReactNative
-
해결됨비전공자를 위한 진짜 입문 올인원 개발 부트캠프
code EEXIST 에러가 계속 뜨는데 어떡하죠..
안녕하세요 create-react-app을 설치하고create-react-app .를 입력한 후에 계속 이 에러가 떠서 진행을 못하고 있습니다.ㅠEEXIST라는 에러코드인데요.. 일단 저는 sudo npm install -g create-react-app 코드를 이용해서 설치를 했고create-react-app -V라는 코드를 이용해서 create-react-app의 버전이 나옴을 확인해, 설치는 제대로 되었음을 확인했습니다. 그런데 create-react-app . 이 부분을 입력할 때마다 저 에러가 뜹니다.. 어떻게 해결하면 좋을까요?처음부터도 다시 깔아보고, uninstall install도 해보고 npx로도 해봤지만 잘 안됐습니다..
-
해결됨비전공자를 위한 진짜 입문 올인원 개발 부트캠프
상세 페이지 구성하다 안된 수강생 입니다.캡쳐 사진 올리니 꼭좀 해결해 주세요
아무리 구글링 유튜브 찾아 봐도 알수가 없네요mock-sever 주소 크롬 주소창에 넣으면 분명히 자료가 잘 나오는데 vs코드에서 실행 하면 위에 처럼 에러가 나옵니다. 선생님 해결좀 부탁드립니다.수업을 나갈수가 없네요.
-
해결됨비전공자를 위한 진짜 입문 올인원 개발 부트캠프
구매버튼 클릭 시 soldout 구현 부분(상품 블러 처리)
상품 상세 페이지에서 구매 버튼을 누르게 되면,해당 상품의 soldout값이 1로 바뀌게고 적용 완료.그 이후 자동으로 구매 버튼이 회색으로 다시 바뀌겠끔도 구현 완료 그 이후 뒷 페이지로 돌아갔을 때, 상품 목록에서 blur처리 되는 기능이 구현되지 않아 이 방법이 궁금합니다.뒤로가기 버튼을 눌렀을 때는 해당 페이지가 새로 불러와지는 로직이 아닌가요? // Main페이지 코드 import { StatusBar } from "expo-status-bar"; import { StyleSheet, Text, View, Image, ScrollView, Dimensions, TouchableOpacity, Alert } from "react-native"; import React, {useEffect, useState} from "react"; import axios from "axios"; import dayjs from "dayjs" import relativeTime from "dayjs/plugin/relativeTime" import "dayjs/locale/ko" import Carousel from "react-native-reanimated-carousel" import { API_URL } from "../config/constants"; import AvatarImage from "../assets/icons/avatar.png"; dayjs.extend(relativeTime); dayjs.locale("ko"); export default function MainScreen(props) { const [products, setProducts] = useState([]); const [banners, setBanners] = useState([]); const getProduct = () => { axios .get(`${API_URL}/products`) .then((result) => { console.log(result); setProducts(result.data.products) }) .catch((error) => { console.error(error); }); } useEffect(() => { getProduct(); axios .get(`${API_URL}/banners`) .then((result) => { setBanners(result.data.banners); }) .catch((error) => { console.error(error); }) }, []); return ( <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 sytle={styles.productList}> {products.map((product, index) => { return ( <TouchableOpacity onPress={() => { props.navigation.navigate("Product", { id: product.id }) }}> <View style={styles.productCard}> {product.soldout === 1 && ( <View style={styles.productBlur} /> )} <View> <Image style={styles.productImage} source={{ uri: `${API_URL}/${product.imageUrl}`, }} resizeMode={"contain"} /> </View> <View style={styles.productContents}> <Text sytle={styles.productName}> {product.name} </Text> <Text sytle={styles.productPrice}> {product.price}원 </Text> <View style={styles.productFooter}> <View style={styles.productSeller}> <Image style={styles.productAvatar} source={AvatarImage} /> <Text style={styles.productSellerName} > {product.seller} </Text> </View> <Text style={styles.productDate}> {dayjs(product.createdAt).fromNow()} </Text> </View> </View> </View> </TouchableOpacity> ); })} </View> </ScrollView> </View> ); } const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: "#fff", padding: 32, }, productCard: { width: 320, borderColor: "rgb(230,230,230)", borderWidth: 1, borderRadius: 16, backgroundColor: "white", marginBottom: 8, }, productImage: { width: "100%", height: 210, }, productContents: { padding: 8, }, productSeller: { flexDirection: "row", alignItems: "center", }, productAvatar: { width: 24, height: 24, }, productFooter: { flexDirection: "row", justifyContent: "space-between", alignItems: "center", marginTop: 12, }, productName: { fontSize: 16, }, productPrice: { fontSize: 18, fontWeight: "600", marginTop: 8, }, productSellerName: { fontSize: 16, }, productDate: { fontSize: 16, }, productList: { alignItems: "center", }, Headline: { fontSize: 24, fontWeight: "800", marginBottom: 24, }, productBlur: { position: "absolute", top: 0, bottom: 0, left: 0, right: 0, backgroundColor : "#ffffffa6", zIndex: 999 }, bannerImage: { width: "90%", height: 200, }, safeAreaView: { flex: 1, backgroundColor: "#fff" } }); // Product 화면 코드 import axios from "axios"; import React, { useEffect, useState } from "react" import {Image, ActivityIndicator, StyleSheet, View, Text, TouchableOpacity, Alert, ScrollView} from "react-native" import { API_URL } from "../config/constants"; import Avatar from "../assets/icons/avatar.png" import dayjs from "dayjs" export default function ProductScreen(props){ const {id} = props.route.params; const [product, setProduct] = useState(null); const getProduct = () => { axios.get(`${API_URL}/products/${id}`) .then((result) => { console.log("product result : ", result.data); setProduct(result.data.product); }) .catch((error) => { console.error(error); }) } useEffect(() => { getProduct(); }, []); const onPressButton = () => { if(product.soldout !== 1) { axios.post(`${API_URL}/purchase/${id}`) .then((result) => { Alert.alert("구매가 완료되었습니다."); getProduct(); }) .catch((error) => { Alert.alert(`에러가 발생했습니다. ${error.message}`); }) } } if(!product){ return <ActivityIndicator /> } return ( <View style={styles.container}> <ScrollView> <View> <Image style={styles.productImage} source={{uri: `${API_URL}/${product.imageUrl}`}} resizeMode="contain" /> </View> <View style={styles.productSection}> <View style={styles.productSeller}> <Image style={styles.avatarImage} source={Avatar} /> <Text>{product.seller}</Text> </View> <View style={styles.divider} /> <View> <Text style={styles.productName}>{product.name}</Text> <Text style={styles.productPrice}>{product.price} 원</Text> <Text style={styles.productDate}>{dayjs(product.createAt).format("YYYY년 MM월 DD일")}</Text> <Text style={styles.productDescription}>{product.description}</Text> </View> </View> </ScrollView> <TouchableOpacity onPress={onPressButton}> <View style={product.soldout ===1 ? styles.purchaseDisabled : styles.purchaseButton}> <Text style={styles.purchaseText}>{product.soldout === 1 ? "구매완료" : "구매하기"}</Text> </View> </TouchableOpacity> </View> ) } const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: "#fff" }, productImage: { width: "100%", height: 300 }, productSeller: { flexDirection: "row", alignItems: "center" }, avatarImage: { width: 50, height: 50, }, productSection: { padding: 16 }, divider: { backgroundColor: "#e9ecef", height: 1, marginVertical: 16 }, productName: { fontSize: 20, fontWeight: "400" }, productPrice: { fontSize: 18, fontWeight: "700", marginTop: 8 }, productDate: { fontSize:14, marginTop: 4, color: "rgb(204,204,204)" }, productDescription: { marginTop : 16, fontSize: 17 }, purchaseButton: { position: "absolute", bottom: 0, left: 0, right: 0, height: 60, backgroundColor: "rgb(255,80,88)", alignItems : "center", justifyContent: "center" }, purchaseText : { color: "white", fontSize: 20, }, purchaseDisabled: { position: "absolute", bottom: 0, left: 0, right: 0, height: 60, backgroundColor: "gray", alignItems : "center", justifyContent: "center" } })
-
미해결비전공자를 위한 진짜 입문 올인원 개발 부트캠프
수업 진행중 이 그랩마켓 상세 페이지 만들던중 농구공 이미지
안녕하세요.그랩마켓 상세페이지 만들기 중에서 농구공 이미지 하고postman에서 만든 products/1 내용이 안나오기에 MOCK SEVER를 다시 생성해서 .GET에 복사 붙여 넣기를 했습니다.그랬더니 에러가 나면서 아무것도 안보이게 됐습니다.그래서 lean-all-with -java 페이지로 가서 INDEX.HTML로 에 있는 axios.get ( "https://831a8e94-7b7a-4354-9e1a-eb37becbc7ad.mock.pstmn.io/products"에 가서 보니 예전에 만들은 것들은 그대로 더군요. 그래서 이것도 지우고 새로 만든 mock주소를 넣었더니 이것도 에러가 납니디.원래 mock서버 새로 만들어서 붙여 놓으면 안되나요? 몇일동안 매달려도 안되네요.도와주세요.선생님
-
미해결틴더 파이어베이스 클론 | 리액트 네이티브
디스코드 올바르지 않은 초대장
디스코드 올바르지 않은 초대장이라고 뜹니다
-
미해결비전공자를 위한 진짜 입문 올인원 개발 부트캠프
windows에서 발생하는 경로 \ 관련 문의드립니다.
"상품 업로드 기능 구현-2" 강의 중 잘 따라가다가 후반부에서 경로 문제로 인해 문의드립니다.업로드 페이지에서 업로드는 잘 되나, 업로드 후 메인 페이지에서 등록된 이미지가 나오지 않아 확인해보니 "/" 대신에 콘솔에는 캡처1과 같이 "\\" 가 나오고 DB Browser에서는 캡처2와 같이 "\"가 나옵니다. : 캡처1 입니다. : 캡처2 입니다.원인을 찾아보니 windows에서 파일 경로를 다룰 때 "\\"로 하기 때문에 생기는 문제라고 하는데요...어떻게 해결하면 좋을지 모르겠습니다.해결방법을 알려주시면 감사하겠습니다.
-
해결됨비전공자를 위한 진짜 입문 올인원 개발 부트캠프
import { Switch, Route } from "react-router-dom"; 모듈을 찾을수 없다고 뜹니다.
선생님 수업 따라서 열심히 따라 왔는데 여기서 막히네요.해결 좀 부탁드립니다.제가 나이가 53인데 사다리차 운전 하면서 자영업 하는데 다른길좀 가보려고 공부하는 중이거든요. 다른 분들한테는 쉬운걸 텐데 저한테는 어렵네요.구글링 해보고 네이버 도 찾아봣는데 찾을수가 없네요.이걸 해결해야 앞으로 나갈수 있을것 같은데 도와주세요.감사합니다
-
미해결비전공자를 위한 진짜 입문 올인원 개발 부트캠프
main/index.js과 product/index.js에서 setProduct 관련 문의드립니다.
main/index.js 에서는setProducts(result.data.products); 로 써야하고product/index.js 에서는setProducts(result.data); 로 써야하는데두 파일에서 return문에서는 동등하게 {product.name} , {product.price} 등으로 사용됩니다. 둘의 차이를 알려주시면 감사하겠습니다.
-
미해결비전공자를 위한 진짜 입문 올인원 개발 부트캠프
import시 {} 유무의 차이는 무엇인가요?
import axios from 'axios'; 에서는 중괄호가 없고import {Link} from 'react-router-dom' 에서는 중괄호가 있는데 차이가 뭔지 잘 모르겠습니다.axios는 'axios' 안에 있는 함수를 import 하는 것이고 {Link} 는 'react-router-dom' 안에 많은 컴포넌트 중 Link만 import 하기 위함인가요?
-
해결됨비전공자를 위한 진짜 입문 올인원 개발 부트캠프
useState를 사용하는 이유가 무엇인가요?
빈 배열을 선언해서 빈 배열에 (axios 통신을 통해 전달받은) result.data를 대입해서 사용하는 것이 아니라 useState를 사용하는 이유는 무엇인가요?제가 이해한 것은 서버에 새로운 데이터가 업로드되면 그때마다 바로바로 업로드 된 데이터를 화면에 보여주기 위함인 것 같은데(예를 들어 상품이 3개로 보이다가 관리자가 상품을 한 개 추가하면 새로고침을 안해도 4개로 보임), 올바르게 이해한 것이 맞을까요?
-
미해결배달앱 클론코딩 [with React Native]
react-native-image-crop-picker --> openPicker 오류
안녕하세요ImagePicker.openCamera <- 정상 동작ImagePicker.openPicker <- Required permission missing위 내용입니다확인 부탁드립니다.
-
미해결비전공자를 위한 진짜 입문 올인원 개발 부트캠프
hostname 페이지 접속 실패
그랩님 안녕하세요 현재 depoly가 완료되었습니다.그런데 hostname페이지로 접속이 안되고 아래와 같이 실패하고있습니다.어떤부분이 문제인지 문의드립니다.git 링크: https://github.com/sunghankwon/grab-market-server 다른 수강생분들에게도 문제 해결에 도움을 줄 수 있도록 좋은 질문을 남겨봅시다 :) 1. 질문은 문제 상황을 최대한 표현해주세요.2. 구체적이고 최대한 맥락을 알려줄 수 있도록 질문을 남겨 주실수록 좋습니다. 그렇지 않으면 답변을 얻는데 시간이 오래걸릴 수 있습니다 ㅠㅠex) A라는 상황에서 B라는 문제가 있었고 이에 C라는 시도를 해봤는데 되지 않았다!3. 먼저 유사한 질문이 있었는지 꼭 검색해주세요!
-
미해결배달앱 클론코딩 [with React Native]
앱 성능 측정은 어떻게 해야하나요?
React-Native로 개발한 앱을 리팩토링하려합니다.성능 비교를 위해서 리팩토링 이전에 측정해놓고 싶습니다.웹의 경우 라이트하우스로 성능을 측정했다면 모바일앱은 어떤걸로 측정 해야하나요?찾아보니까 Firebase Performance가 앱 성능 측정을 해주던데 표준이 되는 다른 측정 도구가 있나요? 아님 firebase를 활용해서 측정하면 될까요?
-
미해결핸즈온 리액트 네이티브
안녕하세요 에뮬레이터
가상머신 에뮬레이터로 수업을 따라가고 있는데 , 에뮬레이터가 코드변경이 바로적용될때가 있고 또 코드변경했을때 적용이 안될때도 있는데 어떤게 문제일까요??
-
미해결비전공자를 위한 진짜 입문 올인원 개발 부트캠프
axios error
안녕하세요 그랩님! 바로 아래 질문과 같이 axios error가 콘솔창에 뜨는데 포스트맨으로 다른 api 연결 확인 다 되었고 app.use(cors()); 역시 서버의 index.js 에 기재되어 있는데도 여전히 오류가 뜨고 있어 혹시 이런경우엔 어떻게 해결이 가능할지 문의드리고자 합니다!
-
해결됨비전공자를 위한 진짜 입문 올인원 개발 부트캠프
fly depoly 에러
그랩님 안녕하세요 다름이아니라 depoly 관련해서 문의드립니다.현재 fly depoly 부분에서 계속 에러가 발생하고있습니다.launch 부분에서도 그랩님과는 다르게 지역 선택이후로는 물어보는게 없이 바로 진행됐습니다.오류 내역 첨부드립니다ㅠㅠ다른 수강생분들에게도 문제 해결에 도움을 줄 수 있도록 좋은 질문을 남겨봅시다 :) 1. 질문은 문제 상황을 최대한 표현해주세요.2. 구체적이고 최대한 맥락을 알려줄 수 있도록 질문을 남겨 주실수록 좋습니다. 그렇지 않으면 답변을 얻는데 시간이 오래걸릴 수 있습니다 ㅠㅠex) A라는 상황에서 B라는 문제가 있었고 이에 C라는 시도를 해봤는데 되지 않았다!3. 먼저 유사한 질문이 있었는지 꼭 검색해주세요!