🚨 아래의 가이드라인을 꼭 읽고 질문을 올려주시기 바랍니다 🚨질문 하시기 전에 꼭 확인해주세요- 질문 전 구글에 먼저 검색해보세요 (답변을 기다리는 시간을 아낄 수 있습니다)- 코드에 오타가 없는지 면밀히 체크해보세요 (Date와 Data를 많이 헷갈리십니다)- 이전에 올린 질문에 달린 답변들에 꼭 반응해주세요 (질문에 대한 답변만 받으시고 쌩 가시면 속상해요 😢)질문 하실때 꼭 확인하세요- 제목만 보고도 무슨 문제가 있는지 대충 알 수 있도록 자세한 제목을 정해주세요 (단순 단어 X)- 질문의 배경정보를 제공해주세요 (이 문제가 언제 어떻게 발생했고 어디까지 시도해보셨는지)- 문제를 재현하도록 코드샌드박스나 깃허브 링크로 전달해주세요 (프로젝트 코드에서 문제가 발생할 경우)- 답변이 달렸다면 꼭 확인하고 반응을 남겨주세요- 강의의 몇 분 몇 초 관련 질문인지 알려주세요!- 서로 예의를 지키며 존중하는 문화를 만들어가요. - 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요.  navigate('/',{replace:True})가 일기 작성하는 페이지로 뒤로 가기를 해서 못오게 막는다는 말이 무슨 말인지 이해가 안갑니다   

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

안녕하세요, 진석 님.이전에 발생한 문제는 덕분에 수월하게 해결했습니다! 하지만 ''nvm --version" 명령어 실행 시, not found가 뜹니다 ㅠㅠ<진행과정>brew 명령어로 5가지 팩키지 다운로드 완료(iterm2, ..., nvm)'ls -a ~' 명령어로 nvm 존재 여부 확인 혹시나 해서 mkdir ~/.nvm 명령어 입력했으나, 'File exist' 확인code ~/.zshrc 명령어 실행 후, vscode로 명령행 붙여넣기 하고, 저장 완료vim ~/.zshrc로도 실행하려 했으나, 붙여 넣은 후 어떤 단축키를 눌러야 하는지 모르겠어서 vscode에 붙여넣기 함.(어떤 단축키를 입력해야 명령행이 반영되는지 모르겠습니다 ㅠㅠ) 터미널에서 새 창열고, nvm --version 명령어 입력하였으나 'command not found'가 뜸 vscode에 있는 .zshrc를 재저장하고 nvm 명령어 실행했는데 같은 문제 발생 vscode에 있는 .zshrc 파일을 닫아서 그러는 건가 싶어서 파일을 열어 놓은 채로 nvm -version 실행했는데도 같은 결과 발생영상을 계속 보면서 반복적으로 재시도를 하였으나 계속 같은 결과(not found)가 나와 질문 올립니다! 감사합니다!

안녕하세요, 우선 리뉴얼 강의 오픈을 축하드립니다 :-)첫 질문부터 너무 쉬운 것을 여쭤보는 것 같아 민망하네요... ㅎㅎ 우선! '00-02 맥 개발환경 설치' 강좌를 듣다 homebrew 설치가 잘 안되어 질문 드립니다. terminal에 /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)" 위 명령을 수행한 후, Press RETURN/ENTER to continue or any other key to abort:라고 떠서 키보드는 ENTER를 눌렀습니다. 이후, 캡처본에 있는 여러 문장이 주루륵 나오고 brew --version으로 버전 체크를 해보니 command not found가 나왔습니다. 어떻게 해결해야 할 지 몰라 질문 남깁니다.언제나 친절하고, 상세한 답변 주셔서 감사합니다.

