loginForm 컴포넌트에서 로그인시 '/' path로 보내려고 하는데 위와같은 오류가 뜨면서 진행대지 않습니다. baseUrl 찾아보니 default 값이 localhost:3000으로 설정된걸 확인했습니다. 진짜 이리저리 찾아봤는데도 해결방법을 찾아볼수없어서 문의드립니다.구글링한 방법중에 await 말고 then catch로 하면 댄다는글도 봐서 해봤는데도 오류가 그대로 나왔습니다.서버랑 문제없이 잘됩니다.

page.module.css 가 깃허브에 없어요 제가 설치한 page.module.css와 다소 달라서 복붙할려고 했떠니 제로초님 깃허브에는layout.module.css 가 있네요일단 css적용이 안되지만 진행해보겠습니다!

다른 수강생분들에게도 문제 해결에 도움을 줄 수 있도록 좋은 질문을 남겨봅시다 :) 1. 질문은 문제 상황을 최대한 표현해주세요.2. 구체적이고 최대한 맥락을 알려줄 수 있도록 질문을 남겨 주실수록 좋습니다. 그렇지 않으면 답변을 얻는데 시간이 오래걸릴 수 있습니다 ㅠㅠex) A라는 상황에서 B라는 문제가 있었고 이에 C라는 시도를 해봤는데 되지 않았다!3. 먼저 유사한 질문이 있었는지 꼭 검색해주세요!     강의에 사용하시는 노션 링크가 영상 하단에 있다고 커뮤니티에서 찾아보았는데, 아무리 찾아도 없어서, 혹시 어디서 찾아볼수있을까요?

zLogo 가 변수 명으로 보이는데 변수 링크 없이 어떻게 단독 사용한건가요? <Image src={zLogo} > 이부분이 잘 이해가 안가는데const zLogo = 'path/zLogo.png' 이런식으로 변수명도 없이 어떻게 저렇게 쓰인건지 찾아봐도 특별히 확인이 안되는데 궁금합니다! zLogo / 이것이 public 폴더 안에 있는 zLogo.png 파일 맞을까요?

안녕하세요, 강의 구매 후 오늘부터 강의 시작했는데올려주신 깃헙 레포에서 확인한 소스코드는 jest, cypress 테스트 환경에 필요한 소스코드가 모두 작성되어 있어서, 만일 강의를 보며 직접 작성을 해보고 싶은 경우에는 어떻게 해야하는지 모르겠습니다. 해당 프로젝트에 있는 파일의 내용을 주석 처리하고 작성 및 테스트를 해봐야 하는건가요?혹은 강의 내용으로 전체적인 흐름을 보면서, 제가 다시 복습하는 의미로 해당 프로젝트 소스 코드를 봐야하는건가요? 

기존에는 UseQueries 를 이런식으로 사용하였는데,const results = useQueries({ queries: [ { queryKey: ['users', id], queryFn: fetchUsers }, { queryKey: ['teams', id], queryFn: fetchTeams }, { queryKey: ['projects', id], queryFn: fetchProjects }, ], });현재 공식문서 v5에서는 이런식으로 사용하는걸 봤는데 이러면 queryKey 값이 ['post', id], 로 고정되는거같은데 Key값을 다 다르게 넣을수가 있는건가요? 그리고 보면 하나의 fetchPost 함수로 요청이 들어가는데 api를 병렬요청으로 3개를 가져와야하는데 저런식으로 맵으로 돌아가면 어떻게 각각의 key값을 설정하고 쿼리요청 함수 fetchUsers,fetchTeams,fetchProjects 를 모두 전달할수있는지 이해가 안가서 질문드립니다.  const ids = [1,2,3] const results = useQueries({ queries: ids.map(id => ( { queryKey: ['post', id], queryFn: () => fetchPost(id), staleTime: Infinity }, )), }) 현재도 아래 방식으로 사용 가능하다면 useQueries의 타입들은 제네릭으로 설정되는걸까요?키의 개수가 서로다르다면 또 [_1: string] 이런부분이 달라질텐데 기준을 어떻게 잡고 가야하는지 아직 이해를 못한것같습니다. const results = useQueries({ queries: [ { queryKey: ['users', id], queryFn: fetchUsers }, { queryKey: ['teams', id], queryFn: fetchTeams }, { queryKey: ['projects', id], queryFn: fetchProjects }, ], });const { data, error } = useQuery<IPost[], Object,IPost[], [_1: string, 2: string, 3: string] > const results = useQueries<T[], Object, T[],[?] ({ queries: [ { queryKey: ['users', id], queryFn: fetchUsers }, { queryKey: ['teams', id], queryFn: fetchTeams }, { queryKey: ['projects', id, searchParams], queryFn: fetchProjects }, ], });

