안녕하세요 . 아직 리액트에 빠져살아서 서버컴포넌트와 클라이언트 컴포넌트 사용 구분이 잘 가지 않아 질문드립니다. 1번 질문. 예를들어 3개의 페이지가 존재한다고 했을때, 각 페이지는 navbar(하위컴포넌트)를 가지려고 하는데요 navbar의 버튼은 각 페이지 마다 다 다른 함수로 동작하게 된다고 가정하면, 3개의 페이지 컴포넌트는 'use-client'를 사용하여 클라이언트 컴포넌트가 되어야 하는게 맞나요? 그렇다면 페이지의 하위컴포넌트를 서버컴포넌트로 만들면 서버컴포넌트로 사용하면 ssr을 사용하는 이유가 충분할까요? 2번질문. after_login 폴더 안에 _lib폴더에서 'getTrends'함수로 패치를 했는데요, 결국에는 클라이언트 컴포넌트에서 usequery로 데이터를 패치해오고 있습니다. 그러면 데이터 패치도 클라이언트컴포넌트에서 진행하는것인데, 1번상황에 패치도 2번과 같이 한다면 서버사이드렌더링의 장점은 어떤것이라고 볼 수 있을까요?
❗ 질문 작성시 꼭 참고해주세요 최대한 상세히 현재 문제(또는 에러)와 코드(또는 github) 를 첨부해주셔야 그만큼 자세히 답변드릴 수 있습니다. 맥/윈도우, 안드로이드/iOS, 버전 등의 개발환경 도 함께 적어주시면 도움이 됩니다. 에러메세지는 일부분이 아닌 전체 상황 을 올려주세요! 질문이 있습니다 강사님 오류는 아니고 궁금한점이있어서 문의드립니다보통 다른 네비게이터의 자식 페이지로 이동할때 StackNavigator 1 - Screen A - Screen B StackNavigator 2 - Screen C - Screen Dnavigation.navigate('StackNavigator2', {screen: 'Screen C'}); 이렇게 이동한다고 하지만, 이게 엄청 복잡하거나 screen 안에 param 안에 screen 즉 아래와 같은 경우에는 어떻게 작업해야할까요? navigation.navigate(MAIN_NAVIGATIONS.MAP, { screen: MAP_NAVIGATIONS.LOCATION_FEED_TAB, params: { screen: LOCATION_TAB_NAVIGATIONS.LOCATION_FEED_HOME, params: { screen: LOCATION_NAVIGATIONS.LOCATION_DETAIL, params: {id}, }, }, }); [ex) 상세 페이지(detail)를 list를 통해 이동했을 경우와 calendar 에서 바로 상세페이지로 이동했을 경우 goBack()의 히스토리가 잘못되어 calendar에서 바로 상세페이지(detail)로 이동하였을경우 goBack() 올바르게 작동하지 않는 경우] 3가지 방안으로 생각하였지만.. (1) goBack()을 사용하지 않고 어떤 경로로 접속하였든 List로 이동시키는 방법 (2) 아니면 흐름을 위하여 동일한 screen을 다른 navigation 에 각각 등록하여 따로 흐름(?)을 관리 screen을 다른 navigation 에 각각 사용하는 경우도있나요? (3) 전역상태 push 관련 history를 직접 관리하여 작업해야하는 지 어떤게 맞는 방법인지 혹시 다른 방법이 있는지 궁금하여 문의드립니다.
최근 Expo SDK 51이 릴리즈 되면서 React Native 공식 문서에서도 Expo를 권장하도록 수정되었던데, Bare CLI를 계속 사용해야 할까요? 개발 경험 또한 Bare CLI보다 Expo를 사용했을 때 훨씬 빠르고 편했고 빌드하면 Native Module도 사용할 수 있으니 그리 큰 차이도 없는 것 같아서요. 선생님의 생각이 궁금합니다.
제로초님 안녕하세요! 제가 개발중인 프로젝트에서 최신순, 조회순 정렬과 키워드 검색을 통해 도서 목록을 출력하고 있는데요. Infinite scroll을 적용하려다 보니 강의에서 처럼 cursor로 전달할 postId 같은 값이 없고, 도서 데이터의 키 값은 uuid로 되어있습니다. 커서 기반으로 개발하려면 백엔드에서 별도 값을 내려준다거나, 조회 SQL을 변경 해야 할까요? 어떤 적절한 방법이 있을지 궁금합니다. 감사합니다!
❗ 질문 작성시 꼭 참고해주세요 최대한 상세히 현재 문제(또는 에러)와 코드(또는 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 에러 관련된 다른 대처들도 해보았지만 잘 감이 잡히질 않아서 글남깁니다 ㅠㅠ
❗ 질문 작성시 꼭 참고해주세요 최대한 상세히 현재 문제(또는 에러)와 코드(또는 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 app 개발만 조금 해봤는데, next 강의에서 server action을 처음 접하면서 헷갈려서 질문 드립니다. 예를 들어서 게시판 목록을 불러올 때 server fetch를 통해 화면에 출력하고 있고, 무한스크롤이나 add, edit, delete 동작 등을 server action으로 할 수 있다는 것을 알았는데요. 그렇다면 next app을 개발할 때는 client fetch는 전혀 필요가 없는 건가요? 아니면 어떤 필요에 따라 client fetch와 server fetch를 혼용해서 사용해야 하는 건지.. 궁금합니다. 감사합니다!
이걸 해결하기 위해선 ios/podfile에서 플리퍼 관련 코드를 없애야됩니다. podfile 통째로 복사해서 지피티에게 준 다음에 'flipper 안 사용하게 코드 수정해줘.' 라고 해서 깔끔하게 제거된 podfile 코드를 받아 pod install해서 해결은 했습니다.. 다른 분들은 어떻게 해결하시는지 궁금하네요.
안녕하세요 제로초님. Parallel Routes에 대하여 질문있습니다 (공식문서 폴더구조) 우선 공식문서대로 위와같은 폴더구조로 한 후 export default function Layout({ children, team, analytics, }: { children: React.ReactNode analytics: React.ReactNode team: React.ReactNode }) { return ( <> {children} {team} {analytics} </> ) } Layout에 team과 analytics를 props로 주게되면 team과 analytics에 있는 page.js 가 잘 렌더링 되는 것을 확인하였습니다. 그래서 이것을 강의에 응용해보려고 했습니다. (강의 폴더구조 및 응용) src/app/(afterLogin)/@team (afterLogin)폴더에 @team 폴더를 만들고 그 안에 default.tsx 랑 page.tsx 파일을 만들었습니다. default.tsx 파일이 없으면 404 not found 가 뜹니다. 그 후 AfterLoginLayout에 team을 props로 두어 렌더링하였습니다. 결과는 default.tsx가 렌더링 되었습니다. src/app/(afterLogin)/layout.tsx type Props = { children: ReactNode; team: ReactNode}; export default async function AfterLoginLayout({ children, team }: Props) { return ( <> {children} {team} </> ); } 공식문서에서 default.tsx 는 "초기 로드 또는 전체 페이지 다시 로드 중에 일치하지 않는 슬롯에 대한 폴백으로 렌더링할 default.js 파일을 정의할 수 있습니다." 즉 파일을 찾지 못하여 default.tsx를 렌더링 한다는 말이라고 이해했습니다. 즉 궁금한 것은 공식문서 폴더구조에서는 @team폴더의 page.tsx를 렌더링하는 반면 강의 폴더구조에서는 page.tsx를 렌더링하지 않고 default.tsx를 렌더링하는지 궁금합니다. 해당 강의에서 설명해주신 것 같아 여러번 보았지만 저의 이해력이 안좋아 질문드립니다. ㅜㅜ 항상 좋은강의 감사드립니다!
강사님의 컴포넌트를 나눌 때의 기준이 궁금한데요. 지금까지 제가 이해한 내용으로는 반복되는 부분은 컴포넌트 화 시켜서 공통컴포넌트 _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/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 라이브러리를 사용할 수 있을까요?
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> ); }; 어떻게 접근 해야 할지 잘 모르겠습니다. 베이스가 부족해서 그런지 네이게이터와 스크린 (단순 이동 뿐이 못하겠습니다. ㅎㅎ) 주말 잘 보내세요 감사합니다.
