안녕하세요, expo 공식 홈페이지에서 version 55를 사용하게 명시되어있어서 55로 시작했더니 이제 tabs 폴더 구조가 따로 없는 형태로 되었는데 그냥 똑같이 tabs를 생성하여서 진행해야하나요?

아래처럼 소스도 똑같이 작성하면서 따라왔는데, 화면처럼 나오면서 막힙니다. 이후 코드를 따라서 작성해도 따라갈 수가 없어요...*{ box-sizing: border-box; margin: 0px; } .background { width: 1024px; height: 600px; background-image: url("../images/background.png"); padding: 20px 0px 0px 20px; } .outerbox { width: 800px; height: 544px; background-image: url("../images/outerbox.png"); } .wrapper { display: flex; flex-direction: row; padding: 32px 0px 0px 32px; } .wrapper__left { width: 208px; height: 472px; background-color: bisque; } .wrapper__left__header { width: 100%; height: 30px; background-color: aqua; } .wrapper__left__body { width: 100%; height: 100%; background-color: steelblue; } .wrapper__right { width: 524px; height: 472px; background-color: violet; }

react19.1.0react-native0.81.5expo~54.0.23버전을 알려주시면 질문자분과 동일한 환경에서 답변 드릴 수 있습니다.---12. CSS와의 차이점, 비슷한 점4분 넘어서 블러뷰 적용하는 부분에서 생기는 문제 입니다. 원인은 BlurView때문에 생기는 문제 같고 웹으로 띄우면 별 문제 없는데 안드 앱에서는 문제가 되고 있습니다. 어떻게 해결하는게 좋을까요?

최신 버전에서는 navigate 동작이 바뀐거같네요 "react": "19.1.0", "react-native": "0.81.5", "expo": "~54.0.33", "expo-router": "~6.0.23", 사용하면서 강의 듣는데..router.push는A -> B -> C -> C -> B -> B -> C -> B일 때 뒤로가기 하면 정확하게 역순으로 B -> C -> B -> B -> C -> C -> B -> A 로 동작하는데router.navigate는A -> B -> C -> C -> B -> B -> C -> B 일때B -> C -> B-> C -> B -> A 처럼바로 연달아서 같은 라우터를 연속 클릭햇을 때에만 뒤로가기 할 때 중복이 제거되거 되는 것 처럼 동작하는 것 같아요activity 폴더에 적용한 코드들입니다index.tsximport NotFound from "@/app/+not-found"; import { usePathname, useRouter } from "expo-router"; import { Text, TouchableOpacity, View } from "react-native"; export default function Index() { const router = useRouter(); const pathname = usePathname(); if ( ![ "/activity", "/activity/follows", "/activity/replies", "/activity/mentions", "/activity/reposts", "/activity/verified", ].includes(pathname) ) { return <NotFound />; } return ( <View style={{ flex: 1, justifyContent: "center", alignItems: "center", }} > <View> <TouchableOpacity onPress={() => router.push(`/activity`)}> <Text style={{ color: pathname === "/activity" ? "red" : "black" }}> All </Text> </TouchableOpacity> <TouchableOpacity onPress={() => router.push(`/activity/follows`)}> <Text style={{ color: pathname === "/activity/follows" ? "red" : "black", }} > Follows </Text> </TouchableOpacity> <TouchableOpacity onPress={() => router.push(`/activity/replies`)}> <Text style={{ color: pathname === "/activity/replies" ? "red" : "black", }} > Replies </Text> </TouchableOpacity> <TouchableOpacity onPress={() => router.push(`/activity/mentions`)}> <Text style={{ color: pathname === "/activity/mentions" ? "red" : "black", }} > Mentions </Text> </TouchableOpacity> <TouchableOpacity onPress={() => router.push(`/activity/reposts`)}> <Text style={{ color: pathname === "/activity/reposts" ? "red" : "black", }} > Reposts </Text> </TouchableOpacity> <TouchableOpacity onPress={() => router.push(`/activity/verified`)}> <Text style={{ color: pathname === "/activity/verified" ? "red" : "black", }} > Verified </Text> </TouchableOpacity> </View> </View> ); }  _layout.tsximport { Slot } from "expo-router"; export default Slot;  [tabs].tsxexport { default } from "."; 3분 강의로 2시간이 사라진.....ㅠㅠ

