현재 객체 localStorage저장 부분의 인강을 보다 궁금한점 있어 질문을 드립니다.const saveItemsFn = function () { const saveItems = []; for (let i = 0; i < todoList.children.length; i++) { const todoObj = { contents: todoList.children[i].querySelector("span").textContent, complete: todoList.children[i].classList.contains("complete"), }; saveItems.push(todoObj); } localStorage.setItem("saved-items", JSON.stringify(saveItems)); };현재 자바스크립트 코드 제일 마지막 부분에 saveItemsFn함수가 저장하는 부분이니 이 함수안에 localStorage.setItem을 사용해서 로컬스토리지에 저장을 하는것까지는 이해가 되었는데 저장된걸 가져오기 위해 const savedTodoList = localStorage.getItem("saved-items");localStorage.getItem을 사용하는데 여기서 첫번째로 이 코드 위치가 다시 제일 위쪽에 작성이 되었는지 궁금하고 두번째로 이 코드가 saveItemsFn 함수 안에 작성이 되지 않은 이유는 getItem이 저장하는 코드가 아니기때문에 saveItemsFn안이 아닌 따로 다시 작성이 된것인가요?

https://www.inflearn.com/questions/1268586/%EB%A1%9C%EA%B7%B8%EC%9D%B8-%EC%97%90%EB%9F%AC-%EC%A7%88%EB%AC%B8%EC%9E%85%EB%8B%88%EB%8B%A4여기에서 질문했던 로그인 관련 문제입니다.지금 현재 로그인 후 로그아웃 후 다른 아이디로 재로그인시에 로그아웃 버튼에 session정보가 제대로 안들어가는 것 같습니다.처음 로그인 했을 때 로그아웃에 session 정보가 들어가고, 로그아웃 후 다른 아이디로 재로그인시에 로그아웃버튼에 로그아웃전의 계정의 정보가 들어가 있습니다. 백엔드 서버 콘솔에는 정보가 제대로 들어가 있지만, let session = await auth(); 에서 session정보가 제대로 안 받아지는건지, 아니면 캐싱된 정보가 계속 쓰이는 건지 모르겠지만, 정보가 제대로 안들어갑니다.물론 새로고침시에 정상적으로 정보가 들어가집니다.제 프로젝트에서 문제가 있는건가 싶어서, 코드를 비교해보고 next, next-auth 버전을 바꿔보기도 했지만, 해결이 안되어서, 배포된 https://z.nodebird.com/ 링크로도 해보았는데 똑같은 버그가 있는 것 같아서 질문드립니다.무엇이 문제인지 궁금합니다. 좋은 하루 보내세요!

섹션 10에서 graphql codegen 설치하려는데요강의에서는 yarn add -D @graphql-codegen/cli을 설치하라고 하는데 지금 설치하려고 사이트에 들어가니yarn add --dev typescript @graphql-codegen/cli로 되어 있는데 같은 건가요?그냥 아래 명령어 실행해도 되나요?

