inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

묻고 답해요

172만명의 커뮤니티!! 함께 토론해봐요.

웹 배포 시에 RN으로 만든 네비게이션은 어떻게 처리하나요?

해결됨

웹 개발자의 연봉을 올려주는 하이브리드앱 with Expo 프레임워크

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

  • react
  • react-native
  • next.js
  • expo
허광기 댓글 1 좋아요 0 조회수 116

안드로이드 위치 권한 이슈 2가지 문의

미해결

맛집 지도앱 만들기 (React Native & NestJS)

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

  • react-native
  • typescript
  • nestjs
  • react-query
  • zustand
현자타임 댓글 1 좋아요 0 조회수 106

.

미해결

React Native with Expo: 제로초에게 제대로 배우기

.

  • react
  • react-native
  • 하이브리드-앱
  • typescript
  • expo
이영훈 댓글 2 좋아요 0 조회수 137

지도가 보이려면 음.. 작성해주신 스타일과 다르게

미해결

맛집 지도앱 만들기 (React Native & NestJS)

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

  • react-native
  • typescript
  • nestjs
  • react-query
  • zustand
현자타임 댓글 0 좋아요 0 조회수 89

제대로 설치한거같은데 안드로이드랑 ios 둘다 앱실행이 안되는것같아요

미해결

맛집 지도앱 만들기 (React Native & NestJS)

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

  • react-native
  • typescript
  • nestjs
  • react-query
  • zustand
jeff 댓글 3 좋아요 0 조회수 120

android header를 ios처럼 바꾸기

미해결

아바타 커뮤니티앱 만들기 (React Native Expo)

강의에서는 패딩으로 간격만 주셨지만 전 통일성을 주고 싶어 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
  • typescript
  • expo
  • react-hook-form
  • react-query
민지영 댓글 1 좋아요 0 조회수 88

CustomButton 코드 버튼 관련 질문

미해결

아바타 커뮤니티앱 만들기 (React Native Expo)

버전 차이 (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
  • typescript
  • expo
  • react-hook-form
  • react-query
yeong 댓글 1 좋아요 0 조회수 83

ios 시뮬로 보다가 android 시뮬로 넘어갈려니깐 오류가 생겨요

미해결

아바타 커뮤니티앱 만들기 (React Native Expo)

❗ 질문 작성시 꼭 참고해주세요 에러 메세지에서 단서를 찾을 수 있는 경우가 많습니다. 에러 메세지를 읽고 한번 검색해보시는것을 추천드립니다. 질문글을 작성하실때는, 현재 문제(또는 에러)와 코드나 github 을 첨부해주세요. 개발중인 OS, ReactNative, Node 버전 등의 개발환경 을 알려주셔야합니다. 에러메세지는 일부분이 아닌 전체 상황 을 올려주세요. 일부만 보여주시면 답변이 어렵습니다. 에러 잘라서 올리시면 안됩니다! (에러 일부만 자르거나 일부만 복사하지말아주세요) OS: MAC ReactNative: › 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
  • typescript
  • expo
  • react-hook-form
  • react-query
민지영 댓글 2 좋아요 0 조회수 131

사내에서 figma.com 업로드 안되나요?

미해결

맛집 지도앱 만들기 (React Native & NestJS)

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

  • react-native
  • typescript
  • nestjs
  • react-query
  • zustand
박성범 댓글 1 좋아요 0 조회수 119

딥링킹 문제

미해결

React Native with Expo: 제로초에게 제대로 배우기

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

  • react
  • react-native
  • 하이브리드-앱
  • typescript
  • expo
박종혁 댓글 1 좋아요 0 조회수 68

앱빌드중 네트우크 ssl에러때문에 모듈이 안불러와집니다!

미해결

React Native with Expo: 제로초에게 제대로 배우기

"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 하면 위처럼 에러가나옵니다 찾아보니 최근데 생기는 에러들인것같은데 별로 쌓인데이터도 없고 검색햇을때 나오는것들도 없어서 많이힘드네용

  • react
  • react-native
  • 하이브리드-앱
  • typescript
  • expo
최경민 댓글 2 좋아요 0 조회수 207

[꼭][[꼭] 그랩님, 답변 부탁드립니다], Failed to load resource: the server responded with a status of 404 (Not Found) 상품 상세 페이지 질문입니다.

해결됨

비전공자를 위한 진짜 입문 올인원 개발 부트캠프

좋은 강의 잘 듣고 있습니다. 다름이아니라, 이전 강의들에 에러들을 다 해결해서 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]사진 첨부해 봅니다. 어떻게 해야 이 모든 에러 를 해결 할 수 있을지에 대해 자세한 답변 부탁드립니다.

  • HTML/CSS
  • javascript
  • react
  • node.js
  • react-native
  • 머신러닝
  • express
  • tensorflow