안녕하세요 🙂토스트 버전은 "react-native-toast-message": "^2.3.3",입니다. 저는 모달 위에 토스트가 뜨지 않고, 모달이 꺼지면 그 뒤에 토스트가 보입니다..!찾아보니 ios와 aos는 모달 구현 방식에서 차이가 있다고 하더라구요..ㅠㅠ맞다면 혹시 ios에서는 어떤 방식으로 모달위에 토스트를 띄우는지 알 수 있을까요??참고로 모달 내부 마지막요소에 Toast 컴포넌트를 추가했는데도 모달이 꺼지고나서야 보이네요..!해결 했습니다..! fetch 이후에 뜨는 쪽만 제대로 돼있고, fetch 전에 띄우는 게 잘못 돼있어서 안떠보이는 거였습니다..;;ㅎㅎ 아래 질문만.. 답변 해주시면 감사하겠습니다.ㅎㅎ🙏 그리고 게시글 포스팅 이후에 자동으로 게시글로 이동하는데, 토스트 누르면 게시글로 이동하게 하는 기능이 굳이 필요한 건지도 궁금합니다! 감사합니다.

onEndReached()가 바로 호출 되지 않습니다.생각 해보면.. 이 함수는 스크롤이 됐을 때만 호출 해야 맞지 않나요..? following쪽도 useEffect 쪽을 삭제 하고 나서는 데이터를 바로 불러 오지 못하는데.. "useEffect 제거 후 onEndreached()가 바로 실행된다." 이 부분 이해가 잘 안돼서 설명 부탁드리기 전에 한번 찾아봤습니다.대략 왜 바로 실행 된다고 하셨는지는 이해가 되긴 했는데, 저같은 경우는 좀 예외인 것 같아서 질문 남깁니다!지금 제 flash-list 버전은 아래와 같습니다!"@shopify/flash-list": "2.0.2",알아보니 v2에서는 estimatedItemSize를 제공하지 않고.. 해당 설정이 없어서 저같은 경우 onEndReached()가 바로 실행 되지 않았던 것 같습니다. 의존 된 데이터도 빈배열로 정의 돼있으니 더 아무 것도 실행 하지 않았던 것 같습니다.이런 경우 초기엔 useEffect로 직접 불러오나요?혹시 위에 버전 이슈 말고 제가 놓친 부분이 있다면 말씀 부탁드리겠습니다..!(home)/index.tsximport { Text, View, TouchableOpacity, StyleSheet, useColorScheme, ScrollView, } from "react-native"; import { usePathname } from "expo-router"; import { useState, useCallback } from "react"; import Post, { Post as PostType } from "../../../components/Post"; import { FlashList } from "@shopify/flash-list"; export default function Index() { const colorScheme = useColorScheme(); const path = usePathname(); const [posts, setPosts] = useState<PostType[]>([]); const onEndReached = useCallback(() => { console.log("posts1", posts.length); const lastId = posts.at(-1)?.id; if (!lastId) return; fetch(`/posts?cursor=${lastId}`) .then((res) => res.json()) .then((data) => { if (data.posts.length > 0) { setPosts((prev) => [...prev, ...data.posts]); } }) .catch(console.error); }, [posts, path]); return ( <View style={[ styles.container, colorScheme === "dark" ? styles.containerDark : styles.containerLight, ]} > <FlashList data={posts} renderItem={({ item }) => <Post item={item} />} onEndReached={onEndReached} onEndReachedThreshold={2} /> </View> ); } const styles = StyleSheet.create({ container: { flex: 1, }, containerLight: { backgroundColor: "white", }, containerDark: { backgroundColor: "#101010", }, textLight: { color: "black", }, textDark: { color: "white", }, });

