search 페이지의 Tab 컴포넌트에서 질문이 있습니다.searchParams에 hot과 new가 전달되는 부분이 어딘지 모르겠어서 질문드립니다..제 생각으로는 Tab 컴포넌트에서 인기, 최신 div를 클릭해서 값을 전달해야 할 것 같은데 해당 부분에서는 current useState만 변경하고 다른 변경은 없는 것 같습니다.어느 부분에서 searchParams에 값을 전달해서, searchParams.get('q')로 값을 받아올수있는지 궁금합니다..아래 코드 첨부드립니다!"use client"; import style from "../search.module.css"; import { useState } from "react"; import { useRouter, useSearchParams } from "next/navigation"; export default function Tab() { const [current, setCurrent] = useState("hot"); const router = useRouter(); const searchParams = useSearchParams(); const onClickHot = () => { setCurrent("hot"); router.replace(`/search?q=${searchParams.get("q")}`); }; const onClickNew = () => { setCurrent("new"); router.replace(`/search?${searchParams.toString()}&f=live`); }; return ( <div className={style.homeFixed}> <div className={style.homeTab}> <div onClick={onClickHot}> 인기 <div className={style.tabIndicator} hidden={current === "new"}></div> </div> <div onClick={onClickNew}> 최신 <div className={style.tabIndicator} hidden={current === "hot"}></div> </div> </div> </div> ); } 

figma devmode가 24년 2월부로 유료화 되었다고 하는데 이제는 더이상 css속성을 확인할수 없나요? 회원가입 폼 만들어보려고 하는데 css가 안보이네요ㅠ

안녕하세요 강의 잘 보고 있습니다 문득 궁금한점이 생겨 여쭤보고 싶은게 있는데요 ! api/auth/[...nextauth]/route.ts 파일 안에 NextAuth가 제공해주는 GET과 POST를 export해놓으면 api/auth/...something 경로로 타고 들어오는 api 요청은 export한 GET과 POST로 사용이 된다라고 말씀해주셨는데 그 GET과 POST는 어디서 호출을 하는걸까요 ?마찬가지로 middleware.ts 파일에도NextAuth에서 제공하는 auth를 middleware로 네이밍을 변경하여 사용한다고 하셨는데 그 middleware도 어디서 호출을 해서 사용하고 있는걸까요 ? 내보냈다는건(export) 어디선가 받아와서(import) 해서 사용하는게 아닌가 싶어서 질문 드려봅니다 초보적인 질문이지만 해결하고 가고 싶어서 질문 드려봅니다

Suspense로 Streaming하여 최적화하기(feat. loading.tsx, error.tsx)강의를 듣던 중 헷갈리는 부분이 있어서 질문 남깁니다.atferLogin > page.tsx 에서 Suspense를 사용해서TabDeciderSuspense 를 감싸주고 있는데 TabDeciderSuspense 내부 코드를 보면위와 같이 prefetch를 통해 postsRecommends관련 데이터를 서버에서 그려서 클라이언트로 하이드레이션 해주고 있습니다.제가 이해한 바로는 이 장점이 사용자가 해당 페이지를 빠르게 볼 수 있다. 그래서 서스팬스를 사용하지 않았을 땐 로딩바가 뜰 새도 없이페이지가 잘 보여지게 되는데, 지금은 프리패치로 데이터를 먼저 받아오는것과 서스팬스 풀백을 통해 로딩에 관한 부분을 둘 다 사용하고 있는 걸로 보여서 좀 헷갈려서 질문드려요.서스팬스로 로딩을 보여주고 싶으면 TabDeciderSuspense에서 프리패치를 사용하는 의미가 없는 거 아닌가요?

 지금 영상에서 @modal 폴더 내의 login 모듈css와 page.tsx 코드를 붙여넣기 전까지는 (beforeLogin) 폴더 내의 layout.tsx와 page.tsx에 의해 동작할 때 같은 화면에 패러렐 모달이 동작하였는데해당 css 붙여넣는 순간 새로운 창이 팝업되면서 패러렐 모달이 로그인 창으로서 뜨는 것이 어떻게 구현되는 것인지 설명이 안되어서 그 부분이 궁금해 지길래, 코드를 다운받아 하나씩 뜯어보면서 비교해보려 했는데요...코드 다운을 하려 보니 1챕터가 다 끝난 이후에 코드가 정리되어 있어서 해당 폴더에 이 강의에서 설명하는 코드 파일이 없네요.강의 후기에서 정리가 잘 안되어 있다고 후기 남긴 일부는 이런 것을 얘기한 것 같네요... 해당 팝업 기능은 어떤 부분에서 구현되는 것인지, 단순히 css 붙여넣기 만으로 구현이 안될 것 같은데, 그런 기능이 따로 있는 것인지 알려주시면 감사하겠습니다. 뒤의 강의 계속 보다 보면 나올지 모르기에 일단 여기다 질문 넘기고 다음 강의 듣겠습니다. 혹시 뒤에서 설명을 해주시는게 맞더라도, 이 영상 보고서 그런 고민을 하고 있는 분들이 생길 수 있으니, 지금 영상 수업 질문에 간단히라도 알려주시면 감사하겠습니다.

