묻고 답해요
164만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
해결됨[리뉴얼] 맛집 지도앱 만들기 (React Native & NestJS)
네이게이터 or 화면 이동 관련해서 문의 드립니다.
안녕하세요. 지난번 질문 드렸던 것은 해결이 되었는데요. (인터셉터 / 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> ); };어떻게 접근 해야 할지 잘 모르겠습니다. 베이스가 부족해서 그런지 네이게이터와 스크린 (단순 이동 뿐이 못하겠습니다. ㅎㅎ)주말 잘 보내세요 감사합니다.
-
미해결비전공자를 위한 진짜 입문 올인원 개발 부트캠프
그랩마켓 웹 화면 구현하기 코드
섹션 2HTML & CSS 기본그랩마켓 웹 화면 구현하기 코드 복사할 수 있을까요?컴퓨터를 새로 샀는데 굳이 다시 구현 할 필요가 없어서 그렇습니다.
-
해결됨[리뉴얼] 맛집 지도앱 만들기 (React Native & NestJS)
아이콘이 빌드 후 깨졌던 이유에 대해서 궁금합니다.
5-3강 16분정도에서 react-native-community/slide을 설치후 pod install을 하고 다시 빌드를 하면 아이콘이 깨졌던 이유가 뭔지 궁금합니다.또한 xcode에서 copy bundle resourcse에서 icon들 추가해주면 아이콘이 다시 나오게 되는 것도 설명해주시면 감사하겠습니당:)
-
해결됨[리뉴얼] 맛집 지도앱 만들기 (React Native & NestJS)
혹시 스플래시스크린에 사용되는 아이콘과 앱아이콘 위치 알수 있나요?
스플래시 스크린에 쓰이는 각종 아이콘과 앱 아이콘등 어떤 파일에 있는지 도통 못찾겠네요ㅠㅠ
-
미해결배달앱 클론코딩 [with React Native]
react-native-nmap 사용자 각도 관련 문제
사용자가 바라보고 있는, 즉 기기가 바라보고 있는 각도를 실시간으로 반영해주고 싶은데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)
refresh token 에 대하여
안녕하세요.[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]
[해결법] 잘못된 클라이언트ID를 지정. 콘솔에서 앱 Bundle Identifier를 잘못 등록함. 해결 방법
Bundle Identifier를 강의에서 당신이 만든 폴더구조와 동일하게 해주면 됩니다.이게 원래 ${YOUR_BUNDLE_ID}로 되어있어서 템플릿 리터럴로 내 고유값이 잘 들어갈 줄 알았는데 아니더라구요.그냥 폴더구조 바꿨던대로 입력해주면 됩니다.
-
해결됨[리뉴얼] 맛집 지도앱 만들기 (React Native & NestJS)
container 에 flexDirection row 넣은 이유가 궁금합니다.
[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.
-
해결됨[리뉴얼] 맛집 지도앱 만들기 (React Native & NestJS)
강사님 이 강의 관련 깃허브 링크 알 수 있을까요?
강의에서 가끔씩 깃허브 참고하시라고 하시고 답변으로도 그렇게 말씀해주셔서 찾아보려고 노력했는데 깃허브 링크를 못찾겠더라구요😖 혹시 괜찮으시다면 공유 부탁드려도 될까요?
-
해결됨[리뉴얼] 맛집 지도앱 만들기 (React Native & NestJS)
랜더링 질문 있습니다!!
발생: FeedDetailScreen진도: Calendar 구현하기 도입내용: Rendered more hooks than during the previous render v Previous render Next render ------------------------------------------------------ 1. useContext useContext 2. useContext useContext 3. useContext useContext 4. useEffect useEffect 5. useState useState .... 29. undefined useEffect ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ in FeedDetailScreen (created by SceneView)useEffect의 위치에 따라 저런 에러가 발생하는데 왜 그런지 혹시 알 수 있을까요??const { id } = route.params; ... const { } = useHooks; //! useEffect <<<<< 에러 발생 x if (isError || isPending) return null; //! 아래로 에러 발생 //! useEffec <<<< 에러 발생 handler 1 handler 2 return (View)
-
해결됨[리뉴얼] 맛집 지도앱 만들기 (React Native & NestJS)
안드로이드가 작동하지 않습니다.
❗질문 작성시 꼭 참고해주세요최대한 상세히 현재 문제(또는 에러)와 코드(또는 github)를 첨부해주셔야 그만큼 자세히 답변드릴 수 있습니다.맥/윈도우, 안드로이드/iOS, 버전 등의 개발환경도 함께 적어주시면 도움이 됩니다. 에러메세지는 일부분이 아닌 전체 상황을 올려주세요! 맥 m1 pro입니다. 리액트 네이티브 버전은 강사님과 같이 진행하고 있습니다. 아이폰은 문제 없이 진행되는 반면 안드로이드가 작동되지 않아 질문올립니다. Warning: SDK processing. This version only understands SDK XML versions up to 3 but an SDK XML file of version 4 was encountered. This can happen if you use versions of Android Studio and the command-line tools that were released at different times.FAILURE: Build failed with an exception.* What went wrong:Execution failed for task ':app:installDebug'.> com.android.builder.testing.api.DeviceException: No connected devices!* 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 14sinfo Run CLI with --verbose flag for more details.
-
해결됨[리뉴얼] 맛집 지도앱 만들기 (React Native & NestJS)
QueryClient 사용 관련 질문
API를 body형태로 필요할 떄 마다 상태값을 전달하는 방식으로 사용하고 있었습니다.쿼리클라이언트를 사용하여 params 형태로 전달하면 가지는 이점이 어떤 것이 있을지 궁금합니다.항상 감사드립니다.❗질문 작성시 꼭 참고해주세요최대한 상세히 현재 문제(또는 에러)와 코드(또는 github)를 첨부해주셔야 그만큼 자세히 답변드릴 수 있습니다.맥/윈도우, 안드로이드/iOS, 버전 등의 개발환경도 함께 적어주시면 도움이 됩니다. 에러메세지는 일부분이 아닌 전체 상황을 올려주세요!
-
해결됨[리뉴얼] 맛집 지도앱 만들기 (React Native & NestJS)
ParamList 관련 질문
안녕하세요. 좋은 강의 감사드립니다.질문 1: RootStackParamList로 현업에서는 사용을 안하는지 궁금합니다.네비게이션을 각 기능별로 나누어 ParamList를 관리하면, 예상되는 이점은 네비게이션 시 필요한 리소스만 가지게 되는 이점이 있을 것 같은데요. 이렇게 생각하면 맞는지 궁금합니다.RootStackParamList로 화면의 타입을 관리하고 있었습니다.해당 부분의 리팩토링은 필수 적일까요? 항상 감사드립니다. ❗질문 작성시 꼭 참고해주세요최대한 상세히 현재 문제(또는 에러)와 코드(또는 github)를 첨부해주셔야 그만큼 자세히 답변드릴 수 있습니다.맥/윈도우, 안드로이드/iOS, 버전 등의 개발환경도 함께 적어주시면 도움이 됩니다. 에러메세지는 일부분이 아닌 전체 상황을 올려주세요!
-
해결됨[리뉴얼] 맛집 지도앱 만들기 (React Native & NestJS)
구글 맵 키 관련 궁금한 점
안녕하세요, 강사님구글맵을 사용할때 AndroidManifest.xml, AppDelegate.mm 파일에 직접적으로 구글키를 넣어주는데 이렇게 된다면, 키값이 노출이 될 것 같은데, 이 파일은 git ignore을 해도 되는 파일인가요??
-
해결됨[리뉴얼] 맛집 지도앱 만들기 (React Native & NestJS)
갑자기 실행이 안됩니다..
error: node_modules\react-native-reanimated\src\reanimated2\index.ts: Cannot find module 'babel-plugin-module-resolver'Require stack:- C:\Users\gimse\Documents\dogfoot\dogfeet\front\node_modules\@babel\core\lib\config\files\plugins.js- C:\Users\gimse\Documents\dogfoot\dogfeet\front\node_modules\@babel\core\lib\config\files\index.js- C:\Users\gimse\Documents\dogfoot\dogfeet\front\node_modules\@babel\core\lib\index.js- C:\Users\gimse\Documents\dogfoot\dogfeet\front\node_modules\metro-transform-worker\src\index.js- C:\Users\gimse\Documents\dogfoot\dogfeet\front\node_modules\metro\src\DeltaBundler\Worker.flow.js- C:\Users\gimse\Documents\dogfoot\dogfeet\front\node_modules\metro\src\DeltaBundler\Worker.js- C:\Users\gimse\Documents\dogfoot\dogfeet\front\node_modules\jest-worker\build\workers\processChild.jsMake sure that all the Babel plugins and presets you are using are defined as dependencies or devDependencies in your package.jsonfile. It's possible that the missing plugin is loaded by a presetyou are using that forgot to add the plugin to its dependencies: youcan workaround this problem by explicitly adding the missing packageto your top-level package.json.
-
해결됨[리뉴얼] 맛집 지도앱 만들기 (React Native & NestJS)
안드로이드 시뮬레이터 에러 해결
실무에서 사용하기 위해 일부러 강의버전과 다르게 최신버전으로만 진행중입니다.그래서 많은 에러가 나고 있는데.. ios는 잘 열리는데 android만 안열려서 이것저것 해보다 방법을 찾아서 공유합니다. 우선 에러는 아래와 같았고 문제는 ndkVersion버전이었습니다. * What went wrong: A problem occurred configuring project ':react-native-reanimated'. > [CXX1101] NDK at /Users/name/Library/Android/sdk/ndk/26.1.10909125 did not have a source.properties file 제가 해결 한 방법은 아래와 같습니다.cf) 현재 ndkVersion과 호환되는 ndkVersion버전은 저랑 다를 수 있습니다. 저는 23.1.7779620버전으로 진행했는데 호환되는 버전으로 변경하신다음 진행하시면 됩니다.0.Android Studio에서 변경하고자 하는 NDK 버전 설치1.프로젝트 루트 디렉터리로 이동합니다2.local.properties 파일을 생성하거나 엽니다 vim local.properties3.local.properties 파일에 SDK 및 NDK 경로를 추가합니다sdk.dir=/Users/wini/Library/Android/sdkndk.dir=/Users/wini/Library/Android/sdk/ndk/23.1.77796204.파일을 저장하고 닫습니다. : Esc, :wq, Enter5.android/build.gradle파일에서 ndkVersion 버전을 변경합니다. ndkVersion = "23.1.7779620"6.잘못된 NDK 폴더 삭제rm -rf /Users/wini/Library/Android/sdk/ndk/26.1.109091257.Gradle 캐시 및 빌드 파일 정리cd android ## 안드로이드 파일에서 진행./gradlew clean8.Metro 번들러 재시작 및 Android 앱 실행cd .. ## front폴더에서 npx react-native start --reset-cachenpx react-native run-android