선생님 안녕하세요 사이드플젝하면서다시 보고있는데, 클라이언트 사이드에서 useSession데이터가 없어서 질문 드립니다. import NextAuth from "next-auth" import Credentials from "next-auth/providers/credentials" export const { handlers, signIn, signOut, auth } = NextAuth({ pages: { signIn: '/login', newUser: '/signup', }, providers: [ Credentials({ // You can specify which fields should be submitted, by adding keys to the `credentials` object. // e.g. domain, username, password, 2FA token, etc. credentials: { id: {}, password: {}, }, authorize: async (credentials) => { console.log(credentials, '-------------------credentials'); const authResponse = await fetch(`${process.env.NEXT_PUBLIC_BASE_URL}/api/login`, { method: "POST", headers: { "Content-Type": "application/json", }, body: JSON.stringify(credentials), }) console.log(authResponse.ok, '-----------------------------authResponse.ok'); if (!authResponse.ok) { return null; } let user = await authResponse.json(); // return user object with the their profile data console.log(user, '--------------------------------'); return { id: user.id, email: user.id, name: user.nickname, image: user.image, ...user, } }, }), ], })먼저 auth.ts에서 유저 정보를 잘 받아와서 return해주는 것 확인하고,/profile/page.ts (서버클라이언트)/profile/_component/logoutButton (클라이언트 컴퍼넌트)에서 각각 세션을 확인해 봤습니다. (서버 컴포넌트)import { auth } from '@/auth'; const session = await auth(); console.log(session, '------------server side session'); if (!session?.user) { redirect('/login'); }(클라리언트 컴포넌트)'use client'; import { Button } from '@/components/ui/button'; import { useCallback } from 'react'; // client component에서만! import { signOut, useSession } from 'next-auth/react'; import { useRouter } from 'next/navigation'; export default function LogoutButton() { const router = useRouter(); const { data: me } = useSession(); const onLogout = useCallback(() => { signOut({redirect: false}).then(() => {router.replace('/')}); }, [router]); console.log(me, '------------client side session'); if (!me?.user) return null; return ( <Button className='w-full' onClick={onLogout}>로그아웃</Button> ) }결과로와같이 클라리언트 사이드에서는 데이터가 없더라구요.혹시 어떤부분을 좀 더 봐야할지 알 수 있을까요?그리고 useSession을 호출하면서Failed to load resource: the server responded with a status of 404 (Not Found)app-index.js:33 ClientFetchError: Unexpected token '<', "<!DOCTYPE "... is not valid JSON at fetchData (client.js:49:22) at async getSession (react.js:109:21) at async __NEXTAUTH._getSession (react.js:270:43)session 404가 계속나오는데 제가 잘못 호출하고있는건지 궁금합니다.   

안녕하세요 선생님강의보면서 플젝을 만들다가 여쭤보고 싶은게 생겼습니다.📦(afterLogin) ┣ 📂(home) ┃ ┗ 📂_component ┃ ┃ ┣ 📜mbtiCarousel.module.css ┃ ┃ ┗ 📜MbtiCarousel.tsx ┣ 📂@modal ┃ ┣ 📂(.)promise ┃ ┃ ┗ 📂form ┃ ┃ ┃ ┗ 📜page.tsx ┃ ┣ 📂[userId] ┃ ┃ ┣ 📂_component ┃ ┃ ┃ ┗ 📜UsrCarousel.tsx ┃ ┃ ┗ 📜page.tsx ┃ ┗ 📜default.tsx ┣ 📂like ┃ ┗ 📜page.tsx ┣ 📂messages ┃ ┗ 📜page.tsx ┣ 📂profile ┃ ┗ 📜page.tsx ┣ 📂promise ┃ ┣ 📂form ┃ ┃ ┗ 📜page.tsx ┃ ┣ 📂_component ┃ ┃ ┣ 📜PromiseFormButton.tsx ┃ ┃ ┣ 📜promiseSection.module.css ┃ ┃ ┗ 📜PromiseSection.tsx ┃ ┗ 📜page.tsx ┣ 📂recommend ┃ ┣ 📂_component ┃ ┃ ┗ 📜RecommendSection.tsx ┃ ┣ 📜page.tsx ┃ ┗ 📜recommend.module.css ┣ 📂setting ┃ ┗ 📜page.tsx ┣ 📂[userId] ┃ ┗ 📜page.tsx ┣ 📂_component ┃ ┣ 📜Back.tsx ┃ ┣ 📜FriendRecommendSection.tsx ┃ ┣ 📜MainTitle.tsx ┃ ┣ 📜MbtiRecommendSection.tsx ┃ ┣ 📜Modal.tsx ┃ ┣ 📜userCard.module.css ┃ ┣ 📜UserCard.tsx ┃ ┗ 📜UserCardArticle.tsx ┣ 📜layout.module.css ┣ 📜layout.tsx ┗ 📜page.tsx이런구조에서(afterLogin) > UserCard 를 클릭하면@modal > [userId] > page.tsx가 모달창으로 뜨게 됩니다.새로고침해도 모달창이 뜨게 되어있습니다. 이게 로컬에서는 잘 작동하는데테스트하려고 vercel에 배포해서 확인했더니 url은 바뀌는데 새로고침이 되고 화면은 바뀌지 않더라구요.구글링해도 만족스런 답변이 없어서 이렇게 글을 남깁니다.return ( // <UserCardArticle user={user}> <Card className={style.userCard}> <Link href={`/${user.id}`} scroll={false} className='w-full h-full absolute top-0 left-0'> <img src={user.image[0]} className='rounded-xl h-full block w-full' alt="img" /> <div className={style.userInfo}> <h2 className='text-white font-extrabold text-xl'>{user.mbti.mbti}, 궁합 {user.mbti.score}%</h2> <h2 className='text-white font-extrabold text-xl'>{user.nickname}, {user.age}</h2> <p className='text-white font-semibold text-base'>{user.distance}km, {user.area}</p> </div> </Link> <div className='absolute bottom-3 px-3 w-full'> <Button variant={'default'} className='bg-white hover:bg-slate-50 w-full'> <UserPlus color='#000000' /> <span className='ml-2 text-black font-extrabold'>친구신청</span> </Button> </div> </Card> // </UserCardArticle> )기존 선생님처럼 UserCardArticle이란 컴포넌트를 만들어서 router.push도 해봤다가 link태그로 고쳐봤는데도 새로고침이 되어서 어떤부분을 봐야할지 조언 듣고 싶습니다.감사합니다.  

설치가 잘못된 걸까요.. yarn dev하니 오류가 납니다ㅜ

지금 로그인 후 핸들러에서 값을 잘 주는것을 확인했고auth.ts의콘솔 부분에 값이 잘 나오는것을 확인했습니다여기서 result에서도 성공했다고 나오는데 replace가 안되네요이유가 뭘까요 

안녕하세요! 강의 잘 듣고 있습니다!이번 과제 코드 피드백 부탁드립니다!고맙습니다.<화면><html><!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <title>SignUp</title> <link rel="stylesheet" href="./final.css"> <script defer src="./final.js"></script> </head> <body> <div class="wrapper"> <div class="wrapper__header"> <span id="header__title">코드캠프 회원가입</span> </div> <div class="wrapper__body"> <div class="wrapper__text"> <input type="text" id="email" placeholder="이메일을 입력해 주세요."> <span class="errorMsg email">이메일이 올바르지 않습니다.</span> <input type="text" id="name" placeholder="이름을 입력해 주세요."> <span class="errorMsg name">이름이 올바르지 않습니다.</span> <input type="text" id="pw1" placeholder="비밀번호를 입력해 주세요."> <span class="errorMsg pw1">비밀번호를 입력해주세요.</span> <input type="text" id="pw2" placeholder="비밀번호를 다시 입력해 주세요."> <span class="errorMsg pw2">비밀번호를 입력해주세요.</span> </div> <div class="wrapper__phone" oninput="phone()"> <input type="text" id="num1" maxlength="3"> - <input type="text" id="num2" maxlength="4"> - <input type="text" id="num3" maxlength="4"> </div> <div class="wrapper__certification"> <div class="cert__number"> <span id="certNum">000000</span> <button class="chkBtn" disabled="true">인증번호 전송</button> </div> <div class="cert__time"> <span id="certTimer">3:00</span> <button class="chkBtn" disabled="true">인증완료</button> </div> </div> <div class="wrapper__select"> <div class="select__locale"> <select id="locale"> <option selected disabled>지역을 선택하세요</option> <option value="서울">서울</option> <option value="경기">경기</option> <option value="인천">인천</option> </select> <span class="errorMsg locale">지역을 선택해주세요.</span> </div> <div class="select__gender"> <label for="woman"> <input type="radio" name="gender" id="woman"> 여성 </label> <label for="man"> <input type="radio" name="gender" id="man"> 남성 </label> </div> <span class="errorMsg gender">성별을 선택해주세요.</span> </div> </div> <div class="divideLine"></div> <div class="wrapper__check"> <!-- <button class="submit" disabled="true">가입하기</button> --> <button class="submit">가입하기</button> </div> </div> </body> </html> <css>*{ box-sizing: border-box; margin: 0; } html, body{ width: 540px; } .chkBtn{ width: 120px; height: 40px; border: 1px solid #D2D2D2; border-radius: 7px; font-size: 16px; font-weight: 400; color: #0068FF; background-color: #FFF; cursor: pointer; } .chkBtn.active { width: 120px; height: 40px; border: 1px solid #D2D2D2; border-radius: 7px; font-size: 16px; font-weight: 400; background-color: #0068FF; color: #FFF; cursor: pointer; } .errorMsg{ width: 100%; color: red; font-size: 10px; display: flex; flex-direction: column; align-items: center; visibility: hidden; } .wrapper{ width: 100%; height: 100%; padding: 60px 80px; border: 1px solid #AACDFF; border-radius: 20px; box-shadow: 7px 7px 39px rgba(0, 104, 255, .25); } .wrapper__header{ width: 100%; font-size: 32px; font-weight: 700; color: #0068FF; padding-bottom: 60px; } .wrapper__body{ width: 100%; } .wrapper__text > input{ width: 100%; height: 60px; margin-top: 20px; font-size: 16px; font-weight: 400; border: 1px solid #D2D2D2; border-radius: 7px; padding: 18px; } .wrapper__phone{ width: 100%; display: flex; justify-content: space-between; align-items: center; padding: 20px 0; } .wrapper__phone > input{ width: 100px; height: 40px; border: 1px solid #D2D2D2; border-radius: 7px; } .wrapper__certification { width: 100%; display: flex; flex-direction: column; align-items: flex-end; justify-content: space-between; } #certNum, #certTimer{ color: #0068FF; font-size: 18px; padding-right: 20px; } .cert__time{ padding: 20px 0; } .wrapper__select{ width: 100%; display: flex; flex-direction: column; align-items: center; } .select__locale{ width: 100%; display: flex; flex-direction: column; justify-content: center; } #locale{ width: 100%; height: 60px; border: 1px solid #D2D2D2; border-radius: 7px; color: #797979; font-size: 16px; font-weight: 400; padding: 18px; } .select__gender{ width: 140px; display: flex; justify-content: space-between; padding-top: 30px; } .divideLine{ width: 100%; border: 1px solid #E6E6E6; margin: 20px 0; } .wrapper__check{ width: 100%; display: flex; justify-content: center; } .submit { width: 100%; height: 60px; font-size: 18px; font-weight: 400; color: #0068FF; background-color: #FFF; border: 1px solid #0068FF; border-radius: 7px; }  <js>const submit = document.querySelector('.submit'); // 가입하기 const numberChk = document.querySelector('.cert__number .chkBtn'); // 인증번호 전송 const timeChk = document.querySelector('.cert__time .chkBtn'); // 인증완료 let time = 180; // 180초, 인증 시간 let isStarted = false; // email const emailChk = () => { let email = document.getElementById('email').value; if(email.includes('@') === true){ let isEmail = email.split('@')[1].includes('.'); if(isEmail === false){ document.querySelector('.errorMsg.email').style.visibility = 'visible'; document.querySelector('.errorMsg.email').value = ''; return false; } else { document.querySelector('.errorMsg.email').style.visibility = 'hidden'; return true; } } else { document.querySelector('.errorMsg.email').style.visibility = 'visible'; document.getElementById('email').value = ''; return false; } } // name const nameChk = () => { let name = document.getElementById('name').value; if(name.length === 0){ document.querySelector('.errorMsg.name').style.visibility = 'visible'; return false; } else { document.querySelector('.errorMsg.name').style.visibility = 'hidden'; return true; } } // pw const pwChk = () => { let pw1 = document.getElementById('pw1').value; let pw2 = document.getElementById('pw2').value; if(pw1 && pw2){ if(pw1 === pw2){ document.querySelector('.errorMsg.pw1').style.visibility = 'hidden'; document.querySelector('.errorMsg.pw2').style.visibility = 'hidden'; return true; } else { document.querySelector('.errorMsg.pw1').style.visibility = 'visible'; document.querySelector('.errorMsg.pw2').style.visibility = 'visible'; document.querySelector('.errorMsg.pw1').innerHTML = '비밀번호가 일치하지 않습니다.' document.querySelector('.errorMsg.pw2').innerHTML = '비밀번호가 일치하지 않습니다.' return false; } } else { document.querySelector('.errorMsg.pw1').style.visibility = 'visible'; document.querySelector('.errorMsg.pw2').style.visibility = 'visible'; return false; } } // phone const phone = () => { let num1 = document.getElementById('num1').value; let num2 = document.getElementById('num2').value; let num3 = document.getElementById('num3').value; if(num1.length === 3) { document.getElementById('num2').focus(); if(num2.length === 4) { document.getElementById('num3').focus(); } } if(num1.length === 3 && num2.length === 4 && num3.length === 4){ numberChk.classList.add('active'); certification(); } } const certification = () => { // 인증번호 numberChk.disabled = false; numberChk.addEventListener('click', e => { let randomNumber = String(Math.trunc(Math.random() * 1000000)).padStart(6, '0') document.getElementById('certNum').innerText = randomNumber; // 타이머 if(isStarted === false){ isStarted = true; timeChk.disabled = false; let timer = setInterval(() => { if(time >= 0){ let min = Math.trunc(time / 60); let sec = String(time % 60).padStart(2,'0'); document.getElementById('certTimer').innerText = `${min}:${sec}`; time--; } else { clearTime(timer); } }, 100) timeChk.addEventListener('click', e => { if(time >= 0){ alert('인증이 완료 되었습니다.'); clearTime(timer); submit.disabled = false; } }) } }) } const clearTime = (timer) => { timeChk.classList.remove('active'); numberChk.classList.remove('active'); document.getElementById('certNum').innerText = '000000'; document.getElementById('certTimer').innerText = '0:00'; timeChk.disabled = true; numberChk.disabled = true; isStarted = false; clearInterval(timer); } const checkValidation = () => { emailChk(); nameChk(); pwChk(); if(emailChk() && nameChk() && pwChk()) { return true; } else { return false; } } // 검증 submit.addEventListener('click', e => { checkValidation(); if(checkValidation()){ alert('코드캠프 가입을 축하합니다.'); } });

자바스크립트 함수가 조금 어려운데 함수는 그냥 관련된 코드들을 작성할 때 사용하나요? 예를 들어 input으로 어떠한걸 한다면 input 함수를 만들어서 이 함수안에는 input과 관련된 코드들을 작성한다고 보면되는건가요?

다른분 질문도보고 답변도보고 수정도해보았는데 도저히 안됩니다... 폴더구조입니다. import 오류로 동영상 내용과 동일하게 ../ 를 추가 후 재 호출하면 아래와같이 나옵니다. 소스상 문제는없는것같은데.. 무엇이문제일까요..다른분질문에 AI가 라우팅문제일수있다 했는데 NEXT.CONFIG.JS에 따로 설정도없습니다.다른분질문보니 /app/(beforeLogin)/page.tsx를 넣은것은 /app/page.tsx와 같은거라고 답변이 달린것도봣는데 위 오류에서 벗어날수가없습니다..

modal이 없는 상황의 오류를 해결하기위해 제로초님이 default.tsx라는 파일을 소개해줬는데요, 그냥 layout.tsx에서 애초에 Probs를 정의할때 type Probs= modal?:reactNode로 하면 안될까요?

안녕하세요 msw patch 관련해서 여쭤보고싶은게 있습니다!제로초님 강의를 응용해서 프로젝트에 msw로 데이터들을 테스트 하고있습니다 handler에서 /users란 엔드포인트로 get요청후 데이터들을 받아온뒤 다시 수정이 필요해 patch handler를 생성했습니다. mutation을 통해서 patch 요청은 성공한거같은데 기존의 get으로 받아온 user데이터들을 수정하고 싶다면 어떻게 할수있을지 여쭤보고싶습니다 ! const mutation = useMutation({ mutationFn: async (e: FormEvent) => { e.preventDefault(); const updatedUser = { userId: product.userId, nickName: product.nickName, userFileUrl: product.userFileUrl, techStack: product.techStack, position: product.position, employmentStatus: product.employmentStatus, year: product.year, links: product.links, alarmStatus: product.alarmStatus, content: product.content, softSkill: product.softSkill, }; fetch(`${process.env.NEXT_PUBLIC_BASE_URL}/users`, { method: "PATCH", body: JSON.stringify(updatedUser), }); }, }); import { bypass, http, HttpResponse } from "msw"; import { hotPeople, peoples, users } from "./peopleData"; export const handlers = [ http.get("/peoples/hot/:tag", () => { return HttpResponse.json(hotPeople); }), http.get("/peoples", ({ request, params }) => { return HttpResponse.json(peoples); }), http.get("/users", () => { return HttpResponse.json(users); }), http.patch("/users", async ({ request }) => { return HttpResponse.text("success?"); }), ]; export default handlers;

영화 상세페이지 구현에서 className으로 modal_poster-img를 주니까 다른 곳에 있던 css가 적용되는데 위에 import하지 않아도 가능한건가요??

그리드 부분 영상에서 헷갈리는 부분이 있습니다. 그리드 강의 영상에는 밑에 이미지처럼 grid-column: 1 / 3 부분이 첫번째 라인에서 시작해서 3번라인에서 끝난다고 하는데 사이부분까지 해서 4개의 라인이 되서 grid-column: 1 / 3이 아니라 1 / 4 가 아닌가요? 혹시 몰라 노션을 보니 노션은 1 / 4라고 되어있던데 뭐가 맞는 것인지 너무 헷갈립니다.

안녕하세요 제로초님 강의를 듣던 중 궁금한 것이 있어서 여쭈어 봅니다. 강의에서는 데이터를 mutation으로 리페칭 후 if (queryClient.getQueryData(["posts", "recommends"])) { queryClient.setQueryData( ["posts", "recommends"], (prevData: { pages: Post[][] }) => { const shallow = { ...prevData, pages: [...prevData.pages], }; shallow.pages[0] = [...shallow.pages[0]]; shallow.pages[0].unshift(newPost); return shallow; } ); }이런 식으로 데이터를 업데이트 해주었는데, 이 부분을 아래와 같이 queryClient.invalidateQueries({ queryKey: ["posts", "recommends"] });이런 식으로 업데이트를 하면 어떤 차이점이 있나요 ??데이터 업데이트시 쿼리를 업데이트 하고 리페칭하는 동작은 같은 것 같은데, 강의에서와 같이 복잡한 데이터 구조를 복사 해가며 구현하는 이유가 궁금합니다.성능상의 차이가 있는 것인가요 ?? 

로그인 버튼을 클릭하면 우선 '/login' 주소로 이동했다가 'i/flow/login'으로 이동하기 때문에 이때 '/login'에서 배경이 메인 컴포넌트를 보여줘야 메인 페이지가 바탕이 되고로그인 모달 창을 띄운다는 점은 이해했습니다.따라서 app/(beforeLogin)/login/page.tsx 에서 Main 컴포넌트를 보여주도록 했습니다.export default function Login() { const router = useRouter(); router.replace("/i/flow/login"); return <Main />; } 문제는 '/i/flow/login' 에서 새로고침하면 모달 창은 그대로지만 배경은 메인 페이지가 아닙니다. 이때 아래와 코드와 같이 따로 Main 컴포넌트를 불러오면 새로고침 시, 배경은 메인 페이지로 잘 나옵니다.그런데 강의와 깃허브 코드를 보니 LoginModal 컴포넌트만 보여주고 있습니다.LoginModal 컴포넌트만 있어도 app/(beforeLogin)/page.tsx에서 Main 컴포넌트를 보여주고 있으므로app/(beforeLogin)/layout.tsx에서 Main 컴포넌트가 {children}에 할당된다고 생각했습니다.따라서 아래 코드에서 Main 컴포넌트가 없어도 배경은 메인 페이지가 나온다고 생각했습니다. 아래 코드와 같이 Main 컴포넌트가 있으면 새로고침 시, 메인 페이지가 배경이 되고 그 위에 로그인 모달창이띄워지지만 Main 컴포넌트가 없으면 새로고침 시, 메인 페이지가 빈 페이지가 나옵니다. 여기서 Main 컴포넌트를 넣어서 해결해도 되는건지 의문이 들었습니다. 아래 코드에서 Main 컴포넌트를 넣지 않으면 Main 페이지가 어떻게 배경으로 보여지는 건지 알고 싶습니다!import LoginModal from "@/app/(beforeLogin)/@modal/(.)i/flow/login/page"; import Main from "@/app/(beforeLogin)/_component/Main"; export default function Page() { return ( <> <LoginModal /> <Main /> </> ); }

커뮤니티 name을 Name1 이렇게 지었으면http://localhost:3000/r/Name1 이런식으로 바로 넘어가져서 404 page가 뜨는데요 이유가 create.tsx파일const handleSubmit = async (event: FormEvent) => { event.preventDefault(); try { const res = await axios.post("/subs", { name, title, description }); router.push(`/r/${res.data.name}`); } catch (error: any) { console.log(error); setErrors(error.response.data); } };여기서 router.push(`/r/${res.data.name}`);이 부분때문에 그런건가요? 원래 커뮤니티 등록하면 넘어가지는게 정상인가요? 강의에서는 안넘어가는걸로 보이는데...

안녕하세요 제로초님 강의 듣던 중 동작이 원하는대로 안되어서 질문 드립니다.로그인 후 로그아웃 후 다른 아이디로 로그인 해도 로그아웃 버튼에는 전 계정의 정보가 뜹니다.아래는 로그인 모달의 코드입니다."use client"; import style from "@/app/(beforelogin)/_component/login.module.css"; import { ChangeEventHandler, FormEventHandler, useState } from "react"; import { redirect, useRouter } from "next/navigation"; import { signIn } from "next-auth/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 { const response = await signIn("credentials", { username: id, password, redirect: false, }); console.log(response, "1"); router.replace("/home"); console.log("2"); } 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> ); } 아래는 로그아웃 버튼의 코드입니다. "use client"; import { useRouter } from "next/navigation"; import style from "./logoutButton.module.css"; import { signOut } from "next-auth/react"; import { Session } from "@auth/core/types"; type Props = { me: Session | null; }; export default function LogoutButton({ me }: Props) { const router = useRouter(); const onLogout = async () => { try { const response = await signOut({ redirect: false, }); console.log("signout", response); router.replace("/"); } catch (err) { console.log(err); } }; console.log("me", me); if (!me?.user) { return null; } return ( <button className={style.logOutButton} onClick={onLogout}> <div className={style.logOutUserImage}> <img src={me.user?.image as string} alt={me.user?.email as string} /> </div> <div className={style.logOutUserName}> <div>{me.user?.name}</div> <div>@{me.user?.email}</div> </div> </button> ); } 로그아웃 버튼에는 알려주신대로 레이아웃의 const session = await auth();session을 prop으로 내려주어서 사용하였습니다.처음 test 계정으로 로그인 했을 때의 콘솔을 찍어보면이렇게 test 계정이 정상적으로 나옵니다.이후 로그아웃 후에(session token 쿠키는 정상적으로 지워진 상태입니다) test4 계정으로 다시 로그인 하면이렇게 콘솔에 me 데이터가 test로 찍혀있고 test4의 정보가 로그아웃 버튼에 있습니다. 하지만 서버쪽 콘솔은 이렇게 test4로 나옵니다.이 상태에서 페이지 새로고침을 하면 정상적으로 로그아웃 버튼에는 test4의 데이터가 다시 들어가게 됩니다.로그아웃을 누를 때 세션 토큰이 정상적으로 지워지는 것을 확인했고, 재 로그인을 했는데 서버쪽에는 test4데이터가 찍히고 클라이언트 콘솔에는 test데이터가 찍히는 이유가 궁금합니다..2. 틀린 아이디 비밀번호를 입력했을 때에 제로초님과 응답이 다르게 날라옵니다.로그인 시에 틀린 아이디 비밀번호를 입력시에 저는 401에러가 아닌 이런 응답이 날라옵니다.이 부분은 에러인지 아니면 버전이 달라서 응답이 다른 것 인지는 잘 모르겠습니다. error는 credentialSignIn으로 날라오지만 ok와 status는 true에 200으로 날라오는데, 버전차이인가요 ..? next-auth 버전은 5.0.0-beta.17 입니다.

현재 next.js 를 생성시킨후, 서버 start를 시킨후, 화면을 수정하면, 화면이 리로딩되고 있지 않습니다. 계속 새로 빌드를 해야지만, 화면 소스가 바꼈을 경우, 리로딩이 되는건가요?

현재 css에서 calc부분에 대해 강의를 보고 있는데 궁금한 점이 처음부터 계산해서 한번에 값을 적으면 되지 왜 calc(100% - 70px) 이런식으로 하는지 궁금합니다.