랜더링 되는 layout.tsx에도 metadata를 명시하고, page.tsx에도 metadata를 명시한다면 page.tsx의 메타 데이터로 오버라이딩 되는 것인가요?

안녕하세요. 회원가입을 하려고 할 때 이상한 점이 몇 가지 있어 질문을 남겨봅니다. 삽질을 하다가 다른 분의 질문을 보고 npm i next-auth@5.0.0-beta.3 이건 적용을 해본 상태입니다. [auth][error] UnknownAction: Cannot parse action at /api/auth/session localhost:3000으로 접속하고 나면 잠시 뒤에 콘솔에 이런 에러가 뜹니다.  회원가입이 되지 않는 문제아이디, 닉네임, 비밀번호, 이미지를 넣고 회원가입을 하면 [auth][error] UnknownAction: Cannot parse action at //callback/credentials .Read more at https://errors.authjs.dev#unknownaction at parseActionAndProviderId (webpack-internal:///(action-browser)/./node_modules/@auth/core/lib/utils/web.js:87:27) at toInternalRequest (webpack-internal:///(action-browser)/./node_modules/@auth/core/lib/utils/web.js:32:40) at Auth (webpack-internal:///(action-browser)/./node_modules/@auth/core/index.js:82:103) at signIn (webpack-internal:///(action-browser)/./node_modules/next-auth/lib/actions.js:55:71) at signIn (webpack-internal:///(action-browser)/./node_modules/next-auth/index.js:82:75) at $$ACTION_0 (webpack-internal:///(action-browser)/./src/app/(beforeLogin)/_lib/signup.ts:53:60) at async /Users/moonhyunjun/Desktop/study/frontend/z.com/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:39:406 at async t0 (/Users/moonhyunjun/Desktop/study/frontend/z.com/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:38:5773) at async rh (/Users/moonhyunjun/Desktop/study/frontend/z.com/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:39:23636) at async doRender (/Users/moonhyunjun/Desktop/study/frontend/z.com/node_modules/next/dist/server/base-server.js:1391:30) at async cacheEntry.responseCache.get.routeKind (/Users/moonhyunjun/Desktop/study/frontend/z.com/node_modules/next/dist/server/base-server.js:1552:28) at async DevServer.renderToResponseWithComponentsImpl (/Users/moonhyunjun/Desktop/study/frontend/z.com/node_modules/next/dist/server/base-server.js:1460:28) at async DevServer.renderPageComponent (/Users/moonhyunjun/Desktop/study/frontend/z.com/node_modules/next/dist/server/base-server.js:1843:24) at async DevServer.renderToResponseImpl (/Users/moonhyunjun/Desktop/study/frontend/z.com/node_modules/next/dist/server/base-server.js:1881:32) at async DevServer.pipeImpl (/Users/moonhyunjun/Desktop/study/frontend/z.com/node_modules/next/dist/server/base-server.js:909:25) at async NextNodeServer.handleCatchallRenderRequest (/Users/moonhyunjun/Desktop/study/frontend/z.com/node_modules/next/dist/server/next-server.js:266:17) at async DevServer.handleRequestImpl (/Users/moonhyunjun/Desktop/study/frontend/z.com/node_modules/next/dist/server/base-server.js:805:17)TypeError: Invalid URL at new URL (node:internal/url:775:36) at signIn (webpack-internal:///(action-browser)/./node_modules/next-auth/lib/actions.js:61:19) at async $$ACTION_0 (webpack-internal:///(action-browser)/./src/app/(beforeLogin)/_lib/signup.ts:53:9) at async /Users/moonhyunjun/Desktop/study/frontend/z.com/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:39:406 at async t0 (/Users/moonhyunjun/Desktop/study/frontend/z.com/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:38:5773) at async rh (/Users/moonhyunjun/Desktop/study/frontend/z.com/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:39:23636) at async doRender (/Users/moonhyunjun/Desktop/study/frontend/z.com/node_modules/next/dist/server/base-server.js:1391:30) at async cacheEntry.responseCache.get.routeKind (/Users/moonhyunjun/Desktop/study/frontend/z.com/node_modules/next/dist/server/base-server.js:1552:28) at async DevServer.renderToResponseWithComponentsImpl (/Users/moonhyunjun/Desktop/study/frontend/z.com/node_modules/next/dist/server/base-server.js:1460:28) at async DevServer.renderPageComponent (/Users/moonhyunjun/Desktop/study/frontend/z.com/node_modules/next/dist/server/base-server.js:1843:24) at async DevServer.renderToResponseImpl (/Users/moonhyunjun/Desktop/study/frontend/z.com/node_modules/next/dist/server/base-server.js:1881:32) at async DevServer.pipeImpl (/Users/moonhyunjun/Desktop/study/frontend/z.com/node_modules/next/dist/server/base-server.js:909:25) at async NextNodeServer.handleCatchallRenderRequest (/Users/moonhyunjun/Desktop/study/frontend/z.com/node_modules/next/dist/server/next-server.js:266:17) at async DevServer.handleRequestImpl (/Users/moonhyunjun/Desktop/study/frontend/z.com/node_modules/next/dist/server/base-server.js:805:17) { code: 'ERR_INVALID_URL', input: 'undefined'}이런 에러가 뜨며 회원가입이 되지 않습니다. 그런데 npm i next-auth@5.0.0-beta.3 이걸 적용하기 전에는 1번에서 언급한 에러는 떠 있어도 회원가입은 정상적으로 됐었는데 beta.3 버전을 설치한 이후에는 회원가입이 아예 안 되네요. 회원가입 후 로그아웃 버튼이 보이지 않는 문제이건 회원가입이 정상적으로 됐을 때 궁금했던 부분입니다.회원가입이 되면 /home으로 리다이렉트가 됐었는데 그런데 전 로그아웃 버튼이 보이지가 않더라구요.useSession() 으로 데이터를 받아오지 못 해 null 을 리턴해서 그랬던 것이 맞을까요?

