묻고 답해요
161만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
미해결React Native with Expo: 제로초에게 제대로 배우기
버전 관리 질문드립니다
제로초님! 영상처럼 eas.json에{ "cli": { ... "appVersionSource": "remote" }, "build": { .... "production": { "autoIncrement": true, "channel": "production" } }, .... }이렇게 설정하면 앱 submit마다 빌드 넘버가 자동으로 올라가는거고, 현재 저의 app.json은{ "expo": { ... "version": "1.0.0", "runtimeVersion": "1.0.0", ... }, }이렇게 돼있는데, eas updates 할 때의 버전 관리는 update 할 때마다 runtimeVersion에서 별도로 해줘야되는게 맞을까요??
-
미해결React Native with Expo: 제로초에게 제대로 배우기
IOS APP 추가 시 SKU 값
제로초님 안녕하세요! IOS APP 제출을 위해 apple store connect에 접속해 앱 추가를 누르면 사진과 같이 폼이 나오는데, 여기서 SKU값도 IOS bundleIdentifier와 동일하게 작성하면 될까요?
-
미해결아바타 커뮤니티앱 만들기 (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: 제로초에게 제대로 배우기
스플래시 스크린 적용 문제
제로초님 안녕하세요 알려주신 방법으로 스플래시 스크린을 구현중입니다.제가 보여주는 스플래시 스크린은 아래와 같이 background color가 #000000입니다.eas로 ios preview 빌드하고 아이폰으로 테스트해보니까 이와 같이 하얀색 background color와 borderRadius가 적용되지 않은 스플래시 스크린이 0.1초가량 보였다가 제가 설정한 배경 검은색 + borderRadius가 적용된 스플래시 스크린으로 변하는 상황인데, preview 빌드는 아래 app.json의 이 설정이랑 관련 없는게 아닌걸까요ㅠ?[ "expo-splash-screen", { "image": "./src/assets/images/aline-black.png", "imageWidth": 200, "resizeMode": "contain", "backgroundColor": "#ffffff", } ], 확인해보니 npx expo run:ios 로 빌드했을때는 제가 의도한대로 동작하고 preview 빌드에서만 이러는 상황입니다..!!
-
미해결[리뉴얼] 맛집 지도앱 만들기 (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> ); } 그 다음 안드로이드일 때만 헤더 텍스트를 중아에 오도록 지정했습니다!
-
미해결아바타 커뮤니티앱 만들기 (React Native Expo)
CustomButton 코드 버튼 관련 질문
버전 차이 (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이 그렇게 복잡해지진 않을 것 같은데 방법이 최선일지, 아니면 더 개선할 점이 있는지 궁금합니다.
-
미해결아바타 커뮤니티앱 만들기 (React Native Expo)
ios 시뮬로 보다가 android 시뮬로 넘어갈려니깐 오류가 생겨요
❗질문 작성시 꼭 참고해주세요에러 메세지에서 단서를 찾을 수 있는 경우가 많습니다. 에러 메세지를 읽고 한번 검색해보시는것을 추천드립니다.질문글을 작성하실때는, 현재 문제(또는 에러)와 코드나 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이런 오류가 생깁니다 ㅠㅠ어떻게 해야 해결이 되는지 궁금합니다!
-
미해결[리뉴얼] 맛집 지도앱 만들기 (React Native & NestJS)
사내에서 figma.com 업로드 안되나요?
❗질문 작성시 꼭 참고해주세요에러 메세지에서 단서를 찾을 수 있는 경우가 많습니다. 에러 메세지를 읽고 한번 검색해보시는것을 추천드립니다.질문글을 작성하실때는, 현재 문제(또는 에러)와 코드나 github을 첨부해주세요.개발중인 OS, ReactNative, Node 버전 등의 개발환경을 알려주셔야합니다.에러메세지는 일부분이 아닌 전체 상황을 올려주세요. 일부만 보여주시면 답변이 어렵습니다. (에러 일부만 자르거나 일부만 복사하지말아주세요) 안녕하세요. 우면 R&D 사내 입니다. figma.com 에서 접속후 .fig 파일 import 가 진행되지 않습니다. 아마도 사내에서 파일 업로드를 막은 듯 한데요. 혹시 사외에서 교육 진행이 가능한가요? 감사합니다.
-
미해결React Native with Expo: 제로초에게 제대로 배우기
딥링킹 문제
expo 로 돌아가고 있는거 확인한 상태에서, uri scheme 여는 명령어를 입력해도 여전히 에러가 발생한는데 어떤 부분을 확인해봐야 할까요?
-
미해결React Native with Expo: 제로초에게 제대로 배우기
앱빌드중 네트우크 ssl에러때문에 모듈이 안불러와집니다!
"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 하면 위처럼 에러가나옵니다 찾아보니 최근데 생기는 에러들인것같은데 별로 쌓인데이터도 없고 검색햇을때 나오는것들도 없어서 많이힘드네용