172만명의 커뮤니티!! 함께 토론해봐요.
해결됨
맛집 지도앱 만들기 (React Native & NestJS)
최근 Expo SDK 51이 릴리즈 되면서 React Native 공식 문서에서도 Expo를 권장하도록 수정되었던데, Bare CLI를 계속 사용해야 할까요? 개발 경험 또한 Bare CLI보다 Expo를 사용했을 때 훨씬 빠르고 편했고 빌드하면 Native Module도 사용할 수 있으니 그리 큰 차이도 없는 것 같아서요. 선생님의 생각이 궁금합니다.
해결됨
맛집 지도앱 만들기 (React Native & NestJS)
❗ 질문 작성시 꼭 참고해주세요 최대한 상세히 현재 문제(또는 에러)와 코드(또는 github) 를 첨부해주셔야 그만큼 자세히 답변드릴 수 있습니다. 맥/윈도우, 안드로이드/iOS, 버전 등의 개발환경 도 함께 적어주시면 도움이 됩니다. 에러메세지는 일부분이 아닌 전체 상황 을 올려주세요! 환경 : 맥, 안드로이드 에뮬 : Pixel 3a API 34 | Android 14.0 버전 : react-native 0.72.6 node 22.2 gradle 8.0.1 openjdk version "17.0.11" 강의[4-0] GoogleMap 연동하기에서 ios는 정상적으로 구글맵이 적용되었습니다. 그런데 android는 빌드할 때 아래와같은 오류가 나왔습니다. Task :react-native-maps:compileDebugJavaWithJavac FAILED 시도해본것 android 폴더에서 ./gradlew clean 빌드 node_modules 폴더 삭제 후 yarn install 빌드 https://github.com/react-native-maps/react-native-maps/issues/5095 참고해서 react-native-maps, 1.14.0 다운그레이드 다운그레이드 후 task ':react-native-reanimated:buildCMakeDebug[arm64-v8a] 위 에러 발생시 react-native-reanimated 를 2.2.0으로 다운그레이드 후 시도하라는 글을 보고 다시 해보았지만 Task :app:checkDebugAarMetadata FAILED 와 같은 에러가 나왔습니다. Task :app:checkDebugAarMetadata FAILED 관련 에러와 react-natvie-maps 에러 관련된 다른 대처들도 해보았지만 잘 감이 잡히질 않아서 글남깁니다 ㅠㅠ
해결됨
맛집 지도앱 만들기 (React Native & NestJS)
❗ 질문 작성시 꼭 참고해주세요 최대한 상세히 현재 문제(또는 에러)와 코드(또는 github) 를 첨부해주셔야 그만큼 자세히 답변드릴 수 있습니다. 맥/윈도우, 안드로이드/iOS, 버전 등의 개발환경 도 함께 적어주시면 도움이 됩니다. 에러메세지는 일부분이 아닌 전체 상황 을 올려주세요! 윈도우 / 안드로이드 yarn add @react-navigation/drawer yarn add react-native-gesture-handler react-native-reanimated babel.config plugins: ['react-native-reanimated/plugin'] npm start --reset-cache 에러 발생 "dependencies": { "@react-native-masked-view/masked-view": "^0.3.1", "@react-navigation/drawer": "^6.6.15", "@react-navigation/native": "^6.1.17", "@react-navigation/stack": "^6.3.29", "react": "18.2.0", "react-native": "0.72.6", "react-native-gesture-handler": "^2.17.1", "react-native-reanimated": "^3.12.1", "react-native-safe-area-context": "^4.10.5", "react-native-screens": "^3.32.0" }, > Task :react-native-reanimated:compileDebugJavaWithJavac FAILED > Task :app:processDebugResources FAILURE: Build failed with an exception. * What went wrong: Execution failed for task ':react-native-reanimated:compileDebugJavaWithJavac'. 현재 reanimated 라이브러리를 설치하면 3.12.1 버전이 설치됩니다. 시도해 본 것 교안 버전과 같은 reanimated 3.5.4 버전 설치 reanimated 3.13 버전 설치 추가로 rn 버전부터 모든 라이브러리 버전을 강의와 같은 버전으로 했는데도 지난번 질문과 같은 gesture handler 등 왜 오류가 발생하는지 궁금합니다.
해결됨
맛집 지도앱 만들기 (React Native & NestJS)
이걸 해결하기 위해선 ios/podfile에서 플리퍼 관련 코드를 없애야됩니다. podfile 통째로 복사해서 지피티에게 준 다음에 'flipper 안 사용하게 코드 수정해줘.' 라고 해서 깔끔하게 제거된 podfile 코드를 받아 pod install해서 해결은 했습니다.. 다른 분들은 어떻게 해결하시는지 궁금하네요.
해결됨
핸즈온 리액트 네이티브
강의 들으면서 앱 디자인도 만져보고 파이어베이스도 연동해보고 하고 있는데 갑자기 사진과 같이 오류가 뜨는데 파이어 베이스 초기화 오류라고 하더라구요 ㅠㅠ 혹시 뭐가 문제인지 알려주실 수 있으실까요 ㅠㅠ 입니다..ㅠㅠ 파일이 커서 압축으로 node_modules 지우고 올려놨습니다..!
미해결
맛집 지도앱 만들기 (React Native & NestJS)
❗ 질문 작성시 꼭 참고해주세요 최대한 상세히 현재 문제(또는 에러)와 코드(또는 github) 를 첨부해주셔야 그만큼 자세히 답변드릴 수 있습니다. 맥/윈도우, 안드로이드/iOS, 버전 등의 개발환경 도 함께 적어주시면 도움이 됩니다. 에러메세지는 일부분이 아닌 전체 상황 을 올려주세요! 환경 : 윈도우, 안드로이드 에뮬 : Pixel 5 API 33 + Android13.0 버전 : jdk11, react-native 0.72.6, node 20, gradle 8.0.1 { "name": "Matzip", "version": "0.0.1", "private": true, "scripts": { "android": "react-native run-android", "ios": "react-native run-ios", "lint": "eslint .", "start": "react-native start", "test": "jest" }, "dependencies": { "@react-native-masked-view/masked-view": "^0.3.0", "@react-navigation/native": "^6.1.9", "@react-navigation/stack": "^6.3.20", "react": "18.2.0", "react-native": "0.72.6", "react-native-gesture-handler": "^2.13.4", "react-native-safe-area-context": "^4.7.4", "react-native-screens": "^3.27.0" }, "devDependencies": { "@babel/core": "^7.20.0", "@babel/preset-env": "^7.20.0", "@babel/runtime": "^7.20.0", "@react-native/eslint-config": "^0.72.2", "@react-native/metro-config": "^0.72.11", "@tsconfig/react-native": "^3.0.0", "@types/react": "^18.0.24", "@types/react-test-renderer": "^18.0.0", "babel-jest": "^29.2.1", "eslint": "^8.19.0", "jest": "^29.2.1", "metro-react-native-babel-preset": "0.76.8", "prettier": "^2.4.1", "react-test-renderer": "18.2.0", "typescript": "4.8.4" }, "engines": { "node": ">=16" } } react navigation 사용을 위해 라이브러리를 하나씩 추가하는 도중에 에러가 발생했습니다. yarn add @react-navigation/native yarn add react-native-screens react-native-safe-area-context @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(null); } import android.os.Bundle; yarn add @react-navigation/stack yarn add react-native-gesture-handler import 'react-native-gesture-handler'; 위 단계까지 하면 아래와 같이 에러가 발생합니다. info Reloading app... BUNDLE ./index.js error: Error: ENOENT: no such file or directory, lstat 'C:\Users\uersname\Desktop\Matzip\frontend\node_modules\prop-types\node_modules\react-is' at Object.realpathSync (node:fs:2707:29) at DependencyGraph.getSha1 (C:\Users\uersname\Desktop\Matzip\frontend\node_modules\metro\src\node-haste\DependencyGraph.js:214:12) at Transformer._getSha1 (C:\Users\uersname\Desktop\Matzip\frontend\node_modules\metro\src\Bundler. js:26:26) at Transformer.transformFile (C:\Users\uersname\Desktop\Matzip\frontend\node_modules\metro\src\DeltaBundler\Transformer.js:106:19) at Bundler.transformFile (C:\Users\uersname\Desktop\Matzip\frontend\node_modules\metro\src\Bundler. js:60:30) at async Object.transform (C:\Users\uersname\Desktop\Matzip\frontend\node_modules\metro\src\lib\transformHelpers.js:143:12) at async Graph._processModule (C:\Users\uersname\Desktop\Matzip\frontend\node_modules\metro\src\DeltaBundler\Graph.js:257:20) at async Graph._traverseDependenciesForSingleFile (C:\Users\uersname\Desktop\Matzip\frontend\node_modules\metro\src\DeltaBundler\Graph.js:249:5) at async Graph.traverseDependencies (C:\Users\uersname\Desktop\Matzip\frontend\node_modules\metro\src\DeltaBundler\Graph.js:157:9) at async DeltaCalculator._getChangedDependencies (C:\Users\uersname\Desktop\Matzip\frontend\node_modules\metro\src\DeltaBundler\DeltaCalculator.js:281:42) 시도해 본 것 android 폴더에서 ./gradlew clean react-native doctor react-native-gesture-handler 다운그레이드 node_modules 폴더 삭제 후 yarn install or npm install 강의 소스 코드와 버전 일치하도록 package.json 수정 후 yarn install react native 프로젝트 새로 생성 후 라이브러리 yarn 명령어로 설치하지 않고 강의 소스 package.json로 교체 후 yarn install 시 아래와 같이 오류 발생 info Opening the app on Android... info JS server already running. info 💡 Tip: Make sure that you have set up your development environment correctly, by running react-native doctor. To read more about doctor command visit: https://github.com/react-native-community/cli/blob/main/packages/cli-doctor/README.md#doctor FAILURE: Build failed with an exception. * Where: Build file 'C:\Users\username\Desktop\Matzip2\node_modules\react-native-gesture-handler\android\build.gradle' line: 310 * What went wrong: Execution failed for task ':tasks'. > Could not create task ':react-native-gesture-handler:checkIntegrityBetweenArchitectures'. > java.lang.reflect.UndeclaredThrowableException (no error message) * Try: > Run with --stacktrace option to get the stack trace. > Run with --info or --debug option to get more log output. > Run with --scan to get full insights. * Get more help at https://help.gradle.org BUILD FAILED in 6s npm uninstall react-native-gesture-handler 해당 라이브러리 삭제 후 index.js import 'react-native-gesture-handler' 주석 처리 하면 정상적으로 빌드 되고 에뮬에서 확인 가능합니다. 어떻게 하면 react-native-gesture-handler 라이브러리를 사용할 수 있을까요?
미해결
비전공자를 위한 진짜 입문 올인원 개발 부트캠프
처음 세팅중인데 읽기전용이라 떠서 커뮤니티에 뜨는대로 따라했는데 올려두신 사진과 같은 내용이 뜨질않아서 어떻게 세틍을 해야하나 질문드려봅니다..
미해결
틴더 파이어베이스 클론 | 리액트 네이티브
영상에는 npx create-expo-app tinder-clone 이후에 expo start를 하죠? 그런다음 코드를 켜보면 이렇게 생성되면서 js가아닌 tsx 즉, 타입 스크립트 형태로 생성되는데 어떻게 해야 하죠?
해결됨
맛집 지도앱 만들기 (React Native & NestJS)
안녕하세요. 지난번 질문 드렸던 것은 해결이 되었는데요. (인터셉터 / DB 마이그 postgres -> mssql / fcm push ) 구성은 강의 파일 기반으로 추가 및 수정 하고 있습니다. nest js 서버( + fcm 송신 서버) -> android(fcm 알림 수신) android fcm 수신 후 백그라운드 데이터 가공 (서버/로컬 data 처리 ) -> 가공 데이터로 push 생성 데이터 가공 (hooks) 하기 위해 (FetchData.ts) 파일을 import 하였습니다. (ok) import useFetchData from '@/hooks/useFetchData'; 발생한 push 알림 메세지를 클릭시 특정 화면으로 이동하고 싶은데요. ex) FeedList.tsx // FeedHomeScreen.tsx 쪽으로 이동하고 싶은데요.. 잘 안되고 있습니다. (이벤트 발생 위치는 알지만 처리를 못하고 있습니다.) App내에서 hooks을 사용해서 그런지 App 내에서 useNavigation() 을 사용해서 처리 하려고 했더니 navigation.navigate('RootNavigator'); MainDrawerNavigator / FeedList / FeedHomeScreen 등등 해봤는데 시작 전에 에러나 가더라고요. 렌더링 에러가 납니다. import React, { useEffect } from 'react'; import { StatusBar, Platform } from 'react-native'; import { NavigationContainer, useNavigation } from '@react-navigation/native'; import { QueryClientProvider } from '@tanstack/react-query'; import Toast, { BaseToast, BaseToastProps, ErrorToast } from 'react-native-toast-message'; import MainDrawerNavigator from './src/navigations/drawer/MainDrawerNavigator'; import AuthStackNavigator from './src/navigations/stack/AuthStackNavigator'; import useAuth from '@/hooks/queries/useAuth'; import RootNavigator from './src/navigations/root/RootNavigator'; import queryClient from './src/api/queryClient'; import { colors } from '@/constants'; import useThemeStorage from '@/hooks/useThemeStorage'; // push 추가 import messaging from '@react-native-firebase/messaging'; import PushNotification from 'react-native-push-notification'; import PushNotificationIOS from '@react-native-community/push-notification-ios'; import { getEncryptStorage, setEncryptStorage } from '@/utils/encryptStorage'; import useFetchData from '@/hooks/useFetchData'; const App = () => { const navigation = useNavigation(); // 화면 이동용 const { theme } = useThemeStorage(); const { fetchData } = useFetchData(); // 데이터 가공 usePushNotifications(fetchData, navigation); // FCM수신 -> 가공data 전달 useTokenRegistration(); // 토큰 저장 return ( <QueryClientProvider client={queryClient}> <NavigationContainer> <StatusBar barStyle={theme === 'light' ? 'dark-content' : 'light-content'} backgroundColor={theme === 'light' ? colors['light'].WHITE : colors['light'].BLACK} /> <RootNavigator /> <Toast config={toastConfig} /> </NavigationContainer> </QueryClientProvider> ); }; 어떻게 접근 해야 할지 잘 모르겠습니다. 베이스가 부족해서 그런지 네이게이터와 스크린 (단순 이동 뿐이 못하겠습니다. ㅎㅎ) 주말 잘 보내세요 감사합니다.
미해결
비전공자를 위한 진짜 입문 올인원 개발 부트캠프
섹션 2 HTML & CSS 기본 그랩마켓 웹 화면 구현하기 코드 복사할 수 있을까요? 컴퓨터를 새로 샀는데 굳이 다시 구현 할 필요가 없어서 그렇습니다.
해결됨
맛집 지도앱 만들기 (React Native & NestJS)
5-3강 16분정도에서 react-native-community/slide을 설치후 pod install을 하고 다시 빌드를 하면 아이콘이 깨졌던 이유가 뭔지 궁금합니다. 또한 xcode에서 copy bundle resourcse에서 icon들 추가해주면 아이콘이 다시 나오게 되는 것도 설명해주시면 감사하겠습니당:)
해결됨
맛집 지도앱 만들기 (React Native & NestJS)
스플래시 스크린에 쓰이는 각종 아이콘과 앱 아이콘등 어떤 파일에 있는지 도통 못찾겠네요ㅠㅠ
미해결
배달앱 클론코딩 [with React Native]
사용자가 바라보고 있는, 즉 기기가 바라보고 있는 각도를 실시간으로 반영해주고 싶은데 Swing 앱을 보면 그렇게 구현되어 있거든요, 그런데 제가 구현할 때는 (mapRef.current as NaverMapView).setLocationTrackingMode( TrackingMode.Follow ); 위와 같이 구현하게 되면 반쪽짜리 해결입니다. 사용자가 바라보고 있는 각도에 따라 실시간으로 반영이 되지만, TrackingMode이기에 지도를 스와이프해서 이동하게 되면 사용자 위치에 해당하는 마커에서 각도를 알려주지 않게 됩니다. TrackingMode를 사용하지 않고 이를 해결할 수 있는 방법이 있을까요? 아래는 NaverMap 코드입니다. 앗 참고로 expo환경입니다. import React, { useEffect, useRef, useState } from 'react'; import NaverMapView, { TrackingMode } from 'react-native-nmap'; import NaverMapView from 'react-native-nmap'; import useMyLocation from '@/hooks/use-my-location'; import type { TCoordinate } from '@/types/react-native-nmap'; interface INaverMapViewProps { zoom: number; children?: React.ReactNode; center: TCoordinate; onCameraChange: (e: { latitude: number; longitude: number; zoom: number; }) => void; } export default function NaverMaps({ children, center, zoom, onCameraChange, }: INaverMapViewProps) { const { currentLocation, currentHeading } = useMyLocation(); const mapRef = useRef<NaverMapView>(null); const [userInteraction, setUserInteraction] = useState<boolean>(false); useEffect(() => { if (!userInteraction && currentLocation) { const updatedCenter = { ...center, latitude: currentLocation.latitude, longitude: currentLocation.longitude, zoom: zoom, tilt: 0, bearing: currentHeading, }; (mapRef.current as NaverMapView).animateToCoordinate(updatedCenter); } }, [currentLocation, currentHeading, userInteraction, zoom, center]); const handleCameraChange = (e: { latitude: number; longitude: number; zoom: number; }) => { setUserInteraction(true); // 사용자가 상호작용했음을 나타냅니다. onCameraChange(e); }; const handleMapClick = () => { setUserInteraction(true); // 사용자가 수동으로 상호작용했으므로 자동으로 중심 이동을 하지 않습니다. }; return ( <NaverMapView ref={mapRef} style={{ width: '100%', height: '100%' }} center={center} bearing={currentHeading} minZoomLevel={13} maxZoomLevel={18} onCameraChange={handleCameraChange} zoomControl={false} scaleBar={false} rotateGesturesEnabled={true} onMapClick={handleMapClick} compass={false} stopGesturesEnabled={true} mapType={0} > {children} </NaverMapView> ); }
해결됨
맛집 지도앱 만들기 (React Native & NestJS)
현재 위치 누르면 지도가 이동되긴 하는데 안드로이드 아이폰 모두 이상한곳으로 이동됩니다.. 뭐가 잘못된걸까요?
미해결
맛집 지도앱 만들기 (React Native & NestJS)
안녕하세요. [3-8] React Query 도입(1) 강의를 수강하던 중 질문이 생겼습니다. 저는 백엔드 개발자로 일하고 있고, RN 을 취미로 공부하고 있는 개발자입니다. 보통 웹 환경에서는 보안상의 이유로 refresh token 을 서버에서 secure cookie 로 set 하고, 클라이언트측에서는 읽거나 수정하지 못하게 하고, 로그아웃 시에도 서버에서 해당 refresh token cookie 를 날려(delete)주는데, 모바일 환경에서는 refresh token 을 response body 로 받는 방법밖에 없는걸까요? (웹 브라우저 환경처럼 다른 선택지가 있는지 ex. 쿠키) refresh token 을 상용 앱 개발에서도 이렇게 다루는지 궁금합니다! (response body 로 받아서 Encrypted storage 에 저장해서 사용) 만약 그렇다면 이렇게 했을때 보안적으로 큰 문제가 없기 때문에 이렇게 사용하는 것일까요? 감사합니다.
미해결
배달앱 클론코딩 [with React Native]
Bundle Identifier를 강의에서 당신이 만든 폴더구조와 동일하게 해주면 됩니다. 이게 원래 ${YOUR_BUNDLE_ID}로 되어있어서 템플릿 리터럴로 내 고유값이 잘 들어갈 줄 알았는데 아니더라구요. 그냥 폴더구조 바꿨던대로 입력해주면 됩니다.
해결됨
맛집 지도앱 만들기 (React Native & NestJS)
[3-1] 홈 스크린 구현하기 4:13 에서 버튼 스타일 망가진걸 수정하시면서 flexDirection: 'row' 를 container, large, medium 객체에 추가하시고, styles[size] 를 <Text> 로 옮기셨는데 어떤 이유에서 이렇게 하신건지 잘 이해가 안됩니다. 혹시 이유에 대해 조금 더 보충설명 해 주실 수 있으신가요? flexDirection 이 뭔지는 이해하고 있는데, 이 상황에서 이게 어떻게 스타일을 고친건지 감이 잘 안잡히네요. 감사합니다.
해결됨
맛집 지도앱 만들기 (React Native & NestJS)
피그마 파일을 받기위해 Matzip.zip 파일을 받아서 압축해제 했으나 Matzip.fig 파일이 없습니다. 확인 부탁드립니다.
해결됨
맛집 지도앱 만들기 (React Native & NestJS)
❗ 질문 작성시 꼭 참고해주세요 최대한 상세히 현재 문제(또는 에러)와 코드(또는 github) 를 첨부해주셔야 그만큼 자세히 답변드릴 수 있습니다. 맥/윈도우, 안드로이드/iOS, 버전 등의 개발환경 도 함께 적어주시면 도움이 됩니다. 에러메세지는 일부분이 아닌 전체 상황 을 올려주세요! 빌드와 코드 자체에 오류는 딱히 없는데 앱이 splash 이미지까지만 켜지고 강제 종료됩니다. 여기 저기 검색해서 나온 방법 다 해본 것 같은데 해결이 안됩니다. logcat에는 systemserver와 pid 관련 오류가 많이 보입니다. 강의는 2-3까지 진행하였습니다.
해결됨
맛집 지도앱 만들기 (React Native & NestJS)
하나를 켜고 나머지 하나를 키려고 하면 아래 에러가 뜨는데 두개 동시에 열고 싶으면 어떻게 해야하나요? error listen EADDRINUSE: address already in use :::8081.