안녕하세요! 강의 잘 보고 있습니다. :)다름이 아니라 테스트 코드 파일들의 작성 위치가 궁금한데요, 보니까 그냥 파일 바로 아래에 새로운 테스트 코드 파일이 있는 것 같은데 이게 보편적인 위치일까요?따로 테스트 코드 폴더를 만들거나 하진 않는 건지 궁금해서 문의드립니다.감사합니다 :)

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

 안녕하세요. 강의 너무 재밌게 잘 보고 있습니다. 두가지 질문이 있어서 문의글 남깁니다.   질문 1. 테스트코드에서 async, await 가 필요없어 보이는 곳에도 꼭 붙이는 이유가 있나요? 예를들면, 아래 1번 코드에서 async await 이 반드시 필요한 이유가 있는건가요? 저는 2번처럼 async-await을 제거해도 테스트가 정상 통과 되어서요. 특별한 목적이 있어서 붙여야 하는건지 궁금합니다. !  1) it('총 상품 금액은 "$500.00"로 노출된다', async () => { await render(<TestPayment />); expect(screen.getByText('500.00')).toBeInTheDocument(); }); 2)it('총 상품 금액은 "$500.00"로 노출된다', () => { render(<TestPayment />); expect(screen.getByText('500.00')).toBeInTheDocument(); });  질문 2. render 함수를 util 로 만들어서 사용하시는데, userEvent.setup의 user 도 함께 들어있는 이유가 궁금합니다. userEvent를 쓰지 않는 테스트코드도 있는데, 꼭 함께 들어있어야하나 하는 생각이 들어서요 ㅎㅎ userEvent를 더 편리하게 사용하기 위함인가요? export default async (component, options = {}) => { const { routerProps } = options; const user = userEvent.setup(); return { user, ...render( <QueryClientProvider client={queryClient}> <MemoryRouter {...routerProps}>{component}</MemoryRouter> <Toaster /> </QueryClientProvider>, ), }; }; 감사합니다!

아이디, 비밀번호를 입력하고 로그인 버튼을 누르면 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)너무 길어서 다 올릴수는 없네요 에러내용을

회원가입 성공 status: 201전달받고,회원가입 성공하면 전달받는 리턴객체도 잘 전달받았는데,signIn이 동작하지 않는거 같습니다.PostgreSQL 디비들어가서 보면 User테이블에 신규가입된 정보잘 입력되어있습니다. packge.json "dependencies": { "@auth/core": "^0.18.0", "@faker-js/faker": "^8.3.1", "@tanstack/react-query": "^5.17.10", "@tanstack/react-query-devtools": "^5.17.10", "classnames": "^2.4.0", "dayjs": "^1.11.10", "next": "^14.0.4", "next-auth": "^5.0.0-beta.3", "react": "^18.2.0", "react-dom": "^18.2.0", "react-intersection-observer": "^9.5.3" }, "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.0.4", "express": "^4.18.2", "msw": "^2.0.12", "typescript": "^5" }, "msw": { "workerDirectory": "public" } }[auth][error] CallbackRouteError: Read more at https://errors.authjs.dev#callbackrouteerror[auth][cause]: TypeError: fetch failed at node:internal/deps/undici/undici:12344:11[auth][details]: { "name": "HeadersTimeoutError", "code": "UND_ERR_HEADERS_TIMEOUT", "message": "Headers Timeout Error", "provider": "credentials"}CallbackRouteError: Read more at https://errors.authjs.dev#callbackrouteerror at Module.callback (webpack-internal:///(action-browser)/./node_modules/@auth/core/lib/actions/callback/index.js:307:23) at async AuthInternal (webpack-internal:///(action-browser)/./node_modules/@auth/core/lib/index.js:65:24) at async Auth (webpack-internal:///(action-browser)/./node_modules/@auth/core/index.js:123:29) at async signIn (webpack-internal:///(action-browser)/./node_modules/next-auth/lib/actions.js:55:17) at async onSubmit (webpack-internal:///(action-browser)/./src/app/(beforeLogin)/_lib/signup.ts:53:9) at async /Users/jungjuyoung/dev/x-clone/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:39:406 at async t0 (/Users/jungjuyoung/dev/x-clone/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:38:5773) at async rh (/Users/jungjuyoung/dev/x-clone/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:39:23636) at async doRender (/Users/jungjuyoung/dev/x-clone/node_modules/next/dist/server/base-server.js:1391:30) at async cacheEntry.responseCache.get.routeKind (/Users/jungjuyoung/dev/x-clone/node_modules/next/dist/server/base-server.js:1552:28) at async DevServer.renderToResponseWithComponentsImpl (/Users/jungjuyoung/dev/x-clone/node_modules/next/dist/server/base-server.js:1460:28) at async DevServer.renderPageComponent (/Users/jungjuyoung/dev/x-clone/node_modules/next/dist/server/base-server.js:1843:24) at async DevServer.renderToResponseImpl (/Users/jungjuyoung/dev/x-clone/node_modules/next/dist/server/base-server.js:1881:32) at async DevServer.pipeImpl (/Users/jungjuyoung/dev/x-clone/node_modules/next/dist/server/base-server.js:909:25) at async NextNodeServer.handleCatchallRenderRequest (/Users/jungjuyoung/dev/x-clone/node_modules/next/dist/server/next-server.js:266:17) at async DevServer.handleRequestImpl (/Users/jungjuyoung/dev/x-clone/node_modules/next/dist/server/base-server.js:805:17) { type: 'CallbackRouteError', kind: 'error', [cause]: { err: TypeError: fetch failed at node:internal/deps/undici/undici:12344:11 { cause: [HeadersTimeoutError] }, name: 'HeadersTimeoutError', code: 'UND_ERR_HEADERS_TIMEOUT', message: 'Headers Timeout Error', provider: 'credentials' }}

