일단 위 화면까지는 PC에서 나오는데, Development servers에 링크를 클릭하면 아무 반응이 없는데, 어떻게 해야하는지 문의드립니다.그리고, 실제 안드로이드 폰에서 테스트시에도, 아래와 같이 홈화면에 아무것도 나오지 않고, 하단 메뉴만 노출되고, 내 프로필을 클릭하면 하단 이미지 두번째처럼 오류가 나고 있습니다. 어떻게 해결해야하는지 문의드립니다.  

강사님 해결 되었습니다! 글 삭제가 안보이네요..

18번째 줄에서 useEffect 같은 훅에서 호출한 게 아닌데 useScrollToTop()은 어떻게 트리거되어 동작하는지 궁금합니다. 6번째 줄에서 useScrollToTop() 훅은 "@react-navigation/native"에서 가져오고 있는데, "expo-router"와 같이 사용해도 되나요?

서버쪽 코드의 .env 파일을 보면 JWT이 기본적으로 20분으로 설정되어 있는 것을 보았습니다. 예를 들어 JWT이 만료가 되고 이어서 진행을 하게 된다면, AuthRoute에 해당되는 경로들을 클라이언트에서는 여전히 접근이 가능하지만 서버에서 400번대를 응답합니다. 일반적으로 앱을 사용했던 경험을 생각하면 앱의 세션은 웹에 비해서 매우 길거나 백엔드에 대한 지식은 충분하지 않아 모르겠지만, 백엔드에서 새로 접속시 연장을 하는 등의 방법이 생각 나는데요 이런 경우에 클라이언트에서는 어떻게 처리를 해야하는지 아니면 실무적으로는 어떻게 처리하는 지 궁금합니다. 혹시라도 추가로 검색해서 공부할 수 있는 키워드가 있다면 알려주실 수 있을까요?

