묻고 답해요
141만명의 커뮤니티!! 함께 토론해봐요.
인프런 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> ); };어떻게 접근 해야 할지 잘 모르겠습니다. 베이스가 부족해서 그런지 네이게이터와 스크린 (단순 이동 뿐이 못하겠습니다. ㅎㅎ)주말 잘 보내세요 감사합니다.
-
미해결Next + React Query로 SNS 서비스 만들기
next에서 msw사용이 살짜 애매하다는게 무슨 뜻인지 궁금합니다
next에서 msw사용이 애매하다는 것이 무슨뜻인지그럼 react에서는 사용방법이 다른 것인지 궁금합니다
-
미해결Next + React Query로 SNS 서비스 만들기
인터셉팅 라우터 활용도
안녕하세요. 실무에서 인터셉팅 라우팅 활용 빈도가 잦을까요?클론코딩이라 x.com에서 사용한 방식 그대로 만들기 위한 학습인지 아니면 실무에서도 사용빈도가 높은지 궁금합니다강의는 들어서 인터셉팅 라우팅을 이해하긴 했지만 실무에서는 로그인, 회원가입 팝업 띄울때 인터셉팅 라우팅을 사용하지 않을것같은 생각이 들어서 질문드립니당감사합니다
-
미해결Next + React Query로 SNS 서비스 만들기
백엔드 /api/users/{id}의 응답 데이터에 Followers가 없습니다.
안녕하세요. 강사님😎유저 프로필 페이지의 팔로우 버튼을 구현 중에 있었습니다.예제를 따라하던 중 아래 캡처 이미지와 같이 API /api/users/{id} 의 응답 데이터에 Followers 객체가 없는걸 확인했습니다.. Followers 정보가 없어 세션과 비교하여 팔로잉 여부를 체크할 수가 없네요.제가 API나 코드를 잘 못 구현하고 있는걸까요?ㅠㅠ(스웨거 및 query-devtool)강의 영상에는 존재하고요.추가질문공부를 집에서는 데스크탑, 카페에서 노트북으로 하다보니 서버를 각각 피씨에 띄우는게 번거로워 하나의 서버를 바라보게 하려고 했습니다.그래서 개인 서버에 docker형태로 BE서버를 동작시켜 사용하려고 했습니다. 서버는 정상적으로 구동했으나 API 중 인증(로그인)이 필요한 API는 모두 403으로 응답이 오네요ㅠㅠ 방식.로컬next(localhost:3000) -> 외부.BE서버(be-server:9090) 호출 nest를 알지 못해 깊게 분석은 못해봤고 소스의logged-in-guard.ts 에 request를 로그로 찍으니 cookie부분이 가 비어 있습니다.import { CanActivate, ExecutionContext, Injectable } from '@nestjs/common'; import { Observable } from 'rxjs'; @Injectable() export class LoggedInGuard implements CanActivate { canActivate( context: ExecutionContext, ): boolean | Promise<boolean> | Observable<boolean> { const request = context.switchToHttp().getRequest(); console.log(request) return request.user?.id && request.isAuthenticated(); } } 간단하게 해결이 가능하면 조언부탁드리며 아니면 무시해주셔도 됩니다.🙏
-
미해결Next + React Query로 SNS 서비스 만들기
라우팅 관련해서 질문이 있습니다!
안녕하세요 제로초님! 강의 잘 듣고 있습니다.화면이 mount 되었을 때는 최상단에 존재하는 page.tsx에 의해 localhost:3000 URL가 나오고 있는 상황입니다.그런데 처음 mount 되었을 때 localhost:3000/login 형태의 URL을 가지려고 한다면 어떤 방법으로 해야할지 궁금합니다!제가 생각한 방법은 아래와 같은데 좀 더 좋은 방법이 있을까요?1. 최상단에 존재하는 page.tsx에서 useEffect 내부에 router.push('/login') 을 한다.next 에서 제공하는 redirect 기능을 사용한다.
-
해결됨맛집 지도앱 만들기 (React Native + NestJS)
아이콘이 빌드 후 깨졌던 이유에 대해서 궁금합니다.
5-3강 16분정도에서 react-native-community/slide을 설치후 pod install을 하고 다시 빌드를 하면 아이콘이 깨졌던 이유가 뭔지 궁금합니다.또한 xcode에서 copy bundle resourcse에서 icon들 추가해주면 아이콘이 다시 나오게 되는 것도 설명해주시면 감사하겠습니당:)
-
해결됨맛집 지도앱 만들기 (React Native + NestJS)
혹시 스플래시스크린에 사용되는 아이콘과 앱아이콘 위치 알수 있나요?
스플래시 스크린에 쓰이는 각종 아이콘과 앱 아이콘등 어떤 파일에 있는지 도통 못찾겠네요ㅠㅠ
-
해결됨맛집 지도앱 만들기 (React Native + NestJS)
현재위치가 이상한곳으로 이동됩니다.
현재 위치 누르면 지도가 이동되긴 하는데 안드로이드 아이폰 모두 이상한곳으로 이동됩니다.. 뭐가 잘못된걸까요?
-
미해결Next + React Query로 SNS 서비스 만들기
24/06/10 기준으로 게시글 생성 API 403 Forbidden Err
지난 이틀전 토요일에서는 문제없이 작동했었는데, 갑자기 게시글 작성 api가 제대로 요청을 받지 않는 것 같습니다.스웨거로도 요청 보내보았는데, 되지 않아 질문 올렸습니다!
-
해결됨맛집 지도앱 만들기 (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 에 저장해서 사용)만약 그렇다면 이렇게 했을때 보안적으로 큰 문제가 없기 때문에 이렇게 사용하는 것일까요? 감사합니다.
-
해결됨맛집 지도앱 만들기 (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까지 진행하였습니다.
-
미해결Next + React Query로 SNS 서비스 만들기
혹시 벡엔드 서버를 따로안두고 프론트와 벡엔드 둘다 하나의 서버에 둔다면 배포방법이 달라지나요?
지금 제로초님은 벡엔드와 프론트서버를 구분해두셨고 백엔드서버는 ec2에 올리지않아서 백엔드와 관련된 것들은 작동하지 않는 상태인데, 만약에 fetch할때 백엔드서버주소가 아닌 프론트쪽 경로로 해서 하면 본 강좌에서 한것과 같이 ec2로 배포를 해도 작동을 할까요? 아니면 이경우 배포방법이 달라지나요?
-
해결됨맛집 지도앱 만들기 (React Native + NestJS)
안드로이드 아이폰 시뮬레이터 동시에 가능한가요?
하나를 켜고 나머지 하나를 키려고 하면 아래 에러가 뜨는데 두개 동시에 열고 싶으면 어떻게 해야하나요?error listen EADDRINUSE: address already in use :::8081.
-
미해결Next + React Query로 SNS 서비스 만들기
게시물 팔로우 중 탭에서 게시물 업로드 오류 발생
게시물 추천 탭에서는 게시하기 버튼 클릭하면 게시물 업로드가 잘 작동됩니다. 그러나 팔로우 중 탭에서 게시하기 버튼을 클릭하면 에러가 발생합니다.게시물 게시하기 코드는 아래와 같습니다. const mutation = useMutation({ mutationFn: async (e: React.FormEvent) =>{ e.preventDefault(); const formData = new FormData(); formData.append("content", content); imgPreview.forEach((img) => { img && formData.append("images", img.file); }); return fetch(`${process.env.NEXT_PUBLIC_BASE_URL}/api/posts`, { method: "post", credentials: "include", body: formData, }); }, onSuccess: async (response) => { const newPost = await response.json(); setContent(""); setImgPreview([]); if (queryClient.getQueryData(["posts", "recommends"])) { queryClient.setQueryData( ["posts", "recommends"], (prev: { pages: Post[][] }) => { const shallow = { ...prev, pages: [...prev.pages] }; shallow.pages[0] = [...shallow.pages[0]]; shallow.pages[0].unshift(newPost); return shallow; } ); } if(queryClient.getQueryData(["posts", "followings"])) { console.log("get", queryClient.getQueryData(["posts", "followings"])); queryClient.setQueryData( ["posts", "followings"], (prev: { pages: Post[][] }) => { const shallow = { ...prev, pages: [...prev.pages] }; shallow.pages[0] = [...shallow.pages[0]]; shallow.pages[0].unshift(newPost); return shallow; } ); } }, onError: (error) => { console.error(error); alert("업로드 중 에러가 발생했습니다"); }, });최근 새소식을 보고 useSuspenseQuery 가 문제가 있다는 것을 보고 Suspense 없애고 기존에 사용한 TabDecider 컴포넌트로 변경했습니다.// src\app\(afterLogin)\home\page.tsx export default async function Home() { const session = await auth(); return ( <main className={styles.main}> <TabContextProvider> <Tab /> <PostForm me={session} /> <TabDecider /> </TabContextProvider> </main> ); } 네트워크 탭에서 posts 요청은 성공했다고 나와있습니다.새로고침하면 업로드가 제대로 되지만 게시하기 버튼 클릭하면 onError에서 발생하는 '업로드 중 에러 발생' 알림창이나옵니다.react-query devtools에서 mutation 에러를 확인하니인피니트 스크롤링하는 pages에 관한 오류가 나왔습니다.FollowingPosts 컴포넌트와 PostForm에서 queryClient.getQueryData(["posts","followings"] 에서 받는 데이터를 출력해보니 아래와 같은 데이터 구조를 가지고 있습니다.FollowingPosts 컴포넌트 코드는 다음과 같습니다.export default function FollowingPosts() { const { isPending, data } = useQuery<PostType[]>({ queryKey: ["posts", "followings"], queryFn: getFollowingPosts, staleTime: 60 * 1000, gcTime: 300 * 1000, }); if (isPending) return <Loading />; console.log("data2", data); return data?.map((post) => <Post key={post.postId} post={post} />); }FollowingPosts 컴포넌트에서는 useInifiniteQuery가 아닌 useQuery를 통해 데이터를 받아와서 데이터 안에 있는 pages가 없어서 이런 오류가 나오는걸까요??우선 useInfiniteQuery로 변경해 게시물을 등록하면잘 작동되는 것은 확인했습니다.
-
미해결Next + React Query로 SNS 서비스 만들기
next.js 멀티플 런타임 관련해서 질문 올립니다..
안녕하세요! 강의와 직접적으로 관련된 질문은 아니지만 도저히 해결책을 도저히 찾기가 어려워서 질문 글 올립니다..하나의 Next.js 프로젝트에서 백엔드 api를 구성할 때, node.js와 파이썬 서버리스 함수를 함께 사용할 수 있나요?백엔드로 파이썬 서버리스 함수를 단독으로 사용하는 것은 가능한 것 같은데,동일한 프로젝트에서 node.js 서버리스 함수와 함께 사용할 수 있는지가 궁금합니다..
-
해결됨맛집 지도앱 만들기 (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.