movieTitle 값이 안나와요ㅜㅜㅜ

index.jsNotificationList.jsx에러코드 화면오타 확인도 해봤는데 아무리봐도 에러가 왜 나는지 못찼겠습니다.

그리드 부분 영상에서 헷갈리는 부분이 있습니다. 그리드 강의 영상에는 밑에 이미지처럼 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"] });이런 식으로 업데이트를 하면 어떤 차이점이 있나요 ??데이터 업데이트시 쿼리를 업데이트 하고 리페칭하는 동작은 같은 것 같은데, 강의에서와 같이 복잡한 데이터 구조를 복사 해가며 구현하는 이유가 궁금합니다.성능상의 차이가 있는 것인가요 ?? 

처음에 언어 선택할때 한국어로 선택하고 dialogFlowSessionLanguageCode: 'ko'로 선택하면 한국어 챗봇만들기도 가능하나요? 

import React from "react"; // 게시판 아래 페이징 처리 1페이지 2페이지 3페이지 <<prev page, next page>> function PageComponent({serverData, movePage}) { //serverData.prev, pageNumList, next return ( <div className='m-6 flex justify-center'> {/* 이전 데이터가 있다면 이전페이지로 이동할 수 있게끔 만드는 기능*/} {serverData.prev ? <div className='m-2 p-2 w-16 text-center font-bold text-blue-400' onClick={ () => movePage({page:serverData.prevPage} )} > Prev </div> : <></> } {/* 페이징 번호 순서대로 출력 */} {serverData.pageNumList.map(pageNum => <div key={pageNum} className={ `m-2 p-2 w-12 text-center rounded shadow-md text-white ${serverData.current === pageNum? 'bg-grev-500':'bg-blue-400'}`} onClick={ () => movePage( {page:pageNum}) }> {pageNum} </div> )} {/* 마지막 next */} {serverData.next ? <div className='m-2 p-2 w-16 text-center font-bold text-blue-400' onClick={ () => movePage( {page:serverData.nextPage} )}> Next </div> : <></> } </div> ); } export default PageComponent; 이렇게 입력을 똑같이 했는데 Prev </div> : <></> 이쪽 코드에서 아래 에러메세지가 발생을 하는데요 저만 이런건가요 ㅠ 서버쪽은 문제가 아니라고 구글링 해보니까 그러는데 여기서 뭐가 문제인지 도저히 모르겠습니다 ㅠ Uncaught TypeError: Cannot read properties of undefined (reading 'map')

로그인 버튼을 클릭하면 우선 '/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 /> </> ); }

<Book.jsx><Library.jsx><index.js>입력 후 출력 시 오류값이 나오는데 설명부탁드립니다.

장바구니 수량 변경 및 커스텀 훅 강의에서 장바구니 수량 +,- 버튼 클릭하면 장바구니의 수량이 동적으로 변경되더라구요. 그런데 저는 화면에 수량이 변경되지않네요. ajax 로 정상 처리 되고 장바구니 데이터도 정상적으로 받아 와서 새로고침 하면 수량이 변경된것을 확인은 할 수 있어요. 소스코드:React CH11 에서 코드를 비교했는데 다르지 않았습니다. 확인부탁드릴게요~

