운영체제 윈 10 현재 REACT-NATIVE프로젝트는 아래의 명령어를 통해 0.66으로 다운로드하였습니다. PS C:\Users\asus> npx react-native init GChatProject --template react-native-template-typescript@6.8.*npx react-native run-android를 하였을 때  위 명령어를 실행 한powershell에서는 아래의 로그를 뛰어주고 있습니다. -----------------------------------------PS C:\Users\asus\GChatProject> npx react-native run-androidinfo Running jetifier to migrate libraries to AndroidX. You can disable it using "--no-jetifier" flag.Jetifier found 870 file(s) to forward-jetify. Using 8 workers...info Starting JS server...info Installing the app...> Task :app:installDebugInstalling APK 'app-debug.apk' on 'Nexus_5_API_33(AVD) - 13' for app:debugInstalled on 1 device.BUILD SUCCESSFUL in 9s31 actionable tasks: 2 executed, 29 up-to-dateinfo Connecting to the development server...info Starting the app on "emulator-5554"...Starting: Intent { cmp=com.gchatproject/.MainActivity }------------------------------------그리고 metro 서버가 뛰어지는데요 문제는 metro 서버에서 아래와 같은에러를 발생하고 있습니다 ㅠㅠ -----------------------------------To reload the app press "r"To open developer menu press "d"Failed to construct transformer: Error: error:0308010C:digital envelope routines::unsupported at new Hash (node:internal/crypto/hash:68:19) at Object.createHash (node:crypto:138:10) at stableHash (C:\Users\asus\GChatProject\node_modules\metro-cache\src\stableHash.js:19:8) at Object.getCacheKey (C:\Users\asus\GChatProject\node_modules\metro-transform-worker\src\index.js:593:7) at getTransformCacheKey (C:\Users\asus\GChatProject\node_modules\metro\src\DeltaBundler\getTransformCacheKey.js:24:19) at new Transformer (C:\Users\asus\GChatProject\node_modules\metro\src\DeltaBundler\Transformer.js:48:9) at C:\Users\asus\GChatProject\node_modules\metro\src\Bundler.js:22:29 at runNextTicks (node:internal/process/task_queues:60:5) at process.processTimers (node:internal/timers:511:9) { opensslErrorStack: [ 'error:03000086:digital envelope routines::initialization error' ], library: 'digital envelope routines', reason: 'unsupported', code: 'ERR_OSSL_EVP_UNSUPPORTED'} BUNDLE ./index.jserror: TypeError: Cannot read properties of undefined (reading 'transformFile') at Bundler.transformFile (C:\Users\asus\GChatProject\node_modules\metro\src\Bundler.js:48:30) at process.processTicksAndRejections (node:internal/process/task_queues:95:5) at async Object.transform (C:\Users\asus\GChatProject\node_modules\metro\src\lib\transformHelpers.js:101:12) at async processModule (C:\Users\asus\GChatProject\node_modules\metro\src\DeltaBundler\traverseDependencies.js:137:18) at async traverseDependenciesForSingleFile (C:\Users\asus\GChatProject\node_modules\metro\src\DeltaBundler\traverseDependencies.js:131:3) at async Promise.all (index 0) at async initialTraverseDependencies (C:\Users\asus\GChatProject\node_modules\metro\src\DeltaBundler\traverseDependencies.js:114:3) at async DeltaCalculator._getChangedDependencies (C:\Users\asus\GChatProject\node_modules\metro\src\DeltaBundler\DeltaCalculator.js:164:25) at async DeltaCalculator.getDelta (C:\Users\asus\GChatProject\node_modules\metro\src\DeltaBundler\DeltaCalculator.js:94:16) at async DeltaBundler.buildGraph (C:\Users\asus\GChatProject\node_modules\metro\src\DeltaBundler.js:50:5)-------------------------------------

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

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

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

현재 셋팅가이드는 17로 설치하라고 하더군요 17로 강의를 진행해도 될까요? 11로 했더니 진짜 10시간동안 안됬는데 17로 변경하니 바로됬습니다. 17로 강의를 들어도 되는지요

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

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

네이버맵 패키지 연동후 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. 위에 적은 내용을 명심하지 않으시면 백날 강좌를 봐도(제 강좌가 아니더라도) 실력이 늘지 않고 그냥 코딩쇼 관람 및 한컴타자연습을 한 셈이 될 겁니다.

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

react-native run-ios 해도 안돼요...파일을 새로만들어서 하는게 아니라 클론받아서 하는건데 다른방법이있는건지궁금해요

따로 프로젝트를 진행중에 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 까지 진행했을 때 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가 작동되지 않습니다. margintop이나 이런건 잘 먹이는 데 color만 되질 않아요 왜 그런지 알 수 있을까요?

 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 함수가 실행되도록 하려면 어떻게 코드를 작성해야 하나요?

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 입니다.

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

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 (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을 못불러오는거같은데.뭐가문제일까요?? 

다른 수강생분들에게도 문제 해결에 도움을 줄 수 있도록 좋은 질문을 남겨봅시다 :) 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 태그로 최상단에 묶어주니 저 오류는 사라졌는데,애뮬레이터의 화면이 출력되지 않는 문제가 발생합니다.서버는 잘 연결되어있는걸 확인햇습니다..뭐가문제일까요