수업에서는 '카운트다운 시작' 버튼 눌러서 Starter 함수가 실행되면 로컬 스토리지가 setInterval 함수로 인해 비워지기 때문에, CounterMaker 함수 내에 if문을 작성하여 해결하고 있습니다.저는 이 방법 말고 사진처럼 starter 함수 내부에서 setInterval 함수(clearTimer라고 작성한..) 호출 위치를 조정하여 해결하였는데, 이 방법에 문제가 있을지 궁금합니다!

05-05-dynamic-routing-board-mutation05-05-dynamic-routing-board-mutation-moved 계속해서 대조해보지만 게시글 등록하기를 누르고 moved 페이지로 넘어갈 때 404 오류가 뜹니다. catch에서 잡히지 않는걸로 보아 데이터 전송에서 문제가 있는건 아니지 않을까 싶은데, 아무리 봐도 해결책이 보이지 않아 질문 남깁니다.

안녕하세요 제로초님, 강의 잘듣고잇습니다!!! db시퀄라이즈 관계 설정? 질문좀 드리려고요. 강의듣고 블로그를 만들어보려고 백/프론트 구상하고 있는데요, db table설정?을 어떻게 해야할지 헷갈려서요. 메인 페이지는 전체 post를 카테고리(메뉴)별로 나눠서 보여줍니다.메뉴[ study / TIL / portfolio ]를 클릭하면 해당 categories로 저장한 게시글을 보여줍니다 (노란화살표)포스트 작성할 때는 하나의 categories를 선택합니다. 각 게시글은 하나의 카테고리만 가집니다!  헷갈리는 부분은메뉴탭을 눌러서 study / TIL 로 이동했을 때, 전체 post를 가져오는 게 아니라 해당 categories의 post만 가져오고 싶은데, db를 활용해야 하는건지, 백엔드에서 필터링 과정을 해야 하는건지, 헷갈립니다이때 categories를 관계형 테이블?로 만들어서 해당 카테고리로 post를 가져올 수 있나요????백엔드가 전체 db에서 post를 findAll로 가져와, 카테고리로 필터링해서 프론트로 넘겨줘야 하나요?서버에서 전체 post를 받아서 프론트에서 필터링해서 각 컴포넌트에서 사용해야 하나요?? 흠. 뭔가 여러 방법이 떠오르긴 하는데 아직 시도해보지는 않았고 ㅎㅎㅎ 효율적인 방법이 뭔지 알고싶어요!! 제로초님이라면 어떤 방법을 사용하시나요?

안녕하세요 ! Next14 버전과 tanstack-qeury를 이용해 프로젝트를 진행하던 도중 궁금한 점이 생겨 질문드립니다. Next의 서버 컴포넌트에서 data를 prefetching 하여 사용하려면 다음과 같은 단계를 밟아야 하는 것으로 알고 있습니다. 1. 서버 컴포넌트에서 queryClient.prefetchQuery를 사용해 데이터를 불러오고 이를 dehydrate하여 HydrationBoundary 내에 state로 넘겨준다. 2. 데이터를 사용하는 컴포넌트에서 useQuery로 동일한 데이터를 불러오면 해당 데이터는 prefetch 된 상태로 넘어와 이를 사용한다. 현재 이를 토대로 아래 예시코드와 같이 작성하여 사용중입니다. 이 때 하위 컴포넌트에서 prefetch한 데이터를 사용하려면 useQuery를 써야하기에, 'use client' 를 사용해야하고, 그렇게 되면 그 하위 컴포넌트도 전부 Client Boundary에 들어오게 되는 것으로 알고있는데, 그럼 "Next를 사용하며 얻을 수 있는 장점이 줄어들지 않나 ?" 라는 의문이 생겼습니다. 제가 사용법을 잘못 알고있다거나 Next의 개념에 대해 부족한걸까요 ? 또, HydrationBoundary로 감싸지 않고 queryClient.getQueryData를 이용해 직접 데이터를 가져와 이를 props로 전달해도 기능은 정상적으로 작동하는데, 이 둘의 차이점이 정확히 무엇인가요 ? // 서버 컴포넌트 import { HydrationBoundary, dehydrate, QueryClient, } from "@tanstack/react-query"; import { QUERY_KEY } from "@/constants"; import { requestGetPushAlarmList } from "@/apis/notification"; import NotificationClient from "./Client"; export default async function Page() { const queryClient = new QueryClient(); await queryClient.prefetchQuery({ queryKey: [QUERY_KEY.PUSH_LIST], queryFn: () => requestGetPushAlarmList({}), }); // const { rows: pushList } = queryClient.getQueryData([ // QUERY_KEY.PUSH_LIST, // ]) as unknown as Rows<PushAlarm>; 예시 2. getQueryData로 데이터에 접근 return ( <HydrationBoundary state={dehydrate(queryClient)}> <NotificationClient /> </HydrationBoundary> // <NotificationList pushList={pushList} /> 예시2. props로 직접 데이터 전달 ); } // 하위 컴포넌트 "use client"; import { useQuery } from "@tanstack/react-query"; import { requestGetPushAlarmList } from "@/apis/notification"; import { QUERY_KEY } from "@/constants"; import NotificationList from "./_components/NotificationList"; import ScreenBox from "@/components/ui/ScreenBox"; import Empty from "@/components/ui/Empty"; export default function NotificationClient() { const { data } = useQuery({ queryKey: [QUERY_KEY.PUSH_LIST], queryFn: () => requestGetPushAlarmList({}), select: (data) => data.rows, }); return ( <> {!data?.length ? ( <ScreenBox.CenterBody> <Empty message="알림이 없습니다." /> </ScreenBox.CenterBody> ) : ( <NotificationList pushList={data} /> )} </> ); }