next-auth로 로그인하기의 강의를 듣던 도중 오류가 생겨 게시판에 글을 남겨봅니다. 문제는 Login 모달에서 로그인을 하였을 때 http://localhost:3000/api/auth/error 로 페이지가 이동 되어집니다.next-auth "next-auth": "^5.0.0-beta.3",.env .env.local 에 AUTH_URL=http://localhost:9090 를 넣어 두었고route.tsexport { GET, POST } from "@/auth";handlers.tsimport { http, HttpResponse, StrictResponse } from "msw"; import { faker } from "@faker-js/faker"; const User = [ { id: "zeroCho", nickName: "zero", image: "/yRsRRjGO.jpg" }, ]; export const handlers = [ // 로그인 http.post("/api/login", () => { console.log("로그인"); return HttpResponse.json(User[1], { headers: { "Set-Cookie": "connect.sid=msw-cookie;HttpOnly;Path=/", // Http cookie 넣어주기 }, }); }), // 로그아웃 http.post("/api/logout", () => { console.log("로그아웃"); return new HttpResponse(null, { headers: { "Set-Cookie": "connect.sid=;HttpOnly;Path=/;Max-Age=0", }, }); }), // 회원 가입 http.post("/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=/;Max-Age=0", }, }); }), ];auth.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.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 { email: user.id, name: user.nickname, image: user.image, ...user, }; }, }), ], });LoginModal.tsx"use client"; import React, { ChangeEventHandler, FormEventHandler, useState } from "react"; import styles from "./loginModal.module.css"; import { redirect, useRouter } from "next/navigation"; // client import { signIn } from "next-auth/react"; export function LoginModal() { const [id, setId] = useState<string>(""); const [password, setPassword] = useState<string>(""); const [message, setMessage] = useState<string>(""); const router = useRouter(); const onSubmit: FormEventHandler<HTMLFormElement> = async (e) => { e.preventDefault(); setMessage(""); try { await signIn("credentials", { username: id, password, redirect: false, }); 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={styles.modalBackground}> <div className={styles.modal}> <div className={styles.modalHeader}> <button className={styles.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={styles.modalBody}> <div className={styles.inputDiv}> <label className={styles.inputLabel} htmlFor="id"> 아이디 </label> <input id="id" className={styles.input} value={id} onChange={onChangeId} type="text" placeholder="" /> </div> <div className={styles.inputDiv}> <label className={styles.inputLabel} htmlFor="password"> 비밀번호 </label> <input id="password" className={styles.input} value={password} onChange={onChangePassword} type="password" placeholder="" /> </div> </div> <div className={styles.message}>{message}</div> <div className={styles.modalFooter}> <button className={styles.actionButton} disabled={!id && !password}> 로그인하기 </button> </div> </form> </div> </div> ); } 혹시 같은 문제를 겪으신 분이 있었을까요? 아니면 겪으신 분 중에 해결 하신 분이 있으면 도움 부탁드립니다.

안녕하세요. 디렉토리 구조를 afterlogin과 beforelogin구조로 나누어서 로그인을 분기치고 있고 auth.ts에서 서버로 부터 전달받은 토근값을 넣고 미들웨어에서 세션을 유무를 확인하여 login페이지로 리다이렉트 시키고 있습니다.  afterlogin과 beforelogin으로 디렉토리가 어떤방식으로 나뉘는지 로직이 궁금합니다. 관련된 훅이 있는것인지??2. 실제 상용화된 서비스라고하면 로그인이 풀리는것을 방지하기 위해 BE로 토근값을 요청할텐데, 관련 로직은 어떤방식으로 구현하는게 좋은방법인지 요청드립니다.

