[userName]으로 home, compose 이런것들을 사용하면 home이 최우선시 된다고 하셨는데 실제 서비스 환경에서 home이라는 user가 있을 수도 있자나요? 이 경우는 따로 예외처리를 어떻게 하나요? 제 생각은 [userName]으로 바로 접속 못하고 상위 구조가 하나 있으면 해결될거 같은데 추천하시는 방법이 있으신가요?

[강의 위치]2:43~ [질문]StrictResponse<any> 로 타입을 지정하여 타입 오류를 해결하셨는데 any를 지정하지 않으려면 유저가 존재하지 않을 경우에도 아래와 같이 응답 데이터 구조를 맞춰야 할 것 같은데,일반적으로 found 또는 not found에 대해서 응답 데이터 구조를 맞추는 것이 좋은 방법인가요?const body = { id: "", nickname: "", image: "" }; return HttpResponse.json(body, { status: 404 });

[강의 위치]1:23~ [질문]홈 페이지와 유저 프로필 페이지에서 prefetchQuery를 사용한 이유가 해당 페이지에 왔을 때 미리 데이터를 불러와서 SEO 측면에서 유리함을 가져가기 위해서 썼다고 이해하면 될까요?

CredentialsSignin이 존재하지 않다고 뜨는데 next-auth 버전 몇으로 해야하나요?

안녕하세요. 강의 잘 보고 있습니다.msw 2버젼때문에 type window를 먼저 체킹하시라고 하셨는데요.MSWComponent 는 최초 "use client"를 선언하였고, 또 useEffect 안에서 실행했기 때문에 브라우져에서 실행되는 로직으로 보장된걸로 이해하고 있는데요, 그렇다 보니 해당 코드가 불필요하지 않을까 싶어서요.제가 못찾았을수도 있는데 msw측에서 useEffect 안에서도 필요하다고 한걸까요?  [제로초 강좌 질문 필독 사항입니다]질문에는 여러분에게 도움이 되는 질문과 도움이 되지 않는 질문이 있습니다.도움이 되는 질문을 하는 방법을 알려드립니다.https://www.youtube.com/watch?v=PUKOWrOuC0c0. 숫자 0부터 시작한 이유는 1보다 더 중요한 것이기 때문입니다. 에러가 났을 때 해결을 하는 게 중요한 게 아닙니다. 왜 여러분은 해결을 못 하고 저는 해결을 하는지, 어디서 힌트를 얻은 것이고 어떻게 해결한 건지 그걸 알아가셔야 합니다. 그렇지 못한 질문은 무의미한 질문입니다.1. 에러 메시지를 올리기 전에 반드시 스스로 번역을 해야 합니다. 번역기 요즘 잘 되어 있습니다. 에러 메시지가 에러 해결 단서의 90%를 차지합니다. 한글로 번역만 해도 대부분 풀립니다. 그냥 에러메시지를 올리고(심지어 안 올리는 분도 있습니다. 저는 독심술사가 아닙니다) 해결해달라고 하시면 아무런 도움이 안 됩니다.2. 에러 메시지를 잘라서 올리지 않아야 합니다. 입문자일수록 에러메시지에서 어떤 부분이 가장 중요한 부분인지 모르실 겁니다. 그러니 통째로 올리셔야 합니다.3. 코드도 같이 올려주세요. 다만 코드 전체를 다 올리거나, 깃헙 주소만 띡 던지지는 마세요. 여러분이 "가장" 의심스럽다고 생각하는 코드를 올려주세요.4. 이 강좌를 바탕으로 여러분이 응용을 해보다가 막히는 부분, 여러 개의 선택지 중에서 조언이 필요한 부분, 제 경험이 궁금한 부분에 대한 질문은 대환영입니다. 다만 여러분의 회사 일은 질문하지 마세요.5. 강좌 하나 끝날 때마다 남의 질문들을 읽어보세요. 여러분이 곧 만나게 될 에러들입니다.6. 위에 적은 내용을 명심하지 않으시면 백날 강좌를 봐도(제 강좌가 아니더라도) 실력이 늘지 않고 그냥 코딩쇼 관람 및 한컴타자연습을 한 셈이 될 겁니다.