깃허브에 올려놓은 소스(next-app-router-z /ch3-1)을다운받은후에 403 에러발생을 확인하기 위해서아래의 주석을 해제했습니다.src/mocks/handlers.ts http.post('/api/users', async ({ request }) => { console.log('회원가입'); return HttpResponse.text(JSON.stringify('user_exists'), { status: 403, }) }) }), PostMan 에서 http://localhost:9090/api/users?id=js&password=pass&name=js7777호출을 하면 status 값이 의도한 대로 403 Forbidden 이 출력이 됩니다.그런데, 브라우저 개발자모드 Network 에서 보면 Status 값이 200 으로 출력됩니다.서버에서는 분명 403 상태로 보냈고, PostMan에서도 403으로 상태값이 넘어오는데, 왜? 개발자 도구(Network)에서만 상태값이 200으로 출력되는지 모르겠습니다.   

추천탭에서 게시글을 작성하면 새로고침 시 사라져버리고 추천탭에서 게시한 게시글이 "팔로우 중" 탭에서 존재하여 좋아요 버튼을 클릭하면 새로고침 시 다시 추천탭에도 해당 게시글이 나타납니다.도무지 뭐가문제인지 모르겠네요ㅠㅠ"use client" import { MouseEventHandler } from 'react'; import style from './post.module.css'; import cx from 'classnames'; import { useMutation, useQueryClient } from '@tanstack/react-query'; import { Post } from '@/model/Post'; type Props = { white? : boolean; postId: number; } export default function ActionButtons({white, postId}: Props) { const queryClient = useQueryClient(); const commented = true; const reposted = true; const liked = false; const heart = useMutation({ mutationFn: () => { return fetch(`${process.env.NEXT_PUBLIC_BASE_URL}/api/posts/${postId}/heart`, { method: 'post', credentials: 'include', }) }, // 클릭한 하트 상태를 실시간으로 true로 만들어줌 // post에서 검색결과,추천,팔로잉,답글 등등 쿼리키가 다양한대 어떤 쿼리키인지 무슨상황인지 알 수가 없다. // 그래서 전부 다 해줘야 한다. onMutate() { const queryCache = queryClient.getQueryCache(); const queryKeys = queryCache.getAll().map(cache => cache.queryKey); console.log('queryKeys',queryKeys); queryKeys.forEach((querykey) => { if(querykey[0] === 'posts') { const value:Post | Post[] | undefined = queryClient.getQueryData(querykey); // 게시글 console.log(value) // 싱글포스트 일 수도 있기때문에 조건문 걸어줌. if(Array.isArray(value)){ const index = value.findIndex((v) => postId == v.postId); // 찾고자 하는 게시글이 있는지 확인 if(index > -1) { const shallow = [...value]; shallow[index] = { ...shallow[index], } // 옅은 복사해준것을 쿼리에 전송 queryClient.setQueryData(querykey, shallow); } }else { // 싱글 포스트인 경우 } } }); }, onError() { }, onSettled() { } }) // 댓글 const onClickComment = () => {} // 리트윗 const onClickRepost = () => { } // 좋아요 const onClickHeart:MouseEventHandler<HTMLButtonElement> = (e) => { e.stopPropagation(); if(liked){ // unheart.mutate(); }else{ heart.mutate(); } } return ( <div className={style.actionButtons}> <div className={cx(style.commentButton, { [style.commented]: commented }, white && style.white)}> <button onClick={onClickComment}> <svg width={24} viewBox="0 0 24 24" aria-hidden="true"> <g> <path d="M1.751 10c0-4.42 3.584-8 8.005-8h4.366c4.49 0 8.129 3.64 8.129 8.13 0 2.96-1.607 5.68-4.196 7.11l-8.054 4.46v-3.69h-.067c-4.49.1-8.183-3.51-8.183-8.01zm8.005-6c-3.317 0-6.005 2.69-6.005 6 0 3.37 2.77 6.08 6.138 6.01l.351-.01h1.761v2.3l5.087-2.81c1.951-1.08 3.163-3.13 3.163-5.36 0-3.39-2.744-6.13-6.129-6.13H9.756z"></path> </g> </svg> </button> <div className={style.count}>{1 || ''}</div> </div> <div className={cx(style.repostButton, reposted && style.reposted, white && style.white)}> <button onClick={onClickRepost}> <svg width={24} viewBox="0 0 24 24" aria-hidden="true"> <g> <path d="M4.5 3.88l4.432 4.14-1.364 1.46L5.5 7.55V16c0 1.1.896 2 2 2H13v2H7.5c-2.209 0-4-1.79-4-4V7.55L1.432 9.48.068 8.02 4.5 3.88zM16.5 6H11V4h5.5c2.209 0 4 1.79 4 4v8.45l2.068-1.93 1.364 1.46-4.432 4.14-4.432-4.14 1.364-1.46 2.068 1.93V8c0-1.1-.896-2-2-2z"></path> </g> </svg> </button> <div className={style.count}>{1 || ''}</div> </div> <div className={cx([style.heartButton, liked && style.liked, white && style.white])}> <button onClick={onClickHeart}> <svg width={24} viewBox="0 0 24 24" aria-hidden="true"> <g> <path d="M16.697 5.5c-1.222-.06-2.679.51-3.89 2.16l-.805 1.09-.806-1.09C9.984 6.01 8.526 5.44 7.304 5.5c-1.243.07-2.349.78-2.91 1.91-.552 1.12-.633 2.78.479 4.82 1.074 1.97 3.257 4.27 7.129 6.61 3.87-2.34 6.052-4.64 7.126-6.61 1.111-2.04 1.03-3.7.477-4.82-.561-1.13-1.666-1.84-2.908-1.91zm4.187 7.69c-1.351 2.48-4.001 5.12-8.379 7.67l-.503.3-.504-.3c-4.379-2.55-7.029-5.19-8.382-7.67-1.36-2.5-1.41-4.86-.514-6.67.887-1.79 2.647-2.91 4.601-3.01 1.651-.09 3.368.56 4.798 2.01 1.429-1.45 3.146-2.1 4.796-2.01 1.954.1 3.714 1.22 4.601 3.01.896 1.81.846 4.17-.514 6.67z"></path> </g> </svg> </button> <div className={style.count}>{0 || ''}</div> </div> </div> ) }

안녕하세요 도메인 연결 후 로그인과 로그아웃이 잘 되고, 새로고침 시에도 유지가 되는데요~게시글이 작성은 안됩니다 ㅠㅠ 회원가입은 되구요!이 다음 강의 S3를 연결하면 게시글이 작성이 되는게 맞을까요? 아니면 현재 오류가 있는건가여..

안녕하세요. 처음 15초쯤에 nextjs소개하면서 나오는 번역프로그램은 어떤걸 쓰시는건가요? 편리해보여서요~

프로젝트를 하다가 next를 배포해서 nginx에 물리려고 했는데 index html 을 찾아서 물려줘야 된다고 해서 강의에서 나온 nextConfig 에서 output:'export 를 해주면 index html 이 뜨는건 확인을 하였습니다. 근데 문제는 제가 서버에서의 기능을 많이 썼기 때문에 정적으로 배포가 어려움이 있었습니다. 다른 방법이 있을까요..?

안녕하세요 😃 현재 Next.js 사용해 프로젝트 진행중인데 한번 로그인하면 웹에 재접속 시 자동으로 로그인 처리되도록 하고 싶습니다. 현업에서는 어떤 방식으로 진행하는지 궁금합니다! 답변 주시면 정말 정말 감사합니다!!

csr 에서는 useQueryClient로 생성된 QueryClient를 가져와 사용하는 반면에ssr 에서 prefetch 할 때에는 QueryClient 를 새로 생성해서 사용하시더라구요.그럼 ssr에서 생긴 QueryClient csr에서 생긴 QueryClient 두개가 존재하게 되는데, 리액트쿼리가 hydrate 하는 과정에서 알아서 합쳐주는 건지 그 원리가 궁금합니다. 2. prefetch를 할 때마다 QueryClient를 새로 생성해야 하는지 아니면 ssr에서 사용할 QueryClient를 하나 생성해서 공유하는 방식으로 사용해야 하는 것인지, 또 공유해서 사용한다면 예제가 있을까요? 만약 prefetch 할 때마다 QueryClient를 새로 생성해야 한다면 성능상에 문제는 없을까요? prefetch를 난발하는 것을 멈추고 조심히 사용해야 할까요?강의 덕분에 많이 배웠습니다. 좋은 강의 감사합니다.

위 화면과 같이 백틱으로 감싸서 사용할 때, 적용이 안 되는데, 서칭을 해보면 Browser 호환 문제라는 말들이 있습니다. 영상에서와 같은 Chrome을 통한 Console창에서 실습 중인데 무엇이 문제일까요?

  ./src/_components/Carousel.tsx 110:6 Warning: React Hook useEffect has a missing dependency: 'nextFn'. Either include it or remove the dependency array. react-hooks/exhaustive-deps (....lint warning문구 생략) info - Need to disable some ESLint rules? Learn more here: https://nextjs.org/docs/basic-features/eslint#disabling-rules Linting and checking validity of types .Failed to compile. ./src/_components/Carousel.tsx:137:12 Type error: 'Arrow' cannot be used as a JSX component. Its type 'FC<PropsWithChildren<ArrowProps>>' is not a valid JSX element type. Type 'FunctionComponent<PropsWithChildren<ArrowProps>>' is not assignable to type '(props: any, deprecatedLegacyContext?: any) => ReactNode'. Type 'ReactElement<any, any> | null' is not assignable to type 'ReactNode'. Type 'ReactElement<any, any>' is not assignable to type 'ReactNode'. Property 'children' is missing in type 'ReactElement<any, any>' but required in type 'ReactPortal'. 135 | className={`h-full w-full ${inArrow ? 'absolute' : ''} max-w-full`}> 136 | {!!showNavButton && ( > 137 | <Arrow | ^ 138 | direction="left" 139 | executeFn={prevFn} 140 | inArrow={inArrow} error Command failed with exit code 1.  'use client'; import { FC, PropsWithChildren, useEffect, useState } from 'react'; interface ArrowProps { direction: 'left' | 'right'; executeFn: () => void; inArrow?: boolean; hoverStyle?: string; } const Arrow: FC<PropsWithChildren<ArrowProps>> = ({ direction, executeFn, inArrow, hoverStyle, children, ...props }) => { const [hoverColor, setHoverColor] = useState(hoverStyle || undefined); useEffect(() => { hoverStyle && setHoverColor(`hover:${hoverStyle}`); }, [hoverStyle]); const returnString = direction === 'left' ? '<' : '>'; return ( <div onClick={executeFn} className={`${inArrow ? 'absolute z-50' : ''} ${direction === 'left' ? 'left-0 top-0 rounded-l-lg' : 'right-0 top-0 rounded-r-lg'} center-vertical flex h-full w-[30px] cursor-pointer text-[30px] ${hoverColor && hoverColor}`} {...props}> {returnString} {children} </div> ); }; export default Arrow;   next build를 했을때 해당 에러가 Arrow컴포넌트에서 발생하였습니다.  Arrow컴포넌트에서 제가 정의한 FC<PropsWithChildren<ArrowProps>>타입이 유효한 JSX element type이 아니라는 메시지 인거 같습니다. 이 에러가 나는 이유가유효한 JSX엘리먼트가 아니어서 일것같아서return 하는 jsx문법에 오류가 있는지 확인하려div 겉에도 fragment로 감싼다거나returnString을 해주는 중괄호 부분도 fragment로 감싸거나children도 감싸보았습니다.그러나 똑같은 에러가 발생하고 있는 상황입니다.  const returnString = direction === 'left' ? '<' : '>'; 혹시 위의 코드가 문제가 발생할까 싶어서 SVG파일을 만들어조건에따라 왼쪽 오른쪽 SVG 파일 컴포넌트를 return 문 안에서 렌더링 해주었는데여기서도 동일한 에러가 발생하였습니다. Type error: 'LeftSvg' cannot be used as a JSX component. Its type '({ className, width, height, onClick, cyAttribute, }: { className?: string | undefined; width?: number | undefined; height?: number | undefined; onClick?: (() => void) | undefined; cyAttribute?: string | undefined; }) => JSX.Element' is not a valid JSX element type. Type '({ className, width, height, onClick, cyAttribute, }: { className?: string | undefined; width?: number | undefined; height?: number | undefined; onClick?: (() => void) | undefined; cyAttribute?: string | undefined; }) => JSX.Element' is not assignable to type '(props: any, deprecatedLegacyContext?: any) => ReactNode'. Type 'Element' is not assignable to type 'ReactNode'. Property 'children' is missing in type 'Element' but required in type 'ReactPortal'. 24 | }, [hoverStyle]); 25 | > 26 | const returnString = direction === 'left' ? <LeftSvg /> : <RightSvg />; | ^ 27 | 28 | return ( 29 | <div error Command failed with exit code 1.   참고로'DatePicker' cannot be used as a JSX component. Its instance type 'ReactDatePicker<undefined, undefined>' is not a valid JSX element.이런 에러가 타입에러 발견 된 적이 있어서 package.json파일에 "resolutions": { "@types/react": "^18.0.0" }, resolutions로 버전을 위와 같이 맞춰주어서해결한 적이 있습니다.

리액트 쿼리v5 부터 useQuery onSuccess 가 사라진걸로 알고있는데요! useQuery로 데이터패칭이 끝나면 zustand나 전역상태관리에 받아온 데이터를 저장하고싶은데 어떤식으로 하면될까요??

클라이언트 컴포넌트에서 Server Actions 사용하기에서 가입하기를 누르면response에는 message: null이 잘 오는데 redirect에서 에러가 납니다.404 SyntaxError: Unexpected token '<', "<!DOCTYPE "... is not valid JSON at JSON.parse (<anonymous>) at parseJSONFromBytes (node:internal/deps/undici/undici:5329:19) at successSteps (node:internal/deps/undici/undici:5300:27) at fullyReadBody (node:internal/deps/undici/undici:1447:9) at process.processTicksAndRejections (node:internal/process/task_queues:95:5) at async specConsumeBody (node:internal/deps/undici/undici:5309:7) at async onSubmit (webpack-internal:///(action-browser)/./src/app/(beforeLogin)/_lib/signup.ts:49:21) at async C:\Users\user\Desktop\projects\z-com\node_modules\next\dist\compiled\next-server\app-page.runtime.dev.js:39:406 at async t2 (C:\Users\user\Desktop\projects\z-com\node_modules\next\dist\compiled\next-server\app-page.runtime.dev.js:38:6412) at async rS (C:\Users\user\Desktop\projects\z-com\node_modules\next\dist\compiled\next-server\app-page.runtime.dev.js:41:1369) at async doRender (C:\Users\user\Desktop\projects\z-com\node_modules\next\dist\server\base-server.js:1378:30) at async cacheEntry.responseCache.get.routeKind (C:\Users\user\Desktop\projects\z-com\node_modules\next\dist\server\base-server.js:1539:28) at async DevServer.renderToResponseWithComponentsImpl (C:\Users\user\Desktop\projects\z-com\node_modules\next\dist\server\base-server.js:1447:28) at async DevServer.renderPageComponent (C:\Users\user\Desktop\projects\z-com\node_modules\next\dist\server\base-server.js:1844:24) at async DevServer.renderToResponseImpl (C:\Users\user\Desktop\projects\z-com\node_modules\next\dist\server\base-server.js:1882:32) at async DevServer.pipeImpl (C:\Users\user\Desktop\projects\z-com\node_modules\next\dist\server\base-server.js:895:25) at async NextNodeServer.handleCatchallRenderRequest (C:\Users\user\Desktop\projects\z-com\node_modules\next\dist\server\next-server.js:269:17) at async DevServer.handleRequestImpl (C:\Users\user\Desktop\projects\z-com\node_modules\next\dist\server\base-server.js:791:17) at async C:\Users\user\Desktop\projects\z-com\node_modules\next\dist\server\dev\next-dev-server.js:331:20 at async Span.traceAsyncFn (C:\Users\user\Desktop\projects\z-com\node_modules\next\dist\trace\trace.js:151:20) at async DevServer.handleRequest (C:\Users\user\Desktop\projects\z-com\node_modules\next\dist\server\dev\next-dev-server.js:328:24) at async invokeRender (C:\Users\user\Desktop\projects\z-com\node_modules\next\dist\server\lib\router-server.js:174:21) at async handleRequest (C:\Users\user\Desktop\projects\z-com\node_modules\next\dist\server\lib\router-server.js:353:24) at async requestHandlerImpl (C:\Users\user\Desktop\projects\z-com\node_modules\next\dist\server\lib\router-server.js:377:13) at async Server.requestListener (C:\Users\user\Desktop\projects\z-com\node_modules\next\dist\server\lib\start-server.js:140:13)at async onSubmit (webpack-internal:///(action-browser)/./src/app/(beforeLogin)/_lib/signup.ts:49:21) 에러가 난것을 확인했을때 다른것은 되는데 redirect가 안되는 것 같습니다.signup.ts는"use server"; import { redirect } from "next/navigation"; import { signIn } from "@/auth"; export default async function onSubmit(prevState: any, formData: FormData) { if (!formData.get("id") || !(formData.get("id") as string)?.trim()) { return { message: "no_id" }; } if (!formData.get("name") || !(formData.get("name") as string)?.trim()) { return { message: "no_name" }; } if ( !formData.get("password") || !(formData.get("password") as string)?.trim() ) { return { message: "no_password" }; } if (!formData.get("image")) { return { message: "no_image" }; } let shouldRedirect = false; try { const response = await fetch( `${process.env.NEXT_PUBLIC_BASE_URL}/api/users`, { method: "post", body: formData, credentials: "include", } ); console.log(response.status); if (response.status === 403) { return { message: "user_exists" }; } console.log(await response.json()); shouldRedirect = true; await signIn("credentials", { username: formData.get("id"), password: formData.get("password"), redirect: false, }); } catch (err) { console.error(err); return { message: null }; } if (shouldRedirect) { redirect("/home"); } return { message: null }; } ESLint 오류가 나서 return {message:null}을 추가해준것과export default async function onSubmit(prevState: any, formData: FormData) {}async function onSubmit 형태로 바꾼것 외에는 건드린게 없고,공지사항대로 @auth/core와 next-auth 버전을npm i @auth/core@0.27 next-auth@5.0.0-beta.11 msw@2.1이렇게 설정해줬고,.env.local도NEXT_PUBLIC_API_MOCKING=enabled API_MOCKING=hello NEXT_PUBLIC_BASE_URL=http://localhost:9090/ .env도AUTH_SECRET=mustkeepinsecret NEXT_PUBLIC_API_MOCKING=enabledSingupModal.tsx"use client"; import style from "./signup.module.css"; import onSubmit from "../_lib/signup"; import BackButton from "@/app/(beforeLogin)/_component/BackButton"; import { useFormState, useFormStatus } from "react-dom"; function showMessage(messasge: string | null) { if (messasge === "no_id") { return "아이디를 입력하세요."; } if (messasge === "no_name") { return "닉네임을 입력하세요."; } if (messasge === "no_password") { return "비밀번호를 입력하세요."; } if (messasge === "no_image") { return "이미지를 업로드하세요."; } if (messasge === "user_exists") { return "이미 사용 중인 아이디입니다."; } return ""; } export default function SignupModal() { const [state, formAction] = useFormState(onSubmit, { message: null }); const { pending } = useFormStatus(); return ( <> <div className={style.modalBackground}> <div className={style.modal}> <div className={style.modalHeader}> <BackButton /> <div>계정을 생성하세요.</div> </div> <form action={formAction}> <div className={style.modalBody}> <div className={style.inputDiv}> <label className={style.inputLabel} htmlFor="id"> 아이디 </label> <input id="id" name="id" className={style.input} type="text" placeholder="" required /> </div> <div className={style.inputDiv}> <label className={style.inputLabel} htmlFor="name"> 닉네임 </label> <input id="name" name="name" className={style.input} type="text" placeholder="" required /> </div> <div className={style.inputDiv}> <label className={style.inputLabel} htmlFor="password"> 비밀번호 </label> <input id="password" name="password" className={style.input} type="password" placeholder="" required /> </div> <div className={style.inputDiv}> <label className={style.inputLabel} htmlFor="image"> 프로필 </label> <input id="image" name="image" required className={style.input} type="file" accept="image/*" /> </div> </div> <div className={style.modalFooter}> <button type="submit" className={style.actionButton} disabled={pending} > 가입하기 </button> <div className={style.error}> {showMessage(state?.message || null)} </div> </div> </form> </div> </div> </> ); } showMessage에 TS오류나서 타입을 state?.message || null로 바꿔준것 외에는 없습니다.캐시도 다 삭제하고 mock서버랑 next서버 다 껐다가 다시 키고 vscode도 껐다가 다시 켜도 똑같습니다.. 리다이렉트가 안됩니다 ㅠㅠ 자꾸 404 SyntaxError: Unexpected token '<', "<!DOCTYPE "... is not valid JSON이 나옵니다... auth.ts도 바꾼것이 없습니다..import NextAuth from "next-auth" import CredentialsProvider from "next-auth/providers/credentials"; import {NextResponse} from "next/server"; export const { handlers: { GET, POST }, auth, signIn, } = NextAuth({ pages: { signIn: '/i/flow/login', newUser: '/i/flow/signup', }, providers: [ CredentialsProvider({ async authorize(credentials) { const authResponse = await fetch(`${process.env.NEXT_PUBLIC_BASE_URL}}/api/login`, { method: "POST", headers: { "Content-Type": "application/json", }, body: JSON.stringify({ id: credentials.username, password: credentials.password, }), }) if (!authResponse.ok) { return null } const user = await authResponse.json() console.log('user', user); return { email: user.id, name: user.nickname, image: user.image, ...user, } }, }), ] });

만들어놓은 themeprovider파일 어떻게 자동으로 import 추가하나요? 저는 컴포넌트 눌러도 뜨는게 없어서요ㅠ

현재 X 프로젝트에서는 게시글 검색 및 필터 기능을 다른 페이지로 가게끔 설계가 되있는데요! 이와 같은 방식은 검색 데이터와 필터 데이터를 브라우저 주소에 관리하는 방식이라고 생각합니다. (맞게 생각하고 있는건지?) 현재 제가 팀 프로젝트로 여러개의 탭 중 커뮤니티 탭을 구현하고 있는데 커뮤니티 탭안에서만 검색 및 필터 기능을 구현하고 있습니다. 여기서 궁금증이 커뮤니티 굳이 브라우저 주소를 변경하지 않고 클라이언트 상태관리로 검색값 필터 값을 관리해도 되는걸까요? 정리해보자면 브라우저 주소로 검색 값 및 필터 값 관리클라이언트 데이터로 검색 값 및 필터 값 관리둘 중 어떤 게 더 좋은 방식인지 궁금합니다. 제가 생각했을때는 검색 및 필터 기능 사용 시 다른 페이지로 이동시키는건 전체 페이지가 리페인트되기 때문에 클라이언트 상태 관리보다 좋지 않은 방식인거 같은데 이점이 있는걸까요?

안녕하세요, 강사님 강의 덕분에 nextjs와 next-auth, msw를 프로젝트에 잘 적용할 수 있게 되었습니다.그런데 현재 프로젝트에서 문제가 있었고 궁금한 점이 생겨 이렇게 질문을 남기게 되었습니다.  프로젝트에서 로그인 인증을 jwt 대신 쿠키를 사용하게 되었고 oauth를 통해 로그인하면 백엔드에서 set-cookie를 통해 쿠키를 set, 보내주는 상황이 되었습니다.이 때, nextjs에서 클라이언트 api 요청을 보낼 때 쿠키에 직접적으로 접근하지 않아도 자동으로 브라우저에서 요청할 때마다 쿠키를 같이 보내준다고 이해했는데 혹시 제가 이해한게 틀렸을까요? 프로젝트를 진행하면서 쿠키가 백엔드에게 보내는 요청에 담기지 않아 결국 서버액션을 사용해서 쿠키를 헤더에 담아서 보내는 방식으로 변경되었습니다. 클라이언트 요청에서 쿠키를 직접 (상수 값으로) 헤더에 담아서 요청을 보내도 서버에서 아무 값을 받지 못한다고 하는데 백엔드쪽을 잘 모르니 프론트 쪽에서 수정하는 방향으로 틀어서 프로젝트는 완료한 상황입니다.next-auth도 결국 걷어낸 상황이 되었는데, next-auth와 함께 쿠키를 사용하려면 백엔드에서 set 해 준 쿠키를 직접 한번 더 브라우저에 set-cookie를 해줘야 하는것인지도 궁금합니다.질문의 요지는 이렇습니다!1. 클라이언트 요청의 헤더에 쿠키를 직접 담아서 보내더라도 백엔드에서 받을 수 없는 상황이 있는지?-> 있다면 그 이유는? / 없다면 백엔드 문제인지?2. next-auth를 사용하는 경우 서버와 서버간의 요청이기 때문에 브라우저에 set-cookie를 해줄 수 없는게 맞는지?

제 파일이 전부 js 파일이라서 ts,tsx대신 전부 js파일로 만들었습니다.웹소켓연결이 안됩니다 ㅠ.꼭 타입스크립트를 써야만 하는 것 인가요 ?웹소켓은 채팅페이지에서 불렀습니다.

안녕하세요 강사님! 이 강의 덕분에 Next를 기반으로 다양한 프로젝트들을 진행할 수 있게 됐습니다!그러던 도중, 문득 강사님에게 배운 일부 내용에 대해 궁금한것이 추가적으로 생겨서 질문드립니다. prefetchQuery를 하게 될 경우 그 원리가 궁금합니다export default async function TabDeciderSuspense() { const queryClient = new QueryClient(); await queryClient.prefetchInfiniteQuery({ queryKey: ['posts', 'recommends'], queryFn: getPostRecommends, initialPageParam: 0, }); const dehydreatedState = dehydrate(queryClient); return ( <HydrationBoundary state={dehydreatedState}> <TabDecider /> </HydrationBoundary> ); } 위 코드에서 HydrationBoundary 로 dehydreatedState를 넘겨주는 원리가queryFn: getPostRecommends 를 통해 반환받은 값이 캐싱된 QueryClient인스턴스 자체를 클라이언트 컴포넌트로 넘겨주고 클라이언트 컴포넌트에서는 넘겨받은 QueryClient인스턴스에서 queryKey를 통해 캐싱 데이터를 바로 사용하는 것인가요?아니면 QueryClient 인스턴스 자체를 전송하는 것이 아니라, 인스턴스에 저장된 데이터와 상태 정보만(queryFn: getPostRecommends 반환값)클라이언트 사이드에서 사용할 수 있는 형태로 만든 뒤(=직렬화) 클라이언트 사이드에서 이 정보만 QueryClient(RQProvider.tsx에서 만든)에 적용하는 것인가요?     다른 글을 보면 강사님께서 prefetchQuery를 사용한 이유가 해당 페이지에 왔을 때 미리 데이터를 불러와서 SEO 측면에서 유리함을 가져가기 위해서라고 하셨는데, prefetchQuery없이 서버 컴포넌트에서 fetch → 하위 클라이언트 컴포넌트에 props로 전달 하는 형태도 동일한 효과를 가져가는게 맞는것일까요?      이 강의에서 진행했던, 서버 컴포넌트의 Suspense + 클라이언트 컴포넌트의 useSuspenseQuery 의 패턴을 적용할 때 발생하는 문제가 있습니다.(이 부분은 강사님의 코드가 아니라 저 혼자 이 강의를 토대로 직접 실습을 해보면서 맞닥뜨린 문제입니다.)현재 클라이언트 컴포넌트에서는 CORS대비 프록시를 사용하고 있습니다// next.config.js async rewrites() { return [ { source: '/api/:path*', // 외부 백엔드 api로 프록시 destination: `${process.env.NEXT_PUBLIC_BASE_URL_DEV}/api/:path*`, }, ]; }, 서버 컴포넌트에 Suspense를 걸어줍니다// page.tsx const page = ({ params }: PageProps) => { const slug = params.id; return ( <div> <Suspense fallback={<Spinner />}> <EditPresentation slug={Number(slug)} /> </Suspense> </div> ); }; 클라이언트 컴포넌트에서 useSuspenseQuery를 사용합니다const EditPresentation = ({ slug }: EditPresentationProps) => { const { data: value } = useSuspenseQuery({ queryKey: ['upload', slug], queryFn: async (presentationId: number) => { // 프록시 api const response = await fetch(`/api/presentations/${presentationId}`, { method: 'GET', }); if (response.ok) return await response.json(); }, }); return <>...</>; }; export default EditPresentation; 원래 이론대로라면 서버 컴포넌트의 <Suspense />에useSuspenseQuery의 queryFn이 걸려야 하는데, 브라우저 새로고침을 하게 되면 실행은 잘 되면서 동시에 아래의 에러가 발생합니다…(제 생각은) 클라이언트 컴포넌트도 어쨌든 처음에 서버를 거치게 되는데, 아마 서버에서는 프록시를 사용한 api를 읽어내지 못해서 발생하는 문제 같긴 한데,,, 혹시 이런 경우에는 어떻게 처리하는게 좋을까요...ㅠ