지금은 그냥 전부 따라 치고 마지막에 실행해서 결과를 확인하는 방식이지만 실제로 리액트로 개발을 할 때는 css쪽은 직접 화면을 보면서 해야될텐데 만든 컴포넌트가 생각대로 구현이 되어있는지 확인을 하려면 App.js 파일에 직접 컴포넌트를 넣어서 확인해야 하나요?페이지 컴포넌트들 같은 경우 같은 css가 중복되는데 중복되는 코드를 하나로 관리하려면 어떻게 해야할까요?

안녕하세요![Next.js 필수 개발 가이드 3시간 완성!] 강의를 너무 만족하여 수강하였고, 이후 풀스택 강의를 수강하게 된수강생입니다. 위에 강의에서 커뮤니티에 올려주신 깃허브를 참고하여 오류&막히는 부분은 소스를 확인하여 수강하였습니다. 혹시 노션 풀스택강의에서도 깃허브 소스가 제공될 수 있을까요? 부탁드립니다. 감사합니다 :-D

공통으로 사용할 컴포넌트 폴더가 애프터로그인, 비포로그인 그룹 각각 폴더의_component 로 존재하는 이유가 있는건가요 ?app폴더 아래에서 비포와 애프터 둘다 공통으로 사용하게끔 뺴면 어떤 문제가 있는건가요??

App router를 사용해서 상용화를.목표로 하는 서비스를 만들기에는 아직 무리일까요? 라이브러리가 호환이 안되는것들이 많다고 들어서 page router를 쓸지 고민이되네요 예전보다는 많이 안정화되었다고 듣기는 했는데 page router에 비해 리스크가 크지않을지 궁금합니다

처음 강의를 시작하고 터미널을 열어 npx create-react-app emotion-diary 생성하고 npm install react-router-dom@6을 실행했는데 영상처럼 emotion-diary에 같이 적용이 안되고 따로 다른 파일형식으로 적용이 되는것 같은데 제가 하는 방식이 맞는지 확인 부탁드립니다

영상 항상 잘보고있습니다. 응원합니다! 질문입니다!최근에 성능최적화에 관심이 생겨서 re-rendering을 최소화하려고 관련자료를 찾아보고있는 와중에 궁금함이 생겨서 질문드립니다 ! 리액트 얕은비교는 공식문서에서 함수보면서오브젝트 1depth 까지는 for문 돌면서 값 체크를 한다고 이해했습니다. 아래 key3과 같이 값이 array이고 그안에 object 담겨잇을때 데이터 fetching 때마다key3에 담겨있는 Array의 참조값도 바뀌고 array에 담겨잇는 Object도 참조값이 매번 달라져서 rerendering이 반복적으로 일어날것 같은데 맞을가요? const data = { key1 : "aa", key3 : [{a:'a'},{b:'b'}]} 질문이 잘 전달되었으면 좋겠는데... 글로 적으니 뭔가 어렵네요.ㅠ 감사합니다.!