강사님, npx expo start를 입력후, a를 선택하면, 아래와 같이 에러 메시지가 나옵니다. 아래 이미지와 같이 pixel 9 pro가 정상적으로 설치되어 있는데, 뭐가 잘못된건지 모르겠어서 문의드립니다.ㅠ› Opening on Android...CommandError: No Android connected device found, and no emulators could be started automatically.Connect a device or create an emulator (https://docs.expo.dev/workflow/android-studio-emulator).Then follow the instructions here to enable USB debugging:https://developer.android.com/studio/run/device.html#developer-device-options. If you are using Genymotion go to Settings -> ADB, select "Use custom Android SDK tools", and point it at your Android SDK directory. 

optimistic-updates#updating-a-single-todo 문서를 보면 useMutation - onError의 모든 parameter err, newPost (variables), onMutationResult, context와 onSettle의 모든 parameter를 사용해서 구현하는데, client를 queryClient를 가져와서 쓰는 강의 중 예제와, 문서 내의 내용으로 구현한 아래의 주석처리된 구현은 어떤 차이가 있을까요? onError: (err, newPost, context) => { queryClient.setQueryData( [queryKeys.POST, queryKeys.GET_POST, context?.newPost?.id], context?.previousPost, ); }, // onError: (err, newPost, onMutationResult, context) => { // context.client.setQueryData( // [ // queryKeys.POST, // queryKeys.GET_POST, // onMutationResult?.previousPost?.id, // ], // onMutationResult?.previousPost, // ); // }, onSettled: (data, error, variables, context) => { queryClient.invalidateQueries({ queryKey: [queryKeys.POST, queryKeys.GET_POST, variables], }); queryClient.invalidateQueries({ queryKey: [queryKeys.POST, queryKeys.GET_POSTS], }); }, // onSettled: (data, error, variables, onMutationResult, context) => { // context.client.invalidateQueries({ // queryKey: [queryKeys.POST, queryKeys.GET_POST, variables], // }); // context.client.invalidateQueries({ // queryKey: [queryKeys.POST, queryKeys.GET_POSTS], // }); // },a

ios 26부터 headerLeft 주위에 그림자가 생기고 클릭시 안에 내용이 커지는 효과가 생기는데 없앨 수 있는 방법이 있을까요? 열심히 검색해봐도 쉽지 않네요 ㅎㅎ,,

안녕하세요! 이제 절반 이상 수강중인 열혈 수강생입니다 !!  다름이 아니고, 올해, 어플 배포가 목표인데요 아바타 이미지는 저작권이 있기에 모두 제거하고 자체 제작으로 이미지 파일을 구성하여 다시 추가하려 합니다.  인강을 다 듣고 나서 제 아이디어를 첨가하고 아바타 이미지만 바꿔 출시해도 되는 부분일까요?

❗질문 작성시 꼭 참고해주세요에러 메세지에서 단서를 찾을 수 있는 경우가 많습니다. 에러 메세지를 읽고 한번 검색해보시는것을 추천드립니다.질문글을 작성하실때는, 현재 문제(또는 에러)와 코드나 github을 첨부해주세요.개발중인 OS, ReactNative, Node 버전 등의 개발환경을 알려주셔야합니다.에러메세지는 일부분이 아닌 전체 상황을 올려주세요. 일부만 보여주시면 답변이 어렵습니다.에러 잘라서 올리시면 안됩니다!(에러 일부만 자르거나 일부만 복사하지말아주세요)  코드 수정 시안드로이드 시뮬레이터는 자동 반영이 되는데,ios 시뮬레이터는 자동으로 반영이 안 됩니다..그리고 r 버튼 눌러서 reload app 하려하면No apps connected. Sending "reload" to all React Native apps failed. Make sure your app is running in the simulator or on a phone connected via USB.이렇게 나오네요.. 연결은 된 것 같은데 왜 그럴까요?  

강의 내용을 따라하는데저같은경우emulator : Pixel_9_Proexpo version : 54.0.12입니다.

❗질문 작성시 꼭 참고해주세요에러 메세지에서 단서를 찾을 수 있는 경우가 많습니다. 에러 메세지를 읽고 한번 검색해보시는것을 추천드립니다.질문글을 작성하실때는, 현재 문제(또는 에러)와 코드나 github을 첨부해주세요.개발중인 OS, ReactNative, Node 버전 등의 개발환경을 알려주셔야합니다.에러메세지는 일부분이 아닌 전체 상황을 올려주세요. 일부만 보여주시면 답변이 어렵습니다.에러 잘라서 올리시면 안됩니다!(에러 일부만 자르거나 일부만 복사하지말아주세요) 윈도우 컴에서 코드 실행시키고 아이폰에서 expo app으로 실습하고 있는데 db에도 들어가지 않습니다. 뭐가 문제인지 모르겠어요

❗질문 작성시 꼭 참고해주세요에러 메세지에서 단서를 찾을 수 있는 경우가 많습니다. 에러 메세지를 읽고 한번 검색해보시는것을 추천드립니다.질문글을 작성하실때는, 현재 문제(또는 에러)와 코드나 github을 첨부해주세요.개발중인 OS, ReactNative, Node 버전 등의 개발환경을 알려주셔야합니다.에러메세지는 일부분이 아닌 전체 상황을 올려주세요. 일부만 보여주시면 답변이 어렵습니다.에러 잘라서 올리시면 안됩니다!(에러 일부만 자르거나 일부만 복사하지말아주세요)  OS는 윈도우 사용중이고 expo go 앱을 설치해서 실행하려고 보니 iOS 앱은 52버전으로 사용할 수가 없어서 프로젝트를 54로 올려서 쓰라는데, 에뮬레이터말고 실 iOS에서 사용하려면 해당 프로젝트 어떻게 업데이트 해야하는지 방법 알 수 있을까요?

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에 해당하는 공간이 왜 필요한지 질문 드립니다.

강의에서는 패딩으로 간격만 주셨지만 전 통일성을 주고 싶어 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이런 오류가 생깁니다 ㅠㅠ어떻게 해야 해결이 되는지 궁금합니다!

import { SafeAreaView, useSafeAreaInsets, } from "react-native-safe-area-context"; // react-native-safe-area-context: 5.4.0강의 내용처럼 위 SafeAreaView를 사용할 경우 아래 이미지처럼 헤더 아래 부분이 넓어지는데요.iOSandroid <Stack.Screen name="[id]" options={{ headerShown: true,색상을 넣고 원인을 찾아보니 헤더가 true일때 헤더 크기만큼 아래 중복되서 넓어지는 것을 발견했어요.해결방법<SafeAreaView style={styles.container} edges={["bottom", "left", "right"]} >이렇게 edges 부분을 추가하시면 되요.https://github.com/AppAndFlow/react-native-safe-area-context/issues/650깃이슈로도 올라와 있는데 추후 버전 업데이트 되서 해결되거나 다른 좋은 방법이 있으신 분들은 댓글로 알려주세요.

안녕하세요 강사님 양질의 강의 재밌게 잘 수강중입니다! 푸시 알림 테스트 개발 단계까지 왔는데 IOS는 애플 개발자 멤버십에 가입을 해야해 과금이 부담되어 건너뛰었습니다.안드로이드 환경에서라도 테스트 해보고 싶어서 강의 따라가면서 빌드는 성공했습니다! 실제 안드로이드 기기는 가지고 있지 않아서 코드 에디터 상에서 npx expo start 명령어 후에 development build 모드인것도 확인하고 android 에뮬레이터에서 바로 앱이 실행이 되었습니다  이런 에러화면도 띄워지고 콘솔창에 실제 기기를 사용해 주세요 라는 에러가 잡혀서 실제 기기를 사용해야 하나 하고 깔끔히 포기하려 합니다실제 기기를 사용해야하는건지 또 다른 방법이 있는지 팁 부탁드려도 될까요? 강의에서는 에뮬레이터가 아닌 다른 걸 띄우신거 같은데 알려주시면 감사하겠습니다...!!❗질문 작성시 꼭 참고해주세요에러 메세지에서 단서를 찾을 수 있는 경우가 많습니다. 에러 메세지를 읽고 한번 검색해보시는것을 추천드립니다.질문글을 작성하실때는, 현재 문제(또는 에러)와 코드나 github을 첨부해주세요.개발중인 OS, ReactNative, Node 버전 등의 개발환경을 알려주셔야합니다.에러메세지는 일부분이 아닌 전체 상황을 올려주세요. 일부만 보여주시면 답변이 어렵습니다.에러 잘라서 올리시면 안됩니다!(에러 일부만 자르거나 일부만 복사하지말아주세요) 

import DescriptionInput from "@/components/DescriptionInput"; import TitleInput from "@/components/TitleInput"; import { FormProvider, useForm } from "react-hook-form"; import { StyleSheet } from "react-native"; import { KeyboardAwareScrollView } from "react-native-keyboard-aware-scroll-view"; type FormValues = { title: string; description: string; }; export default function PostWriteScreen() { const postForm = useForm<FormValues>({ defaultValues: { title: "", description: "", }, }); return ( <FormProvider {...postForm}> <KeyboardAwareScrollView contentContainerStyle={styles.container}> <TitleInput /> <DescriptionInput /> <DescriptionInput /> <DescriptionInput /> <DescriptionInput /> <DescriptionInput /> <DescriptionInput /> <DescriptionInput /> </KeyboardAwareScrollView> </FormProvider> ); } const styles = StyleSheet.create({ container: { margin: 16, gap: 16 }, }); KeyboardAwareScrollView를 써도 여전히 키보드가 입력창을 가리는데 이유가 뭔지 잘 모르겠습니다.