먼저 강의와 상관없는 질문 죄송합니다.Next 13 Page Router + React Query v3 사용해서 프로젝트 진행했었고, 이후에 강사님 강의를 수강하고 있습니다.이전 프로젝트 진행 시 문제를 해결은 했지만 찝찝함이 남아있어 궁금증을 해소하기 위해 질문 남깁니다.getServerSideProps 사용해서 서버사이드에서 데이터를 불러오려고 했습니다.서버(Spring)에서 쿠키 읽기에 실패해서 클라이언트에서 accessToken을 전달해야만 했습니다.로그인시 accessToken을 클라이언트에서 쿠키에 직접 저장하고 axios 통신시 쿠키에 저장한 토큰을 꺼내서 header에 추가하여 요청하는 방식으로 구현하였는데,서버 사이드에서는 브라우저 스토리지에 접근하지 못하므로 토큰을 읽지 못하는 문제가 발생했습니다.모든 통신에서 토큰이 필요했던 프로젝트였어서 SSR을 포기해야하는건가? 하던 중에 React Query 의 Dehydration 방식을 적용하였더니 getServerSideProps 에서도 토큰을 읽고 전달하는것이 가능해졌습니다.이러한 경우에도 SSR이 제대로 적용된 것이 맞는지, 그렇다면 React Query는 어떻게 브라우저 스토리지에 저장된 값을 읽을 수 있게 된건지 궁금합니다.

[auth][error] UntrustedHost: Host must be trusted. URL was: http://localhost:3000/api/auth/session .Read more at https://errors.authjs.dev#untrustedhost백엔드를 로컬에서 돌리고 Next를 build 후 npm start로 서버를 돌렸을 경우 발생하는 Next-Auth.js(Auth.js) 에러입니다.신뢰되지 않은 호스트라 발생하는 에러라고 해서 찾아봤습니다. 방법 1.AUTH_TRUST_HOST=http://localhost:3000.env 파일에 AUTH_TRUST_HOST 추가하기 [참고] https://github.com/nextauthjs/next-auth/discussions/6071  방법 2.export const { handlers: { GET, POST }, auth, signIn, } = NextAuth({ trustHost: true, // ...src\auth.ts 파일에 NextAuth 옵션에서 trustHost: true 옵션 추가하기 [참고] https://github.com/nextauthjs/next-auth/issues/6113

Next 프로젝트는 클라이언트에서도 동작하고 서버에서도 동작한다. 그래서 MSW가 클라이언트, 서버에서 동작해야한다.그러나 아직 서버에서 MSX를 실행하는 방식이 아직 나오지 않았다. 그래서 우리는 임시로 노드 서버를 사용한다.browser.ts - 클라이언트에서 API 요청 모킹 처리해주는 파일 -> 클라이언트 컴포넌트에서 API 요청 시 처리?http.ts - 서버에서 API 요청 모킹 처리해주는 파일 (노드 서버 사용) -> 서버 컴포넌트에서 API 요청시 처리?handlers.ts - 실제 API 모킹 코드 

className 자동완성으로 중괄호 { }로 설정하려면 어떻게 해야하나요?설정에서 ', "으로 변경하는 건 찾았는데 중괄호는 못찾아서 질문남깁니다!

signOut({ redirect: false }).then(() => { fetch(`${process.env.NEXT_PUBLIC_BASE_URL}/api/logout`, { method: "post", credentials: "include", }); router.refresh(); router.replace("/"); }); 로그아웃 버튼에 `router.refresh()`를 추가하면 로그아웃 버튼을 누르고 다시 로그인했을 때 기존 정보의 캐시가 삭제되고 새로 갱신된다고 하셨는데저 코드를 추가해도 기존 정보가 계속 남아있는 경우는 어디를 확인해봐야 할까요?브라우저에서 캐시 지우고 새로고침, 브라우저 창 재시작, 서버 껐다 켜기를 해봤는데도 계속 이전 정보가 남아있습니다..

현재 상태는 201로 불러와도 redirect가 되지 않습니다.console.log()로 찍어보니 await signIn 이후로는 console.log()가 찍히지가 않았습니다.axios로 바꿔봐도 그대로이고 버전도 @auth/core 버전도 바꿔보았는데 꿈쩍 않습니다 ㅠ 물론 DB에도 정상적으로 데이터가 저장되고요.. 시간만 날리다가 도저히 안되겠기에 질문 남깁니다..signup.ts"use server"; import { signIn } from "@/auth"; import { redirect } from "next/navigation"; // import axios from "axios"; export default async (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" }; } formData.set("nickname", formData.get("name") as string); 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" }; } shouldRedirect = true; await signIn("credentials", { username: formData.get('id'), password: formData.get('password'), redirect: false, }) } catch (err) { console.error(err); return {message : null}; } console.log("11") if (shouldRedirect) { console.log("리다이랙트"); redirect("/home"); } return { message: null}; };  

