simhs7831

common.js는 require로 구문을 가져오는거 아닌가요 ?!

질문있습니다 !

혹시 유저정보를 받아오는 prefetchQuery에서 쿠키를 넣어주기 때문에 두 번째 쿼리함수엔 안 넣어줘도 되는건가요 ?

질문

그리고 인피니트 스크롤링을 활용해서 현재 postRecommend데이터를 가져오고 있는데 가져온 데이터의 postId가 뒤죽박죽이더라구요. &nbsp;예를 들어 1,2,3,4,5 올라가다가 갑자기 100, 99, 98 순으로 내려오는 ? 전 postId 순으로 순차적으로 데이터가 내려올 줄 알았는데 의도적으로 무작위 데이터를 내려주는건지 궁금합니다 !

하나 더 궁금한게 있습니다. 아래 코드는 액션버튼의 리포스트 함수 내에 코드인데 리포스트한 게시물의 값을 변경하기 위해 얕은복사를 해줬는데 value.pages / value.pages[pageIndex] 의 값을 재할당 하는게 아니라 shallow.pages 와 shallow.pages[pageIndex] 에 얕은 복사한 값을 넣어줘야 하는거 아닌가요 ? &nbsp;<pre><code class="language-typescriptreact">const shallow = { ...value };
 value.pages = { ...value.pages };
 value.pages[pageIndex] = [...value.pages[pageIndex]];
 shallow.pages[pageIndex][index] = {
 ...shallow.pages[pageIndex][index],
 Hearts: [{ userId: session?.user?.email as string }],
 _count: {
 ...shallow.pages[pageIndex][index]._count,
 Hearts: shallow.pages[pageIndex][index]._count.Hearts + 1,
 },
 };</code></pre>

재게시 관련 궁금한 사항

A아이디에서 재게시한 글이 B에도 재게시한 글이라고 보이는 거 정상인가요 ?

아 제로초님 강의는 아이디 부분이 다 영어라서 인코딩되지 않았던거였네요 그럼 그럼 AI 답변과 같이 decodeURIComponent 함수 사용하면 될까요 ?

params 질문

<pre><code class="language-typescriptreact">import style from './profile.module.css';
import BackButton from '../_component/BackButton';
import UserInfo from './_component/UserInfo';
import { useSession } from 'next-auth/react';
import { Metadata } from 'next';
import { User } from '@/model/User';
import { getUserServer } from './_lib/getUserServer';
import { auth } from '@/auth';
import { HydrationBoundary } from '@tanstack/react-query';
import { dehydrate } from '@tanstack/react-query';
import { QueryClient } from '@tanstack/react-query';

import { getUserPosts } from './_lib/getUserPosts';
import UserPosts from './_component/UserPosts';
export async function generateMetadata({ params }: { params: Promise<{ username: string }> }) {
 // Promise<{ username: string }>는 Promise 객체를 반환하는 비동기 작업의 결과가 특정한 형태의 객체라는 것을 나타냅니다.
 const { username } = await params;
 console.log(username);
 const user: User = await getUserServer({ queryKey: ['users', username] });
 return {
 title: `${user.nickname} 프로필`,
 describe: `${user.nickname} 프로필에 오신걸 환영합니다`,
 };
}
export default async function Profile({ params }: { params: { username: string } }) {
 const { username } = await params;
 const session = await auth();
 console.log(username);
 const queryClient = new QueryClient();
 await queryClient.prefetchQuery({ queryKey: ['users', username], queryFn: getUserServer });
 await queryClient.prefetchInfiniteQuery({
 queryKey: ['posts', 'users', username],
 queryFn: getUserPosts,
 initialPageParam: 0,
 });
 const dehydratedState = dehydrate(queryClient);

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

아뇨 url 부분엔 <a target="_blank" rel="noopener noreferrer nofollow" href="http://localhost:3000/%EC%8B%AC%ED%98%84%EC%84%9D">http://localhost:3000/심현석</a> 으로 보이는데 여기에 복붙하니까 인코딩된 값이 나오네요 <a target="_blank" rel="noopener noreferrer nofollow" href="http://localhost:3000/%EC%8B%AC%ED%98%84%EC%84%9D">http://localhost:3000/%EC%8B%AC%ED%98%84%EC%84%9D</a>

궁금한게 하나 더 있습니다 &nbsp;아래 로직은 로그인 모달의 onSubmit 함수인데 원래라면 result.code === "no_user" 인 경우와 result.code === "wrong_password" 인 경우에도 아래 router.replcae("/home") 이 작동되야 하는거 아닌가요 ? 이 경우 result객체 내부에 error에 값이 있어서 replace 함수가 작동하지 않는건가요 ? &nbsp;<pre><code class="language-typescriptreact">const onSubmit: FormEventHandler<HTMLFormElement> = async (e) => {
 e.preventDefault();
 setMessage('');
 try {
 const result = await signIn('credentials', {
 username: id,
 password,
 redirect: false,
 });
 console.log(result);
 if (result?.code === 'no_user') {
 setMessage('가입하지 않은 유저입니다.');
 } else if (result?.code === 'wrong_password') {
 setMessage('비밀번호가 틀렸습니다.');
 }
 router.replace('/home');
 } catch (err) {
 console.error(err);
 }
 };</code></pre>

middleware 관련 질문입니다

<pre><code class="language-typescriptreact">if (process.env.NEXT_RUNTIME === 'nodejs' && process.env.NODE_ENV !== 'production') {
 const { server } = require('@/mocks/http');
 server.listen();
}</code></pre>해당 코드 추가하니 해결됐습니다