안녕하세요 로펀님. 강의 잘 듣고 있습니다. useInfiniteQuery에서 반환하는 hasNextPage를 이용해 fetchNextPage를 하는데 searchMovies에서 작성한 const hasNextPage = count > page * pageSize 는 사용하지 않는 것 같아서 질문 올립니다! {data?.pages ?.map((page) => page.data) ?.flat() ?.map((movie) => ( <MovieCard key={movie.id} movie={movie} /> ))} 에서도 searchMovies 에서 반환하는 page, pageSize, hasNextPage를 제외하고 data만 쓰시길래 작성하신 이유가 궁금합니다. useInfiniteQuery에서 반환하는 hasNextPage와는 다른 건가요??
export default function PostArticle({ children, post }: Props) { const router = useRouter(); const onClick = () => { console.log(1); router.push(`/${post.User.id}/status/${post.postId}}`); }; return ( <article className={style.post} onClickCapture={onClick}> {children} </article> ); } 이 부분에서 onClickCapture에 대한 질문이 있습니다. 캡쳐링 단계에서 onClickCapture의 클릭함수가 실행된다면 자식인 <Link> 영역을 눌러도 <article>의 onClickCapture가 캡쳐링 단계에서 먼저 동작하여 <Link> 태그의 href 경로가 아닌 router.push()로 동작 해야한다고 생각하였습니다. 그러나 실제 <Link>태그를 클릭하면 콘솔에 1이 찍히지만 router.push() 경로가 아닌 <Link>태그의 href경로로 이동하더군요. 이 부분이 잘 이해가 안됩니다..
ruby 2.7.6까지 설치하고 npx react-native@0.72.6 init MatjipApp --version 0.72.6 로 프로젝트 생성 중에 cocoapods 오류가 뜹니다 ERROR: Error installing activesupport: There are no versions of activesupport (= 8.0.1) compatible with your Ruby & RubyGems activesupport requires Ruby version >= 3.2.0. The current ruby version is 2.7.6.219. cocoapods 설치중 activesupport을 설치하게 되었는데요. activesupport가 ruby 3.2 이상 버전을 요구한다고 하더군요.. 이 경우에는 어떻게 해결해야 하나요? 루비 버전을 강의와 다르게 올려도 괜찮은가요? 결론은, ruby 버전을 3.2.0 이상으로 설치를 하고 진행하여도 강의 듣는데 문제가 없을지 궁금합니다
❗ 질문 작성시 꼭 참고해주세요 현재 문제(또는 에러)와 코드(또는 github) 를 첨부해주세요. 맥/윈도우, 안드로이드/iOS, ReactNative, Node 버전 등의 개발환경 을 함께 적어주시면 도움이 됩니다. 에러메세지는 일부분이 아닌 전체 상황 을 올려주세요. ( 일부만 자르거나 복사하지말아주세요 .) 개발환경/코드에 대한 정보가 없을경우 답변이 어렵습니다. System: OS: Windows 11 10.0.22631 CPU: (8) x64 12th Gen Intel(R) Core(TM) i3-12100F Memory: 4.03 GB / 15.86 GB Binaries: Node: version: 22.13.1 path: C:\Program Files\nodejs\node.EXE Yarn: version: 1.22.21 path: ~\AppData\Roaming\npm\yarn.CMD npm: version: 11.1.0 path: C:\Program Files\nodejs\npm.CMD Watchman: Not Found SDKs: Android SDK: Not Found Windows SDK: Not Found IDEs: Android Studio: AI-242.23726.103.2422.12816248 Visual Studio: - 17.4.33213.308 (Visual Studio Community 2022) Languages: Java: 17.0.14 Ruby: Not Found npmPackages: "@react-native-community/cli": Not Found react: installed: 18.2.0 wanted: 18.2.0 react-native: installed: 0.72.6 wanted: 0.72.6 react-native-windows: Not Found npmGlobalPackages: "*react-native*": Not Found Android: hermesEnabled: true newArchEnabled: false iOS: hermesEnabled: Not foun d newArchEnabled: Not found npx react-native run-android돌리니깐 MainActivity.java is not on the classpath of project app, only syntax errors are reported 에러 뜨는데 sdk버전, kotlin 컴파일 오류 문제인것같은데 어떻게 해야하나요
pgAdmin의 Post 데이터를 전부 삭제한 후 다시 기록하고 싶어서 Post 내부 데이터를 전부 선택/삭제(휴지통 버튼 클릭)한 후 PSQL Tools에 COMMIT을 입력하라고 정보가 있어서 실행에 옮겼는데 갑자기 9090페이지가 아예 안돌아가네요(로그인 안됨, API문서 접근불가 등등) ㅠㅠ 어떻게 방법없을까요
❗ 질문 작성시 꼭 참고해주세요 현재 문제(또는 에러)와 코드(또는 github) 를 첨부해주세요. 맥/윈도우, 안드로이드/iOS, ReactNative, Node 버전 등의 개발환경 을 함께 적어주시면 도움이 됩니다. 에러메세지는 일부분이 아닌 전체 상황 을 올려주세요. ( 일부만 자르거나 복사하지말아주세요 .) 개발환경/코드에 대한 정보가 없을경우 답변이 어렵습니다 프로젝트 생성했는데 mainactivity, mainapplication의 확장자가 java가 아닌 kotlin으로 되어있습니다 자바로 변경할려면 어떻게 해야하나요?
동영상 강의대로 진행하다가 index.js에 import 'react-native-gesture-handler' ; 를 입력하고 저장하자마자 아래 오류가 떴습니다..어떻게 해야하나요 ㅠㅠ 이 강의에서 너무 많은 오류가 떠서 진행이 며칠 째 안되서 너무 힘들어요. 2번째 오류 > Task :react-native-safe-area-context:compileDebugKotlin FAILED 'compileDebugJavaWithJavac' task (current target is 11) and 'compileDebugKotlin' task (current target is 1.8) jvm target compatibility should be set to the same Java version.
강의 잘 듣고 있습니다. dependencies와 devDependencies의 차이에 대해서 궁금한데요, 둘의 차이점은 앱 배포 시 포함이 되느냐 안되느냐의 차이로 알고 있습니다. 그런데 tanstack-query나, date-fns를 devDependencies에 설치하고 vercel에 배포를 하더라도 배포된 프로덕션 환경에서 정상적으로 작동하는데요, 이에 대한 챗 gpt의 답변은 다음과 같습니다. Vercel의 배포 프로세스 Vercel은 next build 를 실행하여 프로젝트를 빌드하고, 필요한 의존성을 설치합니다. 이때 dependencies 와 devDependencies 모두가 설치됩니다. 배포 환경에서도 devDependencies 의 패키지가 포함될 수 있는 이유는 Next.js의 빌드 시점 에 이 패키지가 필요하기 때문입니다. 예를 들어, @tanstack/react-query 는 런타임에 필요한 라이브러리인데, 이를 devDependencies 에 넣어두었더라도 next build 과정에서 번들된 코드에 포함됩니다. 따라서 Vercel에서 배포 후에도 런타임에 사용 가능합니다. React Query와 런타임 의존성 @tanstack/react-query 는 런타임에 작동해야 하는 의존성입니다. 따라서 빌드 결과물에 포함 되며, devDependencies에 설치된 상태라도 번들링 과정에서 런타임에 필요한 모든 코드를 포함합니다. @tanstack/react-query-devtools 는 개발 도구용이지만, 프로덕션 환경에서는 기본적으로 UI가 렌더링되지 않아 에러를 발생시키지 않습니다. dependencies 와 devDependencies 의 차이 dependencies : 런타임에 반드시 필요한 의존성. devDependencies : 개발 및 빌드 단계에서만 필요한 의존성. Next.js에서는 빌드 과정에서 사용하는 패키지든, 런타임에 사용하는 패키지든 모두 번들링되기 때문에 devDependencies 에 패키지가 있어도 문제가 없는 것처럼 보일 수 있습니다. Vercel이 에러 없이 작동하는 이유 @tanstack/react-query 는 devDependencies 에 있지만, 빌드 과정에서 번들링되어 클라이언트 코드로 전달되었기 때문에 런타임에서 정상적으로 작동합니다. 프로덕션 환경에서 ReactQueryDevtools 가 기본적으로 비활성화 상태라 에러가 뜨지 않습니다. 답변이 잘 이해가 안되어서 그러는데 빌드 시점에 dependencies와 devDependencies에 있는 모든 라이브러리가 설치되는건가요? 아니면 devDependencies에 있는 라이브러리라도 런타임 시점에 필요하다면 빌드 시에 설치가 되어 프로덕션 환경에 포함되는건가요? 제가 이해한 바로는, devDependencies에 있는 라이브러리더라도, 런타임 환경에서 필요한 라이브러리라면 알아서 분류하여 프로덕션 환경에 포함되도록 설치한다고 이해하였는데, 이렇게 된다면 dependencies와 devDependencies의 경계가 모호해지는 것 아닌가요?
환경변수 세팅, 안드로이드 스튜디오 세팅 완료 후 실행했는데 아래와 같은 오류가 발생합니다 > react-native run-android info JS server already running. info Launching emulator... error Failed to launch emulator. Reason: It took too long to start and connect with Android emulator: Medium_Phone_API_33. You can try starting the emulator manually from the terminal with: C:\Users\user\AppData\Local\Android\Sdk/emulator/emulator @Medium_Phone_API_33. warn Please launch an emulator manually or connect a device. Otherwise app may fail to launch. info Installing the app... > Task :app:compileDebugJavaWithJavac FAILED 19 actionable tasks: 2 executed, 17 up-to-date 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. * What went wrong: Execution failed for task ':app:compileDebugJavaWithJavac'. > Could not resolve all files for configuration ':app:androidJdkImage'. > Failed to transform core-for-system-modules.jar to match attributes {artifactType=_internal_android_jdk_image, org.gradle.libraryelements=jar, org.gradle.usage=java-runtime}. > Execution failed for JdkImageTransform: C:\Users\user\AppData\Local\Android\Sdk\platforms\android-33\core-for-system-modules.jar. > Error while executing process C:\Program Files\Java\bin\jlink.exe with arguments {--module-path C:\Users\user\.gradle\caches\transforms-3\a716a49384427b91aa8778761f7fa6d1\transformed\output\temp\jmod --add-modules java.base --output C:\Users\user\.gradle\caches\transforms-3\a716a49384427b91aa8778761f7fa6d1\transformed\output\jdkImage --disable-plugin system-modules} * 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 5s error Failed to install the app. info Run CLI with --verbose flag for more details. Process finished with exit code 1 adb 버전 choco, java 버전 react-native 프로젝트 버전 buildscript { ext { buildToolsVersion = "33.0.0" minSdkVersion = 21 compileSdkVersion = 33 targetSdkVersion = 33 // We use NDK 23 which has both M1 support and is the side-by-side NDK version from AGP. ndkVersion = "23.1.7779620" } repositories { google() mavenCentral() } dependencies { classpath("com.android.tools.build:gradle") classpath("com.facebook.react:react-native-gradle-plugin") } } 환경변수 안드로이드 스튜디오 doctor 실행시엔 에뮬레이터가 없다고 표시되는데, 에뮬레이터 실행까진 정상적으로 됩니다. 앱 빌드시 오류가 발생하는것 같아요 Android ✖ Adb - No devices and/or emulators connected. Please create emulator with Android Studio or connect Android device. ✓ JDK - Required to compile Java code ✓ Android Studio - Required for building and installing your app on Android ✓ Android SDK - Required for building and installing your app on Android ✓ ANDROID_HOME - Environment variable that points to your Android SDK installation
안녕하세요. 강의를 마치고 혼자 구현을 해보고 있는데, 로그인과 인증 관련해서 궁금한 부분이 있습니다. 프론트에 로그인한 유저인지의 판단을 미들웨어에서 auth함수로 next 서버를 통해 하고있는데,로그인 후에 접속 가능한 페이지를 이동할때마다 무조건 서버에 체크를 해주어야 하나요? 데이터 페칭은 리액트 쿼리를 설명하며 말씀해주신것 처럼 컨텐츠에 따라 판단해서 캐싱하고 새로 받아오고의 개념이 이해가 되었는데, 세션체크라고 해야 할까요? 로그인 후에 이 유저가 로그인이 되어있는지에 대한 체크를 서버에 얼마나 자주 해주어야 하는지 모르겠습니다. 현재는 미들웨어에서 로그인이 필요한 페이지에 auth함수를 호출하여 프론트 서버에서 체크를 하고, api를 호출할때는 쿠키에 next-auth의 세션 토큰과 서버에서 발급한 세션 아이디를 담아서 서버에서 로그인과 인증 확인을 하고있는것으로 이해를 했습니다. 현재는 혼자서 nestjs를 통해 jwt 토큰 2개 (access,refresh)을 발급해서 구현을 해보고있는데, 로그인이 필요한 페이지로 이동한다면 무조건 미들웨어에서 토큰 확인을 서버를 통해 해주어야 하는건가 잘 모르겠어서 질문 드립니다.. 강의 정말 잘 듣고 도움이 많이 됐습니다. 감사합니다.
<Counter onTotal={handleTotal} /> <hr/> <Counter onTotal={handleTotal}/> <hr/> <Counter onTotal={handleTotal}/> 여기서 Counter.jsx에서 console.log 를 추가했고 버튼 세 개 중 하나만 눌러도 <Counter /> 세 개 전체가 리렌더링 됩니다. (log 가 세번찍힘) 왜그런건가요 ?
❗ 질문 작성시 꼭 참고해주세요 현재 문제(또는 에러)와 코드(또는 github) 를 첨부해주세요. 맥/윈도우, 안드로이드/iOS, ReactNative, Node 버전 등의 개발환경 을 함께 적어주시면 도움이 됩니다. 에러메세지는 일부분이 아닌 전체 상황 을 올려주세요. ( 일부만 자르거나 복사하지말아주세요 .) 개발환경/코드에 대한 정보가 없을경우 답변이 어렵습니다. 맥에서 IOS로 실행 시 에러가 발생합니다. 리액트 네이티브는 최신버전으로 설치했습니다. 코드는 프로젝트 생성한 그 자체에서 변경이 없습니다. 설정 "extends": "@react-native/typescript-config/tsconfig.json", "compilerOptions": { "baseUrl": ".", "paths": { "@/*": ["./src/*"] // this is for importing index file } } } module.exports = { presets: ['module:metro-react-native-babel-preset'], plugins: [ 'react-native-reanimated/plugin', [ 'module-resolver', { alias: { '@': './src', }, }, ], ], }; 에러 error export CLANG_WARN_EMPTY_BODY\=YES error [SyntaxError]: /Users/youngseok/study/RN/lecture/MatzipApp/front/node_modules/react-native/Libraries/Components/ActivityIndicator/ActivityIndicator.js: Missing initializer in const declaration. (156:41) error ', error Failed to build ios project. "xcodebuild" exited with error code '65'. To debug build logs further, consider building your app with Xcode.app, by opening 'MatzipApp.xcworkspace'. error Command failed with exit code 1. info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
안녕하세요! 강의 도중 궁금한게 생겨 여쭤보기 위해 질문 드립니다! 다름이아니라, 서버 액션과 api route의 차이가 속도 말고 어떤 때에 서버 액션을 써야하고, api route를 사용해야하는지 여쭤보고싶습니다! 찾아본 바로는 서버 액션은 POST, PATCH 등 폼 제출 시에 사용하는 것이라는데, 폼 제출 시에는 무조건 서버액션을 사용하는 것이 맞는지, 아니라면 단지 개발자 판단 하에 사용하면 되는 것인지 여쭤보고싶습니다!
로그인하여 /home에 접속해 있는 도중, 세션이 만료된 상태에서 사용자 정보가 필요한 /message 또는 /explore 등으로 클라이언트 네비게이션을 통해 페이지를 이동하는 경우, 미들웨어의 세션 검사를 거쳐 로그인 페이지로 이동되지 않고 not-found 페이지가 뜨는 오류가 있습니다. / / middleware.ts import { NextResponse } from "next/server"; import { auth } from "./auth"; export { auth } from "./auth"; export async function middleware() { const session = await auth(); if (!session) { return NextResponse.redirect(`http://localhost:3000/i/flow/login`); } } export const config = { matcher: ["/compose/tweeet", "/home", "/explore", "/messages", "/search"], }; 로그인 이 후 쿠키를 삭제를 통해 세션을 없애고 클라이언트 네비게이션을 통해 페이지 이동을 하면 미들웨어의 세션 검사에 걸려 redirect가 진행됩니다. /i/flow/login 페이지로 url이 변경되긴 했지만 병렬 라우트 및 인터셉팅 라우트로 인한 간섭이 있어 제대로 된 page를 찾지 못하는 것으로 보이는데 정확한 원인을 알 수 없어 문의 드립니다.
