❗질문 작성시 꼭 참고해주세요에러 메세지에서 단서를 찾을 수 있는 경우가 많습니다. 에러 메세지를 읽고 한번 검색해보시는것을 추천드립니다.질문글을 작성하실때는, 현재 문제(또는 에러)와 코드나 github을 첨부해주세요.개발중인 OS, ReactNative, Node 버전 등의 개발환경을 알려주셔야합니다.에러메세지는 일부분이 아닌 전체 상황을 올려주세요. 일부만 보여주시면 답변이 어렵습니다. (에러 일부만 자르거나 일부만 복사하지말아주세요) 캘린더에서 게시글을 선택을 하면 navigation.navigate('Feed', { screen: 'FeedDetail', params: { id: postId }, initial: false, }); 이렇게 Feed 스택을 통해서 Feed 상세 스크린트로 이동하잖아요. 그래서 클릭할 때보면  캘린더 위에 Feed 목록 그 위에 Detail이 쌓이는 것을 확인하였습니다. 다만 게시글 상세에서 뒤로가기 했을 때 의도한 경로는 캘린더의 다시 그 상태로 남아아할텐데 그렇지 않고 목록으로 가서 어떻게 해야하는지 궁금합니다. 

SafeAreaView는 2025년 8월에 deprecated되었다고 합니다.. 그래서 다른 방법을 찾다가 해결법을 찾아서 블로그에 정리해두었습니다.저는 iPhone 16 Pro 시뮬레이터를 돌리기 때문에 다른 곳에서도 반영이 되는지는 잘 모르겠습니다. https://velog.io/@kuck523/SafeAreaView-%EC%97%86%EC%9D%B4-useSafeAreaInsets%EC%9C%BC%EB%A1%9C-ios-%EB%85%B8%EC%B9%98-%EB%8C%80%EC%9D%91%ED%95%98%EA%B8%B0