Expo 프레임워크를 활용해서 푸쉬 알림을 설정할때 두 가지 방법이 있다는 것을 확인할 수 있었습니다.  서버에서 expo push service를 거쳐서 ios - APNs, android-Firebase 연결expo push service를 사용하지 않고 서버에서 직접 Ios-APNs, android-FireBase연결 이 두 방법이 있고 공식문서에서도 두 방법에 대해서 안내해주는 레퍼를 확인할 수 있었습니다.당연히 1번이 구현 난이도가 더욱 쉽고 빠르게 적용할 수 있는 방법입니다. 하지만 현재 앱이 창업 팀을 꾸려서 실 서비스를 하려고 하는 입장인데, expo-push-service에 의존하는게 어떤지에 대해서 의문점이 있습니다.실무의 경우 App 단을 react native로 운영하고 있을떄 두 가지 선택지에서 초기 창업시에 어떤 것을 선택하고 무엇이 장기적인 입장에서 옳은 방향일까요?

안녕하세요!클라이언트 부분 열심히 반복 수강 중에 있습니다 🙂 코드가 굉장히 깔끔하고 가독성이 좋아서 서버 부분도 배우고 싶더라구요! 서버 구성과 효율적인 코드를 작성하는 법도 배우고 싶다는 마음이 커지더라구요! 혹시 추후에 서버 강의를 진행하실 예정이 없으실까요? 없으시다면,,, 기존 강의에 있던 맛집 어플 서버 부분만 참고해도 충분할까요...?

"ios": { "infoPlist": { "ITSAppUsesNonExemptEncryption": false, "NSLocationWhenInUseUsageDescription": "이 앱은 사용자의 위치를 기반으로 기능을 제공하기 위해 위치 정보가 필요합니다.(Allow $(PRODUCT_NAME) to use your location.)" } },app.json에서 요 부분 추가 하시고 npm run ios 로 빌드 다시 해보시면 될거에요.만약에 안되시면,rm -rf ios 명령어로 ios 파일 삭제 후 다시 빌드 해보시면 잘 될겁니다!

