백엔드 취준생인데 프론트를 좀 할 일이 있어서 강의 듣고 있는데 Next-Auth 부분이 이해가 쉽지 않네요... 몇 가지 질문 드리고자 합니다.1. session 객체에 어떤게 담기는건지 잘 모르겠습니다.export default async function Home() { const session = await auth() if (session?.user) { redirect('/home') return null } return ( <Main/> ); }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.usename, password: credentials.password, }) }) if (!authResponse.ok) { return null } const user = await authResponse.json() return { email: user.id, name: user.nickname, image: user.image, ...user } } }) ], })Home 에서 auth() 를 통해 불러온 session 객체에 CredentialsProvider 가 리턴한 객체가 담기는건가요?그런데 그렇다고 하기엔 객체에 user 라는 속성이 없어서 아닌 것 같기도 해서 아닌 거 같다는 생각도 듭니다. export default function Login() { const router = useRouter() const { data: session } = useSession(); if (session?.user) { router.replace('/home') return null } router.replace("/i/flow/login") return ( <Main /> ) }마찬가지로 여기서도 session 에 어떤게 담기는지 잘 모르겠습니다 ㅠㅠ auth() 로 리턴한 세션과 같은 객체가 담기는 것 같긴 한데 도대체 session 에 뭐가 담기는지 파악이 쉽지 않네요 ㅋㅋㅋ그래서 session 객체의 user 를 클릭해서 들어가보니 다음과 같은 interface 가 나오네요.export interface DefaultSession { user?: User expires: ISODateString }auth/core 에 있는 인터페이스인 것 같은데 이 인터페이스가 어느 시점에 등장(?) 하는 건지 잘 모르겠습니다.2. 지금 진행하는 로그인 방식은 백엔드에 로그인 관련 API 가 있다고 가정하고 진행하는 것으로 저는 이해를 했는데요export const handlers = [ http.post(`${baseUrl}/api/login`, () => { console.log('로그인'); return HttpResponse.json(User[1], { headers: { 'Set-Cookie': 'connect.sid=msw-cookie;HttpOnly;Path=/' }, }) }), http.post(`${baseUrl}/api/logout`, () => { console.log('로그아웃'); return new HttpResponse(null, { headers: { 'Set-Cookie': 'connect.sid=;HttpOnly;Path=/;Max-Age=0' } }) }), http.post(`${baseUrl}/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=/' }, }); }) ];이게 지금 api 를 mocking 한 건데 여기에 요청을 보내고 있으니까요.그러면 이 API 에서 리턴한 유저(User[1]) 가 세션에 담기는 것인지 궁금하네요. (이것도 1번 질문하고 좀 연관이 되네요) 그러면 만약에 백엔드 API 가 로그인 성공했을 때 http body 에 별도의 객체를 리턴하지 않으면 어떻게 되나? 이런 궁금증도 생깁니다.3. 그리고 로그아웃을 할 때는 왜 로그아웃 API 에 따로 요청을 보내지 않고 signOut 함수만 사용하는지 궁금합니다. 이것만 사용해도 쿠키가 삭제가 돼서 그런 것인가요? 그러면 백엔드 서버에 별도의 로그아웃 API 를 만들지 않아도 되는 것인지 궁금합니다. 장문의 질문글이 된 거 같은데, 뭔가 Next-Auth 를 처음 접하다보니 사용법이 좀 익숙치가 않네요. AI 에 물어보거나 구글링을 해 봐도 좀 파악이 쉽지 않아 여기에 질문 남겨봅니다.감사합니다.

지금 강의에서 보여주신게 아직 업데이트가 안 된 것인지 궁금합니다!Auth.js 홈페이지에 있는 문서와 코드가 조금 다른 것 같아서요. next.js 15 버전으로 강의 따라가고 있고 auth.js 설치할 때 auth@5 하니까 설치가 안 돼서 auth@beta 이렇게 설치하고 진행 중 입니다! 제가 본 페이지는 다음과 같습니다.https://authjs.dev/getting-started/authentication/credentials  추가일단 제로초님이 하신 방법으로 CredentialsProvider 직접 import 하니까 되는 것 같습니다!

로그인 방식을 구현하면서, 쿠키로만 개발할 경우 완전히 백엔드에 의존하게 되어 로컬로, 동시에 키고 개발을 하지 않는이상, 도메인간 불일치를 해결 할 방법이 없어, msw를 사용해야 한다고, 이전에 말씀해주셨습니다!!보통, 회사나, 개인 소프트웨어를 만들 때 어떤 방식으로 로그인을 주로 만드시는지 조금 알고 싶어 궁금하여 질문을 남깁니다!!로그인 방식 고찰로그인 성공시, accessToken을 body로 받고, refreshToken은, httpOnly 쿠키로 받는 경우 (서버에서, DB or Redis를 통해 refreshToken 관리) → 인증 필요 요청 (Bearer accessToken), 리프레시 필요 요청 (refreshToken 심긴 쿠키를 바탕으로 요청)- DB에서 관리하는 것 보다, redis를 통해 관리했을 떄 읽기 속도가 빠름을 확인!응답: accessToken과 refreshToken 모두 body로 클라이언트에게 전달.인증 필요 요청과, 리프레시 토큰 재발급 요청 모두 헤더의 Bearer에 accessToken이나, refreshToken을 넣어서 전달.)현재 방식: accessToken, refreshToken 모두 쿠키로 응답받고, 요청또한, 쿠키를 포함하여 전달.제로초님은, Next.js를 활용하여, 웹 사이트를 만드실 떄, 어떠한 방식으로 로그인을 구현하시는지 궁금하고, 많은 회사에서 사용하는 방식은 보통 어떤 방식인지도 알고싶습니다!

먼저 next와 react의 버전은 각각 15버전과 19버전입니다 next 15 부터는 http.ts 의 코드가 간결하게 바뀌어서 적용해보던 중 세팅 단계에서 해당 오류가 발생하였습니다 TypeError: Cannot read properties of undefined (reading 'url' 구글에 검색해보니 최신버전에서도 발생하는 것 같습니다 ㅠㅠ

SignupModal 에서 에러가 하나 나오는데 관련해서 질문드립니다.S2322: Type '(formData: FormData) =&gt; Promise&lt;{ message: string; } | undefined&gt;' is not assignable to type 'NonNullable&lt;string | ((formData: FormData) =&gt; void | Promise&lt;void&gt;) | undefined&gt;'.<br/>Type '(formData: FormData) =&gt; Promise&lt;{ message: string; } | undefined&gt;' is not assignable to type '(formData: FormData) =&gt; void | Promise&lt;void&gt;'.<br/>Type 'Promise&lt;{ message: string; } | undefined&gt;' is not assignable to type 'void | Promise&lt;void&gt;'.<br/>Type 'Promise&lt;{ message: string; } | undefined&gt;' is not assignable to type 'Promise&lt;void&gt;'.<br/>Type '{ message: string; } | undefined' is not assignable to type 'void'.<br/>Type '{ message: string; }' is not assignable to type 'void'.이런 에러가 나옵니다. formData 의 타입이 정확하지 않아서 생기는 에러 같습니다. 근데 정상적으로 실행은 됩니다.제 꺼에선 이렇게 에러가 나오는데 제로초님 화면에서는 에러가 나오는 것 같지 않아서 어떻게 그렇게 된 것인지 궁금해서 질문 남깁니다. 감사합니다.

밑에 수업노트에 주신 링크도 그 파일이 아니라 깃헙 레포로 연결되고, 너무 빠르네요 ㅠㅠ _component 부분 보면 RightSearchZone 컴포넌트도 없어서 좀 헤매게 되는 것 같습니다...css 내용도 갑자기 어디서 튀어나온건지 좀 파악이 어렵네요 ㅠ

기존에 강의로 msw로 코드만들었던 수강생입니다.여러개의 질문과 에러?라고할만한 사항이 있는데요.기존강의에는 http.js 파일에서 express 기반으로 서버를 만들어서 9090포트를 사용했는데요. 새로 강의하신 내용에서는 express를 배제하고 코드가 간결하게 바꿨는데 이렇게 바꾼 내용의 대해서 조금 설명 부탁드립니다. 간략히 알기로는 기존 MSW는 클라이언트(브라우저)에서 동작하기 때문에 서버에서 html 요청이 발생하기 때문에 요청을 가로챌수 없기 때문에 express썻다고 알고있습니다. 이게 맞을까요? 그리고 바뀐코드는 이런문제가 해결이 된건가요?1번의 문제가 해결되었다면, 기존의 9090 서버포트와 더불어 npm run mock를 실행하여 서버를 동작했던걸로 알고있는데 이기능은 필요한가요?msw 세팅과 .env 강의부분에서 환경변수를 api에 직접 넣도록 수정했는데, 이전꺼랑 차이가 뭔가요? 추가로 클라이언트컴포넌트에서는 환경변수가 콘솔로 읽히고있는데 handler에서는 읽히지 않고있습니다. 코드는 이전강의 코드(백엔드 db연결전까지)와 같고요. 추가로 nextjs나 react를 버전업을 하지는 않았습니다. 이유가뭔지 유추해주실수있을까요? 

"섹션4 그런데 백엔드 개발자가 API를 아직 못 만들었다"의 "msw 세팅과 .env" 강좌가 8분 38초까지 영상이 검은 화면으로 나옵니다. 해당 영상에서 검은 화면 중간 중간 노란색 안내 문구는 나오는 것과 다른 영상에서는 해당 증상이 보이지 않은 것으로 보아서 제 환경에서 해결할 수 없는 문제로 보이는데, 확인 한번 부탁드립니다.

안녕하세요 제로초님! 게시글 삭제하기 기능을 구현하고 있습니다!구현해도 안되길래 스웨거가서 테스트를 하고 서버를 봤더니 오류가 나더라구요혹시 이유를 알 수 있을까요??

안녕하세요 제로초님! 완강하고 지금 구글 로그인 구현중입니다.구글로 로그인하다가 마지막에 인가토큰받는 부분에서 404 에러가나는데 이유를 모르겠습니다... 도와주세요 ㅠ_ㅠ

안녕하세요, 강좌들으며, msw를 프로젝트에 도입하다 궁금한점이 있어 남깁니다!현재 위와 같이 코드를, 작성하여, 로그인 성공시, 위와 같이, 데이터와, 쿠키를 동시에 세팅해주고 있는 상황입니다!실제로 아래와 같이, response들은 잘 넘어오나response headers에 쿠키가, 오지 않아, 실제로 스토리지에 쿠키가 담기지 않습니다!원래, 가상으로 심어주는 쿠키는, 브라우저의 쿠키에 담기지 않는건가요?? 궁금하여 질문남깁니다!!좋은 강의 감사합니다!  

nextjs dev모드로 실행하다가 코드 저장하면 자꾸 서버 다운될 때도 많고, 코드 새로 수정해도 반영 안 될 때가 있어서, 서버 껐다 키는 경우가 빈번한데.. 이런거 해결하는 방법 없나요.. 제 컴퓨터에서는 nextjs가 너무 무거워서 리로드 하는 시간도 너무 오래 걸려서요 ㅠㅠ

서버 배포후 제공해주는 쿠키의 domain이, .naver.com이고, 만약 로컬호스트로 개발 할 경우 localhost의 도메인을 갖게되어, 둘의 도메인이 달라, 쿠키가 담기지 않는 경우가 발생합니다. 모든 통신 요청을 서버와 직접 진행 할 경우, .naver.com의 쿠키로, 모든것이 공유가 가능하니, 정상적으로 접근이 가능한 것 같은데이제 간혹, 라우트 핸들러나, 미들웨어를 거쳐서, 통신 할 경우 도메인이 localhost가 되어, 401 에러가 발생하게 됩니다!!이를 해결하기 위해, 로컬에서 두개의 서버를 띄워서 테스트하는 방법말고, 보통 실무나, 현업에서는 배포된 쿠키 로그인 방식을 활용할 떄, 어떻게 Next.js에서 환경 구성을 하는지, 로컬호스트가 아닌, 다른 도메인으로 띄울 수 있는 방법이 있는지 궁금합니다.

https://github.com/ZeroCho/z-com/blob/master/src/auth.ts#L16배포하신 깃헙에서 궁금한점이 생겨서 질문드립니다1. signOut에서 백엔드로 로그아웃 요청만 보내고 authorize()처럼 쿠키값을 set해주지 않았으니 connect.sid는 남아있는게 맞나요? 2. next auth 세션값이 지워지면서 프론트서버와 인증이 끊기는데 프론트서버에서 굳이 백엔드로 요청을 보내는 이유가 뭘까요? 백엔드 서버에 로그 남기기 위해서인가요?

form으로 put, patch, delete 요청이 안되는걸로 알고있는데그럼 msw로 목업 요청을 작성할때랑 실제 서버를 작성할때랑 컴포넌트를 두개만들어서 해야하나요?

안녕하세요 next-auth로 토큰 갱신 로직을 개발하는 중에 해결되지 않는 문제가 발생하여 질문 드립니다.현재 클라이언트에서 api 요청을 하면 middleware에서 const token = await auth(); 이런식으로 세션 정보를 가져와 accessToken을 헤더에 삽입하는 방식을 구현하였습니다. if (request.nextUrl.pathname.startsWith("/gateway")) { const session = await auth(); const accessToken = session?.accessToken; const { device } = userAgent(request); const localeFromCookie = cookieStore.get("dp_lang")?.value as string; const defaultLocale = getLanguageCodeFromLocale(localeFromCookie); request.headers.set("Accept", "*/*"); request.headers.set("Authorization", `Bearer ${accessToken}`); request.headers.set("Access-Control-Allow-Origin", "*"); request.headers.set("deviceType", "1"); request.headers.set("deviceId", getDeviceIdFromCookie(cookieStore)); request.headers.set("osType", getOsTypeFromCookie(cookieStore)); request.headers.set("User-Agent", device.model ?? ""); request.headers.set("locale", localeFromCookie); request.headers.set("language", defaultLocale); const response = NextResponse.next({ request: { headers: request.headers, }, }); return response; } 따라서 미들웨어에서 세션에 접근하는 순간에 jwt콜백이 실행되어 jwt 토큰에 저장되어 있는 토큰 expire 시간을 비교하여 만료여부를 판단 한 뒤에 토큰 갱신이 되도록 구현을 하였습니다. async jwt({ token, account, user }) { // Initial sign in if (account && user) { return { accessToken: user.accessToken, expiresAt: new Date( Date.now() + (user?.expiresIn ?? 0) ).toISOString(), refreshToken: user.refreshToken, serviceAvailable: true, }; } // Return previous token if the access token has not expired yet if ( new Date() < new Date(new Date(token.expiresAt as string).getTime() - 5000) ) { console.log("@@@@@@valid"); return token; } else { if (token.error === "RefreshTokenInvalid") { return token; } // Access token has expired, try tㄴo update it try { console.log("@@@@@@expired"); const refreshedTokens = await authApi.refreshAuthToken({ refreshToken: token.refreshToken as string, accessToken: token.accessToken as string, }); console.log("==========token refreshed========"); // reissue token return { ...token, accessToken: refreshedTokens.accessToken, expiresAt: new Date( Date.now() + (refreshedTokens.expiresIn ?? 18000) ).toISOString(), refreshToken: refreshedTokens.refreshToken ?? token.refreshToken, error: null, }; } catch (error) { console.error("Token refresh failed", error); if (error.status === RestApiErrorType.invalidTokenException) { return { ...token, error: "RefreshTokenInvalid", }; } return { ...token, error: "RefreshAccessTokenError" }; } } }, 기존에는 세션에 접근을 할때 next-auth의 jwt 콜백이 돌고 값이 리턴되면 쿠키의 session-token값에 암호화된 값들이 업데이트 되는 걸로 알고 있었는데 찾아보니 현재 세션에 접근하고 갱신하는 부분이 서버단에 있어서 쿠키가 업데이트 되지 않는다고 합니다. 따라서 현재 토큰이 만료된 후 한번에 3가지의 api 콜을 요청했을때 첫번째 api요청에서는 정상적으로 토큰 refresh가 요청이 되며 middleware에서 세션에 접근해 갱신된 토큰이 가져와져 요청이 성공되나 그 뒤 요청부터는 쿠키에 업데이트가 되지 않아서인지 세션에서 갱신 전 토큰이 가져와지는 현상이 발생하고 있습니다.클라이언트에서 세션 업데이트 후 세션에 접근을 해야 쿠키값이 갱신이 된다고 하는데 다른 방법이 있는지 문의드립니다.

안녕하세요 프로젝트 진행 중에 해결되지 않는 부분이 있어 질문 드립니다.middleware에서 쿠키의 값을 업데이트 하려고 하는데 업데이트 되지 않는 현상이 발생하고 있습니다.아래의 코드와 같이 NextResponse.next() 실행 후에 response에 쿠키를 업데이트를 하려 하는데 반영이 되지 않습니다. request에서 세팅해도 마찬가지입니다. 쿠키 세팅이 되지 않는 원인에 대해 알고 계신가요?? export default async function middleware(request: NextAuthRequest) { if (request.nextUrl.pathname.startsWith("/gateway")) { const token = await getToken({ req: request, secret: process.env.AUTH_SECRET as string, secureCookie: process.env.NODE_ENV === "production", }); const accessToken = token?.accessToken; const { device } = userAgent(request); request.headers.set("Accept", "*/*"); request.headers.set("Authorization", `Bearer ${accessToken}`); request.headers.set("Access-Control-Allow-Origin", "*"); request.headers.set("deviceType", "1"); request.headers.set("User-Agent", device.model ?? ""); request.headers.set("locale", localeFromCookie); request.headers.set("language", defaultLocale); const response = NextResponse.next({ request: request.headers }); response.cookies.set("test", "test"); return response; } ... }

const onClickHot = () => { setCurrent('hot'); router.replace(`/search?q=${searchParams.get('q')}`) }  이 코드가 있으면 q=null일때 주소가 http://localhost:3000/search?q=null이렇게 이동되는데 제로초님은 아무런 검색어가 없는데 어떻게 null로 안나오죠?null체크를해서 주소를 2개 분기해도 될거같긴한데 제로초님은 q가 null일땐 주소창의 쿼리가 안생기더라고요 . 뭐가다른건지 모르겠네요ㅠ

Next에서 자체적으로 제공하는 에러 바운더리인 error.js 와 서스펜스인 loading.js는 '서버 컴포넌트'의 에러와 로딩만 처리하는 것인가요? 예를 들어 서버 컴포넌트인 page.tsx의 하위 클라이언트 컴포넌트에서 에러가 발생했을 때는 error.js에서 캐치가 안 되는 것인가요...?

안녕하세요, app router에 대해 계속 공부하다가 route handlers 에 대한 궁금증이 해결되지 않아 질문하게 됐습니다. Next app router에서 정확히 route handlers를 사용해야 하는 이유가 무엇인가요?제가 생각했을 땐 서버 데이터 캐싱이나 API 엔드포인트를 숨길 수 있다는 장점이 있는데 이건 서버 컴포넌트에서 fetch하는 것으로도 대체가 되는데 route handlers를 사용해야 하는 특별한 이유가 따로 있는 것인가요? 모든 API를 route handlers로 하면 Next서버에 부하가 걸릴텐데 어떻게 해결할 수 있을까요? 이 부분은 공식문서에서 제가 못 찾은 것 같은데, 만약 외부 백엔드 API가 있고 여기에 데이터 요청을 할 때클라이언트 컴포넌트에서의 모든 API 요청을 1차로 route handler에 하고 여기서 외부 백엔드 API로 요청하게되면 route handlers에 요청이 몰리게 되는데 이때 Next 서버에 걸리는 부하를 어떻게 해소할 수 있을까요?