강사님의 컴포넌트를 나눌 때의 기준이 궁금한데요. 지금까지 제가 이해한 내용으로는반복되는 부분은 컴포넌트 화 시켜서 공통컴포넌트 _component폴더에 두시는것 같습니다.  제가 궁금한 것은 (afterLogin)/home/page.tsx 내부 구조가 컴포넌트만 있는데 (사진첨부)(afterLogin)/layout.tsx파일의 내부구조는 컴포넌트화 되어있는 부분이 섞여있습니다page는 모두 컴포넌트화 시키셨는데 layout은 왜 모두 컴포넌트화를 시키지 않으셨을까요? 따로 컴포넌트화 하시는 기준이 있을까요?

❗질문 작성시 꼭 참고해주세요최대한 상세히 현재 문제(또는 에러)와 코드(또는 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/nativeyarn add react-native-screens react-native-safe-area-context@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(null);}import android.os.Bundle;yarn add @react-navigation/stackyarn add react-native-gesture-handlerimport '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 cleanreact-native doctorreact-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 라이브러리를 사용할 수 있을까요?

안녕하세요 선생님여쭤보고 싶은 부분이 있습니다. 유저정보 수정 후 서버세션을 업데이트하려는데검색해도 생각처럼 잘 되지 않더라구요.혹시 업데이트 방법을 아실까해서 문의드립니다.

안녕하세요. beforeLogin과 afterLogin 둘다 layout.tsx를 가지고 있는데, localhost:3000에서 beforeLogin의 layout.tsx를 렌더하는 이유가 궁금합니다. page.tsx가 있으면 그쪽을 인식하는 건가요?

Next.js는 라이브러리에서 보내는 요청까지 캐싱해버리는데,export const dynamic = 'force-dynamic'해당 문구를 page.tsx에 넣어주면 해당 페이지에서 보내는 모든 요청을 캐싱하지 않음. => export const dynamic = 'force-dynamic'를 적용한 page.tsx는 써드파티 라이브러리의 백엔드 요청 캐싱을 무시한다.또한, 모든 요청을 캐싱하지 않기 때문에 react query나 fetch 함수의 요청도 모두 캐싱을 하지 않는다.라고 이해했는데 잘 이해한 것인지 모르겠어서 질문 올리게 되었습니다. 

안녕하세요! 개인 프로젝트에서 백엔드 먼저 개발 후 프론트를 Next로 개발하면서 강의를 통해 next-auth를 접했는데요. 저는프론트에서 로그인을 하면 해당 로그인 request가 서버로 전달되고, 서버에서 jwt access, refresh token을 발급해프론트에 전달하고 저장하는 기존의 서버 로그인 방식으로 설계를 하였습니다. 또한 서버의 protected request에 대해 위에서 발급한 access token을 활용하여 유효한지 검증 후 진행하도록 하고자 하는데요. next-auth부분을 보며 현재의 공식 문서와도 조금 다르고 제가 원하는 방식과 통합하여 구현이 가능한지 잘 이해가 안가더라구요ㅠ혹시 이러한 방식으로도 서버에서 얻은 jwt토큰을 next-auth에 삽입이 가능할까요? 대략적인 흐름은 어떻게 진행될까요?

안녕하세요. 지난번 질문 드렸던 것은 해결이 되었는데요. (인터셉터 / 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에서 msw사용이 애매하다는 것이 무슨뜻인지그럼 react에서는 사용방법이 다른 것인지 궁금합니다

안녕하세요. 실무에서 인터셉팅 라우팅 활용 빈도가 잦을까요?클론코딩이라 x.com에서 사용한 방식 그대로 만들기 위한 학습인지 아니면 실무에서도 사용빈도가 높은지 궁금합니다강의는 들어서 인터셉팅 라우팅을 이해하긴 했지만 실무에서는 로그인, 회원가입 팝업 띄울때 인터셉팅 라우팅을 사용하지 않을것같은 생각이 들어서 질문드립니당감사합니다

안녕하세요. 강사님😎유저 프로필 페이지의 팔로우 버튼을 구현 중에 있었습니다.예제를 따라하던 중 아래 캡처 이미지와 같이 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(); } } 간단하게 해결이 가능하면 조언부탁드리며 아니면 무시해주셔도 됩니다.🙏