해시태그를 가져오려 include: [{ model: Hashtag, attributes: ["hashtag"], through: { attributes: [] } }],이런식으로 코드를 짯는데 프론트로 데이터를 보내는게Hashtags: [1:{hashtag: "ㅁㄴㄴ"}2: {hashtag: "ㅇㅇㅇ"}3: {hashtag: "ㅂㅂㅂ"}4: {hashtag: "ㅁㅁㅋㅋ"}]이런식으로 데이터가 가더라구요 여기서 hashtag 라는 이름 없이Hashtags: [ 1 : "ㅁㄴㄴ"2:"ㅇㅇㅇ"3:"ㅂㅂㅂ"]이런식으로 보내고 싶은데 방법 없을까요...

안녕하세요. 이번에 nextjs 14 로 배포후에 public 폴더의 mp3 나 obj 파일들은 로드가 잘되는데, jpeg 는 404 에러가 나는 이유가 어떤걸까요? Image next 태그를 사용했습니다.

안녕하세요 강의 보면서 다른 프로젝트 진행 중 입니다. login을 msw로 구현하는곳에서 막혀서 질문드립니다. 로그인 버튼을 누르면 http://localhost:3000/api/auth/error 이쪽으로 이동하며 404페이지가 뜹니다서버에서 에러를 떨궈주면 유추라도 하겠지만 9090번 3000번 둘 다 에러를 떨궈주지 않습니다..다른 질문글 중에 @auth/core와 next-auth의 버전을 변경해서 해결됬다는 글도 참고했지만 저는 해결되지않았습니다.그리고 강의 중에 api/auth/signin 으로 들어가면 next-auth에서 제공하는 버튼이 뜨던데 저는 뜨지 않습니다.. 답변 부탁드립니다 감사합니다.추가) 로그인시 api/login에 요청할때 네트워크 탭에서 localhost:3000/api/login이 아닌 localhost:3000/api/auth/error로 떨구는지도 궁금합니다.-----------------------------------감사합니다------------------------- 

안녕하세요 제가 급히 Next.js에 관련하여 업무에 필요한데, 어느 강의부터 수강하면 될까요?😅