궁금해서 Gemini에게 물어봤는데요..!tabBarLabel이 {null}로 반환하는 것과 {""} 빈문자열 넣는 법.이 두가지 차이점을 물어보다가 아래 tabBarShowLabel 속성이 있다는 걸 알게됐고,요 속성은 아예 레이아웃 처리가 되지 않는 다는 걸 알게됐습니다.부모 <Tabs />에 한번만 쓰면 하위에 다 적용되는 구조입니다.tabBarShowLabel: false,일단 저는 이 속성 사용해보고있는데,좋은 것 같아용 ㅎㅎ제로초님은 이걸 사용하지 않으시던데,혹시나 요거 사용하면 안되는거면 댓글 달아주세용ㅎㅎ

  node 버전 : v24.11.1[id.tsx] 파일입니다. 현재 상세 페이지를 가면 아래와 같이 댓글 버튼이 상단으로 올라오는 현상이 생겼습니다. 또한 답글 남기기를 눌러도 focus는 댓글 input으로 되지만, 화면처럼 스크롤이 내려가는 현상은 안나타납니다. npx expo start를 이용하여, 실기기로 테스트한겁니다!import AuthRoute from "@/components/AuthRoute"; import CommentItem from "@/components/CommentItem"; import FeedItem from "@/components/FeedItem"; import InputField from "@/components/InputField"; import { colors } from "@/constants"; import useCreateComment from "@/hooks/queries/useCreateComment"; import useGetPost from "@/hooks/queries/useGetPost"; import useKeyboard from "@/hooks/useKeyboard"; import { useLocalSearchParams } from "expo-router"; import { Fragment, useRef, useState } from "react"; import { Keyboard, KeyboardAvoidingView, Platform, Pressable, ScrollView, StyleSheet, Text, TextInput, View, } from "react-native"; import { SafeAreaView, useSafeAreaInsets, } from "react-native-safe-area-context"; export default function PostDetailScreen() { const { id } = useLocalSearchParams(); const { data: post, isPending, isError } = useGetPost(Number(id)); const createComment = useCreateComment(); const [content, setContent] = useState(""); const scrollRef = useRef<ScrollView | null>(null); const inputRef = useRef<TextInput | null>(null); const [parentCommentId, setParentCommentId] = useState<number | null>(null); const { isKeyboardVisible } = useKeyboard(); const insets = useSafeAreaInsets(); if (isPending || isError) { return <></>; } const handleReply = (commentId: number) => { setParentCommentId(commentId); inputRef.current?.focus(); }; const handleCancelReply = () => { setParentCommentId(null); Keyboard.dismiss(); }; const handleSubmitComment = () => { const commentData = { postId: post.id, content: content, }; if (parentCommentId) { createComment.mutate({ ...commentData, parentCommentId }); setContent(""); handleCancelReply(); return; } if (parentCommentId) { createComment.mutate({ ...commentData, parentCommentId }); setContent(""); handleCancelReply(); return; } createComment.mutate(commentData); setContent(""); setTimeout(() => { scrollRef.current?.scrollToEnd(); }, 500); }; return ( <AuthRoute> <SafeAreaView style={styles.container} edges={["right", "left", "bottom"]} > <KeyboardAvoidingView contentContainerStyle={styles.awareScrollViewContainer} behavior="height" keyboardVerticalOffset={ Platform.OS === "ios" || isKeyboardVisible ? 100 : insets.bottom } > <ScrollView ref={scrollRef} style={{ marginBottom: 75 }} contentContainerStyle={styles.scrollViewContainer} > <View style={{ marginTop: 12 }}> <FeedItem post={post} isDetail /> <Text style={styles.commentCount}> 댓글 {post.commentCount}개 </Text> </View> {post.comments?.map((comment) => ( <Fragment key={comment.id}> <CommentItem parentCommentId={parentCommentId} onReply={() => handleReply(comment.id)} onCancelReply={handleCancelReply} comment={comment} /> {comment.replies.map((reply) => ( <CommentItem key={reply.id} comment={reply} isReply /> ))} </Fragment> ))} </ScrollView> <View style={styles.commentInputContainer}> <InputField ref={inputRef} value={content} returnKeyType="send" onSubmitEditing={handleSubmitComment} onChangeText={(text) => setContent(text)} placeholder={ parentCommentId ? "답글 남기는중..." : "댓글을 남겨보세요." } rightChild={ <Pressable disabled={!content} style={styles.inputButtonContainer} onPress={handleSubmitComment} > <Text style={styles.inputButtonText}>등록</Text> </Pressable> } /> </View> </KeyboardAvoidingView> </SafeAreaView> </AuthRoute> ); } const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: colors.WHITE, }, awareScrollViewContainer: { flex: 1, backgroundColor: colors.GRAY_200, }, scrollViewContainer: { backgroundColor: colors.GRAY_200, }, commentCount: { marginTop: 12, backgroundColor: colors.WHITE, paddingVertical: 12, paddingHorizontal: 16, fontSize: 16, fontWeight: "bold", }, commentInputContainer: { width: "100%", borderTopColor: colors.GRAY_200, borderTopWidth: StyleSheet.hairlineWidth, backgroundColor: colors.WHITE, padding: 16, bottom: 0, position: "absolute", }, inputButtonContainer: { backgroundColor: colors.ORANGE_600, padding: 8, borderRadius: 5, }, inputButtonText: { color: colors.WHITE, fontWeight: "bold", }, });

아바타 만들기 /post 에는 글쓰기, 수정, 상세화면에 대한 정의가 되어 있습니다./post/[id].tsx/post/write.tsx/post/update/[id].tsx 글쓰기와 수정은 SafeAreaView를 적용하지 않았는데 상세보기에서 적용한 이유와 어떤 기준에 의해 적용하였는지 문의 드립니다./post/_layout.tsx 내에 Stack.Screen에서 headerShown : false일때 SafeAreaView를 적용하는걸로 생각했는데 그렇지 않은것 같습니다. 감사합니다.  

