inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

Next + React Query로 SNS 서비스 만들기

리버스 인피니트 스크롤링

내가 나에게 채팅을 거는 이유

197

김용민

작성한 질문수 74

0

스크린샷 2024-07-08 오전 9.32.12.png

안녕하세요, 강사님, 개발 하는 도중에, test2계정으로 -> test1계정에 메시지를 걸 떄 원래는 test1계정이 나와야하는데, 현재 로그인한 유저의 정보를 불러오는 상황이 생겼습니다.이유가 무엇인지 궁금합니다!!

import {
	HydrationBoundary,
	QueryClient,
	dehydrate,
} from '@tanstack/react-query';

import style from './profile.module.css';

import UserPosts from './_component/UserPosts';
import { getUserPosts } from './_lib/getUserPosts';

import UserInfo from './_component/UserInfo';
import { auth } from '@/auth';
import { getUserServer } from './_lib/getUserServer';
import { User } from '@/model/User';

export async function generateMetadata({ params }: Props) {
	const user: User = await getUserServer({
		queryKey: ['users', params.username],
	});
	return {
		title: `${user.nickname} (${user.id})`,
		description: `${user.nickname} (${user.id})`,
		openGraph: {
			title: `${user.nickname} (${user.id}) / Z`,
			description: `${user.nickname} (${user.id})`, // 프로필
			images: [
				{
					url: `https://z.nodebirde.com${user.image}`, // upload
					width: 800,
					height: 600,
				},
			],
		},
	};
}

type Props = {
	params: { username: string };
};

export default async function Profile({ params }: Props) {
	const { username } = params;
	const queryClient = new QueryClient();
	const session = await auth();
	// 사용자 정보 쿼리로 가져옴
	await queryClient.prefetchQuery({
		queryKey: ['users', username],
		queryFn: getUserServer,
	});
	// 해당 유저의 게시글
	await queryClient.prefetchQuery({
		queryKey: ['posts', 'users', username],
		queryFn: getUserPosts,
	});
	const dehydratedState = dehydrate(queryClient);
	// 서버쪽에서 쿼리를 해온 것을 나중에 dehydratedState로 받으면 됨.

	// const user = {
	// 	id: 'zerohch0',
	// 	nickname: '제로초',
	// 	image: '/5Udwvqim.jpg',
	// };

	return (
		<main className={style.main}>
			<HydrationBoundary state={dehydratedState}>
				<UserInfo username={username} session={session} />
				<div>
					<UserPosts username={username} />
				</div>
			</HydrationBoundary>
		</main>
	);
}

react next.js react-query next-auth msw

답변 1

0

제로초(조현영)

글쎄요. 저 Profile 코드는 관련 없는 코드입니다. 현재 주소랑 콘솔로그 찍거나 리액트쿼리데브툴까지 보여주셔야죠.

현재 주소랑 /messages/[room]/page.tsx 코드를 보여주셔야 합니다. 거기에 ids가 있는데 console.log(ids, session?.user?.email) 결과를 보여주세요.

https://github.com/ZeroCho/next-app-router-z/blob/master/lecture/src/app/(afterLogin)/messages/%5Broom%5D/page.tsx

 

캡처링부분 질문있습니다.

0

77

2

깃에 소스코드를 찾을 수 없습니다.

0

115

2

useInfiniteQuery promise와 react use 사용시 페이지 무한 로딩

0

99

1

import 파일 경로를 찾지 못 해서 에러가 발생합니다.

0

112

2

css 라이브러리 추천 부탁드립니다

0

142

2

팔로우 추천 목록이 빈 배열로 들어옵니다.

0

134

1

게시물 업로드 시 userId가 undefined로 들어가는 오류

0

120

1

useSuspenseQuery 사용 시 SSR 401 이슈 관련

0

173

1

리액트 쿼리 useinfinitequery 무한스크롤 구현 시 페이지가 이동할 경우 데이터가 보존되게 할 수 있나요??

0

189

3

폴링이 필요없는 이유

0

94

2

next Request Memoization과 react cache

0

111

2

seo 최적화 기준은 데이터 fetching인가요 아님 데이터 렌더링인가요?

0

85

2

next.js 서버fetch 에러 fallback ui 구현 방법

0

174

2

프레임워크 여론 파악법

0

126

2

필터옵션이 많은 페이지에서 서버 fetch를 하는게 맞는걸까요??

0

104

2

서버 fetch suspense 로 감싸고 새로고침 시 잠시 빈 화면이 노출된 후 fallback ui가 노출됩니다.

0

104

2

template.tsx 내 서버fetch 응답값과 클라이언트 컴포넌트 상태값 싱크가 맞지 않는 이슈

0

67

2

Auth.js 사용 시 authorize 함수가 호출되지 않습니다

0

133

2

next.js 에서 로그인에 관하여

0

140

1

Next의 route handler에 대한 질문이 있습니다.

0

102

2

게시판 리스트 만들때 use client를 어디서부터 집어넣어야할지 모르겠습니다

0

101

2

프라이빗 폴더를 해야 하는 이유가 모호한 것 같아요.

0

86

2

vanilla-extract 못찾는 문제

0

231

2

fetch 캐싱과 revalidate 관련

0

87

2