안녕하세요 제로초님! 강의 잘 듣고 있습니다.화면이 mount 되었을 때는 최상단에 존재하는 page.tsx에 의해 localhost:3000 URL가 나오고 있는 상황입니다.그런데 처음 mount 되었을 때 localhost:3000/login 형태의 URL을 가지려고 한다면 어떤 방법으로 해야할지 궁금합니다!제가 생각한 방법은 아래와 같은데 좀 더 좋은 방법이 있을까요?1. 최상단에 존재하는 page.tsx에서 useEffect 내부에 router.push('/login') 을 한다.next 에서 제공하는 redirect 기능을 사용한다. 

5-3강 16분정도에서 react-native-community/slide을 설치후 pod install을 하고 다시 빌드를 하면 아이콘이 깨졌던 이유가 뭔지 궁금합니다.또한 xcode에서 copy bundle resourcse에서 icon들 추가해주면 아이콘이 다시 나오게 되는 것도 설명해주시면 감사하겠습니당:)

스플래시 스크린에 쓰이는 각종 아이콘과 앱 아이콘등 어떤 파일에 있는지 도통 못찾겠네요ㅠㅠ 

현재 위치 누르면 지도가 이동되긴 하는데 안드로이드 아이폰 모두 이상한곳으로 이동됩니다.. 뭐가 잘못된걸까요? 

지난 이틀전 토요일에서는 문제없이 작동했었는데, 갑자기 게시글 작성 api가 제대로 요청을 받지 않는 것 같습니다.스웨거로도 요청 보내보았는데, 되지 않아 질문 올렸습니다!

안녕하세요.[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 에 저장해서 사용)만약 그렇다면 이렇게 했을때 보안적으로 큰 문제가 없기 때문에 이렇게 사용하는 것일까요? 감사합니다.

[3-1] 홈 스크린 구현하기 4:13에서 버튼 스타일 망가진걸 수정하시면서 flexDirection: 'row' 를 container, large, medium 객체에 추가하시고, styles[size] 를 <Text> 로 옮기셨는데 어떤 이유에서 이렇게 하신건지 잘 이해가 안됩니다.혹시 이유에 대해 조금 더 보충설명 해 주실 수 있으신가요? flexDirection 이 뭔지는 이해하고 있는데, 이 상황에서 이게 어떻게 스타일을 고친건지 감이 잘 안잡히네요.  감사합니다.

피그마 파일을 받기위해 Matzip.zip 파일을 받아서 압축해제 했으나 Matzip.fig 파일이 없습니다. 확인 부탁드립니다. 

❗질문 작성시 꼭 참고해주세요최대한 상세히 현재 문제(또는 에러)와 코드(또는 github)를 첨부해주셔야 그만큼 자세히 답변드릴 수 있습니다.맥/윈도우, 안드로이드/iOS, 버전 등의 개발환경도 함께 적어주시면 도움이 됩니다. 에러메세지는 일부분이 아닌 전체 상황을 올려주세요!빌드와 코드 자체에 오류는 딱히 없는데 앱이 splash 이미지까지만 켜지고 강제 종료됩니다. 여기 저기 검색해서 나온 방법 다 해본 것 같은데 해결이 안됩니다. logcat에는 systemserver와 pid 관련 오류가 많이 보입니다. 강의는 2-3까지 진행하였습니다.

지금 제로초님은 벡엔드와 프론트서버를 구분해두셨고 백엔드서버는 ec2에 올리지않아서 백엔드와 관련된 것들은 작동하지 않는 상태인데, 만약에 fetch할때 백엔드서버주소가 아닌 프론트쪽 경로로 해서 하면 본 강좌에서 한것과 같이 ec2로 배포를 해도 작동을 할까요? 아니면 이경우 배포방법이 달라지나요?