버전 호환 문제 현재 강의 흐름대로 react-native 0.79.4 버전을 깔고 이 강의에서 npm install @react-navigation/native과npm install react-native-screens react-native-safe-area-context를 그대로 실행해서 설치하면npx pod-install ios Need to install the following packages: pod-install@1.0.9 Ok to proceed? (y) y 🔍️ Scanning for pods... 1.16.2 > pod install Found 2 modules for target mapzip2 link_native_modules! {:ios_packages=>[{:configurations=>[], :name=>"react-native-safe-area-context", :root=>"/Users/kwakori/projects/react-native/learning/mapzip2/node_modules/react-native-safe-area-context", :path=>"../node_modules/react-native-safe-area-context", :podspec_path=>"/Users/kwakori/projects/react-native/learning/mapzip2/node_modules/react-native-safe-area-context/react-native-safe-area-context.podspec", :script_phases=>[]}, {:configurations=>[], :name=>"react-native-screens", :root=>"/Users/kwakori/projects/react-native/learning/mapzip2/node_modules/react-native-screens", :path=>"../node_modules/react-native-screens", :podspec_path=>"/Users/kwakori/projects/react-native/learning/mapzip2/node_modules/react-native-screens/RNScreens.podspec", :script_phases=>[]}], :ios_project_root_path=>"/Users/kwakori/projects/react-native/learning/mapzip2/ios", :react_native_path=>"../node_modules/react-native"} Auto-linking React Native modules for target mapzip2: RNScreens and react-native-safe-area-context Framework build type is static library Configuring the target with the New Architecture [!] Invalid Podfile file: [!] /opt/homebrew/bin/node ./../node_modules/react-native/scripts/generate-codegen-artifacts.js -p /Users/kwakori/projects/react-native/learning/mapzip2/ios/.. -o /Users/kwakori/projects/react-native/learning/mapzip2/ios -t ios [Codegen] Analyzing /Users/kwakori/projects/react-native/learning/mapzip2/package.json [Codegen] Searching for codegen-enabled libraries in the app. [Codegen] The "codegenConfig" field is not defined in package.json. Assuming there is nothing to generate at the app level. [Codegen] Searching for codegen-enabled libraries in the project dependencies. [Codegen] Found react-native [Codegen] Found react-native-safe-area-context [Codegen] Found react-native-screens [Codegen] Searching for codegen-enabled libraries in react-native.config.js [Codegen] Processing FBReactNativeSpec [Codegen] Searching for podspec in the project dependencies. [Codegen] Processing rncore [Codegen] Searching for podspec in the project dependencies. [Codegen] Processing safeareacontext [Codegen] Searching for podspec in the project dependencies. [Codegen] Supported Apple platforms: ios, macos, tvos, visionos for safeareacontext [Codegen] Processing rnscreens [Codegen] Searching for podspec in the project dependencies. [Codegen] Supported Apple platforms: ios, tvos, visionos for rnscreens [Codegen] Error: Unknown prop type for "environment": "undefined" [Codegen] Done. . # from /Users/kwakori/projects/react-native/learning/mapzip2/ios/Podfile:20 # ------------------------------------------- # > use_react_native!( # :path => config[:reactNativePath], # ------------------------------------------- Couldn't install Pods. Updating the Pods project and trying again...와 같은 에러가 발생합니다.아무래도 버전 호환성 문제인 것 같습니다.https://github.com/software-mansion/react-native-screens/blob/main/README.md#support-for-fabric위 문서를 참고하면 react-native-screens의 최신 버전인 4.19.0+ 는 react-native 0.81.0+ 에서만 호환된다고 하는 것 같습니다. 강의 들으시는 분들은 참고해주세요. 버전을 낮춰서 설치하시거나 하시면 정상적으로 설치되더라구요//아니면 혹시 그냥 react-native를 0.81.0＋ 로 설치해서 강의를 들어도 문제없으려나요?

피그마 디자인에서는 < 를 사용했는데강의에서는 Foundation "home"을 사용했어요!의도하신걸까요? 디자인이 최종 시안이라던가.. 그게 아니라면강의는 동영상이니 바꾸는데 공수가 많이 들어가니피그마에서 아이콘 바꿔주셔도 좋을것같습니다! 잡담으로 저는 자바스프링 백엔드로 시작해서 jQuery/Angular/Vue/React/Next를 풀스택으로 쓰는 회사들로 이직하면서 최종적으로 코틀린스프링을 메인스택으로 하고 있는데요.취미/공부/사이드 프로젝트로 Next.js랑 Flutter 배우고 이번에 RN배우는데 강사님의 코드퀄리티나 강의력이 깔끔한것 같아서 잘 보고 있습니다ㅎㅎ 25년 초에 릴리즈한 강의인데 26년에도 미션이나 질문에도 답 잘 달아주셔서 감사합니다.

안녕하세요.커리큘럼을 봐도 현재 업데이트된 강의 시간내에 전부 커버가 안되고 있는 것으로 보이는데,강의는 어느정도 길이로 계획되어있고, 언제 업데이트가 전부 완료될지 예상 시점이 궁금하여 문의드립니다.