윈도우+안드로이드 환경에서 KeyboardAwareScrollView가 동작하지 않아 React Native 문서를 보고 KeyboardAvoidingView component를 사용하려고 시도 했습니다.import Button from "@/components/CustomButton"; import DescriptionInput from "@/components/DescriptionInput"; import TitleInput from "@/components/TitleInput"; import { useCreatePost } from "@/hooks/queries/useCreatePost"; import useKeyboardOffset from "@/hooks/useKeyboardOffset"; import { ImageUri } from "@/types"; import { zodResolver } from "@hookform/resolvers/zod"; import { useNavigation } from "expo-router"; import { useEffect } from "react"; import { FormProvider, useForm } from "react-hook-form"; import { KeyboardAvoidingView, ScrollView, StyleSheet } from "react-native"; import z from "zod"; export default function PostWriteScreen() { // ... const { isKeyboardShown, keyboardVerticalOffsetValue } = useKeyboardOffset(); // ... useEffect(() => { navigation.setOptions({ headerRight: () => ( <Button label="Save" size="medium" variant="standard" onPress={postForm.handleSubmit(onSubmit)} /> ), }); }); // ... return ( <FormProvider {...postForm}> <KeyboardAvoidingView behavior="padding" keyboardVerticalOffset={keyboardVerticalOffsetValue} enabled={isKeyboardShown} style={{ flex: 1 }} > <ScrollView style={styles.container} contentContainerStyle={styles.contentContainer} > <TitleInput /> <DescriptionInput /> <DescriptionInput /> <DescriptionInput /> <DescriptionInput /> </ScrollView> </KeyboardAvoidingView> </FormProvider> ); } const styles = StyleSheet.create({ container: { flex: 1, }, contentContainer: { flexGrow: 1, padding: 16, gap: 16, }, }); import { useEffect, useState } from "react"; import { Keyboard } from "react-native"; import { useSafeAreaInsets } from "react-native-safe-area-context"; export default function useKeyboardOffset() { const [isKeyboardShown, setIsKeyboardShown] = useState<boolean>(false); const insets = useSafeAreaInsets(); const verticalInsets = insets.top + insets.bottom; const keyboardVerticalOffsetValue = (Keyboard.metrics()?.height || 0) + verticalInsets + 50; useEffect(() => { const showSubscription = Keyboard.addListener("keyboardDidShow", () => { setIsKeyboardShown(true); }); const hideSubscription = Keyboard.addListener("keyboardDidHide", () => { setIsKeyboardShown(false); }); return () => { showSubscription.remove(); hideSubscription.remove(); }; }, []); return { isKeyboardShown, keyboardVerticalOffsetValue }; }단순히 Keyboard 문서를 확인하니 event listener 부분이 있어 그걸 참고하여 metric().height 만큼 offset을 주고 비슷하게 동작은 하도록 작성했습니다. 추가적으로, 아랫 부분이 조금 짤려서 임의로 50을 추가했습니다.이미 비슷한 질문이 올라 왔길래 '안드로이드 KeyboardAwareScrollView 이슈 수정 & 키보드 상태 커스텀 훅 만들기' 강의 확인하고 훅으로만 분리했는데 강의 중 상세 코드는 다르기도 하고 iOS 환경에서는 테스트를 할 수가 없어서 이런 식으로 짜도 되는지, 그리고 위에서 언급한 50에 해당하는 공간이 왜 필요한지 질문 드립니다.

강의 중에는 PanResponder.create에 들어가는 객체의 속성으로 onStartShouldSetPanResponder를 소개하지만, 작동이 안되서 Github 코드를 살펴보니 onMoveShouldSetPanResponder로 해야 함const panResponderRef = useRef( PanResponder.create({ onStartShouldSetPanResponder: () => true, // Pan 작업에 반응하도록 설정 onPanResponderMove: (event, gestureState) => { ... 수정 후const panResponderRef = useRef( PanResponder.create({ onMoveShouldSetPanResponder: () => true, // Pan 작업에 반응하도록 설정 onPanResponderMove: (event, gestureState) => { ...

React Native에서 바텀 네비게이션을 만들었다면,웹에서는 바텀 네비게이션이 나오게하려면 어떻게 해야하나요?

❗질문 작성시 꼭 참고해주세요에러 메세지에서 단서를 찾을 수 있는 경우가 많습니다. 에러 메세지를 읽고 한번 검색해보시는것을 추천드립니다.질문글을 작성하실때는, 현재 문제(또는 에러)와 코드나 github을 첨부해주세요.개발중인 OS, ReactNative, Node 버전 등의 개발환경을 알려주셔야합니다.에러메세지는 일부분이 아닌 전체 상황을 올려주세요. 일부만 보여주시면 답변이 어렵습니다. (에러 일부만 자르거나 일부만 복사하지말아주세요) 안드로이드의 경우 앱을 열어놓고 설정화면으로 넘어간 다음으로 경로 권한을 내리고 다시 앱으로 돌아가면 앱이 재실행되어 useAppState 가 초기화되어 의도한 동작을 하지 않습니다. 1번의 경우에 앱을 다시 백그라운드에 두고 다시 앱을 켜면 의도한 동작이 실행되는데 이상하게 getCurrentPosition 의 에러 콜백이 무한으로 돕니다....

.

❗질문 작성시 꼭 참고해주세요에러 메세지에서 단서를 찾을 수 있는 경우가 많습니다. 에러 메세지를 읽고 한번 검색해보시는것을 추천드립니다.질문글을 작성하실때는, 현재 문제(또는 에러)와 코드나 github을 첨부해주세요.개발중인 OS, ReactNative, Node 버전 등의 개발환경을 알려주셔야합니다.에러메세지는 일부분이 아닌 전체 상황을 올려주세요. 일부만 보여주시면 답변이 어렵습니다. (에러 일부만 자르거나 일부만 복사하지말아주세요) 작성해주신 스타일은 flex:1 만 처리해도 지도가 나오셨는데 직접 해볼 때에는 flex:1 로는 안되고 container 추가한 후에 height 100%에 MapView에 StyleSheet.absoluteFillObject 추가해야 보이네요 ㅠ! 스타일이라 뭐 크게 이슈는 없어보이긴하는데.. 앞으로 강의듣는데 지장없겠쬬? ㅎㅎ

❗질문 작성시 꼭 참고해주세요에러 메세지에서 단서를 찾을 수 있는 경우가 많습니다. 에러 메세지를 읽고 한번 검색해보시는것을 추천드립니다.질문글을 작성하실때는, 현재 문제(또는 에러)와 코드나 github을 첨부해주세요.개발중인 OS, ReactNative, Node 버전 등의 개발환경을 알려주셔야합니다.에러메세지는 일부분이 아닌 전체 상황을 올려주세요. 일부만 보여주시면 답변이 어렵습니다. (에러 일부만 자르거나 일부만 복사하지말아주세요) [ios실행시][안드로이드 실행시]클로드에게 에러 물어보니 다시 재설치하라는 말만 나와서요 ;; 뭐가 문젠지 혹시 알수있을까요 ? node version : v24.8.0ProductName: macOS ProductVersion: 15.7 BuildVersion: 24G222Xcode 26.0 Build version 17A324

react-native에서는 arrow 함수는 지양하나요?

아직 앞강의를 보진 않았지만 즉시 함수로 처리하셨던 의도가 궁금합니다!

강의에서는 패딩으로 간격만 주셨지만 전 통일성을 주고 싶어 ios처럼 android header의 title도 중앙에 오게 하고 싶어 제가 한 방법을 공유하기 위해 글 작성합니다..!일단 android일때만 headerTitleAlign 기능을 주기 위해 constants폴더에 플랫폼에 대한 플래그 변수를 만들었습니다.// /constants/platform.ts import { Platform } from "react-native"; export const isAndroid = Platform.OS === "android"; export const isIOS = Platform.OS === "ios"; // /app/auth/_layout.ts import { colors } from "@/constants"; import { isAndroid } from "@/constants/platform"; import Foundation from "@expo/vector-icons/Foundation"; import { Link, Stack } from "expo-router"; export default function AuthLayout() { return ( <Stack screenOptions={{ headerTintColor: colors.BLACK, contentStyle: { backgroundColor: colors.WHITE, }, }} > <Stack.Screen name="index" options={{ title: "로그인", headerShown: true, headerStyle: {}, ...(isAndroid && { headerTitleAlign: "center" }), headerLeft: () => ( <Link href={"/"} replace style={{ paddingRight: 5 }}> <Foundation name="home" size={28} color={"black"} /> </Link> ), }} /> </Stack> ); } 그 다음 안드로이드일 때만 헤더 텍스트를 중아에 오도록 지정했습니다!

버전 차이 (RN StyleSheet, Expo)의 문제거나 안드로이드의 문제인지는 모르겠지만 강의 중 코드로 작성하면 아래와 같은 문제가 나옵니다. Pressable과 Text에 backgroundColor와 color가 스타일링이 되는 방식이나 Button 요소에 opacity가 적용이 되지 않는 듯한 이슈인 것 같아서 아래와 같이 해결했습니다. return ( <Pressable style={({ pressed }) => [ styles.container, styles[size], { backgroundColor: styles[variant].backgroundColor }, pressed && styles.pressed, ]} {...props} > <Text style={[styles.text, { color: styles[variant].color }]}> {label} </Text> </Pressable> ); ... const styles = StyleSheet.create({ container: { borderRadius: 8, justifyContent: "center", alignItems: "center", }, text: { fontSize: 14, fontWeight: "bold", }, // size large: { width: "100%", height: 44, }, medium: {}, // variant filled: { backgroundColor: colors.ORANGE_600, color: colors.WHITE, }, // Pressable props pressed: { opacity: 0.8, }, });저는 강의 코드 대신 이렇게 해서 해결은 되었는데 혹시 이 이슈가 일어나는 이유와 앞으로 코드 복잡도가 어떻게 될 지는 모르겠지만 CustomButton이 그렇게 복잡해지진 않을 것 같은데 방법이 최선일지, 아니면 더 개선할 점이 있는지 궁금합니다.

❗질문 작성시 꼭 참고해주세요에러 메세지에서 단서를 찾을 수 있는 경우가 많습니다. 에러 메세지를 읽고 한번 검색해보시는것을 추천드립니다.질문글을 작성하실때는, 현재 문제(또는 에러)와 코드나 github을 첨부해주세요.개발중인 OS, ReactNative, Node 버전 등의 개발환경을 알려주셔야합니다.에러메세지는 일부분이 아닌 전체 상황을 올려주세요. 일부만 보여주시면 답변이 어렵습니다.에러 잘라서 올리시면 안됩니다!(에러 일부만 자르거나 일부만 복사하지말아주세요) OS: MACReactNative: › Using Expo Go › Press s │ switch to development build › Press a │ open Android › Press i │ open iOS simulator › Press w │ open web › Press j │ open debugger › Press r │ reload app › Press m │ toggle menu › shift+m │ more tools › Press o │ open project code in your editor › Press ? │ show all commands Logs for your project will appear below. Press Ctrl+C to exit. › Opening on Android... › Opening emulator Medium_Phone_API_36.0 Error: could not connect to TCP port 5554: Connection refused이런 오류가 생깁니다 ㅠㅠ어떻게 해야 해결이 되는지 궁금합니다!

❗질문 작성시 꼭 참고해주세요에러 메세지에서 단서를 찾을 수 있는 경우가 많습니다. 에러 메세지를 읽고 한번 검색해보시는것을 추천드립니다.질문글을 작성하실때는, 현재 문제(또는 에러)와 코드나 github을 첨부해주세요.개발중인 OS, ReactNative, Node 버전 등의 개발환경을 알려주셔야합니다.에러메세지는 일부분이 아닌 전체 상황을 올려주세요. 일부만 보여주시면 답변이 어렵습니다. (에러 일부만 자르거나 일부만 복사하지말아주세요) 안녕하세요. 우면 R&D 사내 입니다. figma.com 에서 접속후 .fig 파일 import 가 진행되지 않습니다. 아마도 사내에서 파일 업로드를 막은 듯 한데요. 혹시 사외에서 교육 진행이 가능한가요? 감사합니다.

expo 로 돌아가고 있는거 확인한 상태에서, uri scheme 여는 명령어를 입력해도 여전히 에러가 발생한는데 어떤 부분을 확인해봐야 할까요?  

  "dependencies": { "expo": "^54.0.0", "expo-font": "~14.0.8", "expo-router": "~6.0.3", "expo-secure-store": "~15.0.7", "react": "18.3.1", "react-dom": "^18.3.1", "react-native": "^0.76.9" }, "devDependencies": { "@react-native/gradle-plugin": "^0.76.0", "@types/react": "~18.3.12", "typescript": "^5.3.3" } > Could not resolve expo.modules:expo-module-gradle-plugin:1.0.0. Required by: root project : > Could not resolve expo.modules:expo-module-gradle-plugin:1.0.0. > Could not get resource 'https://repo.expo.dev/maven/expo/modules/expo-module-gradle-plugin/1.0.0/expo-module-gradle-plugin-1.0.0.pom'. > Could not GET 'https://repo.expo.dev/maven/expo/modules/expo-module-gradle-plugin/1.0.0/expo-module-gradle-plugin-1.0.0.pom'. > The server may not support the client's requested TLS protocol versions: (TLSv1.2). You may need to configure the client to allow other protocols to be used. For more on this, please refer to https://docs.gradle.org/8.10.2/userguide/build_environment.html#sec:gradle_system_properties in the Gradle documentation.npx expo run 하면 위처럼 에러가나옵니다 찾아보니 최근데 생기는 에러들인것같은데 별로 쌓인데이터도 없고 검색햇을때 나오는것들도 없어서 많이힘드네용

좋은 강의 잘 듣고 있습니다.다름이아니라, 이전 강의들에 에러들을 다 해결해서 80강을 듣기 전 까지 상품 상세 페이지 구현 후,상품 상세 페이지 보기까지 에러 없이 잘 되던 것이80강을 듣고 코드를 작성 후 부터 '상품 상세 페이지 ' 가 뜨지를 않고 있습니다.아래 사진 첨부 합니다. 사진 1. 아래 사진으로 DB Browser for SQLITE에서 이미지를 작성 해 준 뒤 일단 이미지는 잘 받아 옵니다. 참고로, 사진 1 은 VS CODE 폴더(GRAB-MARKET-SERVER)에서 server.js에 소스 order : [['createdAt','DESC']], 입력을 일단 개인적인 이유로 빼었기 떄문에, 판매되는 상품에 순서가바뀌어 있습니다.order : [['createdAt','DESC']] 을 넣게 된다면 상품 순서는 축구공,농구공,키보드,키보드로 화면에 나타나는데요, 아래 사진과 같아요.제일 먼저 축구공을 누르게 되면 localhost:3000/products/4라고 뜨기에요, 원래 제대로 되려면,축구공을 누르면 localhost:3000/products/1로 되어야 하는거 아닌가요? 그리고 위 첨부한 사진 보면왼쪽과 같이 에러가 발생하는데요, 어떻게 해야 제대로 작동 할까요?그리고 잘못 소스코드를 입력하고 실행하다보니 키보드가 2개 생성 되었습니다만, 이것을 하나만 남기고 싶은데어떻게 해야 하는지요? -->DB Browser for SQLite에서 삭제하는 방법이 있나요?위에 사진 1에서 가장 마지막인 4번째의 축구공을 누르면, 위와 그리고 아래와 같은 에러가 발생하며 상품 정보 상세 페이지.즉 상품 정보를 받고 있습니다... 만 그대로 멈춰있고 이전 강의 챕터에서 만든 것(상품상세페이지) 불러올 수 없게 되어 질문을 남깁니다. 즉 상품 정보 상세 페이지가 잘 만들어져서 그대로 에러 없이 잘 해왔는데, 에러가 나서 여쭈어봅니다.-추가 질문 : 상품 정보를 받고 있습니다... 페이지 경우는 POSTMAN 가짜 서버(=mock서버)에서랑 관련이 깊은 건가요? POSTMAN(=mock서버)에서 그랩님의 강의를 따라올때, 다른점들이 몇가지 있었는데요(몇가지 다른점은 에러가 있었습니다.), 그래서 위 에러가 발생하는 건가요? 다른점이 발생한 경우라면 포스트맨 에러 스샷을 추가로 올리겠습니다. 그럼 봐주실 수 있나요?아니라면 POSTMAN(=mock서버)과 관련 없이 우리는 Node 서버를 구축 했기에,Mock서버인 POSTMAN과 전혀 상관이 없는 건가요?[상품 상세 페이지] 불러오지 못하는 것은 만일 Node 서버의 문제이지, Postman과 상관 없다면,node 서버측에서는 무엇을 고쳐주거나 어떤 소스를 작성해줘야 에러가 해결될까요? 더불어서 79강 강의 2분 56초 부터 3분 32초 보면, POSTMAN 테스트를 하는 부분이 나오는데, 여기서 아래 사진을 보면[왼쪽 메뉴 get product] Body 부분에서 그랩 강사님 화면과 다르게 뜨는데, 이것은 왜 그런건가요?어떻게 해야 http://localhost:8080/products/1 , http://localhost:8080/products/2 , http://localhost:8080/products/3 을 제대로 작동하게 할 수 있나요?  마지막으로 [참고 사진]으로 POSTMAN의 잘 작동하는 [get products]사진 첨부해 봅니다. 어떻게 해야 이 모든 에러를 해결 할 수 있을지에 대해 자세한 답변 부탁드립니다. 

질문 글을 올리려다가 방법을 찾고, 혹시 같은 상황이신 분이 있을지도 몰라서 공유합니다.빌드 환경에 Expo Go인지 development build인지 확인이 필요하더라구요... 저는 왜 안되는지 이것저것 삽질하며 살펴보다가 현재 환경이 Expo Go 환경이 아니라는 걸 알고 너무 허무했습니다 ㅠuri-scheme은 expo 환경만 테스트 되니까 development build 이신 경우에 s를 눌러서 Expo Go로 바꾸시면 됩니다!

안녕하세요 중첩 라우터와 그룹폴더의 활용 듣고있는데activity/replies가 [username]/replies로 빠져나가는 문제가 발생하고 있습니다어떻게 해결하면 될까요?