▲ Next.js 14.2.8 - Local: http://localhost:3000 - Environments: .env ✓ Starting... ✓ Ready in 4.2s ○ Compiling / ... ✓ Compiled / in 3.5s (1022 modules) GET / 200 in 4384ms GET / 200 in 81ms ✓ Compiled /api/auth/[...nextauth] in 364ms (493 modules) GET /api/auth/session 200 in 2386ms ○ Compiling /login ... ✓ Compiled /login in 1020ms (1035 modules) GET /api/auth/session 200 in 1561ms GET /login?_rsc=1pqm1 200 in 126ms ○ Compiling /(.)i/flow/login ... ✓ Compiled /(.)i/flow/login in 731ms (1050 modules) GET /api/auth/providers 200 in 44ms GET /api/auth/csrf 200 in 19ms [auth][error] CallbackRouteError: Read more at https://errors.authjs.dev#callbackrouteerror [auth][cause]: TypeError: Failed to parse URL from undefined/api/login at node:internal/deps/undici/undici:13178:13 [auth][details]: { "code": "ERR_INVALID_URL", "input": "undefined/api/login", "provider": "credentials" } POST /api/auth/callback/credentials? 200 in 40ms GET /api/auth/session 200 in 26ms윈도우 인데 memurai설치가 도저히 안 되어서 그냥 redis 설치했습니다. 백엔드 코드 실행시키면 redis connected라고도 뜨고, service에도 실행중도 뜨고, hello world도 잘 뜹니다.REDIS_URL=redis://127.0.0.1:6379 //백엔드 env NEXT_PUBLIC_BASE_URL=http://localhost:3000 //z-com 에 있는 .env이거로도 고쳐봤습니다. localhost:3000/login 여기로 넘어는 가는데 로그인이 안 됩니다.깃허브에서 코드 잘 가져왔고, 회원가입도 잘 되는데 로그인만 안 됩니다. 뭐가 문제일까요 ㅠㅠ