https://github.com/nextauthjs/next-auth/discussions/10399#discussion-6417675 next-auth 쪽에도 help 쪽에 질의를 해놨는데요, 원래 이슈로 쓰려했는데 reproduce url을 요구하더라구요 ㅠㅠ  현재 auth는 이슈가 적다고 하신 라이브러리를 쓰고있어요  "@auth/core": "^0.27.0", "next": "14.0.4", "next-auth": "^5.0.0-beta.11", 를 사용중이고요, custom login 페이지를 두었는데 credentials 정보는 잘 넘어와서 login api 도 잘 타는데 그 내용을 토대로 클라이언트에서 useSession으로 유저 정보를 확인하려해도 name 만 정상적으로 리턴이되네요..  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: "/login", }, providers: [ CredentialsProvider({ async authorize(credentials) { console.log( "credentials info: " + credentials.email + " " + credentials.password ); const params = new URLSearchParams( `empNo=${credentials.email}&empPassword=${credentials.password}` ); console.log(params); const authResponse = await fetch( `http://?????:9080/api/getempinfo`, { method: "POST", headers: { "Content-Type": "application/x-www-form-urlencoded", }, body: params, } ); if (!authResponse.ok) { return null; } const user = await authResponse.json(); console.log("user", user); // user.retData[0] inside informations are all string. // { // user_id: '*******', // user_name: 'jinyoung', // sert_num: '*********', // user_rgst_patr_code: '001', // rdp_code: '000' // } console.log("user.retdata.user_id =", user.retData[0].user_id); console.log( "user.retdata.user_name=", user.retData[0].user_name ); const id = user.retData[0].user_id; return { // mapping info // id?: string // name?: string | null // email?: string | null // image?: string | null id: id, name: user.retData[0].user_name, ...user.retData[0], }; }, }), ], // secret: , trustHost: true, });  아래는 useSession 을 사용하는 클라이언트 컴포넌트에요 "use client"; import React, { useEffect, useState } from "react"; ... // import useSWR from "swr"; import { useSession } from "next-auth/react"; ... const Home = () => { const { data: session, status } = useSession(); console.log("status?"); console.log("status=" + status); console.log("session="); console.log(session?.user); useEffect(() => { if (session) { console.log("session useEffected = "); console.log(session); } }, [session]);  아래는 콘솔 찍어본 내용이에요 

넥스트에서 로그인시 해당유저의 role에 따라 분기를 나눌려면 어떠한 방식을 사용해야할까요?로그인된 유저의 role은 student, teacher, admin 세가지의 값이 있으며유저는 유저페이지만 선생은 선생페이지만 어드민은 어드민페이지만 따로 보여주는 방식이 있나요?폴더구조는 이러합니다.(afterLogin)- (admin)- (teacher)- (student) (beforeLogin)- ... 

message페이지 수정하기편에서 queryClient.prefetchQuery를 사용했는데 다른 컴포넌트에서 queryClient. prefetchQuery를 사용할때는 HydrationBoundary컴포넌트로 감싸고 state에 fetching 해온 데이터를 주입시켜서 사용했는데 여기서는 왜 아무곳에서도 사용하고 있지 않은건지 궁금합니다.그리고 HydrationBoundary컴포넌트로 감싸고 state에 fetching해온 데이터를 주입시켜서 사용하고 있는곳들도 자식 컴포넌트에서 또 useQuery를 사용하는데 부모 HydrationBoundary에 접근해서 데이터를 사용하지 않고 useQuery로 fetching해와서 사용하는건지 궁금합니다. 저는 여태 HydrationBoundary가 fetching해온 데이터를 공유해주는 ContextAPI같은 컴포넌트라고 생각했었습니다. 자식컴포넌트에서 일일이 useQuery로 데이터를 가져오는거면 상위에 HydrationBoundary컴포넌트 안만들어줘도 되는거 아닌가요?

msw에서 DB를 연결해서 사용하고싶습니다.몽고디비를 연결하고싶은데 타입스크립트를 잘 몰라서 연결을 못하겠습니다 ...구글 찾아봐도 잘 안나오는데 혹시 방법이 있을까요 ?

next: { tags: {'posts', id} }nextjs에서의 위의 코드는 nextjs의 캐시를 하는거라면 nextjs는 서버캐시를 하고 react-query는 클라이언트 캐시를 해주는건가요? 둘 다 중복적으로 캐시를 지원해주거 맞죠? 헷갈리네요

