묻고 답해요
160만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
해결됨React Native with Expo: 제로초에게 제대로 배우기
웹뷰내에서 카메라 접근이 가능할까요?
aws face liveness라는 서비스를 써야하는데 리액트, 코틀린, 스위프트만 지원하는듯 합니다.네이티브 단은 건들 엄두가 안나서 웹뷰로 띄워서 카메라를 연결하려고 하는데 이론적으로 가능할까요?
-
미해결React Native with Expo: 제로초에게 제대로 배우기
서브밋할때 어떻게해야하나요
eas submit --platform ios Select a build from EAS❯ Provide a URL to the app archive Provide a path to a local app binary file Provide a build ID to identify a build on EAS 이렇게 뜹니다어떻게해야하나요?
-
미해결React Native with Expo: 제로초에게 제대로 배우기
Expo 패키지 혹은 React native 패키지를 사용하는 기준
안녕하세요 Expo 패키지 혹은 React native 패키지를 사용하는 기준이 무엇인가요?예를 들어 Image도 react native 패키지로도 가져올 수 있고 expo로도 가져올 수 있는데 강의에서는 expo를 사용하셨더라구요 혹시 그 이유를 알 수 있을가요?
-
미해결React Native with Expo: 제로초에게 제대로 배우기
탭 전환 안됨
강의 잘 따라가다가 로그인까지 성공했는데 20강부터 갑자기 add,activity,user탭을 눌러도 전환이 안돼요.. home이랑 search만 전환이 됩니다. 에러도 안떠서 어디부터 잘못된건지 감이 안 오는데 어떤 파일을 확인해야 할까요?app/(tabs)_layout.tsx 입니다import { Ionicons } from "@expo/vector-icons"; import { type BottomTabBarButtonProps } from "@react-navigation/bottom-tabs"; import { Tabs, useRouter } from "expo-router"; import { useContext, useRef, useState } from "react"; import { Animated, Modal, Pressable, Text, TouchableOpacity, View } from "react-native"; import { AuthContext } from "../_layout"; export default function TabLayout(){ const router=useRouter(); const [isLoginModalOpen,setIsLoginModalOpen]=useState(false); const {user}=useContext(AuthContext); const isLoggedIn = !!user; const openLoginModal=()=>{ setIsLoginModalOpen(true); }; const closeLoginModal=()=>{ setIsLoginModalOpen(false); }; const toLoginPage= ()=>{ setIsLoginModalOpen(false); router.push("/login"); } const AnimatedTabBarButton=({ children, onPress, style, ...restProps }: BottomTabBarButtonProps)=>{ const scaleValue=useRef(new Animated.Value(1)).current; const handlePressOut=()=>{ Animated.sequence([ Animated.spring(scaleValue,{ toValue:1.2, useNativeDriver:true, speed:200, }), Animated.spring(scaleValue,{ toValue:1, useNativeDriver:true, speed:200, }), ]).start(); } return ( <Pressable onPress={onPress} onPressOut={handlePressOut} style={[{ flex: 1, justifyContent: "center", alignItems: "center" }, style]} android_ripple={{ borderless: false, radius: 0 }} > <Animated.View style={{ transform: [{ scale: scaleValue }] }}> {children} </Animated.View> </Pressable> ); } return ( <> <Tabs backBehavior="history" screenOptions={{ headerShown:false, tabBarButton: (props)=><AnimatedTabBarButton {...props}/>, }} > <Tabs.Screen name="(home)" options={{ tabBarLabel:()=>null, tabBarIcon:({focused})=>( <Ionicons name="home" size={24} color={focused ? "black":"gray"}/> ), }} /> <Tabs.Screen name="search" options={{ tabBarLabel:()=>null, tabBarIcon:({focused})=>( <Ionicons name="search" size={24} color={focused ? "black":"gray"}/> ), }}/> <Tabs.Screen name="add" listeners={{ tabPress:(e)=>{ e.preventDefault(); if(!isLoggedIn){ openLoginModal(); } } }} options={{ tabBarLabel:()=>null, tabBarIcon:({focused})=>( <Ionicons name="add" size={24} color={focused ? "black":"gray"}/> ), }} /> <Tabs.Screen name="activity" listeners={{ tabPress:(e)=>{ e.preventDefault(); if(!isLoggedIn){ openLoginModal(); } }, }} options={{ tabBarLabel:()=>null, tabBarIcon:({focused})=>( <Ionicons name="heart-outline" size={24} color={focused ? "black":"gray"}/> ), }}/> <Tabs.Screen name="[username]" listeners={{ tabPress:(e)=>{ e.preventDefault(); if(!isLoggedIn){ openLoginModal(); } }, }} options={{ tabBarLabel:()=>null, tabBarIcon:({focused})=>( <Ionicons name="person-outline" size={24} color={focused ? "black":"gray"}/> ), }}/> <Tabs.Screen name="(post)/[username]/post/[postID]" options={{ href:null, }} /> </Tabs> <Modal visible={isLoginModalOpen} transparent={true} animationType="slide" > <View style={{ flex:1, justifyContent:"flex-end", backgroundColor:"rgba(0,0,0,0.5)" }}> <View style={{backgroundColor:"white",padding:20}}> <Pressable onPress={toLoginPage}> <Text>Login Modal</Text> </Pressable> <TouchableOpacity onPress={closeLoginModal}> <Ionicons name="close" size={24} color='#555'/> </TouchableOpacity> </View> </View> </Modal> </> ); }
-
미해결React Native with Expo: 제로초에게 제대로 배우기
ios환경에서 어떻게 해야되는 지 모르겠어요
ios환경에서 어떻게 해야되는 지 알려주시면 감사하겠습니다.
-
미해결React Native with Expo: 제로초에게 제대로 배우기
Expo Router 사용 시 query-string.stringify is not a function 오류가 발생하는 이유와 대응 방법 문의드립니다
안녕하세요 제로초님 강의 잘 보고 있습니다.카카오 로그인을 구현하는 중에 문제가 생겨 어찌해서 해결했는데 해결된 이유가 궁금해서 질문드립니다! 1. 에러로그TypeError: queryString.stringify is not a function 이라는 에러가 나서 찾아보니 query-string 버전 충돌이 있는 것 같아 query-string을 @7.1.3 버전으로 설치하니 해결이 되었습니다.pnpm-locl.yml을 보니 query-string을 아래와 같이 두 버전을 같이 쓰고 있었습니다. query-string@7.1.3: dependencies: decode-uri-component: 0.2.2 filter-obj: 1.1.0 split-on-first: 1.1.0 strict-uri-encode: 2.0.0 query-string@9.2.0: dependencies: decode-uri-component: 0.4.1 filter-obj: 5.1.0 split-on-first: 3.0.0 2. 사용하고 있는 패키지들1) @react-native-kakao/core@react-native-kakao/core@2.4.0(expo@53.0.10(@babel/core@7.27.4)(@expo/metro-runtime@5.0.4(react-native@0.79.2(@babel/core@7.27.4)(@types/react@19.0.14)(react@19.0.0)))(react-native-webview@13.13.5(react-native@0.79.2(@babel/core@7.27.4)(@types/react@19.0.14)(react@19.0.0))(react@19.0.0))(react-native@0.79.2(@babel/core@7.27.4)(@types/react@19.0.14)(react@19.0.0))(react@19.0.0))(react-native@0.79.2(@babel/core@7.27.4)(@types/react@19.0.14)(react@19.0.0))(react@19.0.0)': dependencies: crypto-js: 4.2.0 query-string: 9.2.0 react: 19.0.02) @react-navigation '@react-navigation/core@7.10.0(react@19.0.0)': dependencies: '@react-navigation/routers': 7.4.0 escape-string-regexp: 4.0.0 nanoid: 3.3.11 query-string: 7.1.3 위의 에러로그에서와 같이 tab layout에 접근하려 할 때 react-navigation의 getPathFromState.js에서 query-string의 import에서 문제가 발생하는 것 같았는데 정확히 어떤 문제인지 잘 모르겠네요.. lockfile과 node_modules를 삭제해도 동일하게 query-string은 두가지 버전으로 설치되었고 만약 package.json에 query-string을 7버전으로 명시적으로 설치하지 않으면 탭 레이아웃의 모든 페이지들에서 저 오류가 납니다.일단 query-string 패키지 설치를 해서 오류를 해결하긴 했지만 정확한 이유를 모르겠어서 질문드립니다 ! 아래는 GPT에게 질문시 답변한 내용입니다.GPT 답변 내용query-string@9.x는 ESM-only라서 CommonJS 방식의 import (import * as queryString) 시 undefined가 반환됨React Navigation 내부의 getPathFromState.ts에서 queryString.stringify(...) 호출 시 에러 발생의존성 충돌로 인해 런타임 크래시가 발생하는 것으로 보임 ❓질문드리고 싶은 점이러한 충돌을 예방하기 위한 공식적인 방법은 무엇인가요? (예: pnpm.overrides로 강제 버전 고정)혹시 다른 라이브러리에서도 이와 같은 ESM-CJS 충돌을 방지하기 위한 일반적인 best practice가 있을까요?// package.json"dependencies": { "@expo/vector-icons": "^14.1.0", "@react-native-async-storage/async-storage": "2.1.2", "@react-native-kakao/core": "^2.4.0", "@react-native-kakao/user": "^2.4.0", "@react-navigation/bottom-tabs": "^7.3.10", "@react-navigation/elements": "^2.3.8", "@react-navigation/native": "^7.1.6", "@rneui/themed": "4.0.0-rc.8", "@supabase/supabase-js": "^2.49.9", "expo": "~53.0.9", "expo-blur": "~14.1.4", "expo-build-properties": "~0.14.6", "expo-constants": "~17.1.6", "expo-dev-client": "~5.1.8", "expo-font": "~13.3.1", "expo-haptics": "~14.1.4", "expo-image": "~2.1.7", "expo-linking": "~7.1.5", "expo-router": "~5.0.6", "expo-splash-screen": "~0.30.8", "expo-status-bar": "~2.2.3", "expo-symbols": "~0.4.4", "expo-system-ui": "~5.0.7", "expo-web-browser": "~14.1.6", "query-string": "^7.1.3", "react": "19.0.0", "react-dom": "19.0.0", "react-native": "0.79.2", "react-native-gesture-handler": "~2.24.0", "react-native-reanimated": "~3.17.4", "react-native-safe-area-context": "5.4.0", "react-native-screens": "~4.11.1", "react-native-url-polyfill": "^2.0.0", "react-native-web": "~0.20.0", "react-native-webview": "13.13.5", "zustand": "^5.0.5" },
-
미해결React Native with Expo: 제로초에게 제대로 배우기
탭바에서 href:null 동작 안됨
버전npm ls react 19.0.0npm ls react-native 0.79.2npm ls expo 53.0.9안녕하세요 다크모드 UI를 깃허브에서 복사했는데 전까지 잘 되던app/(tabs)/_layout.tsx 에서 post 탭을 안보이게 하는 코드가 제대로 작동하지 않습니다.기기에서도 (post)/[us... 경로의 탭이 보이고 있습니다.그 뒤로 제 예전 코드로 다시 돌려봐도 탭이 사라지지 않고 계속 보이는데, 어디서부터 꼬인건지 감이 안잡힙니다ㅠ 문제가 발생한 걸로 추측되는 코드입니다.<Tabs.Screen name="(post)/[username]/post/[postID]" options={{ href: null, }} />
-
미해결React Native with Expo: 제로초에게 제대로 배우기
`Expo Go` 앱이 보이지 않아요
처음에 제로초님 따라한다고 pnpm build --platform android --profile development 로 한 번 실행을 했습니다. 이 때 go 를 설치하라는 말이 안나와서 '뭔가 이상하다' 했는데요. 이후에는 pnpm run android 로 켜면 development 로 켜집니다. 신기한 건 s 를 누르면 expo go 모드로는 잘 넘어가요. 그런데 Expo Go 앱이 보이지 않아 빌드를 선택해볼 수 가 없습니다..
-
미해결React Native with Expo: 제로초에게 제대로 배우기
강의코드
FlatList로 게시글 작성 모달 강의의 시작과 같은 코드를 어디서 받을 수 있나요? 스크롤해서 보이는 링크에는 완성된 전체 코드만 있어서요.일일이 지우고 따라치려해도 나머지 부분이 완성되어 있어서 애뮬레이터에서 진행상황을 볼 수가 없어요...
-
미해결[코드팩토리] [중급] Flutter 진짜 실전! 상태관리, 캐시관리, Code Generation, GoRouter, 인증로직 등 중수가 되기 위한 필수 스킬들!
장바구니 결제하기 응답이 500이 옵니다.
장바구니 화면까지는 다 정상인데 결제하기 하면 500에러가 발생합니다... 이틀동안 찾았는데 원인을 모르겠습니다...ㅠㅠㅠㅠhttps://github.com/DongMinE/Flutter/tree/main/actual레포지토리 링크인데 도와주실 수 있으실까요...?요즘 질문이 많아 죄송합니다...마지막 강의까지 잘 듣겠습니다. 일단 강의는 계속 듣겠습니다!!
-
해결됨[코드캠프] 부트캠프에서 만든 '완벽한' 프론트엔드 코스
커서 강의 질문
선생님 프론트엔드 커서AI활용 코스의 경우에는 커서AI로 일일이 바이브 코딩하는건가요?? AI로 코딩할일이 뭐가 있을지 궁금합니다.
-
미해결React Native with Expo: 제로초에게 제대로 배우기
여기서 디벨롭먼트고 프리빌드 앱을 써도 에러가 발생합니다.
npm ls react npm ls react-nativenpm ls expo버전을 알려주시면 질문자분과 동일한 환경에서 답변 드릴 수 있습니다. ERROR Warning: Error: The package '@react-native-kakao/user' doesn't seem to be linked. Make sure: - You rebuilt the app after installing the package- You are not using Expo Go
-
미해결[코드팩토리] [중급] Flutter 진짜 실전! 상태관리, 캐시관리, Code Generation, GoRouter, 인증로직 등 중수가 되기 위한 필수 스킬들!
removeFromBasket에서 await patchBasket()을 마지막에 하면 에러나는거 아닌가요?
Future<void> patchBasket() async { await repository.patchBasket( body: PatchBasketBody( basket: state .map((e) => PatchBasketBodyBasket( productId: e.product.id, count: e.count, )) .toList(), ), ); } Future<void> removeFromBasket({ // true면 count에 관계없이 삭제 bool isDelete = false, required ProductModel product, }) async { // 1) 장바구니에 상품이 존재할때 // 1-1) 상품의 카운트가 1보다 크면 -1 // 1-2) 상품의 카운트가 1이면 상품 제거 // 2) 장바구니에 상품이 존재하지 않을때 // 2-1) 즉시 함수 반환하고 아무것도 하지 않음 final exists = state.firstWhereOrNull((e) => e.product.id == product.id) != null; print('exists: $exists'); if (!exists) { return; } final existingProduct = state.firstWhere((e) => e.product.id == product.id); if (existingProduct.count == 1 || isDelete) { state = state.where((e) => e.product.id != product.id).toList(); } else { state = state .map( (e) => e.product.id == product.id ? e.copyWith( count: e.count - 1, ) : e, ) .toList(); } await patchBasket(); } 장바구니에서 삭제할 때 상품이 1개 있고 1개의 상품 주문갯수가 1일 때 삭제를 하게되면 해당id를 뺀 값들이 리스트에 담기게 되는데 그럼 장바구니는 전부 비어지게 됩니다. 그래서 스크린에서는 "장바구니 비어있습니다"가 나오는 것 까진 됩니다.이후 어쨋든 patchBasket은 실행되는데 이때 리스트가 비어 있으니 서버호출할 때 400 에러가 발생합니다.. 서버단에서 비어있는 장바구니를 보내면 정상응답으로 비어 있는 get요청을 받는 과정이 필요한게 아닌가 해서 여쭤봅니다!포스트맨에서도 빈 리스트를 보내면 400이 옵니다.좋은 주말 되세요!
-
미해결React Native with Expo: 제로초에게 제대로 배우기
진짜에요..?
flutter도 써봤고, react/next도 다 쓰고 있는데요... expo의 라우팅 구조가 진짜 번잡하고 혼란스럽다고 느껴지네요. 혹시 현업에서도 알려주신 라우팅 방법(group 폴더, index.tsx, layout.tsx 등 활용)이 최선인가요? 뭐랄까.. 이상한 스킬들로 겨우겨우 원하는 결과물을 만들어내는 느낌이에요 ㅠㅠ
-
미해결React Native with Expo: 제로초에게 제대로 배우기
expo-location 문제
강의 내용을 진행하던 중 android 시뮬레이터에서 expo-location을 import할 수 없다는 에러가 뜨고 있습니다. expo-go를 통해서 진행하였습니다.이전 질문도 같은 문제가 있어보여서 해결 방법으로 expo 버전을 조정해도 해결되지 않습니다..ㅠㅠ버전은 아래와 같습니다.package.json{ "name": "threads", "main": "expo-router/entry", "version": "1.0.0", "scripts": { "start": "expo start", "reset-project": "node ./scripts/reset-project.js", "android": "expo start --android", "ios": "expo start --ios", "web": "expo start --web", "lint": "expo lint" }, "dependencies": { "@expo/vector-icons": "^14.1.0", "@react-navigation/bottom-tabs": "^7.3.10", "@react-navigation/elements": "^2.3.8", "@react-navigation/native": "^7.1.6", "expo": "53.0.9", "expo-blur": "~14.1.4", "expo-constants": "~17.1.6", "expo-font": "~13.3.1", "expo-haptics": "~14.1.4", "expo-image": "~2.1.7", "expo-linking": "~7.1.5", "expo-router": "~5.0.6", "expo-splash-screen": "~0.30.8", "expo-status-bar": "~2.2.3", "expo-symbols": "~0.4.4", "expo-system-ui": "~5.0.7", "expo-web-browser": "~14.1.6", "react": "19.0.0", "react-dom": "19.0.0", "react-native": "0.79.2", "react-native-gesture-handler": "~2.24.0", "react-native-reanimated": "~3.17.4", "react-native-safe-area-context": "5.4.0", "react-native-screens": "~4.10.0", "react-native-web": "~0.20.0", "react-native-webview": "13.13.5", "expo-dev-client": "~5.1.8", "expo-location": "~18.1.5" }, "devDependencies": { "@babel/core": "^7.25.2", "@types/react": "~19.0.10", "typescript": "~5.8.3", "eslint": "^9.25.0", "eslint-config-expo": "~9.2.0" }, "private": true }
-
미해결React Native with Expo: 제로초에게 제대로 배우기
탭제거
href:null을 추가해도 제일 우측 탭이 계속 안없어지는데 이유가 뭘까요..
-
미해결[코드팩토리] [중급] Flutter 진짜 실전! 상태관리, 캐시관리, Code Generation, GoRouter, 인증로직 등 중수가 되기 위한 필수 스킬들!
이 두가지는 완전히 동일한 기능인가요?
abstract class IModelWithId { final String id; IModelWithId({required this.id}); } 인터페이스를 선언시 똑같이 했는데@JsonSerializable() class ProductModel implements IModelWithId { @override final String id; final String name; @JsonKey(fromJson: DataUtils.pathToUrl) final String imgUrl; final String detail; final int price; final RestaurantModel restaurant; ProductModel({ required this.id, required this.name, required this.imgUrl, required this.detail, required this.price, required this.restaurant, }); factory ProductModel.fromJson(Map<String, dynamic> json) => _$ProductModelFromJson(json); } @JsonSerializable() class ProductModel extends IModelWithId { final String id; final String name; @JsonKey(fromJson: DataUtils.pathToUrl) final String imgUrl; final String detail; final int price; final RestaurantModel restaurant; ProductModel({ required this.id, required this.name, required this.imgUrl, required this.detail, required this.price, required this.restaurant, }) : super(id: id); factory ProductModel.fromJson(Map<String, dynamic> json) => _$ProductModelFromJson(json); } 이 두가지 모델은 기능적으로 완전히 동일한가요?동일하다면 구현방식은 개발자와 팀의 선호에 따라 달라지는 정도인지 궁금합니다. 그리고 인터페이스 키워드가 없다고 말씀하셨었는데 버전이 업되고 interface가 생긴것 같은데 지금과 같은 기능이면 abstract interface를 사용하는 것이 더 좋은가요? 질문을 많이 드려 죄송합니다 ㅠㅠ
-
해결됨[코드캠프] 부트캠프에서 만든 '완벽한' 프론트엔드 코스
수강질문
안녕하세요 ~강사님 수업 실무적으로 잘 가르쳐주셔서 너무 잘 듣고 만족합니다.현재 완벽한 프론트엔드코스를 거의 다 소화하고, 풀스택을 배우고자 합니다. 부트캠프에서 만든 고농축 백엔드 코스는 현재 수강한 프론트엔드 코스 내용과 겹치는 강의가 많고 강의량도 많다보니 구매가 고민스로운데요..강사님 강의중 관리자 모드와 유저모드간에 통신을 다루는 실무 프로젝트 중심의 백엔드까지 배울수 있는 강의가 있는지 추천받고 싶습니다.
-
미해결[코드팩토리] [중급] Flutter 진짜 실전! 상태관리, 캐시관리, Code Generation, GoRouter, 인증로직 등 중수가 되기 위한 필수 스킬들!
내부 코드를 작성하지 않은 CursorPaginationLoading가 어떻게 로딩상태를 갖는지 잘 모르겠습니다...
abstract class CursorPaginationBase {} //에러 class CursorPaginationError extends CursorPaginationBase { final String message; CursorPaginationError({ required this.message, }); } //로딩 class CursorPaginationLoading extends CursorPaginationBase {}여기까지 커서페이지네이션모델 파일을 만들었고 if (data is CursorPaginationLoading) { return Center( child: CircularProgressIndicator(), ); }로 로딩상태이면 인디케이터를 보여주고 있는 것 까지 완료했습니다.그리고 CursorPaginationBase는 여러 상태의 부모로 로딩,정상,에러 등을 받을 수 있다는 것은 알겠는데, 아직 로딩은 무엇이다라는 것이 없이 단지 CursorPaginationBase를 상속받았을 뿐인데 어떻게 screen에서 로딩중인 것을 확정하고 코드가 작동하는지 잘 모르겠습니다...
-
미해결[코드팩토리] [중급] Flutter 진짜 실전! 상태관리, 캐시관리, Code Generation, GoRouter, 인증로직 등 중수가 되기 위한 필수 스킬들!
_SplashScreenState에서 storage를 late로 호출해서 한번만 불러와도 되나요?
강의에서는final storage = ref.read(secureStorageProvider);이 코드를 checkToken과 deleteToken에서 불러 사용하고 있는데 여러번 부르는 것이 싫다면class _SplashScreenState extends ConsumerState<SplashScreen> { late final storage = ref.read(secureStorageProvider); @override void initState() { super.initState(); //토큰 검사 checkToken(); // deleteToken(); }또는class _SplashScreenState extends ConsumerState<SplashScreen> { late final FlutterSecureStorage storage; @override void initState() { super.initState(); storage = ref.read(secureStorageProvider); //토큰 검사 checkToken(); // deleteToken(); }으로 한번만 불러서 storage를 바로 사용해도 될까요? 이렇게 사용해도 버그나 라이프사이클에 문제가 있을지 궁금합니다.강의 잘 듣고 있습니다!! 감사합니다.