묻고 답해요
161만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
해결됨비전공자를 위한 진짜 입문 올인원 개발 부트캠프
상세 페이지 구성하다 안된 수강생 입니다.캡쳐 사진 올리니 꼭좀 해결해 주세요
아무리 구글링 유튜브 찾아 봐도 알수가 없네요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. 먼저 유사한 질문이 있었는지 꼭 검색해주세요!
-
미해결따라하며 배우는 리액트 네이티브 기초
맥이 있기는 한데..
16년도 맥이라,xcode 다운이 어렵네요..혹시 이렇게 되면 네이티브 cli 부분은진행이 어려운건가요?데스크탑은 있습니다,아그리고, npx expo start를 하고 카메라를 찍어봐도접속이 계속 안되네요...
-
미해결비전공자를 위한 진짜 입문 올인원 개발 부트캠프
Fly.io도 유료로 전환이 된걸까요
Fly.io 설치 후 홍콩으로 선택하는 지점(강의 4:17)에서 하기와 같은 오류가 뜨고있습니다.에러 내용이 Error: We need your payment information to continue! Add a credit card or buy credit: https://fly.io/dashboard/kimyr6868-gmail-com/billing 결제수단을 입력하는 내용으로 보아 진행이 어려울 것 같은데 이런 상황에선 어떻게 하면 좋을지 문의드립니다!
-
미해결배달앱 클론코딩 [with React Native]
Staging 테스트 질문이요!
안녕하세요 강의 잘 봤습니다.코드푸쉬를 적용하고 App Center까지 잘 올라온 걸 확인했습니다. 현재 앱을 TestFlight 앱으로 테스트 하고 있는데 Staging으로 코드푸쉬가 잘 적용되는지 확인하고 싶습니다. 혹시 Staging으로 올리고 변경된 codepush 내용을 TestFlight로 받는 방법이 있을까요?
-
미해결따라하며 배우는 리액트 네이티브 기초
[해결] 아이폰 marginBottom 먹지 않는 이슈
<KeyboardAvoidingView behavior={Platform.OS === "ios" ? "padding" : "height"} keyboardVerticalOffset={Platform.OS === 'ios' && 30} style={styles.addFormContainer} >IOS 일 경우 keyboardVeritcalOffset 에 marginBottom 만큼 추가해 줬더니 작동합니다.
-
미해결비전공자를 위한 진짜 입문 올인원 개발 부트캠프
메인 화면 이미지가 안뜨는 문제 관련
안녕하세요 그랩님! 바로 이전 질문에서 저와 동일한 현상으로 질문 주신것에 답변(하기 스크린샷)대로 변경을 해보았습니다.그랬더니 이번엔 그랩마켓 내의 '상품업로드'를 통해 등록한 키보드2 이미지만 뜨고 이전에 등록한 제품들은 깨져서 보이지 않아 이럴경우엔 어떻게 해결해야 할지 문의드립니다!