안녕하세요.next-auth 로그인부분 수강중 "Error: This action with HTTP GET is not supported." 가 뜨고 있습니다. 다른분들 해결방법이 대부분 버전이슈였어서 버전을 맞췄는데도 해당 오류가 사라지지 않아서 질문드립니다..// package.json { "name": "nadang-com", "version": "0.1.0", "private": true, "scripts": { "dev": "next dev", "build": "next build", "start": "next start", "lint": "next lint", "mock": "npx tsx watch ./src/mocks/http.ts" }, "dependencies": { "@auth/core": "^0.18.0", "@faker-js/faker": "^8.4.1", "classnames": "^2.5.1", "dayjs": "^1.11.10", "next": "14.1.0", "react": "^18", "next-auth": "^5.0.0-beta.3", "react-dom": "^18" }, "devDependencies": { "@mswjs/http-middleware": "^0.9.2", "@types/cors": "^2.8.17", "@types/express": "^4.17.21", "@types/node": "^20", "@types/react": "^18", "@types/react-dom": "^18", "cors": "^2.8.5", "eslint": "^8", "eslint-config-next": "14.1.0", "express": "^4.18.2", "msw": "^2.1.7", "typescript": "^5" }, "msw": { "workerDirectory": "public" } }# 터미널오류 ○ Compiling /api/auth/[...nextauth] ... ✓ Compiled /api/auth/[...nextauth] in 894ms (494 modules) ########### http://localhost:9090 ########### http://localhost:9090 [auth][error] UnknownAction: Cannot parse action at /api/auth/providers .Read more at https://errors.authjs.dev#unknownaction at parseActionAndProviderId (webpack-internal:///(rsc)/./node_modules/next-auth/node_modules/@auth/core/lib/utils/web.js:90:49) at toInternalRequest (webpack-internal:///(rsc)/./node_modules/next-auth/node_modules/@auth/core/lib/utils/web.js:32:40) at Auth (webpack-internal:///(rsc)/./node_modules/next-auth/node_modules/@auth/core/index.js:82:103) ..중략 [auth][error] UnknownAction: Cannot parse action at /api/auth/error .Read more at https://errors.authjs.dev#unknownaction at parseActionAndProviderId (webpack-internal:///(rsc)/./node_modules/next-auth/node_modules/@auth/core/lib/utils/web.js:90:49) at toInternalRequest (webpack-internal:///(rsc)/./node_modules/next-auth/node_modules/@auth/core/lib/utils/web.js:32:40) at Auth (webpack-internal:///(rsc)/./node_modules/next-auth/node_modules/@auth/core/index.js:82:103) at httpHandler (webpack-internal:///(rsc)/./node_modules/next-auth/index.js:139:80) at C:\Users\INA\Documents\workspace\next\nadang-sns\node_modules\next\dist\compiled\next-server\app-route.runtime.dev.js:6:63815 ... at DevServer.renderToResponseWithComponentsImpl (C:\Users\INA\Documents\workspace\next\nadang-sns\node_modules\next\dist\server\base-server.js:1463:53) ○ Compiling /src/middleware ... ✓ Compiled /src/middleware in 1197ms (218 modules)      //LoginModal.tsx "use client"; import style from "@/app/(beforeLogin)/_component/login.module.css"; import { signIn } from "next-auth/react"; import { useRouter } from "next/navigation"; import { ChangeEventHandler, FormEventHandler, useState } from "react"; 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(""); let shouldRedirect = false; try { await signIn("credentials", { username: id, password, redirect: false, //true로 하면 서버에서 리다이렉트 }); shouldRedirect = true; } catch (error) { console.error(error); setMessage("아이디 또는 비밀번호가 일치하지 않습니다."); } if (shouldRedirect) { router.replace("/home"); } }; 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> ); }  // route.ts export { GET, POST } from "@/auth"; // auth.ts import NextAuth from "next-auth"; import CredentialsProvider from "next-auth/providers/credentials"; console.log("###########", process.env.AUTH_URL); export const { handlers: { GET, POST }, auth, } = NextAuth({ // 직접 만든 페이지는 따로 지정해줘야함 pages: { signIn: "/i/flow/login", newUser: "/i/flow/signup", }, providers: [ CredentialsProvider({ async authorize(credentials) { console.log("@#@#@#@#", credentials); const authResponse = await fetch(`${process.env.AUTH_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; }, }), ], });   혹시 제가 확인하다가 빠뜨린 부분이 있거나 잘못된 부분이 있다면 알려주시면 감사하겠습니다 ㅠㅠㅠ계속 node_modules .next packge-lock.json 다 지우고 깔고 코드 하나하나 바꿔보고 하다보니까 이제 뭐가 어디서부터인지 보이지가 않습니다 ㅠㅠㅠㅠ   

