묻고 답해요
161만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
미해결아바타 커뮤니티앱 만들기 (React Native Expo)
텍스트가 다 상단위로 올라가있는데 어떻게 해야할까요?
강의 내용을 따라하는데저같은경우emulator : Pixel_9_Proexpo version : 54.0.12입니다.
-
해결됨비전공자를 위한 진짜 입문 올인원 개발 부트캠프
그랩님,[꼭] 답변 부탁드립니다.
*먼저 이 질문의 글을 그랩님께서 보신다면, [꼭][[꼭] 그랩님, 답변 부탁드립니다], Failed to load resource: the server responded with a status of 404 (Not Found) 상품 상세 페이지 질문입니다.https://inf.run/FB4N9링크부터 본 뒤 답변을 그 게시물에 해 주신 후이 질문 글 아래에도 답변을 부탁 드립니다.그랩님, 좋은 강의 잘 듣고 있습니다.다름이 아니라, 아래 질문글에서 단 하나도 수정한 것 없이 몇일 뒤 재부팅만 해주었는데요, VS CODE에서 실행을 해주면 아래와 같이 에러도 줄어들어들었습니다.그리고 위 그림에서 축구공을 누르면 '상품 상세 페이지'가 아무리 기다려도 뜨지 않고 오른쪽에 에러가 발생합니다. 에러 발생 스샷 아래 첨부 합니다.( 참고로 이전에는 상품 상세 페이지의 상품 정보를 받고 있습니다...가 에러 없이 내용을 잘 불러왔었습니다.그런데 왜 지금은 아무리 기다려도 내용을 불러오지 못하는 이유를 모르겠습니다. )오른쪽에 에러를 해결하여상품 정보를 받고 있습니다... 내용이 불러오게 하려면 어떻게 해야 하나요?-------------------------------------------------------------------------------------------------또한 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]사진 첨부해 봅니다.어떻게 해야 이 모든 에러를 해결 할 수 있을지에 대해 자세한 답변 부탁 드립니다.
-
미해결아바타 커뮤니티앱 만들기 (React Native Expo)
Axios Network error...
❗질문 작성시 꼭 참고해주세요에러 메세지에서 단서를 찾을 수 있는 경우가 많습니다. 에러 메세지를 읽고 한번 검색해보시는것을 추천드립니다.질문글을 작성하실때는, 현재 문제(또는 에러)와 코드나 github을 첨부해주세요.개발중인 OS, ReactNative, Node 버전 등의 개발환경을 알려주셔야합니다.에러메세지는 일부분이 아닌 전체 상황을 올려주세요. 일부만 보여주시면 답변이 어렵습니다.에러 잘라서 올리시면 안됩니다!(에러 일부만 자르거나 일부만 복사하지말아주세요) 윈도우 컴에서 코드 실행시키고 아이폰에서 expo app으로 실습하고 있는데 db에도 들어가지 않습니다. 뭐가 문제인지 모르겠어요
-
미해결React Native with Expo: 제로초에게 제대로 배우기
.
.
-
해결됨[리뉴얼] 맛집 지도앱 만들기 (React Native & NestJS)
10월 삭제 예정인 강의는 이유를 알 수 있을까요?
❗질문 작성시 꼭 참고해주세요에러 메세지에서 단서를 찾을 수 있는 경우가 많습니다. 에러 메세지를 읽고 한번 검색해보시는것을 추천드립니다.질문글을 작성하실때는, 현재 문제(또는 에러)와 코드나 github을 첨부해주세요.개발중인 OS, ReactNative, Node 버전 등의 개발환경을 알려주셔야합니다.에러메세지는 일부분이 아닌 전체 상황을 올려주세요. 일부만 보여주시면 답변이 어렵습니다. (에러 일부만 자르거나 일부만 복사하지말아주세요) 10월 삭제 예정인 강의는 이유를 알 수 있을까요?
-
미해결React Native with Expo: 제로초에게 제대로 배우기
.
.
-
미해결React Native with Expo: 제로초에게 제대로 배우기
.
.
-
미해결아바타 커뮤니티앱 만들기 (React Native Expo)
강의는 52버전인데 expo가 현재 54버전이에요
❗질문 작성시 꼭 참고해주세요에러 메세지에서 단서를 찾을 수 있는 경우가 많습니다. 에러 메세지를 읽고 한번 검색해보시는것을 추천드립니다.질문글을 작성하실때는, 현재 문제(또는 에러)와 코드나 github을 첨부해주세요.개발중인 OS, ReactNative, Node 버전 등의 개발환경을 알려주셔야합니다.에러메세지는 일부분이 아닌 전체 상황을 올려주세요. 일부만 보여주시면 답변이 어렵습니다.에러 잘라서 올리시면 안됩니다!(에러 일부만 자르거나 일부만 복사하지말아주세요) OS는 윈도우 사용중이고 expo go 앱을 설치해서 실행하려고 보니 iOS 앱은 52버전으로 사용할 수가 없어서 프로젝트를 54로 올려서 쓰라는데, 에뮬레이터말고 실 iOS에서 사용하려면 해당 프로젝트 어떻게 업데이트 해야하는지 방법 알 수 있을까요?
-
미해결[리뉴얼] 맛집 지도앱 만들기 (React Native & NestJS)
캘린더 개발 후에 navigation 에 대해서 궁금한 점이 있습니다.
❗질문 작성시 꼭 참고해주세요에러 메세지에서 단서를 찾을 수 있는 경우가 많습니다. 에러 메세지를 읽고 한번 검색해보시는것을 추천드립니다.질문글을 작성하실때는, 현재 문제(또는 에러)와 코드나 github을 첨부해주세요.개발중인 OS, ReactNative, Node 버전 등의 개발환경을 알려주셔야합니다.에러메세지는 일부분이 아닌 전체 상황을 올려주세요. 일부만 보여주시면 답변이 어렵습니다. (에러 일부만 자르거나 일부만 복사하지말아주세요) 캘린더에서 게시글을 선택을 하면 navigation.navigate('Feed', { screen: 'FeedDetail', params: { id: postId }, initial: false, }); 이렇게 Feed 스택을 통해서 Feed 상세 스크린트로 이동하잖아요. 그래서 클릭할 때보면 캘린더 위에 Feed 목록 그 위에 Detail이 쌓이는 것을 확인하였습니다. 다만 게시글 상세에서 뒤로가기 했을 때 의도한 경로는 캘린더의 다시 그 상태로 남아아할텐데 그렇지 않고 목록으로 가서 어떻게 해야하는지 궁금합니다.
-
미해결아바타 커뮤니티앱 만들기 (React Native Expo)
[TIP] SafeAreaView 사용할 때마다 자꾸 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
-
미해결아바타 커뮤니티앱 만들기 (React Native Expo)
키보드 이슈 관련 해결 질문
윈도우+안드로이드 환경에서 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에 해당하는 공간이 왜 필요한지 질문 드립니다.
-
미해결React Native with Expo: 제로초에게 제대로 배우기
강의속 PanResponder.create 부분의 코드가 GitHub 코드와 다름
강의 중에는 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) => { ...
-
해결됨웹 개발자의 연봉을 올려주는 하이브리드앱 with Expo 프레임워크
웹 배포 시에 RN으로 만든 네비게이션은 어떻게 처리하나요?
React Native에서 바텀 네비게이션을 만들었다면,웹에서는 바텀 네비게이션이 나오게하려면 어떻게 해야하나요?
-
미해결[리뉴얼] 맛집 지도앱 만들기 (React Native & NestJS)
안드로이드 위치 권한 이슈 2가지 문의
❗질문 작성시 꼭 참고해주세요에러 메세지에서 단서를 찾을 수 있는 경우가 많습니다. 에러 메세지를 읽고 한번 검색해보시는것을 추천드립니다.질문글을 작성하실때는, 현재 문제(또는 에러)와 코드나 github을 첨부해주세요.개발중인 OS, ReactNative, Node 버전 등의 개발환경을 알려주셔야합니다.에러메세지는 일부분이 아닌 전체 상황을 올려주세요. 일부만 보여주시면 답변이 어렵습니다. (에러 일부만 자르거나 일부만 복사하지말아주세요) 안드로이드의 경우 앱을 열어놓고 설정화면으로 넘어간 다음으로 경로 권한을 내리고 다시 앱으로 돌아가면 앱이 재실행되어 useAppState 가 초기화되어 의도한 동작을 하지 않습니다. 1번의 경우에 앱을 다시 백그라운드에 두고 다시 앱을 켜면 의도한 동작이 실행되는데 이상하게 getCurrentPosition 의 에러 콜백이 무한으로 돕니다....
-
미해결React Native with Expo: 제로초에게 제대로 배우기
.
.
-
미해결[리뉴얼] 맛집 지도앱 만들기 (React Native & NestJS)
지도가 보이려면 음.. 작성해주신 스타일과 다르게
❗질문 작성시 꼭 참고해주세요에러 메세지에서 단서를 찾을 수 있는 경우가 많습니다. 에러 메세지를 읽고 한번 검색해보시는것을 추천드립니다.질문글을 작성하실때는, 현재 문제(또는 에러)와 코드나 github을 첨부해주세요.개발중인 OS, ReactNative, Node 버전 등의 개발환경을 알려주셔야합니다.에러메세지는 일부분이 아닌 전체 상황을 올려주세요. 일부만 보여주시면 답변이 어렵습니다. (에러 일부만 자르거나 일부만 복사하지말아주세요) 작성해주신 스타일은 flex:1 만 처리해도 지도가 나오셨는데 직접 해볼 때에는 flex:1 로는 안되고 container 추가한 후에 height 100%에 MapView에 StyleSheet.absoluteFillObject 추가해야 보이네요 ㅠ! 스타일이라 뭐 크게 이슈는 없어보이긴하는데.. 앞으로 강의듣는데 지장없겠쬬? ㅎㅎ
-
미해결[리뉴얼] 맛집 지도앱 만들기 (React Native & NestJS)
제대로 설치한거같은데 안드로이드랑 ios 둘다 앱실행이 안되는것같아요
❗질문 작성시 꼭 참고해주세요에러 메세지에서 단서를 찾을 수 있는 경우가 많습니다. 에러 메세지를 읽고 한번 검색해보시는것을 추천드립니다.질문글을 작성하실때는, 현재 문제(또는 에러)와 코드나 github을 첨부해주세요.개발중인 OS, ReactNative, Node 버전 등의 개발환경을 알려주셔야합니다.에러메세지는 일부분이 아닌 전체 상황을 올려주세요. 일부만 보여주시면 답변이 어렵습니다. (에러 일부만 자르거나 일부만 복사하지말아주세요) [ios실행시][안드로이드 실행시]클로드에게 에러 물어보니 다시 재설치하라는 말만 나와서요 ;; 뭐가 문젠지 혹시 알수있을까요 ? node version : v24.8.0ProductName: macOS ProductVersion: 15.7 BuildVersion: 24G222Xcode 26.0 Build version 17A324
-
미해결[리뉴얼] 맛집 지도앱 만들기 (React Native & NestJS)
강의 내용을 보면 전체적으로 function 함수 키워드를 사용하시는데
react-native에서는 arrow 함수는 지양하나요?
-
미해결[리뉴얼] 맛집 지도앱 만들기 (React Native & NestJS)
강의 3-9 에서 useGetRefreshToken 훅 안에 즉시 함수로 처리하는 이유가 궁금합니다!
아직 앞강의를 보진 않았지만 즉시 함수로 처리하셨던 의도가 궁금합니다!
-
미해결아바타 커뮤니티앱 만들기 (React Native Expo)
android header를 ios처럼 바꾸기
강의에서는 패딩으로 간격만 주셨지만 전 통일성을 주고 싶어 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> ); } 그 다음 안드로이드일 때만 헤더 텍스트를 중아에 오도록 지정했습니다!