묻고 답해요
161만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
미해결비전공자를 위한 진짜 입문 올인원 개발 부트캠프
[그랩님께]101강 안드로이드 에러들(Key prop)해결방법 궁금합니다.
그랩님, 강의 잘 듣고 있습니다.다름이 아니라 궁금한 사항(=에러 해결방법)이 필요해서 글을 남기게 되었습니다.101강을 듣고 있는데요 Axios 에러(400)가 안드로이드 스튜디오 에뮬레이터에서 발생하고 있습니다.일단 101강 처음부터 ~ 4분 52초까지 그랩님께서 작성하신 소스코드를 똑같이 작성 후결과를 보려하는데,농구공 그림(세부사항:판매자:그랩,가격,상품명등등) 이 나오지 않아서 이것을 어떻게 하면 그랩님과 같은결과를 볼 수 있을지에 대해 여쭈어봅니다.사진 1 첨부 : 판매되는 상품들 밑에 100강만 들었을 시에 농구공 화면이 잘 나왔으나 101강 4분 52초까지의 내용의 소스코드를 입력 후 결과값 보면 400 에러도 발생하고 농구공도 안나오게 됩니다.어떻게 해야 하나요?사진 2 첨부 : 구체적인 에러 내용 [사진3] 스크롤은 적용이 안 된 것 같은데요, 상품이 2개 뿐이라 스크롤이 없는 건가요?[사진4] 사진 3에 대한 구체적인 에러 ----> 어떻게 에러를 해결 할 수 있을까요? 안드로이드 스튜디오에서 상품 정보를 불러오지 못하는것에 대해서 어떻게 해결해야 할 지 차근 차근 잘 알려주셨으면 좋겠습니다.그리고 마지막 질문은 안드로이드 애물레이터가 잘 되는지 확인하려면grab-market-server에서 npm start를 해준 뒤 확인하면 되는건가요?아니면 grab-market-mobile에서 npm start를 해준 뒤 a(=Open Android)를 누르면 되는 건가요?아니면 둘다 동시에 npm start를 해주는 건가요? 그리고 아래에는 grab-market-mobile 폴더의 App.js 제 소스 코드를 아래에 첨부하겠습니다. import { StatusBar } from "expo-status-bar"; import React from "react"; import { StyleSheet, Text, View, Image, ScrollView } from "react-native"; import BasketballImage from "./assets/products/basketball1.jpeg"; import Avatar from "./assets/icons/avatar.png"; import {API_URL} from "./config/constants"; 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([]) React.useEffect(()=>{ axios.get(`${API_URL}/products`).then((result)=>{ setProducts(result.data.products); }).catch((error)=>{ console.error(error); }) },[]) return ( <View style={styles.container}> <ScrollView> <Text style={styles.headline}>판매되는 상품들</Text> <View style={styles.productList}> { products.map((product, index)=>{ return (<View style={styles.productCard}> <View> <Image style={styles.ProductImage} source={{uri: `${API_URL}/${product.imageUrl}`,}} 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={Avatar} /> <Text style={styles.productSellerName} >{product.seller}</Text> </View> <Text style={styles.productDate}>{dayjs(product.createdAt).fromNow()}</Text> </View> </View> </View>); }) } </View> </ScrollView> </View> ); } const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: '#fff', paddingTop: 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 } }); 그랩님의 답변을 기다립니다.
-
해결됨[코드캠프] 부트캠프에서 만든 '완벽한' 프론트엔드 코스
하이브리드앱 과제 레퍼런스 코드
하이브리드앱 과제 진행 중입니다과제01에 " project/mobile 경로에 app 폴더를 생성하고, project/mobile/app 경로에 숙제가이드에 포함된 _layout.tsx, index.tsx 파일을 복사해 주세요." 라고 되어 있는데 숙제가이드가 안 보여서 문의드립니다.노션에서는 "레퍼런스 코드는 모든 과정이 업데이트 후 최종 공개됩니다" 라고 되어있는데 그럼 아직 업데이트가 안 돼서 _layout.tsx, index.tsx 파일을 못 보는 건가요? 아니면 강의에서 진행했던 것처럼 _layout.tsx, index.tsx 두 파일을 수정하면 되나요?
-
미해결React Native with Expo: 제로초에게 제대로 배우기
EAS preview 빌드 후 Device에서 카카오 로그인 브라우저가 안켜짐
저는 강의 수강 후 개인 앱을 만들고 있습니다.EAS preview 빌드 후 해당 빌드 내용을 Orbit을 통해 에뮬레이터에서는 로그인 부라우저가 뜨고 다음 화면까지 이동하는 프로세스가 잘 동작하는 것 까지 확인했습니다. 그런데 제 실제 디바이스에서 구동해보면 카카오 로그인 버튼을 누르면 설정해놓은 Loading spining만 뜨다가 화면이 넘어가지질 않습니다.로그도 못보고 있어서 해결을 못하고 있는데 혹시 이런 경우 관련 해결팁이 있을까요 ?저는 이 화면으로 넘어가고 싶은데 안되네요 ㅠㅠ..
-
미해결[리뉴얼] 맛집 지도앱 만들기 (React Native & NestJS)
현재 Windows에서 VsCode로 작업 중인데 추후에 IOS도 가능하게 하려면
현재 Windows환경에서 강의를 수강했습니다.그래서 android 만 테스트할 수 있었고, 중간에 IOS를 위한 환경 세팅은 Window환경에서 할 수 있는 범위만을 수행했습니다.그래서 궁금한 것은 추후에 맥 환경에서 개발을 할 수 있게 되었다 했을 때 강의에서 나오는 IOS 환경 설정은 모두 마쳤다면(Xcode에서 수행해야하던 세팅 모두)npm pod-install위 명령어만 쳤을 때 바로 IOS도 사용가능할까요?아니면 IOS 세팅이나 설치 모두 강의처럼 순서대로 진행해야할까요?
-
해결됨[코드캠프] 부트캠프에서 만든 '완벽한' 프론트엔드 코스
조건문, 반복문 너무 어려움
안녕하세요 강의를 수강중인데 조건문, 반복문 식을 짜려고 하는데 식을 짜는게 너무 어렵습니다 원래 처음엔 다 그런건가요?
-
미해결React Native with Expo: 제로초에게 제대로 배우기
폴더 구조 관련 질문
제로초님 안녕하세요 expo 프로젝트의 폴더 구조에 대해서 고민이 있습니다.!!현재 src/app 폴더에서 페이지들을 관리하고 있고각 페이지 내부에서만 사용하는 하위 컴포넌트들은 src/app/settings/_components/AccountSettingsSection.tsx와 같이 _components 폴더 하위에 배치하고, named export를 통해 라우트로 잡히지 않게 하고 있습니다. 문제는 없지만 프로젝트를 실행시키면 WARN Route "./settings/_components/AccountSettingsSection/AccountSettingsSection.tsx" is missing the required default export. Ensure a React component is exported as default.라는 경고 메시지가 app/ 내부에서 named export 한 모든 하위 컴포넌트를 대상으로 출력됩니다. Next.js처럼 _components 내부의 하위 컴포넌트들은 완전히 무시하도록 하고 싶은데 아무리 찾아봐도 무시할 방법이 없는 거 같습니다 ㅠ 제로초님께서는 어떤 방법으로 페이지 내부 하위 컴포넌트들을 배치하시는지 궁금합니다..!! 관리하기 용이한 폴더 구조가 있다면 추천해주실 수 있으신가요??
-
미해결아바타 커뮤니티앱 만들기 (React Native Expo)
안드로이드 폰과 PC에서 테스트할때 화면 안보임과 오류 문의
일단 위 화면까지는 PC에서 나오는데, Development servers에 링크를 클릭하면 아무 반응이 없는데, 어떻게 해야하는지 문의드립니다.그리고, 실제 안드로이드 폰에서 테스트시에도, 아래와 같이 홈화면에 아무것도 나오지 않고, 하단 메뉴만 노출되고, 내 프로필을 클릭하면 하단 이미지 두번째처럼 오류가 나고 있습니다. 어떻게 해결해야하는지 문의드립니다.
-
미해결비전공자를 위한 진짜 입문 올인원 개발 부트캠프
[재질문][그랩님 답변 부탁드립니다]101강
그랩님, 강의 잘 듣고 있습니다.다름이 아니라 궁금한 사항(=에러 해결방법)이 필요해서 글을 남기게 되었습니다.101강에서 Axios 에러(400)가 안드로이드 스튜디오 에뮬레이터에서 발생하고이어 아래의 추가 사진2에서 보시다시피 502 Bad Gateway가 발생하여 어떻게 해결 할 수 있는지에 대해 알고 싶어서 질문 드립니다.일단 101강 처음부터 ~ 4분 52초까지 그랩님께서 작성하신 소스코드를 똑같이 작성 후결과를 보려하는데,농구공 그림(세부사항:판매자:그랩,가격,상품명등등) 이 나오지 않아서 이것을 어떻게 하면 그랩님과 같은결과를 볼 수 있을지에 대해 여쭈어봅니다.사진 1 첨부 : 판매되는 상품들 밑에 100강만 들었을 시에 농구공 화면이 잘 나왔으나 101강 4분 52초까지의 내용의 소스코드를 입력 후 결과값 보면 400 에러도 발생하고 농구공도 안나오게 됩니다.어떻게 해야 하나요? 사진 2 첨부 : ngrok http 8080후 진행 하면, 아래와 같이 502 Bad Gateway라고 뜨는데, 이 에러 의미와무엇이 잘못된건지 그리고 어떻게 해결 해야 하는지 답변 주시면 좋겠습니다.이어서 중간에 아래 사진과 같은 절차를 겪었었는데요, 필요할 것 같아 참고로 스샷을 첨부합니다.axios 설치 후 grab-market-mobile에서 npm start하니 다른 프로세스에의해 포트 8081이 사용되고 있는데 8082 포트를 대신 쓸거냐는 질문에서 y or n 하라는데 y하게 되었는데요, 이 다음에 어떻게 해야그랩님 강의와 똑같이 잘 작동할 수 있을까요? 더불어서 또 다른 에러가 발생하는데요, 또 다른 에러는 cmd에서 ngrok http 8080 입력 후 포워딩 주소를 크롬브라우저에 복사 후 붙여넣으면,이전 밑에 질문에서는 정상 작동되었으나지금은 아래와 같이 바뀐 에러가 발생하였습니다.해결법을 모르기에 아래에 사진을 첨부합니다. 꼭 답변 부탁 드립니다.그랩님의 답변 부탁 드립니다.
-
미해결React Native with Expo: 제로초에게 제대로 배우기
혹시 리액트네이티브 관련해서 좋은 참고서도 있을까요??
강의 내용과는 별개로, 개인적으로 공부를 더 하고 싶은 부분이 있어 도움을 요청드립니다.현재 출퇴근 시간에 활용할 목적으로 실습보다는 내용이나 이론이 탄탄한 개발 서적을 찾고 있습니다. 예를 들면, JS Deep Dive처럼 언어의 원리나 깊은 내용을 다루는 책을 선호합니다.강의 영상이나 소리 대신 책으로 글을 읽으며 내용을 훑어보고, "이런 기능도 있구나, 이럴 땐 이렇게 하는구나" 하며 지식을 확장하는 용도로 활용하고 싶습니다.혹시 추천해주실 만한 서적이 있을까요?
-
미해결비전공자를 위한 진짜 입문 올인원 개발 부트캠프
[그랩님 답변 부탁드립니다]101강 Axios 에러와 502 Bad Gateway 질문
그랩님, 강의 잘 듣고 있습니다.다름이 아니라 궁금한 사항(=에러 해결방법)이 필요해서 글을 남기게 되었습니다.101강에서 Axios 에러(400)가 안드로이드 스튜디오 에뮬레이터에서 발생하고이어 아래의 추가 사진2에서 보시다시피 502 Bad Gateway가 발생하여 어떻게 해결 할 수 있는지에 대해 알고 싶어서 질문 드립니다.일단 101강 처음부터 ~ 4분 52초까지 그랩님께서 작성하신 소스코드를 똑같이 작성 후결과를 보려하는데,농구공 그림(세부사항:판매자:그랩,가격,상품명등등) 이 나오지 않아서 이것을 어떻게 하면 그랩님과 같은 결과를 볼 수 있을지에 대해 여쭈어봅니다.사진 1 첨부 : 판매되는 상품들 밑에 100강만 들었을 시에 농구공 화면이 잘 나왔으나 101강 4분 52초까지의 내용의 소스코드를 입력 후 결과값 보면 400 에러도 발생하고 농구공도 안나오게 됩니다.어떻게 해야 하나요?사진 2 첨부 : ngrok http 8080후 진행 하면, 아래와 같이 502 Bad Gateway라고 뜨는데, 이 에러 의미와무엇이 잘못된건지 그리고 어떻게 해결 해야 하는지 답변 주시면 좋겠습니다.그랩님의 답변을 기다립니다.
-
미해결React Native with Expo: 제로초에게 제대로 배우기
제로초님께서는 Nativewind는 사용안하지는지 궁금합니다.
React/Next.js 프로젝트에서 Tailwind를 많이 사용하는 추세인데, 이와 매우 유사한 React Native 의 Natviewind 라는게 있더군요. Nativewind를 사용하면 기존 Tailwind에서 처럼 className으로 빠르게 스타일링할 수 있고 웹과 모바일 간 일관된 스타일 코드를 유지할 수 있는 장점이 있는 것 같습니다. React Native 기초 강의이므로 기본 React Native CSS 사용을 통해 구현하는 방식을 보여주신 것인지 궁금합니다.
-
미해결[리뉴얼] 맛집 지도앱 만들기 (React Native & NestJS)
react-native-fast-image는 react 19 버전에서 설치가 안되나요?
react 19 버전에 대한 관련 이슈도 있더라구요버전을 낮추려고 해도 3년 전 업데이트가 가장 최근 거라서 이것도 아닌 거 같아서.. 강의에서는 잘 설치되는 것 같은데 어떻게 해야할까요? yarn으로 하셨던데 npm으로 하는 것과 차이가 있는 걸까요?아니면 그냥 npm install react-native-fast-image --legacy-peer-deps 를 사용하는 게 나을까요?
-
미해결아바타 커뮤니티앱 만들기 (React Native Expo)
iOS 빌드 후 실기기에서 앱 시작
강사님 해결 되었습니다! 글 삭제가 안보이네요..
-
미해결비전공자를 위한 진짜 입문 올인원 개발 부트캠프
Ngrok 설치 후 forwarding Url 에러
그랩님 강의 잘 듣고 있습니다.다름이 아니라, 강의를 들으면서 Ngrok를 설치 후forwarding Url로 크롬브라우저에서 치고 들어가면,아래와 같은 에러가 떠서 어떻게 해결 해야 하는지 답변을 듣고 싶어 글을 작성하게 되었습니다.에러 화면은 아래와 같습니다 그리고 올려 달라고 하신 사진 역시 첨부합니다. 상황은 아래와 같습니다.[사진2] [마지막 사진] 어떻게하면 그랩님의 강의 결과 화면과 똑같이 나올 수 있을까요? 답변 부탁드립니다.
-
미해결비전공자를 위한 진짜 입문 올인원 개발 부트캠프
[그랩님께,Ngrok 악성코드 인식 해결방법]질문 드립니다.
그랩님, 강의 잘 듣고 있습니다.Ngrok에러가 앞전에 이어 지금도 있어서처음부터 다시 시작해보려고윈도우 크롬 다운로드 파일에서 다운로드한 Ngrok파일을 삭제 후다시 https://ngrok.com/download/windows?tab=download 에 들어가서 다운로드 후 압축을 풀려고 하는데, 이것을 컴퓨터 알약 프로그램이 아래 첨부한 사진처럼 악성 코드로 분류해서 치료할 것인지프로그램이 물어봐서 제가 치료하기 누르는 순간 결국 삭제되어서 Ngrok 진행을 하지 못하고 있습니다.왜 예전에는 다운로드 할 시에는 악성코드 문제 이슈가 전혀 없었는데요, 지금은 아래와 같은 첨부 사진 처럼뜨기에 혹시나 보안에 취약해지면 컴퓨터가 잘못 될 수도 있을 것 같아서 이것을 제대로 알고 시도해 봐야 될 것 같아 질문을 다시 드리게 되었습니다.아래는 ngrok 가서 다운 받은 [다운로드 폴더] 스샷 입니다.아래는 ngrok 다운 받은 파일 실행 후 스샷 입니다.마지막 사진은 ngrok 다운로드 받고 압축 해재하려면 아래와 같이 뜨는 스샷입니다.질문 요약 : ngrok 다운 받으면 알약에서 악성코드로 인지해서 악성코드 치료하면 ngrok.exe가 지워집니다. 어떻게 해야하나요? 그냥 치료 안하고 설치해도 되는 건가요? 이렇게 그냥 치료 안하고 진행해도 해킹 문제나 보안 문제가 발생하지 않을까 걱정이 들어서 전문가이신 그랩님께 여쭈어 봅니다.빠른 답변 부탁 드립니다.
-
미해결React Native with Expo: 제로초에게 제대로 배우기
알림 수신 상태 변경
제로초님 안녕하세요! 유저가 알림 허용을 해서 granted 상태가 되고 백엔드 서버에 pushToken까지 보내놓은 상태에서, 유저가 알림을 다시 off 했을때, 서버에서도 알림 상태를 off로 만들려면 이 상태를 DB에 저장해놨던 pushToken을 삭제하는 방식으로 관리하나요??
-
미해결[리뉴얼] 맛집 지도앱 만들기 (React Native & NestJS)
SQL Shell의 역할이 무엇인가요?
강의에서 비밀번호 입력하는 SQL Shell은 무슨 역할을 하는 건가요?SQL Shell을 켜서 비밀번호 입력을 하는데 이렇게 비밀번호까지 입력을 함으로써 어떤 일이 일어나는 건가요??해당 부분을 생략하면 어떤 일이 생기는 건가요그리고 매번 서버를 킬 때 SQL Shell도 켜야하는 건가요? 안키고도 서버 동작은 잘 됩니다!
-
미해결아바타 커뮤니티앱 만들기 (React Native Expo)
[5-2] 글 목록 무한스크롤 구현하기 with InfiniteQuery 10:40/ useScrollTop(ref) 사용관련
18번째 줄에서 useEffect 같은 훅에서 호출한 게 아닌데 useScrollToTop()은 어떻게 트리거되어 동작하는지 궁금합니다. 6번째 줄에서 useScrollToTop() 훅은 "@react-navigation/native"에서 가져오고 있는데, "expo-router"와 같이 사용해도 되나요?
-
미해결React Native with Expo: 제로초에게 제대로 배우기
eas build:configure 안되는데, "git"이 반드시 설치되어 있어야 하나요?
eas build:configure 안되는데, "git"이 반드시 설치되어 있어야 하나요?
-
미해결[리뉴얼] 맛집 지도앱 만들기 (React Native & NestJS)
혹시 해당 강의에서invalidateQueries를 사용한 이유가 있을까요?
invalidateQueries와 setQueryData이전 강의 영상에서는 네트워크 요청을 최소화의 목적으로 setQueryData를 사용했는데이번 강의 영상에서는 invalidateQueries를 사용한 이유가 있을까요?단순히 궁금해서 입니다!