안녕하세요 해당 영상을 통해 학습하고 따로 프로젝트를 진행하는 중에 서버 컴포넌트에서 data를 fetch하고 api 상태코드에 따라서 next에서 제공하는 error.tsx에서 해당 에러 상태에 따라 모달에 메세지를 띄우는 작업을 하고 있습니다.로컬 환경에서 실행시켰을때는 정상적으로 error status가 523이 발생했을때 정상적인 메세지를 받아서 error.tsx 화면에서 해당 에러 메세지를 모달에 띄우나 빌드 후 실행시켰을 때에는 An error occurred in the Server Components render. The specific message is omitted in production builds to avoid leaking sensitive details. A digest property is included on this error instance which may provide additional details about the nature of the error.모달안의 메세지에 이러한 문구가 뜹니다. 아무리 찾아봐도 정확한 원인을 모르겠는데 혹시 해결방법을 아실까요?다국어 처리 라이브러리는 next-intl를 사용하였습니다./note/page.tsxasync function fetchSharedNote(guid: string) { try { const res = await fetch( `${process.env.API_SERVER_URL}/v1/...`, { method: "POST", headers: { "Content-Type": "application/json", }, body: JSON.stringify(guid), } ); if (res.ok) { return res.json(); } else { const errorData = await res.json(); throw errorData; } } catch (err: any) { const t = await getTranslations("Index"); if (err.status === RestApiErrorType.notExistResourceException) { throw new Error(t("error523")); } throw new Error(err.message); } } /note/error.tsx "use client"; // Error components must be Client Components import CommonDialog from "@/app/_components/CommonDialog/index"; import { useState } from "react"; export default function Error({ error, }: { error: Error & { digest?: string }; reset: () => void; }) { const [showDialog, setShowDialog] = useState(!!error.message); return ( <CommonDialog isShow={showDialog} contents={error.message} onClick={() => { setShowDialog(false); }} /> ); }

안녕하세요. 항상 강의 잘 보고 있습니다!   return ( <html lang="en"> <body className={inter.className}> <MSWComponent /> <AuthSession> {children} </AuthSession> </body> </html> )next-auth 강의 내용 중 최상위 layout.tsx에서 위 코드와 같이 AuthSession 감싸주신 걸 볼 수 있는데 이는 next-auth에서 제공하는 SesisonProvider를 통해 감싸진 자식 컴포넌트들에서 session 데이터를 공유하기 위함으로 이해하였습니다. 그런데 SessionProvider는 useSession 훅을 사용하는 컴포넌트에 대해 session 데이터를 공유하는 것이기에 "use client"가 사용되는데 최상위 layout 파일에 AuthSession으로 그것의 children을 감싸게 되면 그 아래에 포함된 모든 컴포넌트들이 전부 클라이언트 컴포넌트가 되기 때문에 이렇게 되었을 때 계층 아래의 서버컴포넌트들이 제대로 서버 컴포넌트로써 작동할 수 있는지가 궁금합니다. 그래서 useSession을 사용해야 하는 컴포넌트의 상위에서만 해당 provider로 감싸주고 서버 컴포넌트에서 session이 필요한 경우 해당 provider로 감싸지 않아도 session을 가져올 수 있지 않나 궁금증이 들어 질문드립니다. 