SignupModal 만드는 과정에서 질문이 있습니다.useFormState 훅을 사용할 때 계속 에러가 나서 signup.ts 파일을 커뮤니티를 참고해서 수정해줬습니다. return {message: null } 을 추가해주는 식으로요.그러고나서 showMessage 함수를 만드는데, 강의에서는 showMessage 함수의 파라미터의 타입이 string 이라고 하는데 제 꺼에선 실제로 들어가는 값이 string | null 이라고 나오면서 에러가 발생합니다.초기 state 도 { message: null } 이고, signup.ts 에서도 { message: null } 을 리턴하는 경우가 있어서 이런 것 같은데 제로초님은 강의에서 showMessage 함수의 파라미터 타입을 그냥 string으로 해도 에러가 나지 않는 것이 신기하여 질문 남겨봅니다.

제가 지금 블로그에서 에디터로 이미지를 합해서 백에다가 데이터를 보내고 잇는데 제로초님이 말씀하신데로 해봣는데 이미지의 소스는 imges라는 테이블에 정상적으로 들어가는데문제는 post에<p>이미지 </p><p><img src=">"http://localhost:3065/KakaoTalk_20240122_212009014_01_1707401883946.jpg"></p>이런식으로 이미지가 들어가게 되는데 에디터라서 이렇게 들어가게 되는게 맞는지 아닌지 궁금합니다...용량이 걱정이 되서요 ㅠㅠ이미지로 보여드리면 이런데 원래 에디터안에 들어가는 이미지 같은경우는 텍스트랑 같이 db에 저장시키는게 맞는지 궁금합니다.

카카오 로그인을 next-auth로 구현해보고자 강의에서 말씀하신것 처럼 KakaoProvider 추가하고, LoginModal.tsx에서 'credentials' 대신 'kakao'로 바꿔 진행해보았는데 우선 등록하지 않은 Redirect URI를 사용해 인가 코드를 요청했습니다사용한 Redirect URI: http://localhost:9090/api/auth/callback/kakao.라는 에러가 발생하였습니다. (참고로 현재 카카오 developers에 저장해둔 Redirect URI는 http://localhost:3001/api/auth/callback/kakao 입니다)이후 혹시나 해서 Redirect URI의 설정을 9090으로 바꾸고 다시 진행해보았더니 이처럼 진행이 되었고, 계속하기 눌렀더니 Cannot GET /api/auth/callback/kakao이러한 에러가 발생하였습니다. 어떤부분이 잘못되었는지 잘 모르겠어서 질문글 올립니다ㅠ 

