묻고 답해요
158만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
미해결React Native with Expo: 제로초에게 제대로 배우기
웹뷰 질문드립니다!
강사님 궁금한 게 있습니다.그러면 웹뷰 위주의 앱을 개발한다고 했을때, 리액트 프로젝트 1개, 리액트 네이티브 프로젝트 1개 이렇게 총 두개의 레포지토리를 만들어 개발하고, 앱 내에서 웹뷰를 띄우고 싶은 부분은 우선 리액트 프로젝트를 배포하고, 배포된 url을 가져와서 웹뷰 컴포넌트에 넣는 방식으로 진행하나요?? 그리고 만약 그렇게 한다면 보통 멀티레포로 하는지 모노레포 구조로 하는지도 궁급합니다..!!
-
미해결React Native with Expo: 제로초에게 제대로 배우기
애니메이션 부분 설명
애니메이션 부분 복잡해서 수강노트에 단계별로 설명해주신다고 했는데 안보이네요..!! 혹시 어디로 들어가야 볼 수 있을까요?!
-
해결됨웹 개발자의 연봉을 올려주는 하이브리드앱 with Expo 프레임워크
ios 배포관련 질문있습니다.
카메라와 위치정보만 네이티브에서 권한 요청하고,화면이 전부 웹뷰로 구성되어있는 앱을 배포한다고 가정 했을때 ios 심사통과 가능성이 높은지 낮은지 궁금합니다.
-
미해결React Native with Expo: 제로초에게 제대로 배우기
expo로 구현할 수 없는 기능들에는 어떤게 있을까요??
안녕하세요 강사님! 현재 회사에서 사이드 프로젝트로 리액트 네이티브 프로젝트를 혼자서 진행해야 되는 상황이라 강의를 듣고 있습니다. 아직 기획만 나온 상황이고 디자인은 전혀 나오지 않은 상태입니다. 만약에 구현하다가 expo에서는 구현할 수 없는 기능이 생길수도 있는 부분에 대해서 미리 인지하고 싶은데, 혹시 expo로 구현할 수 없는 기능들에는 어떤 것들이 있는지 미리 알 수 있는 방법이 있을까요..?
-
미해결React Native with Expo: 제로초에게 제대로 배우기
배포후 알람이 정상작동안합니다.
안드로이드 환경에서 apk를 만들어서 다른사람의 폰에 깔아보았습니다 apk의 pushtoken을 서버에 잘 담아서 보냈으나,expogo가 깔려있는앱에는 알람이 정상적으로 오지만, 깔려있지 않은앱에서는 알람이 안옵니다어떻게 해결할수있을까요? 백엔드코드 전달드립니다. // 푸시 알림 전송 함수 정의 function sendPushNotification($expoPushToken, $title, $body, $data = []) { $message = [ 'to' => $expoPushToken, 'sound' => 'default', 'title' => $title, 'body' => $body, 'data' => $data, ]; $ch = curl_init('https://exp.host/--/api/v2/push/send'); curl_setopt($ch, CURLOPT_RETURNTRANSFER, true); curl_setopt($ch, CURLOPT_POST, true); curl_setopt($ch, CURLOPT_HTTPHEADER, [ 'Accept: application/json', 'Accept-Encoding: gzip, deflate', 'Content-Type: application/json', ]); curl_setopt($ch, CURLOPT_POSTFIELDS, json_encode($message)); $response = curl_exec($ch); $httpCode = curl_getinfo($ch, CURLINFO_HTTP_CODE); curl_close($ch); if ($httpCode != 200) { throw new Exception('HTTP 오류! 상태 코드: ' . $httpCode); } $result = json_decode($response, true); if ($result['data']['status'] === 'error') { throw new Exception('푸시 알림 전송 오류: ' . json_encode($result['data']['details'])); } return $result['data']['id']; }에러내용 : {"error":"InvalidCredentials","fault":"developer"}
-
미해결React Native with Expo: 제로초에게 제대로 배우기
안녕하세요 제로초님 CSS관련 질문 드립니다
안녕하세요 제로초님 CSS 관련해서 질문 드립니다.expo에서는 styleSheet와 react-native-safe-area-context 이용해서 css 작업하는걸로 강의에서 설명해 주셨는데NativeWind(TailwindCss)를 모바일에서 사용하는건 어떻게 생각하시는지 궁금합니다또, gluestack ui 라이브러리도 있는데 이것도 혹시 아시면 같이 이야기 해주시면 감사하겠습니다! StyleSheet 사용해서 하는게 나중에 최적화가 더 잘 될지 그런것도 고민이 되긴 합니다
-
해결됨아바타 커뮤니티앱 만들기 (React Native Expo)
스타일링 라이브러리
강사님 안녕하세요. 강의 잘 듣고 있습니다!강사님께서는 스타일링을 하실때 리액트 네이티브 기본 styleSheet를 사용 해서 개발하시는데,현재 강의에서 개발하는 토이프로젝트 규모의 앱이 아니라, 실제 서비스용 앱을 개발하실때에도 기본 styleSheet를 사용해서 개발하시는지 아니면 다른 외부 라이브러리를 사용해서 개발하시는지 궁금합니다!next.js 나 react 에서는 생산성이나 기능적인 부분때문에 다양한 라이브러리를 사용하는 경우가 많은데, 리액트 네이티브에서는 기본 스타일만으로 충분한지 조언들 듣고 싶습니다. 감사합니다!
-
해결됨아바타 커뮤니티앱 만들기 (React Native Expo)
아바타 이미지는 없는건가요?
아바타 hat이나 hand의 요소 이미지는 제공하지 않나요?
-
미해결React Native with Expo: 제로초에게 제대로 배우기
구글로그인은 따로 찍으실 계획없으신가요?
expo go에서 만들고있는데 구글 승인 오류문구가 계속 나오네요 400에러인데 해결하기 어렵습니다 ㅠ.ㅠ
-
미해결React Native with Expo: 제로초에게 제대로 배우기
EAS 로컬빌드시 환경변수가 가져와지지 않습니다.
eas build --platform android --profile preview --local--local 플래그로 로컬에서 빌드해서 테스트 해보고 있습니다. EXPO_PUBLIC_FRONT_URLEXPO_PUBLIC 접두사를 붙여서 환경변수 넣어두었고 Alert.alert("uri", process.env.EXPO_PUBLIC_FRONT_URL);위처럼 Alert 로 체크해보니 비어있었습니다 로컬로 빌드할시에 더 셋팅해줘야 하는 부분이 있을까요?
-
해결됨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 Expo)
[서버 실행하기] 의존성 설치를 위한 npm install 시 취약점 발생
초기 설치 시 취약점 발생```npm warn deprecated inflight@1.0.6: This module is not supported, and leaks memory. Do not use it. Check out lru-cache if you want a good and tested way to coalesce async requests by a key value, which is much more comprehensive and powerful.npm warn deprecated @humanwhocodes/config-array@0.11.14: Use @eslint/config-array insteadnpm warn deprecated rimraf@3.0.2: Rimraf versions prior to v4 are no longer supportednpm warn deprecated @humanwhocodes/object-schema@2.0.3: Use @eslint/object-schema insteadnpm warn deprecated glob@7.2.3: Glob versions prior to v9 are no longer supportednpm warn deprecated glob@7.2.3: Glob versions prior to v9 are no longer supportednpm warn deprecated glob@7.2.3: Glob versions prior to v9 are no longer supportednpm warn deprecated glob@7.2.3: Glob versions prior to v9 are no longer supportednpm warn deprecated glob@7.2.3: Glob versions prior to v9 are no longer supportednpm warn deprecated superagent@8.1.2: Please upgrade to v9.0.0+ as we have fixed a public vulnerability with formidable dependency. Note that v9.0.0+ requires Node.js v14.18.0+. See https://github.com/ladjs/superagent/pull/1800 for insight. This project is supported and maintained by the team at Forward Email @ https://forwardemail.netadded 795 packages, and audited 796 packages in 7s122 packages are looking for funding run npm fund for details18 vulnerabilities (4 low, 5 moderate, 9 high)To address issues that do not require attention, run: npm audit fixTo address all issues (including breaking changes), run: npm audit fix --forceRun npm audit for details.```이후 ```npm audit fix``` 실행 후 두 번째 취약점 발생```# npm audit reportmulter 1.4.4-lts.1 - 2.0.0Severity: highMulter vulnerable to Denial of Service via unhandled exception - https://github.com/advisories/GHSA-g5hg-p3ph-g8qgfix available via npm audit fix --forceWill install @nestjs/platform-express@8.2.3, which is a breaking changenode_modules/multer @nestjs/platform-express >=8.2.4 Depends on vulnerable versions of @nestjs/core Depends on vulnerable versions of multer node_modules/@nestjs/platform-express @nestjs/core >=9.0.0-next.1 Depends on vulnerable versions of @nestjs/platform-express node_modules/@nestjs/core @nestjs/serve-static 2.0.0-next.1 - 2.0.0 || >=3.0.0 Depends on vulnerable versions of @nestjs/core Depends on vulnerable versions of path-to-regexp node_modules/@nestjs/serve-static @nestjs/testing >=9.0.0-next.1 Depends on vulnerable versions of @nestjs/core Depends on vulnerable versions of @nestjs/platform-express node_modules/@nestjs/testingpath-to-regexp 0.2.0 - 1.8.0Severity: highpath-to-regexp outputs backtracking regular expressions - https://github.com/advisories/GHSA-9wv6-86v2-598jfix available via npm audit fix --forceWill install @nestjs/serve-static@5.0.3, which is a breaking changenode_modules/@nestjs/serve-static/node_modules/path-to-regexp6 high severity vulnerabilitiesTo address all issues (including breaking changes), run: npm audit fix --force```취약점 6개 발생 이후 안사라지길래 npm audit fix --force 진행해도 6개 그대로 나오는 현상 발생현재 node 23.7, npm 10.9.2 사용중인데 gpt한테 물어보니 nest js 버전 어쩌구 하던데 서버는 잘 몰라서 건들지를 못하겠네요. 어떻게 해야 할까요? ❗질문 작성시 꼭 참고해주세요에러 메세지에서 단서를 찾을 수 있는 경우가 많습니다. 에러 메세지를 읽고 한번 검색해보시는것을 추천드립니다.질문글을 작성하실때는, 현재 문제(또는 에러)와 코드나 github을 첨부해주세요.개발중인 OS, ReactNative, Node 버전 등의 개발환경을 알려주셔야합니다.에러메세지는 일부분이 아닌 전체 상황을 올려주세요. 일부만 보여주시면 답변이 어렵습니다.에러 잘라서 올리시면 안됩니다!(에러 일부만 자르거나 일부만 복사하지말아주세요)
-
미해결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로 게시글 작성 모달 강의의 시작과 같은 코드를 어디서 받을 수 있나요? 스크롤해서 보이는 링크에는 완성된 전체 코드만 있어서요.일일이 지우고 따라치려해도 나머지 부분이 완성되어 있어서 애뮬레이터에서 진행상황을 볼 수가 없어요...