❗질문 작성시 꼭 참고해주세요에러 메세지에서 단서를 찾을 수 있는 경우가 많습니다. 에러 메세지를 읽고 한번 검색해보시는것을 추천드립니다.질문글을 작성하실때는, 현재 문제(또는 에러)와 코드나 github을 첨부해주세요.개발중인 OS, ReactNative, Node 버전 등의 개발환경을 알려주셔야합니다.에러메세지는 일부분이 아닌 전체 상황을 올려주세요. 일부만 보여주시면 답변이 어렵습니다.에러 잘라서 올리시면 안됩니다!(에러 일부만 자르거나 일부만 복사하지말아주세요) 지금은 잘 되는 것 같은데(제가 아직 안드로이드 애뮬레이터로만 테스트 한 상태이긴 하지만)혹시 지금도 안되는지 궁금합니다!  

서랍 네비게이션을 열 때마다 뒤에 MapView가 마운트 언마운트 되는 문제아래 링크 영상처럼 서랍 네비게이션을 열 때마다 뒤에 MapView가 언마운트 마운트가 되면서 성능 관련 문제가 생기는 것 같습니다. 이게 애뮬레이터 문제인지 제 컴퓨터 문제인지, 강의에서는 이런 문제가 안보이는데..해당 문제 해결할 방법이 혹시 있을까요?네비게이션을 열 때마다 렉이 걸려서 자꾸 애플리케이션이 다운됩니다 ㅠㅠ방법을 찾아보고 메모이제이션도 해보고, Drawer 옵션도 사용해봤는데 무용지물이네요 ㅠhttps://drive.google.com/file/d/1tM8iR9QgukKVd_I5zfk6GhbKneLE1DkZ/view?usp=drive_link

102강 강의를 듣고 있는데요,react-native-reanimated-carousel 설치 위해 노션에 링크대로npm install react-native-reanimated-carousel@3.3.0 명령어로 설치하고그 이후 expo install --npm react-native-reanimated react-native-gesture-handler 를 입력하여 터미널에서 설치 완료하였습니다질문 1.이후babel.config.js 파일에 가서 plugins: ["react-native-reanimated/plugin"], 추가 해야하는데 문제는 babel.config.js 파일이 존재하지 않아 어디에 플러그인 작성해야 하는지 모르겠습니다 첨부 사진package.json에 디펜던시를 보면 아래와 같아요"react": "19.1.0", "react-native": "0.81.5", "react-native-reanimated-carousel": "^3.3.0", "react-native-reanimated": "~4.1.1", "react-native-gesture-handler": "~2.28.0"질문 2. Babel 설정 위해 Cache 초기화 하는 부분도 위에 질문1이 순서대로 정상적으로 진행이 되지 않아스킵했는데 babel.config.js에 플러그인 문구부터 저장한 뒤 바벨 설정 캐시초기화 하는 것이 옳지요? 질문 3102강 시작부터 ~ 18분 56초 까지 타이핑한 grab-market-mobile의 App.js소스 내용아래와 같은데 이것을 실행하면 사진과 같이 안드로이드 스튜디오(runtime not ready)에서 에러 발생 아래 App.js 는 강의 전체 완성본 소스가 아니라 에러가 난 시점까지의 소스 입니다질문4->여기서 Carousel 부분 살펴보면 아래 App.js 소스에서 아래와 같이 작성하는 것 맞나요?만약 아래 작성 소스가 다르면 어떻게 작성 해야하는지 댓글에 소스 적어주세요<Carouseldata={banners}width={Dimensions.get("window").width} height={200}autoPlay={true}renderItem={(obj)=>{ return( <TouchableOpacity> <Imagesource={{uri:obj.item.imageUrl}} /> </TouchableOpacity> ) }} />  import { StatusBar } from "expo-status-bar"; import React from "react"; import { StyleSheet, Text, View, Image, ScrollView, Dimensions, TouchableOpacity } 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"; import Carousel from "react-native-reanimated-carousel"; 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)=>{ setProducts(result.data.products); }).catch((error)=>{ console.error(error); }) 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} renderItem={(obj)=>{ return( <TouchableOpacity> <Image source={{uri : obj.item.imageUrl}} /> </TouchableOpacity> ) }} /> <Text style={styles.headline}>판매되는 상품들</Text> <View style={styles.productList}> { products.map((product, index)=>{ return (<View style={styles.productCard} key={product.id}> {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 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 }, productBlur : { position: 'absolute', top: 0, bottom: 0, right: 0, left: 0, backgroundColor: "#ffffffaa", zIndex: 999, }, }); 에러 해결 차근차근 알려주셨으면 좋겠습니다---------------------------------------------------------------------------------------------질문 5 babel.config.js 없기에 프로젝트 루트에 파일을 직접 생성하고 module.exports = {presets: ['babel-preset-expo'],plugins: ['react-native-reanimated/plugin'],};위 소스입력 후 저장 완료 후 캐시 초기화를 위해 expo start -c 까지 차례대로 수행 후 ngrok과 모바일/서버로 연동 후 결과가 위 버전 에러와 다르게 새로운 에러가 발생했습니다어떻게 해결하죠? 질문6 아래 게시글 답변대로 질문 2까지 수행 하니 아래와 같은 에러가 발생질문7 아래게시글 답변에 질문 3 및 3-1은 하라는대로 실행해보면 에러가 발생할까 실행을 안했는데 3개를 입력해 줘도 괜찮은건가요?명령어 1: npm uninstall react-native-reanimated-carousel react-native-reanimated명령어 2:npm install react-native-reanimated-carousel@3.3.0 react-native-reanimated@^2.0.0명령어 3:expo install react-native-gesture-handler질문8 잘 되던 안드로이드 스튜디오가 로딩을 왜 못할까요?  