커뮤니티 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}`);이 부분때문에 그런건가요? 원래 커뮤니티 등록하면 넘어가지는게 정상인가요? 강의에서는 안넘어가는걸로 보이는데...

위 화면처럼 connect ECONNREFUSED::1:54382등 locahost에 접근할 수 없다고 나오면 cypress.config.ts에서 baseurl 설정해야합니다.(https://parkparkpark.tistory.com/186)import { defineConfig } from "cypress"; export default defineConfig({ e2e: { baseUrl: "http://localhost:3000", setupNodeEvents(on, config) { // implement node event listeners here }, }, });

안녕하세요 제로초님 강의 듣던 중 동작이 원하는대로 안되어서 질문 드립니다.로그인 후 로그아웃 후 다른 아이디로 로그인 해도 로그아웃 버튼에는 전 계정의 정보가 뜹니다.아래는 로그인 모달의 코드입니다."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 입니다.

맨 끝단인 TodoList에서 onUpdate나 onDelete를 바로 button에 달지 못하고 함수로 한번 더 감싸줘야 하는데 왜 그렇게 해야하는지 모르겠습니다. 감싸지 않고 바로 onClick={onDelete(id)}으로 달아주니 에러가 뜨더라고요

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

저장할 때밑에 코드를 쓰면 에러가 뜹니다ㅠㅠ어떻게 해결해야하나요?const initalTodoData = localStorage.getItem("todoData") ? JSON.parse(localStorage.getItem("todoData")) : []; function App() { const [todoData, setTodoData] = useState([initalTodoData]);

안녕하세요 제로초님제목처럼api호출 3초뒤로 하고, loading.tsx 파일이 있을 때 없을때 /home/page.tsx이런식으로 테스트를 해봤습니다. /home/page.tsx에서는 react-query로 ssr을 적용했고import style from './home.module.scss' import Tab from "@/app/(afterLogin)/home/_component/Tab"; import TabProvider from "@/app/(afterLogin)/home/_component/TabProvider"; import PostForm from "@/app/(afterLogin)/home/_component/PostForm"; import { HydrationBoundary, QueryClient, dehydrate } from '@tanstack/react-query'; import TabDecider from "@/app/(afterLogin)/home/_component/TabDecider"; import { getPostRecommends } from '@/app/(afterLogin)/_lib/getPostRecommends'; export default async function Home() { const queryClient = new QueryClient(); await queryClient.prefetchInfiniteQuery({ queryKey: ['posts', 'recommends'], queryFn: getPostRecommends, initialPageParam: 0, }); const dehydratedState = dehydrate(queryClient); return ( <main className={style.main}> <HydrationBoundary state={dehydratedState}> <TabProvider> <Tab /> <PostForm /> <TabDecider /> </TabProvider> </HydrationBoundary> </main> ); } /mocks/handlers.tsx에서는 postRecommends를 가져오되 3초 delay를 줬습니다.http.get('/api/postRecommends', async ({ request }) => { console.log('----------------------------------handlers /api/postRecommends'); await delay(3000); const url = new URL(request.url); const cursor = parseInt(url.searchParams.get('cursor') as string) || 0; return HttpResponse.json( [ { postId: cursor + 1, User: User[0], content: `${cursor + 1} ${faker.lorem.paragraph()}`, Images: [{ imageId: 1, link: faker.image.urlLoremFlickr({ category: 'animals' }) }], createdAt: generateDate(), }, { postId: cursor + 2, User: User[0], content: `${cursor + 2} ${faker.lorem.paragraph()}`, Images: [ { imageId: 1, link: faker.image.urlLoremFlickr({ category: 'animals' }) }, { imageId: 2, link: faker.image.urlLoremFlickr({ category: 'animals' }) }, ], createdAt: generateDate(), }, { postId: cursor + 3, User: User[0], content: `${cursor + 3} ${faker.lorem.paragraph()}`, Images: [], createdAt: generateDate(), }, { postId: cursor + 4, User: User[0], content: `${cursor + 4} ${faker.lorem.paragraph()}`, Images: [ { imageId: 1, link: faker.image.urlLoremFlickr({ category: 'animals' }) }, { imageId: 2, link: faker.image.urlLoremFlickr({ category: 'animals' }) }, { imageId: 3, link: faker.image.urlLoremFlickr({ category: 'animals' }) }, { imageId: 4, link: faker.image.urlLoremFlickr({ category: 'animals' }) }, ], createdAt: generateDate(), }, { postId: cursor + 5, User: User[0], content: `${cursor + 5} ${faker.lorem.paragraph()}`, Images: [ { imageId: 1, link: faker.image.urlLoremFlickr({ category: 'animals' }) }, { imageId: 2, link: faker.image.urlLoremFlickr({ category: 'animals' }) }, { imageId: 3, link: faker.image.urlLoremFlickr({ category: 'animals' }) }, ], createdAt: generateDate(), }, ] ); }),  이 후에 ssr화면 테스트를 위해서브라우저의 자바스크립트 사용중지 했습니다.서버도 각각 재시작하고 테스트했습니다.그리고 나서 테스트한 화면입니다.아래 화면은 loading.tsx가 업을때,아래 화면은 loading.tsx가 있을때 입니다.선생님 강의에서ssr을 적용했을때 loading화면을 포기해야한다고 이해했었습니다.prefetchInfiniteQuqery를 쓰고 loading을 포기하거나, prefetchInfiniteQuqery을 포기하고 loading을 사용하거나.그런데 제가 테스트했을때는 ssr이라도 로딩 화면이 보이는걸로 봐서 제가 테스트를 잘못한건지,loading.tsx가 있는것 자체가 suspense를 사용한것과 동일한 효과를 주어서 보여지게 되는건지여쭙고 싶습니다. 제가 잘못테스트했다면 어떻게 테스트를 해야 좀 더 정확히 구분지을 수있을지도 궁금합니다. 

[제로초 강좌 질문 필독 사항입니다]질문에는 여러분에게 도움이 되는 질문과 도움이 되지 않는 질문이 있습니다.도움이 되는 질문을 하는 방법을 알려드립니다.https://www.youtube.com/watch?v=PUKOWrOuC0c0. 숫자 0부터 시작한 이유는 1보다 더 중요한 것이기 때문입니다. 에러가 났을 때 해결을 하는 게 중요한 게 아닙니다. 왜 여러분은 해결을 못 하고 저는 해결을 하는지, 어디서 힌트를 얻은 것이고 어떻게 해결한 건지 그걸 알아가셔야 합니다. 그렇지 못한 질문은 무의미한 질문입니다.1. 에러 메시지를 올리기 전에 반드시 스스로 번역을 해야 합니다. 번역기 요즘 잘 되어 있습니다. 에러 메시지가 에러 해결 단서의 90%를 차지합니다. 한글로 번역만 해도 대부분 풀립니다. 그냥 에러메시지를 올리고(심지어 안 올리는 분도 있습니다. 저는 독심술사가 아닙니다) 해결해달라고 하시면 아무런 도움이 안 됩니다.2. 에러 메시지를 잘라서 올리지 않아야 합니다. 입문자일수록 에러메시지에서 어떤 부분이 가장 중요한 부분인지 모르실 겁니다. 그러니 통째로 올리셔야 합니다.3. 코드도 같이 올려주세요. 다만 코드 전체를 다 올리거나, 깃헙 주소만 띡 던지지는 마세요. 여러분이 "가장" 의심스럽다고 생각하는 코드를 올려주세요.4. 이 강좌를 바탕으로 여러분이 응용을 해보다가 막히는 부분, 여러 개의 선택지 중에서 조언이 필요한 부분, 제 경험이 궁금한 부분에 대한 질문은 대환영입니다. 다만 여러분의 회사 일은 질문하지 마세요.5. 강좌 하나 끝날 때마다 남의 질문들을 읽어보세요. 여러분이 곧 만나게 될 에러들입니다.6. 위에 적은 내용을 명심하지 않으시면 백날 강좌를 봐도(제 강좌가 아니더라도) 실력이 늘지 않고 그냥 코딩쇼 관람 및 한컴타자연습을 한 셈이 될 겁니다. 이렇게 오류가 뜨는데 해결이 안됩니다

안녕하세요 강의를 듣는중에 섹션 2 마지막 REST컨트롤러-수정/삭제,CORS 설정 이 부분에서 PutMapping modify 메서드에 서비스 명과 파라미터명이 위에서 코딩한거랑 다르더라구요 service가 아니라 todoservice이고 파라미터는 todoDTO가 아니라 dto 던데 제가 입력한 부분이 정확히 맞는건지 확인하기가 어려워서 코드를 볼 수 있는 첨부파일을 요청합니다!

[검색폼 1] 입력 값을 기억하기 - State 강의에서  2분 32초쯤에 <input type="text" placeholder="검색어를 입력하세요" autoFocus value={this.state.searchKeyword} />로 변환되는데 혹시 무슨 설정이나 단축키 사용하신건가요?

JavaScript 코드와 XML/HTML 코드가 결합된 JSX라는걸 어떻게 알 수 있나요? 자료형이나 변수를 통해 할 수 있는건가요?