callback문법이 적용이 안되서 바꿔 성공했는데 좋은 코드인지는 모르겠습니다 참고 하실분은 참고해주세요app.post("/api/users/login", async (req, res) => { try { // 같은 이메일의 유저가 있는지 확인 const user = await User.findOne({ email: req.body.email }); if (!user) { return res.json({ loginSuccess: false, message: "제공된 이메일에 해당하는 유저가 없습니다.", }); } // 비밀번호 확인 const isMatch = await user.comparePassword(req.body.password); if (!isMatch) { return res.json({ loginSuccess: false, message: "비밀번호가 틀렸습니다.", }); } // 토큰 쿠키에 저장 const userdata = await user.generateToken(); // 토큰을 저장한다. 어디에? 쿠키, 로컬스토리지 res .cookie("x_auth", userdata.token) .status(200) .json({ loginSuccess: true, userId: userdata._id }); } catch (err) { return res.status(400).send(err); } }); userSchema.methods.comparePassword = function (plainPassword) { // plainpassword와 db에 암호화된 비밀번호가 같은지 확인 const result = bcrypt.compare(plainPassword, this.password); return result; }; userSchema.methods.generateToken = async function (cb) { var user = this; // jsonwebtoken을 이용해서 token을 생성하기 var token = jwt.sign(user._id.toHexString(), "secretToken"); // user._id(db의 _id) + secreToken = token // token으로 user를 판별할 수 있다. // user.token = token; user.token = token; try { const savedUser = await user.save(); return user; } catch (err) { return err; } };

안녕하세요 먼저 훌륭한 강의 감사합니다 다름이 아니라 제가 테스트 코드작성중에 log. 이 인식이 안되는 상황이어서요... 구글링해도 문제점을 잘 모르겠습니다 ㅠㅠ gradle 입니다

안녕하세요테스트 강의 내주셔서 감사합니다! 실제로 프론트 테스트 코드를 작성해본 적이 없어서 재밌고 유익하네요.질문은 단위테스트 설명하는 부분의 예제 코드 관련입니다.2.1장에서 단위테스트 예제로 보여주신 내용은 "ClassName props으로 설정한 css class 가 적용된다"인데요앞장인 1장에서 설명한 내용인 "유의미한 테스트 혹은 인터페이스를 기준으로 작성한다" 와 맞지 않는 것 같아서요..AAA패턴을 보여주기 위한 예시 코드정도로 생각하면 될까요. 

SignupModal 작성 부분인데요,submit 코드 내에 if (!formData.get('name')) { return { message: 'no_name' } }과 같이 폼데이터에 대한 유효성 검증을 해주라고 하셨는데, 이미 input내에 required를 선언해주었으니 따로 처리할 필요가 없는게 아닌가요?

영상 제목 : SSR 적용 여부 판단 기준해당 영상에서 각 페이지마다 새로고침해서 SSR적용 여부를 확인하는 방법을 알려주셨습니다.페이지 이동이 아닌 새로고침을 해야하는 이유가 어떤 원리 때문인지 궁금합니다 😊 

Failed to load resource: the server responded with a status of 403 () 이런 에러가 뜨는데 어떻게 해결하나요ㅜ

더이상 저 문법을 지원하지 않는다고 해서 이것저것 코드 수정해 봤는데...비밀번호가 일치해도 일치한다는 메세지가 포스트맨에 나오지 않고에러도 뜨고 있습니다[에러 메세지] cb(null, isMatch); ^TypeError: cb is not a function at C:\Users\wwww\Documents\boiler-plate\models\User.js:69:5 index.js와 user.js를 첨부합니다 혹시 해결방법을 알 수 있을까요?// http://localhost:5000/ const express = require("express"); const app = express(); const port = 5000; const bodyParser = require("body-parser"); const cookieParser = require("cookie-parser"); const config = require("./config/key"); const { User } = require("./models/User"); app.use(bodyParser.urlencoded({ extended: true })); app.use(bodyParser.json()); app.use(cookieParser()); const mongoose = require("mongoose"); mongoose .connect(config.mongoURI) .then(() => console.log("MongoDB Connected...")) .catch((err) => console.log(err)); app.get("/", (req, res) => { res.send("Hello World!~~안녕 새해복"); }); app.post("/register", async (req, res) => { try { const user = new User(req.body); await user.save(); return res.status(200).json({ success: true, }); } catch (err) { return res.json({ success: false, err: err.message, }); } }); app.post("/api/users/login", async (req, res) => { try { // 요청된 이메일을 데이터베이스에서 찾기 const user = await User.findOne({ email: req.body.email }); if (!user) { return res.json({ loginSuccess: false, message: "제공된 이메일에 해당하는 유저가 없습니다.", }); } const isMatch = await user.comparePassword(req.body.password); if (!isMatch) { return res.json({ loginSuccess: false, message: "비밀번호가 틀렸습니다.", }); } // 비밀번호가 일치하면 토큰 생성 const userWithToken = await user.generateToken(); // 토큰 저장 res .cookie("x_auth", userWithToken.token) .status(200) .json({ loginSuccess: true, userId: userWithToken._id }); } catch (err) { return res.status(400).send(err); } }); app.listen(port, () => { console.log(`Example app listening on port ${port}`); }); const mongoose = require("mongoose"); // 몽구스 모듈을 가져와 몽고DB와 연결 const bcrypt = require("bcrypt"); const saltRounds = 10; const jwt = require("jsonwebtoken"); // 몽구스를 이용해 스키마 생성(필드들 작성) const userSchema = mongoose.Schema({ name: { type: String, maxlength: 50, }, email: { type: String, trim: true, unique: true, }, password: { type: String, minlength: 5, maxlength: 100, }, lastname: { type: String, maxlength: 50, }, role: { type: Number, default: 0, }, image: String, token: { type: String, }, tokenExp: { type: Number, }, }); userSchema.pre("save", function (next) { var user = this; if (user.isModified("password")) { bcrypt.genSalt(saltRounds, function (err, salt) { if (err) return next(err); bcrypt.hash(user.password, salt, function (err, hash) { if (err) return next(err); user.password = hash; next(); }); }); } else { next(); } }); // comparePassword userSchema.methods.comparePassword = function (PlainPassword, cb) { bcrypt.compare(PlainPassword, this.password, function (err, isMatch) { if (err) return cb(err); cb(null, isMatch); }); }; userSchema.methods.generateToken = function () { var user = this; return new Promise((resolve, reject) => { var token = jwt.sign(user._id.toHexString(), "secretToken"); user.token = token; user .save() .then((user) => resolve(user)) .catch((err) => reject(err)); }); }; const User = mongoose.model("User", userSchema); module.exports = { User };

NextJS의 공식 문서에 따라 styled-components를 설치하고 적용하는거에는 성공했습니다.다만 styled-components를 사용하기 위해서는 page.tsx에서도 "use client"로 사용해야지만 오류가 나지 않았는데요! 스타일링을 위해서 page를 client로 고정해야만 하는거면 서버사이드의 장점이 없어지다보니 고민이 됩니다. nextJS 14와 styled-components를 같이 사용할 때 이러한 고민을 어떻게 해결하면 좋을까요?

강사님의 깃허브의 코드를 클론해서 npm i 까지 했습니다.이후 npm run dev 나 npm run storybook dev -p 6006을 실행하면 오류가 떠서 켜지지가 않아요..ㅠ살려주세요. 초기 세팅이 잘 안되네요

현재 java 로 서버 만들어둔게 있어서 next14 연습할 겸 백엔드는 기존 서버 유지한 상태에서 next project 진행중입니다.문제사항은 제목과 같습니다1. server action 로그인 후 쿠키 세팅 없음2. 로그인 후 '/' 경로에서 어떠한 action3. 세팅된 middleware 로 인해 '/login'으로 라우팅 처리프론트 코드server: LoginForm.ts- LoginForm 컴포넌트는 서버 컴포넌트인 '/login' 페이지에서 렌더링 됩니다.- 당연히 signIn 함수는 '@/auth' 에서 가지고 왔습니다import { signIn } from '@/auth'; auth.ts- response는 임의로 설정할 수 없어, 토큰을 email과 image 에 넣어보았습니다'/' server: page.tsxserver 콘솔에는 session 출력 되고 있는데,if 문 만나면 바로 redirect 됩니다.의심스러운 부분첫 로그인페이지 렌더링 할 때 호출되는 network 탭입니다session을 호출하는 곳은 middleware, dashboard (위 페이지) 딱 2곳입니다 그런데 session 호출이 많기도 하고 전부 응답이 null 입니다middleware 에서도 session 출력 잘 되구요..애플리케이션 -> 쿠키이것 저것 시도해 보다가,오늘 하루가 다가서 이렇게 질문 드립니다 환경package.json하드웨어:  모델명: MacBook Pro  모델 식별자: Mac14,9  모델 번호: Z17G0005KKH/A  칩: Apple M2 Pro  총 코어 개수: 10(6 성능 및 4 효율)  메모리: 32 GB  시스템 펌웨어 버전: 10151.61.4  OS 로더 버전: 10151.61.4

https://cataas.com/undefined 로 나오는데 왜그런건가요?28강 수강하고 있는데 fetch를 사용하려고 하는데 이미지가 안나와요 ㅠㅠㅠ

제가 잘못찾는것인지...학습자료, 노션링크 위치를 찾을수가 없어요...ㅠㅠ

인터셉팅 라우트 시 app/(beforeLogin)/i 이 폴더 부분을 app/(beforeLogin)/@modal/(.)i 얘가 대체하는 것까진 알겠는데 그거랑 그때 app/layout.tsx에서 children이 기존의 app/(beforeLogin)/page.tsx 로 유지되는 것과 뭔 상관인지 모르겠습니다. 그냥 @modal쪽은 modal로 들어가기 때문에 새로 넣을 children이 없어 기존의 children 데이터를 유지하기 때문인가요?로그인 창을 띄우고 새로고침 하면 i/flow/login/page.tsx가 실행되잖아요. 이때 i/flow/login/page.tsx는 레이아웃에서 { modal }이 아닌 { chlidren }으로 들어가는 것이 맞나요?

app-index.js:32 ClientFetchError: Unexpected token '<', "<!doctype "... is not valid JSON .Read more at https://errors.authjs.dev#autherror at fetchData (client.js:39:1) at async getSession (react.js:87:1) at async __NEXTAUTH._getSession (react.js:245:1)이런 에러가 뜨고 있습니다...이전까지는 잘 동작했는데, 어느순간부터 이런 에러가 발생합니다.Next-Auth 라이브러리 문제인 것 같아서 Github Issues까지 확인해서 적용해봤는데 에러가 해결되지 않는 것 같습니다...auth.ts, middleware.ts, app/api/auth/[...nextauth]/route.ts 혹시나해서 모두 선생님 코드 복사, 붙여넣기 했고, 로그인 관련 코드도 모두 복사 붙여넣기 했는데 에러가 발생하는 것 같습니다. 로그인 시 로그인 session이 cookie에 담기긴 하나, 이것을 useSession()을 통해 값을 불러오진 못하고 있고, auth.ts에서 로그인할 때 console.log한 경우에 user 값이 제대로 찍히는 것 까진 확인했습니다.