해당 강의대로 진행하면 잘 안됩니다ㅠㅠ일단 Aurora and RDS로 진행했습니다.지금 날짜로 AWS에 Amazon RDS가 없더라구요그래서 문제가 있는지는 잘모르겠습니다.1. 현재 package.json 명령어에서 dist/main이 아닌 dist/main.js로 해야 합니다.이거 왜그런지 모르겠네요보안 그룹을 설정해줘야 합니다.사용자 지정 TCP 포트 3000 으로 열어줘야 합니다.3. RDS 보안그룹 문제어떤 분이 사용자 지정 TCP 해서 포트 3030을 추가해서 해결했다고 하는데 저는 잘모르겠습니다.아래 에러가 나타나는 경우1|main | [Nest] 6957 - 12/18/2025, 2:25:35 PM ERROR [TypeOrmModule] Unable to connect to the database. Retrying (7)... 1|main | error: no pg_hba.conf entry for host "172.31.32.15", user "mymap", database "mymap", no encryptionapp.module.ts에 아래 코드 추가TypeOrmModule.forRoot({ type:'postgres', host: process.env.DB_HOST, port:5432, username: process.env.DB_USER, password: process.env.DB_PASSWORD, database: process.env.DB_NAME, ssl: { rejectUnauthorized:false, }, // 추가 })왜 추가해야하는지는 아직 자세히 모릅니다.그러면 아래 에러가 뜹니다.error: database "mymap" does not exist그럼 아래 과정 수행해야 합니다.6. 이렇게 하면 아마도 잘 될 겁니다..ㅠ만약에 pgAdmin에 연결해서 보고 싶으면 구글링해서 하시면 되는데 중요한 건 보안 그룹에서 인바운드 규칙 추가하는 것(PostgreSQL/TCP/5432/0.0.0.0/0)과RDS 퍼블릭 엑세스가 "예"로 되어있어야 하는 것만 알아주시면 됩니다.사실 여쭤보고 싶은 것 없지만 혹시나 보신다면 위 과정에서 문제될 건 없는지 알려주시면 감사하겠습니다!

ellipsis-vertical 클릭시강의와 같이 실제 아이폰 actionsheet 처럼 보이지 않고 다른 style이 입혀진듯하게 보이고있습니다.에러코드는 없습니다. 노드 : 20.19.6시뮬레이터 : iOS 26.2ReactNative : 0.81.5  작업중인 시뮬레이터 화면  강의 시뮬레이터 화면  import { colors } from "@/constants"; import useAuth from "@/hooks/queries/useAuth"; import type { Post } from "@/types"; import { useActionSheet } from "@expo/react-native-action-sheet"; import { Ionicons, MaterialCommunityIcons, Octicons } from "@expo/vector-icons"; import React from "react"; import { Pressable, StyleSheet, Text, View } from "react-native"; import Profile from "./Profile"; interface FeedItemProps { post: Post; } function FeedItem({ post }: FeedItemProps) { const { auth } = useAuth(); const likeUsers = post.likes?.map((like) => Number(like.userId)); const isLiked = likeUsers?.includes(Number(auth.id)); const { showActionSheetWithOptions } = useActionSheet(); const handlePressOption = () => { const options = ["삭제", "수정", "취소"]; showActionSheetWithOptions({ options }, (selectedIndex?: number) => { console.log("selectedIndex", selectedIndex); switch (selectedIndex) { case 0: //삭제 break; case 1: //수정 break; case 2: break; default: break; } }); }; return ( <View style={styles.container}> <View style={styles.contentContainer}> <Profile imageUri={post.author.imageUri} nickname={post.author.nickname} createdAt={post.createdAt} onPress={() => {}} option={ auth.id === post.author.id && ( <Ionicons name="ellipsis-vertical" size={24} color={colors.BLACK} onPress={handlePressOption} /> ) } /> <Text style={styles.title}>{post.title}</Text> {/* numberOfLines 게시글 내용 3줄까지만 보이게 */} <Text numberOfLines={3} style={styles.description}> {post.description} </Text> </View> <View style={styles.menuContainer}> <Pressable style={styles.menu}> <Octicons name={isLiked ? "heart-fill" : "heart"} size={16} color={isLiked ? colors.ORANGE_600 : colors.BLACK} /> <Text style={isLiked ? styles.activeMenuText : styles.menuText}> {post.likes.length || "좋아요"} </Text> </Pressable> <Pressable style={styles.menu}> <MaterialCommunityIcons name="comment-processing-outline" size={16} color={colors.BLACK} /> <Text style={styles.menuText}>{post.commentCount || "댓글"}</Text> </Pressable> <Pressable style={styles.menu}> <Ionicons name="eye-outline" size={16} color={colors.BLACK} /> <Text style={styles.menuText}>{post.viewCount}</Text> </Pressable> </View> </View> ); } const styles = StyleSheet.create({ container: { backgroundColor: colors.WHITE, }, contentContainer: { padding: 16, }, menuContainer: { flexDirection: "row", alignItems: "center", justifyContent: "space-around", borderTopColor: colors.GRAY_300, borderTopWidth: StyleSheet.hairlineWidth, }, title: { fontSize: 18, color: colors.BLACK, fontWeight: "600", marginVertical: 8, }, description: { fontSize: 16, color: colors.BLACK, marginBottom: 14, }, menu: { flexDirection: "row", alignItems: "center", justifyContent: "center", paddingVertical: 16, width: "33%", gap: 4, }, menuText: { fontSize: 14, color: colors.GRAY_700, }, activeMenuText: { fontWeight: "500", color: colors.ORANGE_600, }, }); export default FeedItem;    import queryClient from "@/api/queryClient"; import useAuth from "@/hooks/queries/useAuth"; import { ActionSheetProvider } from "@expo/react-native-action-sheet"; import { QueryClientProvider } from "@tanstack/react-query"; import { Stack } from "expo-router"; import { useEffect } from "react"; import "react-native-reanimated"; import Toast from "react-native-toast-message"; export const unstable_settings = { anchor: "(tabs)", }; export default function RootLayout() { return ( <ActionSheetProvider> <QueryClientProvider client={queryClient}> <RootNavigator /> <Toast /> </QueryClientProvider> </ActionSheetProvider> ); } function RootNavigator() { const { auth } = useAuth(); useEffect(() => { auth.id && Toast.show({ type: "success", text1: `${auth.nickname ?? "회원"}님 환영합니다!`, }); }, [auth.id]); return ( <Stack> <Stack.Screen name="(tabs)" options={{ headerShown: false }} /> <Stack.Screen name="auth" options={{ headerShown: false }} /> <Stack.Screen name="post" options={{ headerShown: false }} /> <Stack.Screen name="modal" options={{ presentation: "modal", title: "Modal" }} /> </Stack> ); }