해당 영상에서 질문들을 참고해봐서 그나마 재영님 질문과 비슷해서 버전 문제일 수 있을 것 같아 버전도 낮춰보고 했음에도 해결이 되지 않아 새로 질문 올립니다.. [[[ 문제점 ]]]아이디와 패스워드를 치고 로그인을 눌렀을 때 오류페이지로 이동됩니다.정상적일때 경로 => [ localhost:3000/home ]현재 이동되는 경로 => [ localhost:3000/api/auth/error ][ 해당 사진 ][ 적용했었던 버전 내역 ]next-auth@5.0.0-beta.3next-auth@5.0.0-beta.4next-auth@5.0.0-beta.11@auth/core@0.19@auth/core@0.27 [ 디렉토리 구조 ] [ 코드 ]envNEXT_PUBLIC_BASE_URL=http://localhost:9090 AUTH_SECRET=testtestauth.tsimport NextAuth from "next-auth" import CredentialsProvider from "next-auth/providers/credentials"; 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() return user; }, }), ] });mocks/handlers.tsimport {http, HttpResponse, StrictResponse} from 'msw'; export const handlers = [ http.post('/api/login', () => { console.log('로그인'); return HttpResponse.json({ userId: 1, nickname: '프림입니다만', id: 'pream', image: '/5Udwvqim.jpg' }, { headers: { 'Set-Cookie': 'connect.sid=msw-cookie;HttpOnly;Path=/' } }); }), http.post('/api/logout', () => { console.log('로그아웃'); return new HttpResponse(null, { headers: { 'Set-Cookie': 'connect.sid=;HttpOnly;Path=/;Max-Age=0' } }); }), http.post('/api/signup', 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=/;Max-Age=0' } }) }), ];@/app/(beforeLogin)/_components/LoginModal.tsx"use client"; import { ChangeEventHandler, FormEventHandler, useState } from "react" import style from "@/app/(beforeLogin)/_components/login.module.css"; import { signIn } from "next-auth/react"; import { useRouter } from "next/navigation"; export default function LoginModal() { const [id, setId] = useState(''); const [password, setPassword] = useState(''); const [message, setMessage] = useState(''); const router = useRouter(); const onSubmit: FormEventHandler<HTMLFormElement> = async (e) => { e.preventDefault(); setMessage(''); window.alert('aaa'); try { await signIn("credentials", { username: id, password, redirect: false, }); window.alert('bbb'); router.replace('/home'); } catch (err) { console.error(err); setMessage('아이디와 비밀번호가 일치하지 않습니다.'); } }; const onClickClose = () => { router.back(); }; const onChangeId: ChangeEventHandler<HTMLInputElement> = (e) => { setId(e.target.value); }; const onChangePassword: ChangeEventHandler<HTMLInputElement> = (e) => { setPassword(e.target.value); }; return ( <div className={style.modalBackground}> <div className={style.modal}> <div className={style.modalHeader}> <button className={style.closeButton} onClick={onClickClose}> <svg width={24} viewBox="0 0 24 24" aria-hidden="true" className="r-18jsvk2 r-4qtqp9 r-yyyyoo r-z80fyv r-dnmrzs r-bnwqim r-1plcrui r-lrvibr r-19wmn03"> <g> <path d="M10.59 12L4.54 5.96l1.42-1.42L12 10.59l6.04-6.05 1.42 1.42L13.41 12l6.05 6.04-1.42 1.42L12 13.41l-6.04 6.05-1.42-1.42L10.59 12z"></path> </g> </svg> </button> <div>로그인하세요.</div> </div> <form onSubmit={onSubmit}> <div className={style.modalBody}> <div className={style.inputDiv}> <label className={style.inputLabel} htmlFor="id">아이디</label> <input id="id" className={style.input} value={id} onChange={onChangeId} type="text" placeholder=""/> </div> <div className={style.inputDiv}> <label className={style.inputLabel} htmlFor="password">비밀번호</label> <input id="password" className={style.input} value={password} onChange={onChangePassword} type="password" placeholder=""/> </div> </div> <div className={style.message}>{message}</div> <div className={style.modalFooter}> <button className={style.actionButton} disabled={!id && !password}>로그인하기</button> </div> </form> </div> </div> ) }여기서 onSumbit 함수 부분에서 alert를 중간에 넣었는데window.alert('aaa')은 떴고,확인 버튼 누르고, 다음 window.alert('bbb')가 뜨자마자 바로 에러 페이지로 이동됩니다. ( 확인 버튼 조차 못누르고 바로 이동됩니다 )  그리고 auth.ts 에서는 재영님 질문처럼 터미널 로그들이 안찍힙니다... 9090 서버는 잘 띄워놨었구요.회원가입 로그는 잘 나오는데 로그인 로그는 안뜹니다.   

안녕하세요 제로초님.3-1 부분에서 client 컴포넌트에서 서버액션 사용하기로 msw를 처음으로 사용하려고 시도중입니다.와중에 브라우저 네트워크 탭 response에 아무것도 나오지 않고 있어 해결법을 찾지못해 질문드립니다.저랑 비슷한 오류 생기신 분들 질문을 다 본 거 같은데, 해결이 되진 않네요.우선, handlers 코드입니다.Mock server 터미널에는 "회원가입" 콘솔이 잘 나오고 있습니다.다음은, client component에서 서버액션을 위한 signup.ts입니다.이 또한 터미널에서 base url경로와 "success!"와 200이 잘 나오고 있습니다.다음은 네트워크 탭에 정보입니다.생년월일 정보는 제가 추가한 정보입니다.response 탭에 아무것도 나오지 않습니다. 실제 모달을 띄우는 컴포넌트는 onSubmit 함수 import와 이 부분 이외에 아무것도 추가하지 않았습니다..env파일 및 .env.local 입니다. package.json입니다.어떤 부분을 추가로 해보면 좋을까요??