inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

묻고 답해요

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

miragejs 강의 건

미해결

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

강의데로 했는데, 계속 엠뮬레이터에서는 로딩만 나오고 앱 첫화면 은 안나오고있는데, 무슨 문제 일깡요? "name": "threads", "main": "index.ts", "version": "1.0.0", "dependencies": { import "expo-router/entry"; import {createServer, Server} from "miragejs"; declare global{ interface Window{ server:Server; } } if(__DEV__){ if(window.server){ window.server.shutdown(); } window.server = createServer({ routes(){ this.namespace = "api"; this.post("/login",()=>{ return { accessToken:"access-token", refreshToken:"refresh-token", user:{ id:"zerocho" } } }) this.passthrough() } }) }

  • react
  • react-native
  • 하이브리드-앱
  • typescript
  • expo
ji youn lee 댓글 2 좋아요 0 조회수 46

saveToLibraryAsync

미해결

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

saveToLibraryAsync 가 없어졋다고 하는데, 대체할만한것이 있을깡요?

  • react
  • react-native
  • hybrid-app
  • typescript
  • expo
ji youn lee 댓글 2 좋아요 0 조회수 43

<div id="banner">배너 이미지</div> 관련 질문

해결됨

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

강의에서 알려주신 코드를 바탕으로 그대로 작성을 했지만 '배너 이미지'와 '판매되는 상품들' 문구가 나오지 않습니다. 코드에서 어떤 게 문제일까요?

  • HTML/CSS
  • javascript
  • react
  • node.js
  • react-native
  • 머신러닝
  • express
  • tensorflow
한울하눌 댓글 1 좋아요 0 조회수 36

eas 빌드가 엄청 오래걸려서..

해결됨

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

❗ 질문 작성시 꼭 참고해주세요 에러 메세지에서 단서를 찾을 수 있는 경우가 많습니다. 에러 메세지를 읽고 한번 검색해보시는것을 추천드립니다. 질문글을 작성하실때는, 현재 문제(또는 에러)와 코드나 github 을 첨부해주세요. 개발중인 OS, ReactNative, Node 버전 등의 개발환경 을 알려주셔야합니다. 에러메세지는 일부분이 아닌 전체 상황 을 올려주세요. 일부만 보여주시면 답변이 어렵습니다. 에러 잘라서 올리시면 안됩니다! (에러 일부만 자르거나 일부만 복사하지말아주세요) eas 빌드가 엄청 오래걸려서 검색해보니 몇시간 걸릴수도 있다고 해서.. eas build --platform android --local 로컬 빌드를 하라고 하던데 로컬 빌드 할려면 설정이 필요한가요?

  • react-native
  • typescript
  • expo
  • react-hook-form
  • react-query
심재화 댓글 2 좋아요 0 조회수 90

디바이스 별 다른 크기의 화면을 고려하는 반응형UI

미해결

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

❗ 질문 작성시 꼭 참고해주세요 에러 메세지에서 단서를 찾을 수 있는 경우가 많습니다. 에러 메세지를 읽고 한번 검색해보시는것을 추천드립니다. 질문글을 작성하실때는, 현재 문제(또는 에러)와 코드나 github 을 첨부해주세요. 개발중인 OS, ReactNative, Node 버전 등의 개발환경 을 알려주셔야합니다. 에러메세지는 일부분이 아닌 전체 상황을 올려주세요. 일부만 보여주시면 답변이 어렵습니다. (에러 일부만 자르거나 일부만 복사하지말아주세요 ) 개발을 진행하면서, 사용자마다 서로 다른 핸드폰을 가지고 있고, 디바이스 별 화면 크기가 다릅니다. 이에 대한 반응형 UI대응은 어떻게 대응하는 것이 좋을까요?

  • react-native
  • typescript
  • nestjs
  • react-query
  • zustand
  • 반응형ui
juhyunk0820 댓글 2 좋아요 0 조회수 72

createPointTransactionOfLoading 에러

미해결

[코드캠프] 부트캠프에서 만든 '완벽한' 프론트엔드 코스

포트원 결제까지는 되는데 createPointTransactionOfLoading 에러가 나옵니다. Request failed with status code 404

  • react
  • react-native
  • 하이브리드-앱
  • graphql
  • next.js
박진성 댓글 1 좋아요 0 조회수 52

secureTextEntry 설정에 관해

해결됨

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

비밀번호 입력 후 수정 시 상태 보존 이슈 secureTextEntry 설정을 하면 비밀번호를 입력 후 재 입력할 때 비밀번호 상태가 보존되지 못 하고 다시 입력해야 하는데 이게 원래 이런걸까요?

  • react-native
  • typescript
  • expo
  • react-hook-form
  • react-query
김형근 댓글 2 좋아요 0 조회수 108

expo 55 tabs 사라짐 이슈

해결됨

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

안녕하세요, expo 공식 홈페이지에서 version 55를 사용하게 명시되어있어서 55로 시작했더니 이제 tabs 폴더 구조가 따로 없는 형태로 되었는데 그냥 똑같이 tabs를 생성하여서 진행해야하나요?

  • react-native
  • typescript
  • expo
  • react-hook-form
  • react-query
나마스테 댓글 2 좋아요 0 조회수 145

11강 23:35부터 막혀서 질문 드려요.

해결됨

[코드캠프] 부트캠프에서 만든 '완벽한' 프론트엔드 코스

아래처럼 소스도 똑같이 작성하면서 따라왔는데, 화면처럼 나오면서 막힙니다. 이후 코드를 따라서 작성해도 따라갈 수가 없어요... *{ box-sizing: border-box; margin: 0px; } .background { width: 1024px; height: 600px; background-image: url("../images/background.png"); padding: 20px 0px 0px 20px; } .outerbox { width: 800px; height: 544px; background-image: url("../images/outerbox.png"); } .wrapper { display: flex; flex-direction: row; padding: 32px 0px 0px 32px; } .wrapper__left { width: 208px; height: 472px; background-color: bisque; } .wrapper__left__header { width: 100%; height: 30px; background-color: aqua; } .wrapper__left__body { width: 100%; height: 100%; background-color: steelblue; } .wrapper__right { width: 524px; height: 472px; background-color: violet; }

  • react
  • react-native
  • 하이브리드-앱
  • graphql
  • next.js
kafka 댓글 2 좋아요 0 조회수 113

expo-blur 사용하면서 생긴 버그입니다.

미해결

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

react 19.1.0 react-native 0.81.5 expo ~54.0.23 버전을 알려주시면 질문자분과 동일한 환경에서 답변 드릴 수 있습니다. --- 12. CSS와의 차이점, 비슷한 점 4분 넘어서 블러뷰 적용하는 부분에서 생기는 문제 입니다. 원인은 BlurView때문에 생기는 문제 같고 웹으로 띄우면 별 문제 없는데 안드 앱에서는 문제가 되고 있습니다. 어떻게 해결하는게 좋을까요 ?

  • react
  • react-native
  • 하이브리드-앱
  • typescript
  • expo
찬우 이 댓글 3 좋아요 0 조회수 184

router.navigate 동작이 달라졌을까요?

미해결

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

최신 버전에서는 navigate 동작이 바뀐거같네요 "react": "19.1.0", "react-native": "0.81.5", "expo": "~54.0.33", "expo-router": "~6.0.23", 사용하면서 강의 듣는데.. router.push는 A -> B -> C -> C -> B -> B -> C -> B 일 때 뒤로가기 하면 정확하게 역순으로 B -> C -> B -> B -> C -> C -> B -> A 로 동작하는데 router.navigate는 A -> B -> C -> C -> B -> B -> C -> B 일때 B -> C -> B-> C -> B -> A 처럼 바로 연달아서 같은 라우터를 연속 클릭햇을 때에만 뒤로가기 할 때 중복이 제거되거 되는 것 처럼 동작하는 것 같아요 activity 폴더에 적용한 코드들입니다 index.tsx import NotFound from "@/app/+not-found"; import { usePathname, useRouter } from "expo-router"; import { Text, TouchableOpacity, View } from "react-native"; export default function Index() { const router = useRouter(); const pathname = usePathname(); if ( ![ "/activity", "/activity/follows", "/activity/replies", "/activity/mentions", "/activity/reposts", "/activity/verified", ].includes(pathname) ) { return <NotFound />; } return ( <View style={{ flex: 1, justifyContent: "center", alignItems: "center", }} > <View> <TouchableOpacity onPress={() => router.push(`/activity`)}> <Text style={{ color: pathname === "/activity" ? "red" : "black" }}> All </Text> </TouchableOpacity> <TouchableOpacity onPress={() => router.push(`/activity/follows`)}> <Text style={{ color: pathname === "/activity/follows" ? "red" : "black", }} > Follows </Text> </TouchableOpacity> <TouchableOpacity onPress={() => router.push(`/activity/replies`)}> <Text style={{ color: pathname === "/activity/replies" ? "red" : "black", }} > Replies </Text> </TouchableOpacity> <TouchableOpacity onPress={() => router.push(`/activity/mentions`)}> <Text style={{ color: pathname === "/activity/mentions" ? "red" : "black", }} > Mentions </Text> </TouchableOpacity> <TouchableOpacity onPress={() => router.push(`/activity/reposts`)}> <Text style={{ color: pathname === "/activity/reposts" ? "red" : "black", }} > Reposts </Text> </TouchableOpacity> <TouchableOpacity onPress={() => router.push(`/activity/verified`)}> <Text style={{ color: pathname === "/activity/verified" ? "red" : "black", }} > Verified </Text> </TouchableOpacity> </View> </View> ); } _layout.tsx import { Slot } from "expo-router"; export default Slot; [tabs].tsx export { default } from "."; 3분 강의로 2시간이 사라진.....ㅠㅠ

  • react
  • react-native
  • 하이브리드-앱
  • typescript
  • expo
개발자 취업 포기 댓글 1 좋아요 0 조회수 100

Toast 기능

미해결

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

안녕하세요 🙂 토스트 버전은 "react-native-toast-message": "^2.3.3", 입니다. 저는 모달 위에 토스트가 뜨지 않고, 모달이 꺼지면 그 뒤에 토스트가 보입니다..! 찾아보니 ios와 aos는 모달 구현 방식에서 차이가 있다고 하더라구요..ㅠㅠ 맞다면 혹시 ios에서는 어떤 방식으로 모달위에 토스트를 띄우는지 알 수 있을까요?? 참고로 모달 내부 마지막요소에 Toast 컴포넌트를 추가했는데도 모달이 꺼지고나서야 보이네요..! 해결 했습니다..! fetch 이후에 뜨는 쪽만 제대로 돼있고, fetch 전에 띄우는 게 잘못 돼있어서 안떠보이는 거였습니다..;;ㅎㅎ 아래 질문만.. 답변 해주시면 감사하겠습니다.ㅎㅎ 🙏 그리고 게시글 포스팅 이후에 자동으로 게시글로 이동하는데, 토스트 누르면 게시글로 이동하게 하는 기능이 굳이 필요한 건지도 궁금합니다! 감사합니다.

  • react
  • react-native
  • 하이브리드-앱
  • typescript
  • expo
도도한 불도새 댓글 2 좋아요 0 조회수 117

onEndReached 함수가 바로 호출 되지 않는 이슈

미해결

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

onEndReached() 가 바로 호출 되지 않습니다. 생각 해보면.. 이 함수는 스크롤이 됐을 때만 호출 해야 맞지 않나요..? following쪽도 useEffect 쪽을 삭제 하고 나서는 데이터를 바로 불러 오지 못하는데.. "useEffect 제거 후 onEndreached()가 바로 실행된다." 이 부분 이해가 잘 안돼서 설명 부탁드리기 전에 한번 찾아봤습니다. 대략 왜 바로 실행 된다고 하셨는지는 이해가 되긴 했는데, 저같은 경우는 좀 예외인 것 같아서 질문 남깁니다! 지금 제 flash-list 버전은 아래와 같습니다! "@shopify/flash-list": "2.0.2", 알아보니 v2에서는 estimatedItemSize를 제공하지 않고.. 해당 설정이 없어서 저같은 경우 onEndReached()가 바로 실행 되지 않았던 것 같습니다. 의존 된 데이터도 빈배열로 정의 돼있으니 더 아무 것도 실행 하지 않았던 것 같습니다. 이런 경우 초기엔 useEffect로 직접 불러오나요? 혹시 위에 버전 이슈 말고 제가 놓친 부분이 있다면 말씀 부탁드리겠습니다..! (home)/index.tsx import { Text, View, TouchableOpacity, StyleSheet, useColorScheme, ScrollView, } from "react-native"; import { usePathname } from "expo-router"; import { useState, useCallback } from "react"; import Post, { Post as PostType } from "../../../components/Post"; import { FlashList } from "@shopify/flash-list"; export default function Index() { const colorScheme = useColorScheme(); const path = usePathname(); const [posts, setPosts] = useState<PostType[]>([]); const onEndReached = useCallback(() => { console.log("posts1", posts.length); const lastId = posts.at(-1)?.id; if (!lastId) return; fetch(`/posts?cursor=${lastId}`) .then((res) => res.json()) .then((data) => { if (data.posts.length > 0) { setPosts((prev) => [...prev, ...data.posts]); } }) .catch(console.error); }, [posts, path]); return ( <View style={[ styles.container, colorScheme === "dark" ? styles.containerDark : styles.containerLight, ]} > <FlashList data={posts} renderItem={({ item }) => <Post item={item} />} onEndReached={onEndReached} onEndReachedThreshold={2} /> </View> ); } const styles = StyleSheet.create({ container: { flex: 1, }, containerLight: { backgroundColor: "white", }, containerDark: { backgroundColor: "#101010", }, textLight: { color: "black", }, textDark: { color: "white", }, });

  • react
  • react-native
  • 하이브리드-앱
  • typescript
  • expo
  • onendreached
도도한 불도새 댓글 1 좋아요 1 조회수 96

expo push service에 관한 질문

미해결

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

Expo 프레임워크를 활용해서 푸쉬 알림을 설정할때 두 가지 방법이 있다는 것을 확인할 수 있었습니다. 서버에서 expo push service를 거쳐서 ios - APNs, android-Firebase 연결 expo push service를 사용하지 않고 서버에서 직접 Ios-APNs, android-FireBase연결 이 두 방법이 있고 공식문서에서도 두 방법에 대해서 안내해주는 레퍼를 확인할 수 있었습니다. 당연히 1번이 구현 난이도가 더욱 쉽고 빠르게 적용할 수 있는 방법입니다. 하지만 현재 앱이 창업 팀을 꾸려서 실 서비스를 하려고 하는 입장인데, expo-push-service에 의존하는게 어떤지에 대해서 의문점이 있습니다. 실무의 경우 App 단을 react native로 운영하고 있을떄 두 가지 선택지에서 초기 창업시에 어떤 것을 선택하고 무엇이 장기적인 입장에서 옳은 방향일까요?

  • react
  • react-native
  • 하이브리드-앱
  • typescript
  • expo
손준석 댓글 2 좋아요 0 조회수 117

백엔드도 궁금합니다!

미해결

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

안녕하세요! 클라이언트 부분 열심히 반복 수강 중에 있습니다 🙂 코드가 굉장히 깔끔하고 가독성이 좋아서 서버 부분도 배우고 싶더라구요! 서버 구성과 효율적인 코드를 작성하는 법도 배우고 싶다는 마음이 커지더라구요! 혹시 추후에 서버 강의를 진행하실 예정이 없으실까요? 없으시다면,,, 기존 강의에 있던 맛집 어플 서버 부분만 참고해도 충분할까요...?

  • react-native
  • typescript
  • expo
  • react-hook-form
  • react-query
Kim Da Bin 댓글 1 좋아요 1 조회수 122

ios에서 개발중이신 분들은

미해결

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

"ios": { "infoPlist": { "ITSAppUsesNonExemptEncryption": false, "NSLocationWhenInUseUsageDescription": "이 앱은 사용자의 위치를 기반으로 기능을 제공하기 위해 위치 정보가 필요합니다.(Allow $(PRODUCT_NAME) to use your location.)" } }, app.json에서 요 부분 추가 하시고 npm run ios 로 빌드 다시 해보시면 될거에요. 만약에 안되시면, rm -rf ios 명령어로 ios 파일 삭제 후 다시 빌드 해보시면 잘 될겁니다!

  • react
  • react-native
  • 하이브리드-앱
  • typescript
  • expo
도도한 불도새 댓글 1 좋아요 1 조회수 103

[질문아님] tabBarLabel 대신 tabBarShowLabel

미해결

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

궁금해서 Gemini에게 물어봤는데요..! tabBarLabel 이 {null}로 반환하는 것과 {""} 빈문자열 넣는 법. 이 두가지 차이점을 물어보다가 아래 tabBarShowLabel 속성이 있다는 걸 알게됐고, 요 속성은 아예 레이아웃 처리가 되지 않는 다는 걸 알게됐습니다. 부모 <Tabs /> 에 한번만 쓰면 하위에 다 적용되는 구조입니다. tabBarShowLabel: false, 일단 저는 이 속성 사용해보고있는데, 좋은 것 같아용 ㅎㅎ 제로초님은 이걸 사용하지 않으시던데, 혹시나 요거 사용하면 안되는거면 댓글 달아주세용ㅎㅎ

  • react
  • react-native
  • 하이브리드-앱
  • typescript
  • expo
  • tabbarshowlabel
  • tabbarlabel
도도한 불도새 댓글 1 좋아요 1 조회수 87

댓글 버튼 하단에 고정되지 않는 이슈

미해결

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

node 버전 : v24.11.1 [id.tsx] 파일입니다. 현재 상세 페이지를 가면 아래와 같이 댓글 버튼이 상단으로 올라오는 현상이 생겼습니다. 또한 답글 남기기를 눌러도 focus는 댓글 input으로 되지만, 화면처럼 스크롤이 내려가는 현상은 안나타납니다. npx expo start를 이용하여, 실기기로 테스트한겁니다! import AuthRoute from "@/components/AuthRoute"; import CommentItem from "@/components/CommentItem"; import FeedItem from "@/components/FeedItem"; import InputField from "@/components/InputField"; import { colors } from "@/constants"; import useCreateComment from "@/hooks/queries/useCreateComment"; import useGetPost from "@/hooks/queries/useGetPost"; import useKeyboard from "@/hooks/useKeyboard"; import { useLocalSearchParams } from "expo-router"; import { Fragment, useRef, useState } from "react"; import { Keyboard, KeyboardAvoidingView, Platform, Pressable, ScrollView, StyleSheet, Text, TextInput, View, } from "react-native"; import { SafeAreaView, useSafeAreaInsets, } from "react-native-safe-area-context"; export default function PostDetailScreen() { const { id } = useLocalSearchParams(); const { data: post, isPending, isError } = useGetPost(Number(id)); const createComment = useCreateComment(); const [content, setContent] = useState(""); const scrollRef = useRef<ScrollView | null>(null); const inputRef = useRef<TextInput | null>(null); const [parentCommentId, setParentCommentId] = useState<number | null>(null); const { isKeyboardVisible } = useKeyboard(); const insets = useSafeAreaInsets(); if (isPending || isError) { return <></>; } const handleReply = (commentId: number) => { setParentCommentId(commentId); inputRef.current?.focus(); }; const handleCancelReply = () => { setParentCommentId(null); Keyboard.dismiss(); }; const handleSubmitComment = () => { const commentData = { postId: post.id, content: content, }; if (parentCommentId) { createComment.mutate({ ...commentData, parentCommentId }); setContent(""); handleCancelReply(); return; } if (parentCommentId) { createComment.mutate({ ...commentData, parentCommentId }); setContent(""); handleCancelReply(); return; } createComment.mutate(commentData); setContent(""); setTimeout(() => { scrollRef.current?.scrollToEnd(); }, 500); }; return ( <AuthRoute> <SafeAreaView style={styles.container} edges={["right", "left", "bottom"]} > <KeyboardAvoidingView contentContainerStyle={styles.awareScrollViewContainer} behavior="height" keyboardVerticalOffset={ Platform.OS === "ios" || isKeyboardVisible ? 100 : insets.bottom } > <ScrollView ref={scrollRef} style={{ marginBottom: 75 }} contentContainerStyle={styles.scrollViewContainer} > <View style={{ marginTop: 12 }}> <FeedItem post={post} isDetail /> <Text style={styles.commentCount}> 댓글 {post.commentCount}개 </Text> </View> {post.comments?.map((comment) => ( <Fragment key={comment.id}> <CommentItem parentCommentId={parentCommentId} onReply={() => handleReply(comment.id)} onCancelReply={handleCancelReply} comment={comment} /> {comment.replies.map((reply) => ( <CommentItem key={reply.id} comment={reply} isReply /> ))} </Fragment> ))} </ScrollView> <View style={styles.commentInputContainer}> <InputField ref={inputRef} value={content} returnKeyType="send" onSubmitEditing={handleSubmitComment} onChangeText={(text) => setContent(text)} placeholder={ parentCommentId ? "답글 남기는중..." : "댓글을 남겨보세요." } rightChild={ <Pressable disabled={!content} style={styles.inputButtonContainer} onPress={handleSubmitComment} > <Text style={styles.inputButtonText}>등록</Text> </Pressable> } /> </View> </KeyboardAvoidingView> </SafeAreaView> </AuthRoute> ); } const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: colors.WHITE, }, awareScrollViewContainer: { flex: 1, backgroundColor: colors.GRAY_200, }, scrollViewContainer: { backgroundColor: colors.GRAY_200, }, commentCount: { marginTop: 12, backgroundColor: colors.WHITE, paddingVertical: 12, paddingHorizontal: 16, fontSize: 16, fontWeight: "bold", }, commentInputContainer: { width: "100%", borderTopColor: colors.GRAY_200, borderTopWidth: StyleSheet.hairlineWidth, backgroundColor: colors.WHITE, padding: 16, bottom: 0, position: "absolute", }, inputButtonContainer: { backgroundColor: colors.ORANGE_600, padding: 8, borderRadius: 5, }, inputButtonText: { color: colors.WHITE, fontWeight: "bold", }, });

  • react-native
  • typescript
  • expo
  • react-hook-form
  • react-query
댓글 1 좋아요 0 조회수 100

SafeAreaView 적용 기준 문의

해결됨

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

아바타 만들기 /post 에는 글쓰기, 수정, 상세화면에 대한 정의가 되어 있습니다. /post/[id].tsx /post/write.tsx /post/update/[id].tsx 글쓰기와 수정은 SafeAreaView를 적용하지 않았는데 상세보기에서 적용한 이유와 어떤 기준에 의해 적용하였는지 문의 드립니다. /post/_layout.tsx 내에 Stack.Screen에서 headerShown : false일때 SafeAreaView를 적용하는걸로 생각했는데 그렇지 않은것 같습니다. 감사합니다.

  • react-native
  • typescript
  • expo
  • react-hook-form
  • react-query
컴공과 댓글 2 좋아요 0 조회수 107

인기 태그

인프런 TOP Writers

주간 인기글