176만명의 커뮤니티!! 함께 토론해봐요.
미해결
Next + React Query로 SNS 서비스 만들기
안녕하세요! 강의와 직접적으로 관련된 질문은 아니지만 도저히 해결책을 도저히 찾기가 어려워서 질문 글 올립니다.. 하나의 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 14s info Run CLI with --verbose flag for more details.
해결됨
맛집 지도앱 만들기 (React Native & NestJS)
API를 body형태로 필요할 떄 마다 상태값을 전달하는 방식으로 사용하고 있었습니다. 쿼리클라이언트를 사용하여 params 형태로 전달하면 가지는 이점이 어떤 것이 있을지 궁금합니다. 항상 감사드립니다. ❗ 질문 작성시 꼭 참고해주세요 최대한 상세히 현재 문제(또는 에러)와 코드(또는 github) 를 첨부해주셔야 그만큼 자세히 답변드릴 수 있습니다. 맥/윈도우, 안드로이드/iOS, 버전 등의 개발환경 도 함께 적어주시면 도움이 됩니다. 에러메세지는 일부분이 아닌 전체 상황 을 올려주세요!
해결됨
맛집 지도앱 만들기 (React Native & NestJS)
안녕하세요. 좋은 강의 감사드립니다. 질문 1: RootStackParamList로 현업에서는 사용을 안하는지 궁금합니다. 네비게이션을 각 기능별로 나누어 ParamList를 관리하면, 예상되는 이점은 네비게이션 시 필요한 리소스만 가지게 되는 이점이 있을 것 같은데요. 이렇게 생각하면 맞는지 궁금합니다. RootStackParamList로 화면의 타입을 관리하고 있었습니다. 해당 부분의 리팩토링은 필수 적일까요? 항상 감사드립니다. ❗ 질문 작성시 꼭 참고해주세요 최대한 상세히 현재 문제(또는 에러)와 코드(또는 github) 를 첨부해주셔야 그만큼 자세히 답변드릴 수 있습니다. 맥/윈도우, 안드로이드/iOS, 버전 등의 개발환경 도 함께 적어주시면 도움이 됩니다. 에러메세지는 일부분이 아닌 전체 상황 을 올려주세요!
해결됨
맛집 지도앱 만들기 (React Native & NestJS)
안녕하세요, 강사님 구글맵을 사용할때 AndroidManifest.xml, AppDelegate.mm 파일에 직접적으로 구글키를 넣어주는데 이렇게 된다면, 키값이 노출이 될 것 같은데, 이 파일은 git ignore을 해도 되는 파일인가요??
해결됨
Next + React Query로 SNS 서비스 만들기
PostRecommends에서 전달한 post를 Post 컴포넌트에서 받아 표시하면 User에서만 오류가 발생합니다. User에 대한 정보를 다 받아오는데 Post 컴포넌트에서는 아무것도 표시되지 않습니다. 프로필 탭을 눌러 User.id 페이지로 이동하면 오류가 발생합니다. Cannot read properties of undefined (reading 'User') User에 옵셔널 체이닝을 붙여도 동일한 오류가 발생합니다. Post 코드 첨부합니다. import { Post as IPost } from "@/model/Post"; dayjs.locale("ko"); dayjs.extend(relativeTime); type Props = { noImage?: boolean; post: IPost; }; export default function Post({ noImage, post }: Props) { const target: IPost = post; if (Math.random() > 0.5 && !noImage) { target?.Images.push( { imageId: 1, link: faker.image.urlLoremFlickr() }, { imageId: 2, link: faker.image.urlLoremFlickr() }, { imageId: 3, link: faker.image.urlLoremFlickr() }, { imageId: 4, link: faker.image.urlLoremFlickr() } ); } return ( <PostArticle post={target}> <div className={style.postWrapper}> <div className={style.postUserSection}> <Link href={`/${target.User?.id}`} className={style.postUserImage}> <img src={target.User.image} alt={target.User.nickname} /> <div className={style.postShade} /> </Link> </div> <div className={style.postBody}> <div className={style.postMeta}> <Link href={`/${target.User.id}`}> <span className={style.postUserName}>{target.User.nickname}</span> <span className={style.postUserId}>@{target.User.id}</span> · </Link> <span className={style.postDate}> {dayjs(target.createdAt).fromNow(true)} </span> </div> <div>{target.content}</div> <div> <PostImages post={target} /> </div> <ActionButtons /> </div> </div> </PostArticle> ); }
해결됨
맛집 지도앱 만들기 (React Native & NestJS)
error: node_modules\react-native-reanimated\src\reanimated2\index.ts: Cannot find module 'babel-plugin-module-resolver' Require stack: - C:\Users\gimse\Documents\dogfoot\dogfeet\front\node_modules\@babel\core\lib\config\files\plugins.js - C:\Users\gimse\Documents\dogfoot\dogfeet\front\node_modules\@babel\core\lib\config\files\index.js - C:\Users\gimse\Documents\dogfoot\dogfeet\front\node_modules\@babel\core\lib\index.js - C:\Users\gimse\Documents\dogfoot\dogfeet\front\node_modules\metro-transform-worker\src\index.js - C:\Users\gimse\Documents\dogfoot\dogfeet\front\node_modules\metro\src\DeltaBundler\Worker.flow.js - C:\Users\gimse\Documents\dogfoot\dogfeet\front\node_modules\metro\src\DeltaBundler\Worker.js - C:\Users\gimse\Documents\dogfoot\dogfeet\front\node_modules\jest-worker\build\workers\processChild.js Make sure that all the Babel plugins and presets you are using are defined as dependencies or devDependencies in your package.json file. It's possible that the missing plugin is loaded by a preset you are using that forgot to add the plugin to its dependencies: you can workaround this problem by explicitly adding the missing package to your top-level package.json.
해결됨
Next + React Query로 SNS 서비스 만들기
안녕하세요. 첫번째 질문은 onMutate vs onSuccess 인데 사실 낙관적 업데이트를 해주냐 안해주냐에 따라서 기호에 따라 다른 경우는 알겠습니다. 제가 궁금한거는 onSuccess invalidatequeries 를 무지성으로 사용해도 query-key외 따로 전달 되는 params값이 중요하진 않은 것 같아서 쉽게 적용 했었던 기억이 있는 것 같습니다/ 예를 들면 onSuccess를 해주는 mutation에 invalidatequeries로 invalidatequeries(['key', {...}]) 를 굳이 안하고 invalidatequeries(['key']) 요거만 해줘도 새로 캐싱된 API를 새로 조회 하는 것 같더라구요. 근데 onMutate를 쓰려는 경우에 getQueryData 에 query-key 정보와 그에 매칭하는 파라메터를 정확하게 넘겨주지 않으면 undefined 같은데 애초 설계 할때 getQueryData뒤에 보내는 파라메터를 잘 가져 올 수 있게 해야 할지 혹시 다른 방법이 있는지 궁금합니다. query에서 find해서 찾기는 보장이 안되는 것 같구요? 이건 사용자가 셀렉트 박스로 막 선택해서 조회 다시 이전것 조회 요런식으로 하다보니 마지막으로 선택된 파람 정보가 명확하진 않더라구요. 현재는 혹시 모르니 전부 searchParams로 개편은했지만.... 실제 프로젝트에서는 어드민성(?) 서비스를 제공 해서 ux는 딱히...?????? 엄청 중요한 않기도 했고 지식도 부족해서 onMutate 대신에 onSuccess를 썼지만 보통은 좀 어떻게 잘 써야하는지 궁금합니다. 2번째 질문은 이건 진짜 뭘 더 써야하는지 모르겠습니다. 쓰임에 따라 다르게 써야한다면 어떤 경우인지 취향에 차이라면 취향것 쓰면 되는건지 궁금합니다
미해결
Next + React Query로 SNS 서비스 만들기
수업을 다 듣고 저 스스로 코드를 짜던중 갑자기 놓친부분이 있는 것 같아 여쭤봅니다. 혹시 <search/page.tsx> export default function Search({ searchParams }: Props) { 여기서 이 search/page.tsx의 매개변수는 누가 넘겨주는 걸까요?
미해결
Next + React Query로 SNS 서비스 만들기
저는 미리보기하면 PostRecommend.tsx부분이 아예 안뜨는데 뭐가 잘못된지 모르겠어서 질문드립니다. (단, 화면에 정상적으로 post들은 문제없이 뜹니다.) <PostRecommend.tsx>의 코드는 아래입니다. "use client" import Post from "../../_component/Post"; import { useQuery } from "@tanstack/react-query" import { getPostRecommends } from "../_lib/getPostRecommends" import { Post as IPost } from "@/app/model/post"; export default function PostRecommend(){ const {data} = useQuery<IPost[]>({queryKey:['posts','recommends'],queryFn:getPostRecommends}); return data?.map((post)=> <Post key={post.postId} post={post}/> ) } 또한 Post.tsx에서 넘겨받은 post를 console.log해봤는데 undefined가 나와 이것과 연관되어있지않나 싶어서 Post.tsx의 코드도 올리겠습니다. import style from './post.module.css'; import Link from "next/link"; import dayjs from 'dayjs'; import relativeTime from 'dayjs/plugin/relativeTime'; import 'dayjs/locale/ko'; import ActionButtons from "@/app/(afterLogin)/_component/ActionButtons"; import PostArticle from "@/app/(afterLogin)/_component/PostArticle"; import {faker} from '@faker-js/faker'; import PostImages from "@/app/(afterLogin)/_component/PostImages"; import { Post as IPost } from '@/app/model/post'; dayjs.locale('ko'); dayjs.extend(relativeTime) type Props = { noImage?: boolean, post:IPost, } export default function Post({ noImage,post }: Props) { const target = post; console.log("+++++++@@@@@@"+target); return ( <PostArticle post={target}> <div className={style.postWrapper}> <div className={style.postUserSection}> <Link href={`/${target.User.id}`} className={style.postUserImage}> <img src={target.User.image} alt={target.User.nickname}/> <div className={style.postShade}/> </Link> </div> <div className={style.postBody}> <div className={style.postMeta}> <Link href={`/${target.User.id}`}> <span className={style.postUserName}>{target.User.nickname}</span> <span className={style.postUserId}>@{target.User.id}</span> · </Link> <span className={style.postDate}>{dayjs(target.createdAt).fromNow(true)}</span> </div> <div>{target.content}</div> {!noImage && <div> <PostImages post={target} /> </div>} <ActionButtons/> </div> </div> </PostArticle> ) }
해결됨
Next + React Query로 SNS 서비스 만들기
게시물 업로드할 때 status: 500 Internal Server Error 가 나옵니다. 게시물 업로드 함수는 아래와 같습니다. const onSubmit = async (e: React.FormEvent) => { e.preventDefault(); const formData = new FormData(); formData.append("content", content); imgPreview.forEach((img) => { img && formData.append("images", img.file); }); await fetch(`${process.env.NEXT_PUBLIC_BASE_URL}/api/posts`, { method: "post", credentials: "include", body: formData, }); }; 작성한 폼데이터를 전송한 응답을 출력해보니 status:500, Internal Server Error가 나옵니다. 네트워크 탭에서 확인해보니 formData는 제대로 전송되는 듯해요. 서버 로그로 확인한 결과입니다. 서버에서 문제가 발생한걸까요 ?
미해결
Next + React Query로 SNS 서비스 만들기
Suspense로 Streaming하여 최적화하기(feat. loading.tsx, error.tsx) 해당 강의 예제 코드를 보려고 github에서 이리저리 굴러봐도 강의 예제코드와 동일한 코드가 보이지 않아서 질문 올리게 되었습니다. 혹시 suspense hook / reactQuery로 suspense 사용해보기에 관한 맛만 보여주시고 깃에서는 확인 불가능한걸까요?
해결됨
맛집 지도앱 만들기 (React Native & NestJS)
실무에서 사용하기 위해 일부러 강의버전과 다르게 최신버전으로만 진행중입니다. 그래서 많은 에러가 나고 있는데.. ios는 잘 열리는데 android만 안열려서 이것저것 해보다 방법을 찾아서 공유합니다. 우선 에러는 아래와 같았고 문제는 ndkVersion버전이었습니다. * What went wrong: A problem occurred configuring project ':react-native-reanimated'. > [CXX1101] NDK at /Users/name/Library/Android/sdk/ndk/26.1.10909125 did not have a source.properties file 제가 해결 한 방법은 아래와 같습니다. cf) 현재 ndkVersion과 호환되는 ndkVersion버전은 저랑 다를 수 있습니다. 저는 23.1.7779620버전으로 진행했는데 호환되는 버전으로 변경하신다음 진행하시면 됩니다. 0.Android Studio에서 변경하고자 하는 NDK 버전 설치 1.프로젝트 루트 디렉터리로 이동합니다 2.local.properties 파일을 생성하거나 엽니다 vim local.properties 3.local.properties 파일에 SDK 및 NDK 경로를 추가합니다 sdk.dir=/Users/wini/Library/Android/sdk ndk.dir=/Users/wini/Library/Android/sdk/ndk/23.1.7779620 4.파일을 저장하고 닫습니다. : Esc, :wq, Enter 5.android/build.gradle파일에서 ndkVersion 버전을 변경합니다. ndkVersion = "23.1.7779620" 6.잘못된 NDK 폴더 삭제 rm -rf /Users/wini/Library/Android/sdk/ndk/26.1.10909125 7.Gradle 캐시 및 빌드 파일 정리 cd android ## 안드로이드 파일에서 진행 ./gradlew clean 8.Metro 번들러 재시작 및 Android 앱 실행 cd .. ## front폴더에서 npx react-native start --reset-cache npx react-native run-android
해결됨
맛집 지도앱 만들기 (React Native & NestJS)
캐시도 다 지워보고, 앱도 삭제해보고, 재설치도 해보고 해봤는데 원인을 모르겠네요... 강사님 코드로 바꿔넣어도, 동일하게 아래와 같은 에러가 발생합니다. 이유를 알고싶습니다..!! ERROR TypeError: Cannot read property 'PINK_700' of undefined This error is located at: in CustomButton (created by AuthHomeScreen) in RCTView (created by View) in View (created by AuthHomeScreen) in RCTSafeAreaView (created by AuthHomeScreen) in AuthHomeScreen (created by SceneView) in StaticContainer in EnsureSingleNavigator (created by SceneView) in SceneView (created by CardContainer) in RCTView (created by View) in View (created by CardContainer) in RCTView (created by View) in View (created by CardContainer) in RCTView (created by View) in View in CardSheet (created by Card) in RCTView (created by View) in View (created by Animated(View)) in Animated(View) (created by PanGestureHandler) in PanGestureHandler (created by PanGestureHandler) in PanGestureHandler (created by Card) in RCTView (created by View) in View (created by Animated(View)) in Animated(View) (created by Card) in RCTView (created by View) in View (created by Card) in Card (created by CardContainer) in CardContainer (created by CardStack) in RNSScreen (created by Animated(Anonymous)) in Animated(Anonymous) (created by InnerScreen) in Suspender (created by Freeze) in Suspense (created by Freeze) in Freeze (created by DelayedFreeze) in DelayedFreeze (created by InnerScreen) in InnerScreen (created by Screen) in Screen (created by MaybeScreen) in MaybeScreen (created by CardStack) in RNSScreenContainer (created by ScreenContainer) in ScreenContainer (created by MaybeScreenContainer) in MaybeScreenContainer (created by CardStack) in RCTView (created by View) in View (created by Background) in Background (created by CardStack) in CardStack (created by HeaderShownContext) in RNCSafeAreaProvider (created by SafeAreaProvider) in SafeAreaProvider (created by SafeAreaProviderCompat) in SafeAreaProviderCompat (created by StackView) in RCTView (created by View) in View (created by GestureHandlerRootView) in GestureHandlerRootView (created by StackView) in StackView (created by StackNavigator) in PreventRemoveProvider (created by NavigationContent) in NavigationContent in Unknown (created by StackNavigator) in StackNavigator (created by AuthStackNavigator) in AuthStackNavigator (created by RootNavigator) in RootNavigator (created by App) in EnsureSingleNavigator in BaseNavigationContainer in ThemeProvider in NavigationContainerInner (created by App) in _QueryClientProvider (created by App) in App in RCTView (created by View) in View (created by AppContainer) in RCTView (created by View) in View (created by AppContainer) in AppContainer in MatzipApp(RootComponent), js engine: hermes ERROR TypeError: Cannot read property 'WHITE' of undefined This error is located at: in RetryErrorBoundary (created by RootNavigator) in RootNavigator (created by App) in EnsureSingleNavigator in BaseNavigationContainer in ThemeProvider in NavigationContainerInner (created by App) in _QueryClientProvider (created by App) in App in RCTView (created by View) in View (created by AppContainer) in RCTView (created by View) in View (created by AppContainer) in AppContainer in MatzipApp(RootComponent), js engine: hermes ERROR TypeError: Cannot read property 'WHITE' of undefined This error is located at: in RetryErrorBoundary (created by RootNavigator) in RootNavigator (created by App) in EnsureSingleNavigator in BaseNavigationContainer in ThemeProvider in NavigationContainerInner (created by App) in _QueryClientProvider (created by App) in App in RCTView (created by View) in View (created by AppContainer) in RCTView (created by View) in View (created by AppContainer) in AppContainer in MatzipApp(RootComponent), js engine: hermes
미해결
Next + React Query로 SNS 서비스 만들기
http.post('/api/logout', () => { console.log('로그아웃'); return new HttpResponse(null, { headers: { 'Set-Cookie': 'connect.sid=;HttpOnly;Path=/;Max-Age=0' } }) }), 위 코드가 제로초님이 로그아웃을 위한 handler를 짜놓으신 건데 정작 로그아웃을할때는 const onLogout = () => { signOut({ redirect: false }) .then(() => { router.replace('/'); }); }; 위와 같이 그저 signOut 함수만 사용하고있으며 로그인때와 같이 따로 providers에서 fetch 경로를 설정해준것도아닌데 next-auth에서는 어떻게 signOut의 경로가 /api/logout인지 아는건가요?
미해결
Next + React Query로 SNS 서비스 만들기
isPending은 데이터를 불러오고 있을 때, true가 되고 isLoading 은 쿼리가 처음으로 실행될 때 true 가 되는 것으로 알고 있습니다. 제가 이해하기로는 두 속성의 개념이 상당히 많이 겹칠 수 있을 것 같은데, 왜 이렇게 개별로 있는 것인지 궁금합니다.
미해결
Next + React Query로 SNS 서비스 만들기
http.post('/api/users', async ({ request }) => { console.log('회원가입'); // return HttpResponse.text(JSON.stringify('user_exists'), { // status: 403, // }) return HttpResponse.text(JSON.stringify('ok'), { headers: { 'Set-Cookie': 'connect.sid=msw-cookie; HttpOnly;Path=/;Max-Age=0' } }) }), 현재 위 코드가 제로초님의 회원가입 코드인데 로그아웃을 할때 세션을 만료하기위해서 Max-Age=0을 넣는것은 이해가 되지만 왜 굳이 회원가입을 할때도 Max-Age=0을 붙이신건가요? 회원가입시 쿠키가 왜 필요한지와 필요하다고하더라도 왜 굳이 바로 Max-Age=0을 추가해서 바로 만료시켜버리는지가 궁금합니다!
미해결
Next + React Query로 SNS 서비스 만들기
안녕하세요. 강사님 예제를 보고 하던 중 suspense 가 동작하지 않아 질문드립니다. 처음 예시로 알려주신 react-query의 isPending 을 사용한 로딩처리는 잘 동작하지만 마지막에 알려주신 useSuspense( useSuspenseInfiniteQuery, useSuspenseQuery )들을 사용하는 경우 동작하지 않네요.. * 팔로우 중 을 선택해도 suspense에 설정한 로딩 컴포넌트가 나오지 않고 딜레이된 시간(5초) 후 데이터가 보여집니다. 로딩 컴포넌트도 회전하지 않고 멈춰있습니다. 어떤부분을 봐야할까요?ㅠㅠ 반대로 이런 증상을 경험하니 이전 데이터가 먼저 보여진 후 5초 뒤에 최신 데이터로 보여지므로 사용자가 잘 못된 데이터를 표시 할 수 있다는걸 배울 수 있었습니다. 😎 소스코드 const HomePage = async () => { return ( <HomeContextProvider> <HomeTopTab /> <WriteForm /> <Suspense fallback={<Loader />}> <TabDividerSuspense /> </Suspense> </HomeContextProvider> ); }; const TabDividerSuspense = async () => { const queryClient = new QueryClient(); await queryClient.prefetchInfiniteQuery({ queryKey: ["tweet", "recommends"], queryFn: getPostRecommends, initialPageParam: 0, }); const dehydratedState = dehydrate(queryClient); return ( <HydrationBoundary state={dehydratedState}> <TabDivider /> </HydrationBoundary> ); }; const TabDivider = () => { const { tab } = useContext(HomeContext); return tab === "recommended" ? <TweetList /> : <FollowingList />; }; const TweetList = () => { const { ref, inView } = useInView(); const { data, fetchNextPage, hasNextPage, isFetching, isPending } = useSuspenseInfiniteQuery< Post[], object, InfiniteData<Post[]>, [string, string], number >({ queryKey: ["tweet", "recommends"], queryFn: getPostRecommends, initialPageParam: 0, getNextPageParam: (lastPage) => lastPage.at(-1)?.postId, }); useEffect(() => { if (inView) { !isFetching && hasNextPage && fetchNextPage(); } }, [fetchNextPage, hasNextPage, inView, isFetching]); const tweets = useMemo(() => { if (data) { return data.pages.flat(); } }, [data]); return ( <> {tweets?.map((tweet) => ( <Tweet post={tweet} key={tweet.postId} /> ))} {isPending && <Loader />} <div ref={ref} /> </> ); }; 추가 질문 빌드 후 네트워크 탭에서 home 을 확인해보면 post 글 들이 모두 html로 변환되어 내려 오고 있습니다! (dev에서는 템플릿?으로 표현되더라고요) 저는 html이 아닌 데이터 형태로 내려와 useQuery로 해당 키로 접근해서 그냥 데이터를 가져올 줄 알았는데..그게 아닌가 보네요. 혹시 좀 더 자세히 설명 좀 부탁드려도 될까요?ㅠ 그리고 home 의 미리보기 탭에서는 post글들이 아닌 로딩 컴포넌트가 보입니다. (위의 사진에 응답 탭에서는 post글 들이 존재하고요) 로딩 컴포넌트가 보이는 이유는 하이드레이션이 처리되기 전이라 그런게 맞나요? 지금 자료를 다시 찾으려니 못 찾고 있는데.. suspense를 사용할 경우 완성된 화면이 아닌 로딩화면을 먼저 내려주므로 seo에는 나쁠 수 있다 라는 글을 본적이 있던 것 같은데..맞을까요? *SEO 관련해서 추가로 궁금한건 강의가 따로 있다고 영상에서 말씀하셔서 거기까지 보고 필요할 경우 질문 한번 더 드리겠습니다. 👍
