똑같이 코드를 구현해봤는대요!해당문제에서 오류가 발생하고있습니다.로그인은 잘됐지만 로그아웃에서 아무런 반응이 없다가 쿠키랑 캐시를 지워야지만 로그아웃이 되는 현상이 생겨서 질문을 해봅니다! const AuthStatus = () => { const { status, data: session } = useSession(); if (status === "loading") return <Skeleton width="3rem" />; if (status === "unauthenticated") return <Link href="/api/auth/signin">Login</Link>; return ( <Box> <DropdownMenu.Root> <DropdownMenu.Trigger> <Avatar src={session!.user!.image!} fallback="?" size="2" radius="full" className="cursor-pointer" referrerPolicy="no-referrer" // 이미지 불러오기 이슈 /> </DropdownMenu.Trigger> <DropdownMenu.Content> <DropdownMenu.Label> <Text size="2">{session!.user!.email}</Text> </DropdownMenu.Label> <DropdownMenu.Item> <Link href="/api/auth/signout">Logout</Link> </DropdownMenu.Item> </DropdownMenu.Content> </DropdownMenu.Root> </Box> );};특별히 더 봐야할 부분이 있을까요?

클라이언트에서는 useSession인데, 서버에서는 어떻게 불러오나요? getSession이나 getServerSession을 쓰면 되는거 같은데, 그냥 서버 컴포넌트 페이지에서  const A=await getSession()으로 해버리면, 그 다음 console.log(A)에서 pending이 나오더라구요... 서버에서 세션을 호출해서 특정 동작을 하기 위해서는 어떻게 조작해야 할까요? api에 따로 만들어서 route handler을 써야 할까요...? 이 방법도 어려움을 겪고 있긴해서 가장 좋은 방법이 뭔지 궁금합니다.

좋은 강의 잘 보고 있습니다!혹시 웹소켓을 사용하면서 서버쪽은 어떻게 코드가 구성되는지 알 수 있을까요??

React뿐만 아니라 NextJS에서도 <ErrorBoundary fallback={<Error/>}> <Suspense fallback={<Loading/>}> <Page /> </Suspense> </ErrorBoundary>이렇게 컴포넌트 계층 구조를 작성해야 한다는 것인가요? 아니면 그냥 error.tsx, loading.tsx파일만 만들면 알아서 적용이 된다는 것인가요?

window환경이고 회원가입을 하려고 해도 message가 넘어오지 않아 보니위 메세지도 콘솔에 뜨지않았습니다. Mock server자체가 연결이 안되는 것 같은데 뭐가 문제인지 잘 모르겠습니다. /mocks 폴더안에 파일들은 제로초님 깃헙에서 그대로 복붙하고 signup 관련 파일도 다 복붙했습니다./_lib/signup.ts 는 ts오류가나서 함수 이름만 넣었습니다."use server"; import { redirect } from "next/navigation"; const Submit = 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" }; } 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; } catch (err) { console.error(err); return; } if (shouldRedirect) { redirect("/home"); // try/catch문 안에서 X } }; export default Submit; 아래는 제 package.json입니다. .env.localsubmit 눌렀을 때 네트워크

미들웨어에서 rootReducer 하나만 넣었을 땐 문제 없는데 2번째 인자 넣을때부터 에러가 계속 나는데 이유를 모르겠습니다.

안녕하세요! 제로초님!! [리뉴얼] React로 NodeBird SNS 만들기섹션 6. AWS에 배포하기: Lambda로 이미지 리사이징 하기 강의까지 수강한 수강생 입니다!Lambda로 이미지 리사이징 강의의 20:00분 까지 그대로 잘 진행하고 있었습니다!그런데 Amazon S3에서 파일 업로드 시 아래 사진과 같은 에러가 발생합니다!"Unzipped size must be smaller than 262144000 bytes""압축 해제된 크기는 262144000바이트보다 작아야 합니다."해당 문제를 해결하기 위해 구글링 해보니serverless로 '/nodemodules' 같이 용량이 큰 것들을package exclude로 제외 시키는 것 같습니다!혹시 방법을 아시면 공유 부탁 드립니다!질문 글 읽어주셔서 감사합니다! 항상 강의 잘 보고 있습니다.+++ 혹시 모르니 저의 런타임 설정과 버킷 사진을 같이 첨부합니다!제로초님이 사용하신 Node.js 12.x가 항목에 없어서 Node.js 20.x을 사용하였습니다.

현재 API 부분까지 잘 들었습니다.내용이 길지 않은데 핵심 부분을 잘 이야기 해주셔서 너무 좋습니다. 그런데 소스 코드가 없다는 것이 너무 아쉽습니다.내용이 정말 좋지만 소스 코드가 없으면 이해하기까지 시간이 많이 걸리기 때문에 강의를 듣는 것이 쉽지가 않습니다. 혹시 깃허브나 소스 코드가 제공될 수 있을까요?

검색 결과를 인피니트 스크롤로 바꾸던중에기존에 getSearchResult에서 queryKey 타입을QueryFunction을 이용해서 지정해주셨는데pageParam의 타입도 지정하는 방법이 따로 있을까요? 아니면 위와 같이 타입 지정을 해줘도 되는지 궁금합니다!

나중에 props로 받은 post를 target에 할당해서 사용하는 거로 바뀌던데 target에 담아서 사용하시는 이유가 궁금합니다.

로컬에서는 세션의 데이터가 안 사라지는데 EC2로 배포하니까 세션에 저장한 데이터가 사라집니다. app.use( session({ secret: process.env.SESSION_SECRET!, resave: false, saveUninitialized: false, store: MongoStore.create({ mongoUrl: process.env.DATABASE_URL }), cookie: { httpOnly: true, secure: true, domain: ".example.shop", }, }) ); 예를 들어 아래와 같이 코드를 작성하면app.get("/apple", (req, res) => { (req.session as any).apple = "apple"; console.log("apple", req.session); res.send("apple"); }); app.get("/banana", (req, res) => { console.log("banana", req.session); res.send("banana"); });/apple 에서는 세션에 apple이 저장되어 보이는데 /banana 에서 세션을 조회하면 쿠키 말고는 아무 것도 없습니다. 근데 mongodb에서 session 확인하면 저장은 잘되어 있습니다.  제가 뭘 놓친 걸까요? 

안녕하세요 제로초님. 덕분에 많은 것을 배우고 있습니다. 정말 감사합니다.그런데 최근 혼자 해결하기 어려운 문제가 있어 질문하게되었습니다.redux를 useSWR로 대체하였는데 그 후 다른 탭에서 다른 아이디로 로그인하면 로그인한 계정의 데이터가 아닌 다른 탭 계정의 데이터가 불러와지는 문제가 발생합니다. 캐시 문제 때문인 것 같은데 어떻게 설정해야 문제를 해결할 수 있을지 잘 모르겠습니다. 힌트가 될만한 내용을 알려주시면 정말 정말 감사하겠습니다. 부탁드립니다ㅜㅜㅜ

codecamp 폴더 안에 각각 class폴더와 퀴즈, 프리보드 폴더를 사용중입니다. 그리고 수업내용에 따라 useRecoilState를 만들어놓고 각각 사용중인데, 수업을 따라하다보니 리코일스테이트의 네이밍이 isEditState, accessTokenState 이런식으로 다 같아서 혹시나 그것때문에 오류가 발생하나 싶어서 이름을 각각 다 변경해 보았지만 터미널에의 오류메세지는 계속 발생하네요. 이 부분은 무엇이 잘못되어서 이런 메세지가 뜨는 것인가요? 그리고 이 메세지를 안뜨게 하는 방법이 있을까요?

저기서 자꾸 저런 에러가 뜨는데 어떻게 해결해야 할까요 ㅠㅠ타입을 바꿔봐도 똑같습니다 정확한 오류 메시지는{ page: number; } 형식의 인수는 'Partial<IQueryFetchBoardArgs>' 형식의 매개 변수에 할당될 수 없습니다. 개체 리터럴은 알려진 속성만 지정할 수 있으며 'Partial<IQueryFetchBoardArgs>' 형식에 'page'가 없습니다.입니다 !

@media (prefers-color-scheme: dark) { html { color-scheme: dark; } }다크모드 관련 css 수정하지 않았는데, 다크모드일 경우 색이 적용안되는 경우 이유를 알 수 있을까요?

강의 영상 3분에 나온 SSR이 프론트 서버에 부담이 된다 라는 얘기가 잘 이해가 안가서 질문드립니다! 오히려 SSR은 프론트에서 모두 다운받아야 할 JS를 사전에 렌더링하고, query 코드를 읽지도 않기 때문에 더 부담이 안되지 않을까요...?? 또한 말씀하신 SEO 뿐만 아니라 suspense를 사용하거나 서버 액션을 통해 DB와 api 없이도 직접 통신할 수 있는 등의 장점이 있기에 자주 fetch를 해야 하는 작업이 아니라면 SSR의 장점이 더 많은게 아닌지 궁금합니다! CSR을 사용했을때의 장점은 fetch를 자주해야 하는 상황이 아니라면 어떤게 있는지 모르겠습니다.

수업에서 CSS 선택자의 id 같은 경우 한 html에서 하나만 사용가능하다고 하셨는데 boxmodel 실습에서는 다음과 같이 id를 두 번 사용했더라고요. 상관없는걸까요? <!DOCTYPE html> <html lang="ko"> <head> <title>Document</title> <style> div { width: 80px; height: 80px; border: 1px solid red; } #contentBox { box-sizing: content-box; } #borderBox { box-sizing: border-box; } </style> </head> <body> <!-- 컨텐트박스 --> <div id="contentBox">박스1</div> <!-- 기본박스 --> <div>박스2</div> <!-- 보더박스 --> <div id="borderBox">박스3</div> </body> </html>

현재 next ^13.5.6 버전 사용중입니다.next.config.js 설정에서 devtool hidden-source-map 설정이 ^13.5.6 버전에서도 필요할까요? 아래 공식문서 보면 productionBrowserSourceMaps 설정이 동일한 역할을 하는것같은데 맞을까요?development 에서는 true 라서 source map이 보여지고 build시 자동으로 false가 되어서 hidden-source-map이 적용되는것같은데 그럼 ^13.5.6 버전에서는 따로 hidden-source-map 설정 안해도 되는걸까요?https://github.com/vercel/next.js/blob/v13.5.6/docs/02-app/02-api-reference/05-next-config-js/productionBrowserSourceMaps.mdx 

수업을 진행하다가 그 당시에도 궁금즘이 생겨 개인적으로 알아봤던 부분인데, 확신이 안가서 강사님께 여쭈어봅니다. 수업 내용에서는 정확한 위치가 기억이 나지 않아서 다른 예시로 대체하겠습니다. 흰색 배경의 button group이 있고 각각의 button은 클릭할 시 url을 변경시킵니다.또한 현재 선택된 button은 색상이 칠해집니다. 이러한 상황에서 useState를 통해서 button의 state를 관리하고 있었고, button을 클릭했을때setState를 통해 선택하는 button을 변경함router을 통해 url 경로를 변경함이렇게 두가지 액션을 취했었습니다. 그 때 생겼던 궁금중은 어차피 url과 button은 mapping 할 수 있으니까, 버튼을 클릭하면 url만 변경시키고, url을 읽어서 button에 다시 값을 주면 기능적으로 똑같지 않나? 그러면 하나의 액션으로 기존의 두가지 액션을 대체할 수 있지 않나? 라고 생각했습니다. 그래서 조금 찾아보니까 url을 바꾸고 그 값을 통해 button의 상태 관리를 다시 하는건 즉각적인 반응이 아니고, 영상에서 봤던 것 처럼 url과 button state를 각각 바꾸는게 더 인터랙티브하다 라는 글을 읽었습니다. (신빙성이 있는 글은 아닙니다.) 실제로 이러한 이유 때문에 url만 바꾸고, 그 값을 받아와 button 값을 할당하는게 아니라, 두가지를 모두 동시에 바꾸는게 더 좋은 방법이 맞는건지 궁금합니다.  

안녕하세요 강사님수업 잘듣고 있습니다 .. !msw 쪽 수업을 듣다가 궁금한 점이 있어서 질문 남기게 되었습니다 msw 공식 홈페이지 (https://mswjs.io/docs/integrations/node)에서 node 관련 server 를 지원해주는데 express로 따로 https 파일을 구성하신 이유가 있으신지 궁금합니다.. ! 공식홈페이지를 따라 갈지, express로 서버를 구성해야하는지 선택이 어려워서요..! 조언을 듣고 싶습니다