isbcom1004 댓글 1 좋아요 0 조회수 177

혹시 딥링킹 uri-scheme 테스트 안 되시는 분

미해결

React Native with Expo: 제로초에게 제대로 배우기

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

  • react
  • react-native
  • 하이브리드-앱
  • typescript
  • expo
  • 딥링크
  • uri-scheme
jasinis102 댓글 1 좋아요 2 조회수 88

activity/replies가 [username]/replies로 빠져나가는 문제

미해결

React Native with Expo: 제로초에게 제대로 배우기

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

  • react
  • react-native
  • 하이브리드-앱
  • typescript
  • expo
TJ 댓글 2 좋아요 0 조회수 64

tab 을 stack 에 쌓았을 때 문제

미해결

React Native with Expo: 제로초에게 제대로 배우기

<Stack> <Stack.Screen name="(tabs)" options={{ headerShown: false }} /> <Stack.Screen name="modal" options={{ presentation: "modal", headerShown: false }} /> </Stack> 위와 같이 작업하면 탭을 누를 때마가 스택이 쌓이는게 아닌가요? 그러면 물리 백버튼을 눌렀을 때 탭 이동이 될 것 같아서요. 카카오를 예시를 보면 탭은 스택을 쌓지 않고 있어서 탭 이동을 아무리 해도 뒤로 가기를 누르면 탭 이동을 하고 있지 않네요.

  • react
  • react-native
  • 하이브리드-앱
  • typescript
  • expo
박종혁 댓글 2 좋아요 0 조회수 80

wipe data 이후에 npm run android 오류

미해결

React Native with Expo: 제로초에게 제대로 배우기

wipe data 이후에 npm run android 를 실행하면 아래와 같은 오류가 발생합니다. CommandError: No development build (com.devparkoon.rntutorial) for this project is installed. Install a development build on the target device and try again. 강의 영상과 다르게 npm run android 를 실행했을 때 expo 를 다시 설치하는 과정이 없는데 어떤 문제일까요? 위 이슈를 해결하기 위해 eas build 를 다시 하면 되긴 합니다 (10분 넘게 다시 소요됨)

  • react
  • react-native
  • 하이브리드-앱
  • typescript
  • expo
박종혁 댓글 2 좋아요 0 조회수 104

[Tip] SafeAreaView 적용 후 상단 공백이 넓어진 경우

해결됨

아바타 커뮤니티앱 만들기 (React Native Expo)

import { SafeAreaView, useSafeAreaInsets, } from "react-native-safe-area-context"; // react-native-safe-area-context: 5.4.0 강의 내용처럼 위 SafeAreaView 를 사용할 경우 아래 이미지처럼 헤더 아래 부분이 넓어지는데요. iOS android <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 깃이슈로도 올라와 있는데 추후 버전 업데이트 되서 해결되거나 다른 좋은 방법이 있으신 분들은 댓글로 알려주세요.

  • react-native
  • typescript
  • expo
  • react-hook-form
  • react-query
하양이 댓글 2 좋아요 0 조회수 176

6강/7강 수업

미해결

비전공자를 위한 진짜 입문 올인원 개발 부트캠프

다른 수강생분들에게도 문제 해결에 도움을 줄 수 있도록 좋은 질문을 남겨봅시다 :) 1. 질문은 문제 상황을 최대한 표현해주세요. 6강 마지막 화면이랑 7강 첫화면 코드가 달라져서 이 부분은 어떻게 해결하면 될까요?? (안녕하세요->환영합니다) (console.log->alert) 크게 이 두 부분이 다른 것 같습니다. 그냥 이대로 진행하면 될까요? 2. 구체적이고 최대한 맥락을 알려줄 수 있도록 질문을 남겨 주실수록 좋습니다. 그렇지 않으면 답변을 얻는데 시간이 오래걸릴 수 있습니다 ㅠㅠ ex) A라는 상황에서 B라는 문제가 있었고 이에 C라는 시도를 해봤는데 되지 않았다! 3. 먼저 유사한 질문이 있었는지 꼭 검색해주세요!

  • HTML/CSS
  • javascript
  • react
  • node.js
  • react-native
  • 머신러닝
  • express
  • tensorflow
noysys 댓글 1 좋아요 0 조회수 67

인기 태그

인프런 TOP Writers

주간 인기글