서버 컴포넌트에서 Server Actions 사용하기 강의까지 그대로 따라하고 오류때문에 다시 반복해봐도 오류가 발생해서 코드 남깁니다.<SignupModal.tsx>import style from "./signup.module.css"; import { redirect, useRouter } from "next/navigation"; import { ChangeEventHandler, FormEventHandler, useState } from "react"; import BackButton from "./BackButton"; export default function SignupModal() { const submit = async (formData: FormData) => { "use server"; if (!formData.get("id")) { return { message: "no_id" }; } if (!formData.get("name")) { return { message: "no_name" }; } if (!formData.get("password")) { 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" }; // } // 이미 유저가 존재할때 403 보내주기로 약속 console.log(await response.json()); shouldRedirect = true; } catch (err) { console.log(err); } if (shouldRedirect) { redirect("/home"); //try/catch문 안에 있으면 안됨. } }; return ( <> <div className={style.modalBackground}> <div className={style.modal}> <div className={style.modalHeader}> <BackButton /> <div>계정을 생성하세요.</div> </div> <form action={submit}> <div className={style.modalBody}> <div className={style.inputDiv}> <label className={style.inputLabel} htmlFor="id"> 아이디 </label> <input id="id" name="id" className={style.input} type="text" placeholder="" required /> </div> <div className={style.inputDiv}> <label className={style.inputLabel} htmlFor="name"> 닉네임 </label> <input id="name" name="name" className={style.input} type="text" placeholder="" required /> </div> <div className={style.inputDiv}> <label className={style.inputLabel} htmlFor="password"> 비밀번호 </label> <input id="password" name="password" className={style.input} type="password" placeholder="" required /> </div> <div className={style.inputDiv}> <label className={style.inputLabel} htmlFor="image"> 프로필 </label> <input id="image" name="image" className={style.input} type="file" accept="image/*" required /> </div> </div> <div className={style.modalFooter}> <button type="submit" className={style.actionButton}> 가입하기 </button> </div> </form> </div> </div> </> ); } ><handlers.ts>http.post("/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=/", }, }); }),>이런식으로 강의와 똑같이 작성했고, 질문글중 회원가입 코드에 Path부분 빼라고 해보셔서 해봤는데 안됩니다.실행하고, 가입하기 버튼을 눌렀을때 redirect가 안되고, 헤더 200, 페이로드는 뜨지만 미리보기, 응답이 뜨지 않습니다.그리고 에러코드에 TypeError: fetch failed<cause: Error: getaddrinfo ENOTFOUND loalhost at GetAddrInfoReqWrap.onlookupall [as oncomplete] (node:dns:118:26) at GetAddrInfoReqWrap.callbackTrampoline (node:internal/async_hooks:130:17) { errno: -3008, code: 'ENOTFOUND', syscall: 'getaddrinfo', hostname: 'loalhost' }}>이런 에러가 떠서 검색도 해봤지만 해결이 안되서 질문 드립니다.

안녕하세요 제로초님!AWS에 배포하기 및 카카오톡 공유하기 강의까지 끝마친 수강생 입니다!사전에 back 폴더 이미지 모델에서 이미지 문자열 길이를 수정하였습니다.백엔드 루트 MySQL에서 react-nodebird DB 삭제 후react-nodebird DB를 다시 만들어도 table이 재생성 되지 않아 질문 드립니다!DB를 삭제한 이유는 에러 로그 확인 시 아래 문제가 발생했기 때문입니다.이상하게도 두 에러 메시지 모두 DB와 Table이 존재하는 상태일 때 발생하였습니다.Error: Unknown database 'react-nodebird'DatabaseError [SequelizeDatabaseError]: Table 'react-nodebird.테이블명'문제를 해결하기 위해 제로초님의 섹션6 프론트 서버 배포하기 강의 14:00 와똑같은 방법으로 해결하려 하였습니다. 그러나 해결되지 않았습니다.react-nodebird DB를 지우기 전 테이블 상태DROP DATABASE 후 CREATE DATABASE react-nodebird DB 생성.백엔드 루트 경로에 npx sequelize db:create 명령어 입력 및 성공똑같이 테이블이 생성되지 않는 문제가 발생한 다른 수강생 분의 질문 글https://www.inflearn.com/course/lecture?courseSlug=%EB%85%B8%EB%93%9C%EB%B2%84%EB%93%9C-%EB%A6%AC%EC%95%A1%ED%8A%B8-%EB%A6%AC%EB%89%B4%EC%96%BC&unitId=49016&category=questionDetail&tab=community&q=685995문제를 해결하기 위해 다른 방법을 찾던 중 같은 문제가 발생한 분을 찾았습니다!위 글에서 제로초 님께서는 테이블만 따로 재생성 하라고 하셨습니다.구글링 해보니 table을 만들기 위해서는 각 컬럼을 정의하는스키마를 작성하여 table을 만드는 방법이 많았습니다.강의에서는 나오지 않은 방법이라 함부로 시도하진 않았습니다...어떻게 하면 다시 table만 따로 생성할 수 있을까요?질문 글 읽어주셔서 감사합니다!

SSR 확인 중에 발견했는데, 게시글이 보이지 않는 오류가 발생해서 질문 드립니다. nest-prisma 쪽 터미널에도 오류가 따로 찍히는게 없어서혹시나해서 선생님 코드 복붙도 해봤는데 해결이 안되네요..