176만명의 커뮤니티!! 함께 토론해봐요.
미해결
React 완벽 마스터: 기초 개념부터 린캔버스 프로젝트까지
안녕하세요! 강의 잘 듣고 있습니다!!! 🙂 React Query 공식 문서에 나오는 페이지네이션 기능에 대해 궁금한 점이 있습니다. 제가 직접 시도해봤는데 어려워서 그런데, 혹시 이 기능을 강의에서 다룰 계획이 있으실까요? 선생님께서 설명을 잘해주셔서 강의가 있다면 정말 좋을 것 같습니다. 감사합니다.
미해결
Next + React Query로 SNS 서비스 만들기
예를들어 부트스트랩처럼 모달이나 반응형 디자인 같은거를 편리하게 해주는 기능들이요 그냥 다 직접 만들어야 하나요? 같이 쓸수있는게 있나요?
해결됨
맛집 지도앱 만들기 (React Native & NestJS)
카카오에 로그인하면 이런 오류가 뜨는데 어떡하죠?
미해결
맛집 지도앱 만들기 (React Native & NestJS)
최대한 강의에서 나온대로 했지만, 계속 npm start에서 문제가 일어납니다. 환경변수랑, npm start 당시에 Pixel 5 API 33을 켜둔 상태였습니다... 계속 안되니깐 화가 나네요 로그는 다음과 같습니다. C:\Users\sc003\Desktop\Visual Stdio code\Matzip>npm start > Matzip@0.0.1 start > react-native start (node:9660) [DEP0040] DeprecationWarning: The punycode module is deprecated. Please use a userland alternative instead. (Use node --trace-deprecation ... to show where the warning was created) Welcome to Metro v0.76.8 Fast - Scalable - Integrated r - reload the app d - open developer menu i - run on iOS a - run on Android info Opening the app on Android... info JS server already running. info Launching emulator... info Installing the app... > Task :gradle-plugin:compileKotlin UP-TO-DATE > Task :gradle-plugin:compileJava NO-SOURCE > Task :gradle-plugin:pluginDescriptors UP-TO-DATE > Task :gradle-plugin:processResources UP-TO-DATE > Task :gradle-plugin:classes UP-TO-DATE > Task :gradle-plugin:jar UP-TO-DATE > Task :gradle-plugin:inspectClassesForKotlinIC UP-TO-DATE > Task :app:buildCodegenCLI SKIPPED > Task :app:generateCodegenSchemaFromJavaScript SKIPPED > Task :app:generateCodegenArtifactsFromSchema SKIPPED > Task :app:generatePackageList > Task :app:preBuild > Task :app:preDebugBuild > Task :app:compileDebugAidl NO-SOURCE > Task :app:compileDebugRenderscript NO-SOURCE > Task :app:generateDebugBuildConfig UP-TO-DATE > Task :app:javaPreCompileDebug UP-TO-DATE > Task :app:checkDebugAarMetadata UP-TO-DATE > Task :app:generateDebugResValues UP-TO-DATE > Task :app:mapDebugSourceSetPaths UP-TO-DATE > Task :app:generateDebugResources UP-TO-DATE > Task :app:mergeDebugResources UP-TO-DATE > Task :app:createDebugCompatibleScreenManifests UP-TO-DATE > Task :app:extractDeepLinksDebug UP-TO-DATE > Task :app:processDebugMainManifest UP-TO-DATE > Task :app:processDebugManifest UP-TO-DATE > Task :app:processDebugManifestForPackage UP-TO-DATE > Task :app:processDebugResources UP-TO-DATE > Task :app:compileDebugJavaWithJavac UP-TO-DATE > Task :app:mergeDebugShaders UP-TO-DATE > Task :app:compileDebugShaders NO-SOURCE > Task :app:generateDebugAssets UP-TO-DATE > Task :app:mergeDebugAssets UP-TO-DATE > Task :app:compressDebugAssets UP-TO-DATE > Task :app:processDebugJavaRes NO-SOURCE > Task :app:mergeDebugJavaResource UP-TO-DATE > Task :app:checkDebugDuplicateClasses UP-TO-DATE > Task :app:desugarDebugFileDependencies UP-TO-DATE > Task :app:mergeLibDexDebug UP-TO-DATE > Task :app:dexBuilderDebug UP-TO-DATE > Task :app:mergeProjectDexDebug UP-TO-DATE > Task :app:mergeDebugJniLibFolders UP-TO-DATE > Task :app:mergeDebugNativeLibs UP-TO-DATE > Task :app:stripDebugDebugSymbols UP-TO-DATE > Task :app:validateSigningDebug UP-TO-DATE > Task :app:writeDebugAppMetadata UP-TO-DATE > Task :app:writeDebugSigningConfigVersions UP-TO-DATE > Task :app:mergeExtDexDebug UP-TO-DATE > Task :app:packageDebug UP-TO-DATE > Task :app:createDebugApkListingFileRedirect UP-TO-DATE > Task :app:installDebug Installing APK 'app-debug.apk' on 'Pixel_5_API_33(AVD) - 13' for :app:debug Installed on 1 device. BUILD SUCCESSFUL in 8s 38 actionable tasks: 2 executed, 36 up-to-date info Connecting to the development server... info Starting the app... Error: Command failed with exit code 1: adb shell am start -n com.matzip/com.matzip.MainActivity -a android.intent.action.MAIN -c android.intent.category.LAUNCHER at makeError (C:\Users\sc003\Desktop\Visual Stdio code\Matzip\node_modules\execa\lib\error.js:60:11) at module.exports.sync (C:\Users\sc003\Desktop\Visual Stdio code\Matzip\node_modules\execa\index.js:194:17) at tryLaunchAppOnDevice (C:\Users\sc003\Desktop\Visual Stdio code\Matzip\node_modules\@react-native-community\cli-platform-android\build\commands\runAndroid\tryLaunchAppOnDevice.js:47:22) at C:\Users\sc003\Desktop\Visual Stdio code\Matzip\node_modules\@react-native-community\cli-platform-android\build\commands\runAndroid\runOnAllDevices.js:96:39 at Array.forEach (<anonymous>) at runOnAllDevices (C:\Users\sc003\Desktop\Visual Stdio code\Matzip\node_modules\@react-native-community\cli-platform-android\build\commands\runAndroid\runOnAllDevices.js:91:48) at process.processTicksAndRejections (node:internal/process/task_queues:105:5) at async Command.handleAction (C:\Users\sc003\Desktop\Visual Stdio code\Matzip\node_modules\@react-native-community\cli\build\index.js:111:9) info Run CLI with --verbose flag for more details. Matzip 폴더에 android > app > src > AndroidMainfest.xml 에 <manifest xmlns:android="http://schemas.android.com/apk/res/android" package="com.matzip"> 이런식으로 넣어두었는데도 안됩니다..
미해결
Next + React Query로 SNS 서비스 만들기
안녕하세요 섹션4의 next-auth 를 수강하고있습니다. next-auth를 사용하는 이유가 무엇인가요? 보통 백엔드에서 로그인 기능을 구현하는 것이 일반적이라고 알고 있습니다. next-auth는 백엔드가 로그인 기능을 구현하지 않았을 때 사용하는 것인가요? 아니면 이미 백엔드에서 구현한 로그인 API를 사용하기 위해서도 next-auth를 사용하는 경우가 있나요?
미해결
React 완벽 마스터: 기초 개념부터 린캔버스 프로젝트까지
import Card from "../Card.jsx"; import Courseitem from "./Courseitem.jsx"; function CourseListCard({ items }) { return ( <Card title={"강의 목록"}> <div className="courses"> {items.map((item) => { return <Courseitem {...item} />; })} </div> </Card> ); } export default CourseListCard; 강사님과 동일한 코드를 작성했는데도 저는 렌더링이 되지 않습니다 ㅠㅠ
미해결
Next + React Query로 SNS 서비스 만들기
안녕하세요! Next 강좌를 보던 중 헷갈리는게 있어 질문을 올리게 되었습니다! 다름이아니라, 현재 next15에서 getServerSideProps 등이 사라진걸로 알고있는데 그럼 서버사이드 렌더링을 서버 컴포넌트로 대체하는건지 여쭤보려고 합니다! 서버사이드 렌더링과 서버 컴포넌트는 다른 개념이라고 알고있는데 결국 서버사이드 렌더링을 서버 컴포넌트를 이용해서 구현하는 것인지,, 그게 궁금합니다!
미해결
Next + React Query로 SNS 서비스 만들기
회원가입후 회원가입완료되면 자동으로 메인페이지 이동해야 하는데, 라이디렉트가 안되고 있습니다. db는 확인해보니 제대로 전송되고 있고요. 데이터 또한 정상적으로 200 떠서 넘김 처리한거 같은데 뭐가 말썽인지 모르겠습니다. 기존꺼 듣다가 15로 업데이트 해서 패키지로 기존에 싹다 날리고, npm i로 다시 설치 했습니다. 그래도 안되서 문의드려요. 1. env, 2.handler, 3.browser, 4.https, 5.auth 6.기타 컴포넌트 그대로 복사해서 붙여놨는데도 문제가있네요. 그리고 추가로 가입하기 버튼후 새로고침 안하면 계속 대기중으로 표시되는것 같습니다. 회원가입 시 프론트서버 회원가입 시 백엔드 서버(npm run start:dev) 회원가입시 브라우저콘솔( 이부분은 확인해보니 매우느리게 status가 200으로 처리가 되었네요) 확인사항: 방금 https://github.com/ZeroCho/next-app-router-15 으로 그대로 zip파일열어서 그대로 실행시켜 봤는데 제 코드랑 같은 현상이 일어나는걸로 봐서는 백엔드 혹은 백엔드와 상호작용에서 뭔가 문제가 있는것 같은데 혹시 문제해결을 알수있을까요? *추가로 새로보시는 분들은 상관없는데, 기존에 보시다가 변경되신 분들은 지금 강의 너무 혼란스럽습니다. 진행자 입장에서는 크게 변한게 없다고 하겠지만, 시청하는 입장에서는 패키지 버전부터, 기타 등등 이 바꼈고, 이해안가는 부분만 해당 강의를 시청할려고 다시 듣는데 기존꺼랑 새로운거랑 그냥 아예 섞여버려서 강의가 가독성이 지금 너무 떨어지고있습니다. 인트로부분에 15버전수정은 15버전이라고 기재한다고 했는데, 그것도 일부분만 하고 나머지도 슬쩍 변경이 됬는데, 아예 기존것처럼 해놔서 더 혼동이 오네요. 차라리 업데이트를 한번에 하시지 왜 진행도중에 하시는지 ..조금 불편합니다.. 나중에 참고해주시면 감사하겠습니다.
미해결
Next + React Query로 SNS 서비스 만들기
antd 편해서 적용하려는데 문제없나요? styled component 문제있다하셔서 css module로 커스텀하려는데 인라인 스타일로 커스텀하면되나요?
미해결
React 완벽 마스터: 기초 개념부터 린캔버스 프로젝트까지
export default function FormComponent() { return ( <form onSubmit={handleSubmit}> <input name="first" type="text" value="첫번째" /> <input name="second" type="text" value="두번째" /> <button type="submit">Submit 버튼</button> </form> ); } 위와 같이 input 에 value props 를 설정하면 왜 타이핑이 안되는지 이해가 잘 안됩니다. 순수 HTML 에서는 input 요소의 value 속성은 초기값이고 변화된 현재값은 DOM 의 value 프로퍼티를 통해 가져올 수 있다고 알고있는데 React 에서는 뭐가 달라지길래 value props 를 설정만 하더라도 input 에 입력값이 변화되지 않는 것인지 알고 싶어요!
미해결
맛집 지도앱 만들기 (React Native & NestJS)
선생님 타입스트립트에서 interface와 type 을 구현이 진행되는데 저의 기준으로는 type은 복잡한 타입정의시 사용 interface 상속이 필요한경우 사용 으로 보고있는데 선생님은 어떤 기준으로 두개를 사용하는지 알고 싶습니다. interface로도 다 구현이 가능할것 같아서 질문 드립니다. ❗ 질문 작성시 꼭 참고해주세요 현재 문제(또는 에러)와 코드(또는 github) 를 첨부해주세요. 맥/윈도우, 안드로이드/iOS, ReactNative, Node 버전 등의 개발환경 을 함께 적어주시면 도움이 됩니다. 에러메세지는 일부분이 아닌 전체 상황 을 올려주세요. ( 일부만 자르거나 복사하지말아주세요 .) 개발환경/코드에 대한 정보가 없을경우 답변이 어렵습니다.
미해결
맛집 지도앱 만들기 (React Native & NestJS)
강의 마지막 부분에서 막혀서 문의 드립니다. 배포 강의를 따라서 진행했는데 AWS에서 S3, EC2, RDS 까지 다 연결하고 난 뒤에 또 뭘 해야하나요? 어플 빌드했을때 로그인, 회원가입해도 알 수 없는 에러가 발생했다고 뜨면서 안되서요 ㅠ
미해결
React 완벽 마스터: 기초 개념부터 린캔버스 프로젝트까지
수업내용이 있는 깃주소를 알 수 있을까요? 노션에 찾아봤는데 없는것 같아서요.
미해결
React 완벽 마스터: 기초 개념부터 린캔버스 프로젝트까지
function HeartIconBtn({ isFavorite = false }) { return ( <button style={{ backgroundColor: 'white', border: 'none', }} > {isFavorite ? ( <img style={{ width: '32px', color: 'red' }} src="/images/heart-fill-icon.svg" alt="" /> ) : ( <img style={{ width: '32px', color: 'red' }} src="/images/heart-icon.svg" alt="" /> )} </button> ); } function LinkIconBtn({ link }) { return ( <> {link ? ( <a href={link} target="_blank"> <img style={{ width: '36px' }} src="/images/link-icon.svg" alt="lecture link" /> </a> ) : null} </> ); } export default function CourseItem({ image, title, description, isFavorite, link, }) { return ( <> <div style={{ display: 'flex', gap: '30px', justifyContent: 'center', alignItems: 'center', }} > <img style={{ width: '20%', borderRadius: '10px' }} src={image} alt={description} /> <div style={{ display: 'flex', flexDirection: 'column', justifyContent: 'center', width: '80%', gap: '10px', }} > <p style={{ fontSize: '16px', fontWeight: 'bold', color: 'black' }}> {title} </p> <p style={{ fontSize: '16px', fontWeight: 'bold', color: 'gray' }}> {description} </p> </div> <div style={{ display: 'flex', gap: '10px' }}> <LinkIconBtn link={link} /> <HeartIconBtn isFavorite={isFavorite} /> </div> </div> </> ); } CourseItem 컴포넌트에서 LinkIconBtn 을 포함하고 있습니다. LinkIconBtn 컴포넌트에서 function LinkIconBtn({ link }) { return ( <> {link ? ( <a href={link} target="_blank"> <img style={{ width: '36px' }} src="/images/link-icon.svg" alt="lecture link" /> </a> ) : null} </> ); } 위 처럼 Fragment 를 사용하거나 <div></div> 를 사용해서 wrapping 을 하지 않으니깐 아래 처럼 오류가 발생하는데 이유를 정확하게 모르겠습니다...
해결됨
Next + React Query로 SNS 서비스 만들기
안녕하세요! 제가 강의를 모두 수강하고 프로젝트에서 리액트 쿼리를 통해 SSR을 적용하려고 하고 있습니다. 아래 코드는 fetchAPISever 함수를 통해 백엔드 api로부터 데이터를 요청하는 함수입니다. 이때 fetchAPIsever 함수는 next/header 의 cookies() 를 통해 사용자의 토큰이 있으면 토큰을 넣어서 api를 요청하는 함수입니다. export const getBestAndPendingReviews = async (): Promise<ReviewePageResponse> => { const res = await fetchAPIServer('/api/review', 'GET'); if (res.code === 'SUCCESS') { return res.result; } throw new Error( `리뷰 페이지 데이터 불러오기 실패 ${res.code}-${res.message}`, ); }; 아래 코드는 리뷰 페이지에서 서버 사이드 렌더링으로 보여주기 위해 리액트 쿼리로 Hydration을 적용한 코드입니다. // src\app\reviews\page.tsx import { HydrationBoundary, QueryClient, dehydrate, } from '@tanstack/react-query'; import ReviewDashboard from './_components/ReviewDashboard'; import { getBestAndPendingReviews } from './_lib/getBestAndPendingReviews'; export default async function ReviewsPage() { const queryClient = new QueryClient(); await queryClient.prefetchQuery({ queryKey: ['reviews', 'best'], queryFn: getBestAndPendingReviews, }); const dehydrateState = dehydrate(queryClient); return ( <HydrationBoundary state={dehydrateState}> <ReviewDashboard /> </HydrationBoundary> ); } ' <ReviewDashboard/> 컴포넌트에서 UserInfo 컴포넌트를 반환하도록 설정하고 useQuery 훅을 사용하려 했으나, fetchAPIServer 함수에서 next/headers 를 import하고 있어서 클라이언트 컴포넌트에서 사용할 수 없다는 에러가 발생했습니다. 그러면 SSR을 적용하기 위해서는 getQueryData 를 사용해야하는 걸까요..? import { QueryClient } from '@tanstack/react-query'; import { ReviewePageResponse } from '../_lib/getBestAndPendingReviews'; export default function UserInfo() { const queryClient = new QueryClient(); const reviews = queryClient.getQueryData<ReviewePageResponse>([ 'reviews', 'best', ]); const { total } = reviews!; if (!reviews) return <p>리뷰가 없습니다.</p>; console.log('reviews', reviews); return <p>작성한 리뷰 {total || 0}</p>; } 또는 useQuery를 쓰되 쿼리 함수를 Promise.Resolve()로 서버에서 전달 받은 데이터를 받는게 나은가 요? 'use client'; import { useQuery } from '@tanstack/react-query'; export default function UserInfo() { const { data: reviews, isLoading } = useQuery({ queryKey: ['reviews', 'best'], queryFn: () => Promise.resolve(), // 서버 데이터 재활용 }); if (isLoading) return <p>Loading...</p>; if (!reviews) return <p>리뷰가 없습니다.</p>; const { total } = reviews!; console.log('reviews', reviews); return <p>작성한 리뷰 {total || 0}</p>; }
미해결
React 완벽 마스터: 기초 개념부터 린캔버스 프로젝트까지
안녕하세요~! 지금까지 수업 진도 잘 따라갔는데 [수정] 린캔버스 수정1만 자막이 없네요 ㅠㅠ 자막 언제 나올까요?
미해결
Next + React Query로 SNS 서비스 만들기
강사님 안녕하세요! 강의 수강 후 개인 프로젝트 진행중인데 페러렐 라우트 부분에서 막혀 질문남깁니다ㅜㅠ.. default.tsx는 강의에서 진행해주신대로 return null;을 넣었습니다. (.next 캐쉬도 지웠습니다) // 폴더구조 app/ ├──(afterLogin) │ ├── _component │ │ ├── Header.tsx // header 컴포넌트 │ ├── @message │ │ ├── page.tsx │ │ ├── default.tsx │ ├── @modal │ │ ├── //...compose/[username] 등 폴더 │ │ ├── default.tsx │ ├── home │ │ ├── page.tsx // home 컴포넌트 │ ├── default.tsx │ ├── layout.tsx │ │ ├──(beforeLogin) │ ├── page.tsx │ ├── layout.tsx ├── layout.tsx // (afterLogin)/layout.tsx import { ReactNode } from "react"; import Header from '@/app/(afterLogin)/_component/Header'; type Props = {children: ReactNode, modal: ReactNode, message: ReactNode;}; export default function AfterLoginLayout({children,modal,message,}: Props) { return ( <div className="wrap"> <Header /> <div className="container">{children}</div> <div className="chatting">{message}</div> {modal} </div> ); } 해당 이미지와 같이 layout에서 header/{children}/{message}/{modal}을 띄우고 싶은데 message부분이 나오고 있지 않습니다..! (그래서 afterLogin의 layout.tsx와 같은 상위요소에 default를 만들어도 똑같더라구요..) <질문> 1. 제가 폴더구조를 잘못 짠 걸까요..? 2. (afterLogin)/@message/default.tsx(default.tsx에서 @message/page.tsx를 import해서 진행해도 될까요? 요런식으로 하면 잘 노출이 됩니다..!) import Message from './page'; export default function Default() { return <Message /> } 3. 아니면 header처럼 컴포넌트 형식으로 메시지창만 만든다음 onClick되면 -> 인터셉팅으로 가로채는것(/message/page.tsx)이 좋을까요? 조언 부탁드리겠습니다..!! ĭ˄ĭ
해결됨
맛집 지도앱 만들기 (React Native & NestJS)
강사님 navigation 6버전 변경후 다른 이슈로 재 문의 드립니다. 1.OS: window 2.이슈 : react-native-reanimated 이슈로 2.x 버전으로 사용하면 - 빌드는 되지만 createDrawerNavigator를 찾을수 없다는 오류 3.x 버전을 사용으로 사용했을때는 아래와 같은 오류가 납니다. 3.dependencies 버전 에러 react-native-reanimated:compileDebugJavaWithJavac :( instanceof is not supported in -source 11) java 11버전을 지원하지 않는 버전으로 이슈가 있습니다. 강사님이 빌드하신 gradle 버전이랑 자바 버전 알려주시면 동일 환경해서 다시 해보겠습니다. > Task :react-native-reanimated:compileDebugJavaWithJavac FAILED Deprecated Gradle features were used in this build, making it incompatible with Gradle 9.0. You can use '--warning-mode all' to show the individual deprecation warnings and determine if they come from your own scripts or plugins. See https://docs.gradle.org/8.0.1/userguide/command_line_interface.html#sec:command_line_warnings 64 actionable tasks: 2 executed, 62 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 C:\project\base-react-native\MatzipApp\front\node_modules\react-native-reanimated\android\src\main\java\com\swmansion\reanimated\layoutReanimation\AnimationsManager.java:356: error: pattern matching in instanceof is not supported in -source 11 if (props.get(Snapshot.TRANSFORM_MATRIX) instanceof ReadableNativeArray matrixArray) { ^ (use -source 16 or higher to enable pattern matching in instanceof) C:\project\base-react-native\MatzipApp\front\node_modules\react-native-reanimated\android\src\main\java\com\swmansion\reanimated\NodesManager.java:440: error: switch rules are not supported in -source 11 case "opacity" -> { ^ (use -source 14 or higher to enable switch rules) 2 errors FAILURE: Build failed with an exception. * What went wrong: Execution failed for task ':react-native-reanimated:compileDebugJavaWithJavac'. > Compilation failed; see the compiler error output for details. * 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 17s info Run CLI with --verbose flag for more details. ❗ 질문 작성시 꼭 참고해주세요 현재 문제(또는 에러)와 코드(또는 github) 를 첨부해주세요. 맥/윈도우, 안드로이드/iOS, ReactNative, Node 버전 등의 개발환경 을 함께 적어주시면 도움이 됩니다. 에러메세지는 일부분이 아닌 전체 상황 을 올려주세요. ( 일부만 자르거나 복사하지말아주세요 .) 개발환경/코드에 대한 정보가 없을경우 답변이 어렵습니다.
미해결
Next + React Query로 SNS 서비스 만들기
데이터 캐시 설정을 force-cache 로 했을 때 이걸 갱신하기 위한 방법으로 revalidate 옵션을 주거나 revalidateTag, revalidatePath 등이 있다고 하셨는데요. 그러면 RequestMemoization에 의해서 캐싱된 데이터는 브라우저 새로고침 등을 하면 다시 fetch 하면서 갱신이 되는건가요? RequestMemoization 에 의해서 캐싱된 데이터는 언제 갱신되는지 궁금합니다. 그런데 제가 이해한 바로는 유저가 처음 브라우저를 통해 애플리케이션에 접근해서 해당 url 에서 요청을 보냈을 때 특정 데이터를 페칭하는 함수가 여러 컴포넌트에 있어서 그 데이터를 불러오기 위한 요청을 한 번만 함으로써 서버에 요청이 가는 것을 줄여주는것이 RequestMemoization 이라고 저는 이해를 했는데요. 어차피 처음에 같은 데이터를 보여주기 위해 여러 번의 요청을 하는 것은 불필요한 네트워크를 타게 되고 성능상에 좋지 않으니까요. 이런 경우라면 사실 RequestMemoization 은 캐싱된 데이터를 갱신할 필요가 없을 수도 있겠다는 생각이 듭니다. 그래서 제로초님이 별다른 언급이 없으셨나? 하는 생각도 드네요. 감사합니다.
미해결
Next + React Query로 SNS 서비스 만들기
next.js 15 로 따라가면서 진행 중인데 리액트 쿼리를 설치하려고 하니 리액트19 가 아직 안정적이지 않아서 npm 설치할 때 충돌이 생긴다고 에러가 뜨는 것 같습니다. npm ERR! code ERESOLVE npm ERR! ERESOLVE unable to resolve dependency tree npm ERR! npm ERR! While resolving: z-com@0.1.0 npm ERR! Found: react@19.0.0-rc-66855b96-20241106 npm ERR! node_modules/react npm ERR! react@"19.0.0-rc-66855b96-20241106" from the root project npm ERR! npm ERR! Could not resolve dependency: npm ERR! peer react@"^18 || ^19" from @tanstack/react-query@5.62.7 npm ERR! node_modules/@tanstack/react-query npm ERR! @tanstack/react-query@"*" from the root project npm ERR! npm ERR! Fix the upstream dependency conflict, or retry npm ERR! this command with --force or --legacy-peer-deps npm ERR! to accept an incorrect (and potentially broken) dependency resolution. ------- 리액트 19 안정화 버전으로 업데이트 진행했습니다! 그랬더니 next 와 리액트19 사이에 에러가 발생해서 next 도 latest 로 업데이트 해주고 리액트 쿼리를 설치하니까 되네요! 이 방법이 맞는지는 모르겠지만 일단 이렇게도 되긴 합니다!