안녕하세요 제로초님!AWS에 배포하기 및 카카오톡 공유하기 강의까지 끝마친 수강생 입니다!저는 윈도우 10, 크롬 브라우저, VSCode, MySQL 8버전을 사용하고 있습니다.로그인 후 새로 고침을 하면 로그인이 유지되지 않고 풀려 버리는 버그가 발생하여질문을 올리게 되었습니다! 이 문제는 쿠키가 있음에도 발생합니다!이 버그로 인해 총 2가지 상태에 이릅니다.1. 완전히 로그인을 한 상태에서 새로 고침을 하면 쿠키는 남아있으나 로그인이 유지되지 않습니다.2. 완전히 로그인이 된 상태에서 프로필 페이지로 이동하면 로그인이 풀리며 홈페이지로 돌아옵니다.새로 고침 후 로그인이 풀리는 문제가 발생한 시점에서다시 로그인을 하려고 하면 로그인 유무 검사(로그인하지 않은 사용자만 접근 가능) 메시지가 뜹니다.로그인 후 로그아웃을 하면 해당 문제가 발생하지 않습니다.해당 에러를 임시로 해결하는 방법을 찾았습니다.프론트 페이지와 백엔드 페이지 애플리케이션 탭에서 쿠키를 지우면 다시 로그인을 진행할 수 있습니다. 하지만 말 그대로 임시로 해결하는 것 뿐이라 로그인 후 새로 고침을 하면아까와 똑같이 로그인이 풀려버립니다.문제를 해결하기 위해 페이지에서 콘솔 탭과 네트워크 탭, 애플리케이션 탭의 쿠키 쪽을 확인하였습니다.프론트 콘솔 탭 확인해당 에러 주소로 들어가 보았지만 외계어로 적혀있어 다른 곳을 먼저 확인해보기로 했습니다.프론트 네트워크 탭 확인401 Unauthorized 에러를 네트워크 탭에서 확인 했습니다.Headers 탭에 적힌 쿠키와 Cookies 탭에 적힌 쿠키는 똑같았습니다!프론트 쿠키 존재 확인로그인 후 로그아웃을 진행하면 쿠키가 남아있습니다. 백엔드 쿠키 존재 확인백엔드 페이지도 프론트 쪽과 똑같이 쿠키가 잘 들어가 있음을 확인하였습니다.페이지 쪽을 전부 확인한 뒤, 우분투 백엔드 pm2 monit을 확인해보니사용자 로그인 쪽에서 401 에러가 나고 있었습니다.sudo npx pm2 logs --err --lines 200 명령어로 에러 로그를 확인하였으나관련 에러는 찾지 못하였습니다.문제를 해결하기 위해 잘못 적은 코드가 있는지 검사하였습니다.아래는 가장 의심되는 코드들 입니다!리듀서, 사가, 라우터, 로그인 검사, 서버사이드 렌더링 순으로 작성하였습니다.front/reducers/user.js나의 사용자 정보 불러오기 리듀서const reducer = (state = initialState, action) => { return produce(state, (draft) => { switch (action.type) { /* 나의 사용자 정보 불러오기 요청 리듀서 */ case LOAD_MY_INFO_REQUEST: draft.loadMyInfoLoading = true; draft.loadMyInfoError = null; draft.loadMyInfoDone = false; break; /* 나의 사용자 정보 불러오기 성공 리듀서 */ case LOAD_MY_INFO_SUCCESS: draft.loadMyInfoLoading = false; draft.me = action.data; draft.loadMyInfoDone = true; break; /* 나의 사용자 정보 불러오기 실패 리듀서 */ case LOAD_MY_INFO_FAILURE: draft.loadMyInfoLoading = false; draft.loadMyInfoError = action.error; break;로그인 리듀서. . . /* 로그인 요청 리듀서 */ case LOG_IN_REQUEST: draft.logInLoading = true; draft.logInError = null; draft.logInDone = false; break; /* 로그인 성공 리듀서 */ case LOG_IN_SUCCESS: draft.logInLoading = false; draft.me = action.data; // 로그인 성공 시 실제 사용자 데이터 draft.logInDone = true; break; /* 로그인 실패 리듀서 */ case LOG_IN_FAILURE: draft.logInLoading = false; draft.logInError = action.error; break; front/sagas/user.js나의 사용자 정보 불러오기 사가// loadMyInfo 실행 시 서버에 loadMyInfoAPI 요청 function loadMyInfoAPI() { return axios.get('/user'); } // LOAD_MY_INFO 액션이 실행되면 loadMyInfo 함수 실행 function* loadMyInfo(action) { /* 요청 성공 시 LOAD_MY_INFO_SUCCESS 액션 디스패치 */ try { const result = yield call(loadMyInfoAPI, action.data); yield put({ type: LOAD_MY_INFO_SUCCESS, data: result.data, }); /* 요청 실패 시 LOAD_MY_INFO_FAILURE 액션 디스패치 */ } catch (err) { console.error(err); yield put({ type: LOAD_MY_INFO_FAILURE, error: err.response.data, // 실패 결과 }); } }로그인 사가// logIn 실행 시 서버에 logInAPI 요청 function logInAPI(data) { return axios.post('/user/login', data); } // LOG_IN_REQUEST 액션이 실행되면 logIn 함수 실행 function* logIn(action) { /* 요청 성공 시 LOG_IN_SUCCESS 액션 디스패치 */ try { const result = yield call(logInAPI, action.data); yield put({ type: LOG_IN_SUCCESS, data: result.data, // 성공 결과 : 서버로부터 사용자 정보를 받아옴 }); /* 요청 실패 시 LOG_IN_FAILURE 액션 디스패치 */ } catch (err) { console.error(err); yield put({ type: LOG_IN_FAILURE, error: err.response.data, // 실패 결과 }); } }back/routes/user.js브라우저 새로 고침 시 나의 사용자 정보를 복구하는 라우터나의 사용자 정보를 복구하는 라우터는 user 라우터들 중에서 제일 위에 위치합니다!// 브라우저 새로고침 시 나의 사용자 정보를 복구하는 라우터 router.get('/', async (req, res, next) => { // GET /user // req.headers 안에 쿠키가 들어있다. console.log(req.headers, "req.headers 안에는 쿠키가 들어있다."); try { /* (로그인해서) 사용자 정보가 있다면 */ if (req.user) { /* (비밀번호를 제외한) 모든 사용자 정보를 가져오는 함수 */ const fullUserWithoutPassword = await User.findOne({ where: { id: req.user.id }, attributes: { exclude: ['password'] }, // 모델 가져오기 include: [{ /* 나의 게시글 */ model: Post, attributes: ['id'], // id 데이터만 가져오기 }, { /* 나의 팔로잉 */ model: User, as: 'Followings', attributes: ['id'], }, { /* 나의 팔로워 */ model: User, as: 'Followers', attributes: ['id'], }] }); // 200번대 에러 출력 res.status(200).json(fullUserWithoutPassword); /* (로그아웃해서) 사용자 정보가 없다면 */ } else { // 아무것도 보내지 않기 res.status(200).json(null); } /* 에러 캐치 */ } catch (error) { console.error(error); next(error); } });로그인 라우터// 로그인 라우터 : 사용자 로그인 전략 실행 router.post('/login', isNotLoggedIn, (req, res, next) => { /* '로컬', (서버 에러, 성공 객체, 클라이언트 에러)가 전달 */ passport.authenticate('local', (err, user, info) => { // done에서 넣은 값들이 순서대로 전달되는 곳 /* 서버 에러 */ if (err) { console.error(err); // 콘솔 창을 통한 에러 메시지 출력 return next(err); // 에러 처리 미들웨어로 이동 } /* 클라이언트 에러 : 로그인하다 에러가 나면 클라이언트로 응답 보내기 */ if (info) { return res.status(401).send(info.reason); } /* 로그인 성공 객체 */ return req.login(user, async (loginErr) => { // 서비스 로그인이 끝난 후 패스포트 로그인 할 때 에러발생 시 처리 if (loginErr) { console.error(loginErr); return next(loginErr); } /* (비밀번호를 제외한) 모든 사용자 정보를 가져오는 함수 */ const fullUserWithoutPassword = await User.findOne({ where: { id: user.id }, attributes: { exclude: ['password'] }, // 전체 데이터에서 비밀번호만 제외 // 모델 가져오기 include: [{ /* 나의 게시글 */ model: Post, attributes: ['id'], // id 데이터만 가져오기 }, { /* 나의 팔로잉 */ model: User, as: 'Followings', attributes: ['id'], }, { /* 나의 팔로워 */ model: User, as: 'Followers', attributes: ['id'], }] }); /* (비밀번호를 제외한) 모든 사용자 정보를 프론트로 넘기기 */ return res.status(200).json(fullUserWithoutPassword); }); })(req, res, next); // 미들웨어 커스터마이징 });back/routes/middlewares.js로그인 검사// (로그인 안했을 때) 로그인 유무 검사 exports.isNotLoggedIn = (req, res, next) => { if (!req.isAuthenticated()) { next(); } else { res.status(401).send('로그인하지 않은 사용자만 접근 가능합니다.'); } }; 문제 해결을 위해 노드버드 커뮤니티에서 저와 비슷한 에러가 발생한 수강생 분이 계셨습니다!https://www.inflearn.com/questions/368573/%EB%A1%9C%EA%B7%B8%EC%9D%B8-%EC%A7%88%EB%AC%B8-%EB%A1%9C%EA%B7%B8%EC%9D%B8%ED%95%98%EC%A7%80-%EC%95%8A%EC%9D%80-%EC%82%AC%EC%9A%A9%EC%9E%90%EB%A7%8C-%EC%A0%91%EA%B7%BC%EC%9D%B4-%EA%B0%80%EB%8A%A5%ED%95%A9%EB%8B%88%EB%8B%A4해당 글에서 제로초님은 쿠키가 있는 걸로 봐서 이미 로그인이 된 상태인데프론트에서 자신이 로그인 되었다는 것을 인식하지 못하고 있으며,해당 getServerSideProps 쪽에 문제가 있다고 힌트를 주셨습니다!제로초님의 노드버드Ch7 user/[id].jshttps://github.com/ZeroCho/react-nodebird/blob/master/ch7/front/pages/user/[id].jsfront/pages/user/[id].js강의를 진행하며 깃허브와 약간은 다른 코드가 있습니다.// 서버사이드 렌더링(SSR) : getServerSideProps 사용 /* 사용자 컴포넌트보다 먼저 실행, 매개변수 context 안에 store가 들어있다. */ export const getServerSideProps = wrapper.getServerSideProps(async (context) => { /* 변수 cookie에 모든 cookie 정보 저장 */ const cookie = context.req ? context.req.headers.cookie : ''; /* 쿠키를 안 써서 요청 보낼 때는 서버에서 공유하고 있는 쿠키를 제거하기 */ axios.defaults.headers.Cookie = ''; /* 서버일 때, 그리고 쿠키가 있을 때만 서버로 쿠키 전달하기 */ if (context.req && cookie) { // 실제로 쿠키를 써서 요청을 보낼 때만 잠깐 쿠키를 넣어 놓는다. axios.defaults.headers.Cookie = cookie; } /* 처음에 화면을 로딩하면 특정 사용자의 게시글 불러오기 요청 액션 객체 디스패치 */ context.store.dispatch({ type: LOAD_USER_POSTS_REQUEST, data: context.params.id, // 또는 context.query.id로 useRouter에 접근 가능 }); /* 처음에 화면을 로딩하면 나의 사용자 정보 불러오기 요청 액션 객체 디스패치 */ context.store.dispatch({ type: LOAD_MY_INFO_REQUEST, }); /* 처음에 화면을 로딩하면 다른 사용자 정보 불러오기 요청 액션 객체 디스패치 */ context.store.dispatch({ type: LOAD_USER_REQUEST, data: context.params.id, // 또는 context.query.id로 useRouter에 접근 가능 }); /* 나의 사용자 정보, 다른 사용자 정보 불러오기, 여러 게시글 불러오기 요청(REQUEST)이 성공(SUCCESS)으로 바뀔 때까지 기다리기 */ context.store.dispatch(END); await context.store.sagaTask.toPromise(); console.log('getState', context.store.getState().post.mainPosts); return { props: {} }; });리듀서, 사가, 그리고 해당 서버사이드 렌더링 쪽을 점검해보았으나 잘못된 점을 찾지 못하여 질문 남깁니다..어떻게 하면 사용자(나)의 로그인이 유지되게 할 수 있을까요? 혹시 힌트 키워드라도 주실 수 있을까요?긴 질문 글 읽어주셔서 감사합니다 제로초님 항상 강의 잘 보고 있습니다!

제가 만든 코드랑 다르다면 깃허브에 있는 코드로 수정해야되나요 아니면 깃허브에 있는 코드를 가져와서 강의 시청만 하는건가요?

이런 오류가 뜨는데 무엇때문인가요?

안녕하세요!! 궁금한 점이 하나 있습니다.강사님은 게시글 업로드 성공시 setQueryData로 응답값을 넣어주셨는데 혹시 invalidateQueries로 데이터를 다시 불러오는 것은 어떻게 생각하시나요?

아이디, 비밀번호를 입력하고 로그인 버튼을 누르면 500에러가 발생합니다. 9090 서버 포트는 잘 켜져있다고 뜨고, 코드 올리겠습니다.<auth.ts>import NextAuth from "next-auth"; import CredentialsProvider from "next-auth/providers/credentials"; import KakaoProvider from "next-auth/providers/kakao"; export const { handlers: { GET, POST }, auth, signIn, } = NextAuth({ pages: { signIn: "/i/flow/login", newUser: "i/flow/signup", }, providers: [ CredentialsProvider({ async authorize(credentials) { // credentials 안에 id창에서 입력하는 정보다 담겨있음 const authResponse = await fetch(`${process.env.AUTH_URL}/api/login`, { method: "POST", headers: { "Content-Type": "application/json", }, body: JSON.stringify({ id: credentials.username, password: credentials.password, //next-auth의 credentials에는 username, password로 고정되어 있어서 이를 바꿔줌 }), }); //로그인 실패시 if (!authResponse.ok) { return null; } const user = await authResponse.json(); return user; }, }), //kakao로그인을 사용할때 // KakaoProvider(), ], });  <LoginModal.tsx>"use client"; import style from "@/app/(beforeLogin)/_component/login.module.css"; import { signIn } from "next-auth/react"; import { useRouter } from "next/navigation"; import { ChangeEventHandler, FormEventHandler, useState } from "react"; 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(""); try { await signIn("credentials", { username: id, password, redirect: false, }); //kakao, naver로 바꿀 수 있음 //client 일때는 next-auth/react의 signIn을 사용 //server 일때는 @/auth의 signIn을 사용 router.replace("/home"); } catch (error) { console.log(error); 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> ); } <middleware.ts>export { auth as middleware } from "./auth"; export const config = { matcher: ["/compose/tweet", "/home", "/explore", "/messages", "/search"], }; <route.ts>export { GET, POST } from "@/auth";에러 내용 :TypeError: next_dist_server_web_exports_next_request__WEBPACK_IMPORTED_MODULE_0__ is not a constructor at reqWithEnvURL (webpack-internal:///(rsc)/./node_modules/next-auth/lib/env.js:15:12) at httpHandler (webpack-internal:///(rsc)/./node_modules/next-auth/index.js:139:139) at /Users/imhwarang/projects/zerocho/z-com/node_modules/next/dist/compiled/next-server/app-route.runtime.dev.js:6:63815 at /Users/imhwarang/projects/zerocho/z-com/node_modules/next/dist/server/lib/trace/tracer.js:133:36 at NoopContextManager.with (/Users/imhwarang/projects/zerocho/z-com/node_modules/next/dist/compiled/@opentelemetry/api/index.js:1:7062)너무 길어서 다 올릴수는 없네요 에러내용을