안녕하세요 강의를 듣고 next-auth를 활용하여 개발 중에 궁금한 점이 생겨 질문 드립니다.프로젝트에서 일반 로그인과 소셜 로그인을 모두 사용하고 있어next-auth의 signin callback에서 로그인일 경우 자체 서버에 요청하여 accessToken과 refreshToken을 발급 받고 jwt callback에서 엑세스 토큰의 만료 시간을 체크하여 만료 시에 재발급 요청이 되도록 구현하고 있습니다.이렇게 구현했을 경우 간헐적으로 서버 시간과의 타이밍 이슈 때문인지 api 요청 시에 401 토큰 만료 에러가 발생하는 순간이 존재합니다.따라서 401 상태코드일 경우에 refreshToken 토큰 재발급 요청을 하려고 하는데 refreshToken이 현재 next-auth에서 jwt 콜백에서 리턴되어 jwt토큰으로 생성되어 있습니다.이 401일 경우 재발급 요청 처리를 클라이언트 단에서 할 경우 refreshToken이 노출되어 보안상 이슈가 있을 것으로 예상이 되는데 서버단에서 처리를 하려면 next에서 어디서 처리를 하면 좋을 지 문의드립니다. async signIn({ account, user, credentials }) { const cookieStore = cookies(); const authorizationParams = JSON.parse( cookieStore.get("authorization-params")?.value ?? "" ); const action = authorizationParams.action; user.platform = authorizationParams.platform; if (!account?.provider || !sns_type_map[account.provider]) { throw new Error("Unsupported provider"); } user.snsType = sns_type_map[account.provider]; if (action === auth_action_type.signin) { return handleSignIn(user); // getAccessToken } if (action === auth_action_type.signup) { return handleSignUp(); } return false; }, async jwt({ token, account, user }) { // Initial sign in if (account && user) { return { ...token, ...user, accessToken: user.refreshToken, expiresAt: new Date( Date.now() + (user?.expiresIn ?? 0) ).toISOString(), refreshToken: "refreshtoken", }; } // Return previous token if the access token has not expired yet if (new Date() < new Date(token.expiresAt as string)) { console.log("@@@@@@valid"); return token; } else { // Access token has expired, try to update it console.log("@@@@@@expired"); const cookieStore = cookies(); const authorizationParams = JSON.parse( cookieStore.get("authorization-params")?.value ?? "" ); const body = { .... }; const tokenData = await authApi.reissueAccessToken(body); // reissue token return { ...token, ...user, accessToken: tokenData.accessToken, expiresAt: new Date( Date.now() + (tokenData.expiresIn ?? 0) ).toISOString(), refreshToken: tokenData.refreshToken, }; } }, 미들웨어에서 401 상태 코드 처리하는 것도 알아보았으나 일반적인 방식인지 궁금합니다.미들웨어에서 401일때 재발급 요청 시 새로운 엑세스 토큰으로 재요청이 정상적으로 되는 것은 확인했으나 다시 next-auth의 jwt토큰에 재발급된 값을 세팅해줘야 하는데 어떻게 해야할지도 궁금합니다.import { NextResponse } from 'next/server'; import { getToken } from 'next-auth/jwt'; export async function middleware(request) { const token = await getToken({ req: request, secret: process.env.AUTH_SECRET }); if (request.nextUrl.pathname.startsWith('/gateway')) { const accessToken = token?.accessToken; const headers = new Headers(request.headers); if (response.status === 401) { const refreshToken = token?.refreshToken; const refreshResponse = await fetch("/reissueToken") const refreshData = await refreshResponse.json(); if (refreshResponse.ok) { const newAccessToken = refreshData.accessToken; headers.set('Authorization', `Bearer ${newAccessToken}`); const newResponse = NextResponse.next({ request: { headers: request.headers, }, }); } // 토큰 재발급 실패 시 처리 return NextResponse.redirect('/login'); } return NextResponse.next(response); } return NextResponse.next(); }    

결국 next js 에서만 http.ts 를 만들어주어서 express 서버로 mock server(?)를 직접 띄우는 형식인것 같은데 맞나요? 또 제 생각에는 이렇게 msw 를 사용하면, 내가 백엔드 서버로 요청을 보내도 그 요청을 중간에 가로채서 mock api 로 요청이가고 내가만든 가짜응답을 보내주는것이 되어야 할것같은데, 지금은 저희가 띄운 9090으로 요청을 보내고 있네요. (이 내용도 맞는지 궁금합니다, next 프로젝트가 아니라면 localhost:8888(실제 나의 백엔드 서버)로 요청을 보냈다고 가정할때 msw가 요청을 가로채가나요?)그렇다면 굳이 msw 를 사용하는 이유가 무얼까요..? 혼자 express 서버를 만들어서 가짜응답 전해주는것과 차이를 모르겠습니다..!감사합니다

강의에서 svg 복사하는 방법을 알려줬는데 어디 강의인지 기억이 나지 않아서 질문합니다.알려주세요 ㅠ

Next.js의 fetch는 requiest Memoization과 data Memoization를 이용해서 사용하는 것으로 이해했습니다.  header랑 body를 보내서 api에 재 요청 하지않고 캐싱하는 것을 확인 했는데요 만약에 useQueryhook을 사용한다고 가정하면, useQuery 도 데이터 캐싱기능을 staleTime 등으로 핸들링 할 수 있기에 Next.js의 fetch 캐싱기능을 꺼야 적절할까요? "no-cache"를 해서 useQuery의 캐싱기능만 이용하는 것이 간결하고 시점을 통일 할 수 있을 것 같아서 질문드립니다.

안녕하세요. useQuery로 가져온 data가 console로 찍어보면 두번찍히는데 왜 렌더링이 두번도는지 알 수 있을까요?

안녕하세요 제로초님 새소식에 throw CredentialsSignin을 해서 next-auth 프론트에서 서버 에러 받기 부분을 하고 있는데throw CredentialsSignin을 하면 저는 서버 주소 localhost:9090/0/i/flow/login?error=... 으로 리다이렉트됩니다. 위 경로를 프론트 주소 localhost:3000으로 수정하려면 어디서 변경해야 하나요?

안녕하세요 복습중에 있는데 검색해도 잘모르는내용이라 내용 적어봅니다.넥스트를 배우려는 큰이유중 하나가 SEO 때문인데 넥스트에서 metadata 페이지마다 꼬박꼬박 잘적고 (title ,desc)시맨태그 최대한 이용해서 마크업하면 끝인가요 ?넥스트 내에서 더 해줘야하는 작업이라던가.. 그런게 있을까요 ? (구글 서치콘솔 이런거 말고.. 개발자가 코드 작업시에 놓치면안되는 요구 SEO 작업이 궁금해서요 )

초보적인질문입니다. src기준이니깐 @못쓴다면 public 기준은 ../../../../ 이런식으루 사용해야할까요 ?  

"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'; export default function SignupModal() { const [state, formAction] = useFormState(onSubmit, { message: null }); const { pending } = useFormStatus();[섹선3] 클라이언트 컴포넌트에서 Server Actions 사용하기, 3분 const [state, formAction] = useFormState(onSubmit, { message: null });이쪽부분에[이 호출과 일치하는 오버로드가 없습니다.]라는 빨간에러가 뜨는데 혹시 이유를 알 수 있을까요? [제로초 강좌 질문 필독 사항입니다]질문에는 여러분에게 도움이 되는 질문과 도움이 되지 않는 질문이 있습니다.도움이 되는 질문을 하는 방법을 알려드립니다.https://www.youtube.com/watch?v=PUKOWrOuC0c0. 숫자 0부터 시작한 이유는 1보다 더 중요한 것이기 때문입니다. 에러가 났을 때 해결을 하는 게 중요한 게 아닙니다. 왜 여러분은 해결을 못 하고 저는 해결을 하는지, 어디서 힌트를 얻은 것이고 어떻게 해결한 건지 그걸 알아가셔야 합니다. 그렇지 못한 질문은 무의미한 질문입니다.1. 에러 메시지를 올리기 전에 반드시 스스로 번역을 해야 합니다. 번역기 요즘 잘 되어 있습니다. 에러 메시지가 에러 해결 단서의 90%를 차지합니다. 한글로 번역만 해도 대부분 풀립니다. 그냥 에러메시지를 올리고(심지어 안 올리는 분도 있습니다. 저는 독심술사가 아닙니다) 해결해달라고 하시면 아무런 도움이 안 됩니다.2. 에러 메시지를 잘라서 올리지 않아야 합니다. 입문자일수록 에러메시지에서 어떤 부분이 가장 중요한 부분인지 모르실 겁니다. 그러니 통째로 올리셔야 합니다.3. 코드도 같이 올려주세요. 다만 코드 전체를 다 올리거나, 깃헙 주소만 띡 던지지는 마세요. 여러분이 "가장" 의심스럽다고 생각하는 코드를 올려주세요.4. 이 강좌를 바탕으로 여러분이 응용을 해보다가 막히는 부분, 여러 개의 선택지 중에서 조언이 필요한 부분, 제 경험이 궁금한 부분에 대한 질문은 대환영입니다. 다만 여러분의 회사 일은 질문하지 마세요.5. 강좌 하나 끝날 때마다 남의 질문들을 읽어보세요. 여러분이 곧 만나게 될 에러들입니다.6. 위에 적은 내용을 명심하지 않으시면 백날 강좌를 봐도(제 강좌가 아니더라도) 실력이 늘지 않고 그냥 코딩쇼 관람 및 한컴타자연습을 한 셈이 될 겁니다.

안녕하세요 제로초님 postgreSQL까지는 설치하고 데이터베이스 설정도 되었는데memurai 는 아래 오류가 뜨면서 설치부터 안됩니다.해결방법을 찾지 못해서 질문 드립니다.. 

export const getSearchResult : QueryFunction<Post[], [_1 : string, _2 : string, searchParams : {q : string, pf? : string, f? : string> = async ({queryKey}) =>{ const res = await fetch(`http://localhost:9090/api/search/$ {searchParams.toString()? ${searchParams.toString()}` 여기서 searchParams는 객체 타입인데 toString() 처리가 가능한지 궁금합니다.  

안녕하세요 제로초님 강의를 듣다 의문점이 하나 생겨 질문드립니다. 패레럴 라우트와 인터셉터 라우트를 사용해서 모달을 띄우는 방법을 알려주셨는데 기존의 react에서 사용하던 방식으로 모달의 띄우는게 더 코드도 단순하고 간단하게 구현할 수 있을것 같은데 nextjs에서는 페레럴 라우트와 인터셉터 라우트를 사용해서 모달을 구현하는게 어떤 이점이 있는지 궁금합니다.기존의 모달을 띄우는 방법은 여러가지가 있지만 state를 통해서 구현하거나 queryString을 사용해서 구현할 수 있을것 같습니다.queryString을 사용하면 뒤로가기 버튼클릭시 모달을 띄우기전 url로도 이동할 수 있고 새로고침을 해도 모달과 뒤의 배경을 같이 보여줄 수 있을 것 같습니다.혼자서 생각도 해보고 인터넷에서 자료도 찾아봤지만 정확한 이유를 잘 모르겠어서 질문드립니다. 오늘도 좋은 하루 되셨으면 좋겠습니다. 감사합니다.

인터셉팅 라우트의 본 목적은 아닌 것 같으나 제 생각으론 가능하지 않을까 하는 생각이 드는데 진짜 가능한 건지 궁금해서 여쭤봅니다,,ㅠㅠ 인터셉팅 시에 모달이 뜨면서 children이 변경되도록 하고 싶은데,,, 가능한 건가요,,? 그러면 폴더 경로를 어떻게 설정 해야 할까요,,?

마지막에 로그인시저는 http://localhost:3000/api/auth/error"이 페이지는 존재하지 않습니다. 다른 페이지를 검색해 보세요검색" 위 URL로 리다이렉트 되고 해당 ㅁㅔ시지가 뜹니다.혹시 어디에 있는 정보로 로그인하는건지 궁금합니다

export async function getSearchResult({ queryKey }) { const [_1, _2, searchParams] = queryKey; const res = await fetch(api url, next: { tags: ["posts", "search", searchParams] }, cache: 'no-store' )}next tags를 사용하는이유가 revalidate를 하기 위해서인데fetch 옵션을 'no-store'로 주면 캐시가 되지 않는걸로 알고있어서 tags 사용안해도 되지않나요??

제로초님의 next-auth 작업하시는걸 보고 프론트에서 next-auth로 로그인하는것을 구현을 하긴 했는데 로그인(인가)을 하는 주체가 프론트다 보니 기존에 배웠을때는 nest 또는 node에서 passport를 이용해서 작업을 했엇는데 이제는 passport로 인가 하는 작업이 필요가 없어진건지 궁금합니니다.필요가 없다라고 하면 백엔드서버에서는 이사람이 로그인을 했는지 안했는지를 알아야 할텐데 그거는 어떻게 구현을 해야할지가 막막해서 질문드립니다 ㅠㅠ

강좌와 git을 보면서 했는데,왜 아래에 회색영역이 생기는 건지 잘 모르겠습니다.ㅜㅜ세로로 생기는 스크롤도 흰색영역에만 생깁니다.그런데 로그아웃버튼은 회색영역에 생기네요이리저리 해봐도 잘 모르겠어서 도움을 요청합니다

안녕하세여 제로초님 UserInfo에서 팔로우버튼을 누르면 팔로잉으로 변해야되고 다시 한번 누르면 팔로우로 변해야되는데 버튼을 누르고 새로고침을 해야지만 반영이됩니다... 팔로우 추천에서는 바로 반영이 되는데....깃허브 ch3-2 UserInfo에 있는 코드로 가져다 써도 안되네여 ㅠㅠ"use client"; import style from "@/app/(afterLogin)/[username]/profile.module.css"; import BackButton from "@/app/(afterLogin)/_component/BackButton"; import { useQuery, useQueryClient, useMutation } from "@tanstack/react-query"; import { User } from "@/model/User"; import { getUser } from "@/app/(afterLogin)/[username]/_lib/getUser"; import cx from "classnames"; import { MouseEventHandler } from "react"; import { Session } from "@auth/core/types"; type Props = { username: string; session: Session | null; }; export default function UserInfo({ username, session }: Props) { const { data: user, error } = useQuery< User, Object, User, [_1: string, _2: string] >({ queryKey: ["users", username], queryFn: getUser, staleTime: 60 * 1000, // fresh -> stale, 5분이라는 기준 gcTime: 300 * 1000, }); const queryClient = useQueryClient(); const follow = useMutation({ mutationFn: (userId: string) => { console.log("follow", userId); return fetch( `${process.env.NEXT_PUBLIC_BASE_URL}/api/users/${userId}/follow`, { credentials: "include", method: "post", } ); }, onMutate(userId: string) { const value: User[] | undefined = queryClient.getQueryData([ "users", "followRecommends", ]); if (value) { const index = value.findIndex((v) => v.id === userId); if (index > -1) { console.log(value, userId, index); const shallow = [...value]; shallow[index] = { ...shallow[index], Followers: [{ id: session?.user?.email as string }], _count: { ...shallow[index]._count, Followers: shallow[index]._count?.Followers + 1, }, }; queryClient.setQueryData(["users", "followRecommends"], shallow); } } const value2: User | undefined = queryClient.getQueryData([ "users", userId, ]); if (value2) { const shallow: User = { ...value2, Followers: [{ id: session?.user?.email as string }], _count: { ...value2._count, Followers: value2._count?.Followers + 1, }, }; queryClient.setQueryData(["users", userId], shallow); } }, onError(error, userId: string) { console.error(error); const value: User[] | undefined = queryClient.getQueryData([ "users", "followRecommends", ]); if (value) { const index = value.findIndex((v) => v.id === userId); console.log(value, userId, index); if (index > -1) { const shallow = [...value]; shallow[index] = { ...shallow[index], Followers: shallow[index].Followers.filter( (v) => v.id !== session?.user?.email ), _count: { ...shallow[index]._count, Followers: shallow[index]._count?.Followers - 1, }, }; queryClient.setQueryData(["users", "followRecommends"], shallow); } const value2: User | undefined = queryClient.getQueryData([ "users", userId, ]); if (value2) { const shallow = { ...value2, Followers: value2.Followers.filter( (v) => v.id !== session?.user?.email ), _count: { ...value2._count, Followers: value2._count?.Followers - 1, }, }; queryClient.setQueryData(["users", userId], shallow); } } }, }); const unfollow = useMutation({ mutationFn: (userId: string) => { console.log("unfollow", userId); return fetch( `${process.env.NEXT_PUBLIC_BASE_URL}/api/users/${userId}/follow`, { credentials: "include", method: "delete", } ); }, onMutate(userId: string) { const value: User[] | undefined = queryClient.getQueryData([ "users", "followRecommends", ]); if (value) { const index = value.findIndex((v) => v.id === userId); console.log(value, userId, index); if (index > -1) { const shallow = [...value]; shallow[index] = { ...shallow[index], Followers: shallow[index].Followers.filter( (v) => v.id !== session?.user?.email ), _count: { ...shallow[index]._count, Followers: shallow[index]._count?.Followers - 1, }, }; queryClient.setQueryData(["users", "followRecommends"], shallow); } const value2: User | undefined = queryClient.getQueryData([ "users", userId, ]); if (value2) { const shallow = { ...value2, Followers: value2.Followers.filter( (v) => v.id !== session?.user?.email ), _count: { ...value2._count, Followers: value2._count?.Followers - 1, }, }; queryClient.setQueryData(["users", userId], shallow); } } }, onError(error, userId: string) { console.error(error); const value: User[] | undefined = queryClient.getQueryData([ "users", "followRecommends", ]); if (value) { const index = value.findIndex((v) => v.id === userId); console.log(value, userId, index); if (index > -1) { const shallow = [...value]; shallow[index] = { ...shallow[index], Followers: [{ id: session?.user?.email as string }], _count: { ...shallow[index]._count, Followers: shallow[index]._count?.Followers + 1, }, }; queryClient.setQueryData(["users", "followRecommends"], shallow); } } const value2: User | undefined = queryClient.getQueryData([ "users", userId, ]); if (value2) { const shallow = { ...value2, Followers: [{ userId: session?.user?.email as string }], _count: { ...value2._count, Followers: value2._count?.Followers + 1, }, }; queryClient.setQueryData(["users", userId], shallow); } }, }); console.log("error"); console.dir(error); if (error) { return ( <> <div className={style.header}> <BackButton /> <h3 className={style.headerTitle}>프로필</h3> </div> <div className={style.userZone}> <div className={style.userImage}></div> <div className={style.userName}> <div>@{username}</div> </div> </div> <div style={{ height: 100, alignItems: "center", fontSize: 31, fontWeight: "bold", justifyContent: "center", display: "flex", }} > 계정이 존재하지 않음 </div> </> ); } if (!user) { return null; } const followed = user.Followers?.find((v) => v.id === session?.user?.email); console.log(session?.user?.email, followed); const onFollow: MouseEventHandler<HTMLButtonElement> = (e) => { e.stopPropagation(); e.preventDefault(); console.log("follow", followed, user.id); if (followed) { unfollow.mutate(user.id); } else { follow.mutate(user.id); } }; return ( <> <div className={style.header}> <BackButton /> <h3 className={style.headerTitle}>{user.nickname}</h3> </div> <div className={style.userZone}> <div className={style.userRow}> <div className={style.userImage}> <img src={user.image} alt={user.id} /> </div> <div className={style.userName}> <div>{user.nickname}</div> <div>@{user.id}</div> </div> {user.id !== session?.user?.email && ( <button onClick={onFollow} className={cx(style.followButton, followed && style.followed)} > {followed ? "팔로잉" : "팔로우"} </button> )} </div> <div className={style.userFollower}> <div>{user._count.Followers} 팔로워</div> &nbsp; <div>{user._count.Followings} 팔로우 중</div> </div> </div> </> ); }제가 보기에는 useQuery가 제대로 작동안하는거같은데...제로초님 의견이 궁금합니다팔로우버튼 안눌렀을때 팔로우버튼 눌렀을때 

안녕하세요 선생님.요즘 기업 트렌드에 맞게 tailwind로 진행해보려고 하는데강의 css 참고하면서 저 만의 방법으로 tailwind로 수정해서 진행해도 상관없겠죠! 혹시 css로 진행한 이유가 있을까요? 요즘 기업에선 tailwind를 더 추구하나요?저는 tailwind가 더 익숙하더라구요.. 유튜브에서 우연히 제로초 개발자님을 뵙게되어, 제로초의 JS교재와 함께 큰 도움이 되어서 인프런 강의까지 듣게됐네요. 감사합니다!