안녕하세요! 좋은 Next.js 강의 덕분에 열심히 배워나가고 있는 학생입니다. 😀다름이 아니라 revalidateTag를 사용했을 때, 첫 번째 인수로 전달한 태그 값을 가지는 데이터 캐시가 재검증된다고 이해했는데요!제가 revalidateTag의 인수와 data fetch에 사용되는 옵션의 태그 값을 다르게 세팅해봤는데도 갱신이 되어서요. 제가 잘못 이해한 걸까요..?? 이 부분이 이상해서 질문 남깁니다.아래는 제가 작성한 코드입니다! createReviewActionexport async function createReviewAction(formData: FormData) { const bookId = formData.get('bookId')?.toString(); const content = formData.get('content')?.toString(); const author = formData.get('author')?.toString(); if (!bookId || !content || !author) { return; } // JSON.stringify 객체를 문자열 형태로 직렬화 해서 보내줘야 함 try { const response = await fetch( `${process.env.NEXT_PUBLIC_API_SERVER_URL}/review`, { method: 'POST', body: JSON.stringify({ bookId, content, author }), }, ); revalidateTag(`revew-${bookId}`); // 일부로 오타 냄 } catch (error) { console.error(error); return; } } ReviewList 컴포넌트async function ReviewList({ bookId }: { bookId: string }) { const response = await fetch( `${process.env.NEXT_PUBLIC_API_SERVER_URL}/review/book/${bookId}`, { next: { tags: [`review-${bookId}`] } }, ); if (!response.ok) { throw new Error(`Review fetch faild: ${response.statusText}`); } const reviews: ReviewData[] = await response.json(); return ( <section> {reviews.map((review) => ( <ReviewItem key={`review-item-${review.id}`} {...review} /> ))} </section> ); } 

안녕하세요 강의를 구매 후 듣다가 일이 생겨서 오랜만에 다시 공부하려고 하는데 커리큘럼을 다시 보니 처음에 html, css 강의 순서대로 나오다가 js가 나오고 또 섹션04부분에서 다시 css가 나오고 또 js가 나오더라구요 그래서 이 부분이 헷갈리는데 그냥 처음부터 순서대로 강의를 들으면 될까요?

안녕하세요 react-navie 강의중 18강 보고 있는데요 svg 잘 설치 되어있고, 이미지도 잘 넣었는데 저는 이미지 스타일 편집하는게 안보이고 svg 파일 클릭을 하면 svg 파일 모양만 보이고 있어서 svg 테스트시 화면에 이미지 너무 크게 보입니다. 툴에서 어떻게 설정하면 svg 스타일이 보일까요?

Notion에 있는 코드말고, Github Repository는 따로 없나요?

안녕하세요! 지금까지 수업을 윈도우 노트북으로 듣고 있었습니다. 그런데 노트북에 문제가 생겨 새로운 노트북으로 구매 후 파일을 옮기려고 하는데 이번에 구매한 노트북 운영체제 맥os입니다. 간편하게 옮기고 빠르게 실행 할 수 있는 방법이 있을까요?? 일단 node, npm, yarn까지 다운 받은 상태 입니다.

현재 2주 free같은데claude3.5 3.7 4 등등 모든 버전에서 코드짜는게 안되고 Anthropic's latest models are currently only available to paid users. Please upgrade to a paid plan to use these models.(Request ID: aec9ae0d-5eb4-4514-a54e-478383ef2f0a)라고 뜹니다.Free users can only use GPT 4.1 or Auto as premium models(Request ID: 849c6230-8e63-4751-9b03-9def2bab9e86)라고 뜰 때도 있고요 

강좌에서 언급한대로 직접 세팅하기보다는 그냥 settings/ts 폴더 클론받아서 하시는 것을 추천드립니다. 직접 세팅하기에는 버전이 자꾸 달라져서 세팅법이 바뀌고, 입문자분들한테는 버겁습니다. 폴더가 많아서 헷갈리니 back 폴더는 백엔드 용으로 남겨두시고, setting/ts 폴더를 front 폴더로 바꾼 뒤 나머지 폴더는 전부 지워버리세요. 라는 말씀에 따라다음과 같이 세팅을 했는데,alecture 폴더로 들어가 npm init 을 하라고 하시는 부분이 이해가 어렵습니다.

function create(baseURL, options) { const instance = axios.create( Object.assign({ // baseURL: baseURL, baseURL, // key 와 값이 같으면 생략 가능 }), options, ); return instance; }제가 사용한 코드입니다.(강의 내용 그대로 담았습니다. 주석 빼고 보면 강의 시 사용한 코드와 동일합니다.제가 궁금한 것은, 인터넷으로 관련 문법을 찾아 본 결과 Object.assign(A,B,C)같은 형식으로 하여, A,B,C 각각의 객체를 merge한다고 알고 있는데,강의에서는 Object.assign({baseURL}),options으로 options객체를 object.assign 함수 바깥에 위치하더라구요?이러면 아무 의미 없는 코드가 되어 버리는것 아닌가요?Object.assign({baseURL,},options)를 해야 되는거 같은데,제가 놓친 부분이 있는걸까요?(코딩이 전공이 아니라 제가 잘 모르는 걸수도 있습니다. 알려주시면 감사하겠습니다)

에러 로그는 아래와 같아요File "<frozen importlib._bootstrap_external>", line 999, in exec_module  File "<frozen importlib._bootstrap>", line 488, in callwith_frames_removed  File "/app/main.py", line 6, in <module>  from app.db.database import Base, async_engine  File "/app/app/db/database.py", line 1, in <module>  from sqlalchemy.ext.asyncio import AsyncSession, create_async_engine ModuleNotFoundError: No module named 'sqlalchemy' WARNING: WatchFiles detected changes in 'app/db/crud/user.py'. Reloading... Process SpawnProcess-2: Traceback (most recent call last):  File "/usr/local/lib/python3.12/multiprocessing/process.py", line 314, in _bootstrap self.run()  File "/usr/local/lib/python3.12/multiprocessing/process.py", line 108, in run  self._target(*self._args, **self._kwargs)  File "/usr/local/lib/python3.12/site-packages/uvicorn/_subprocess.py", line 80, in subprocess_started  target(sockets=sockets)  File "/usr/local/lib/python3.12/site-packages/uvicorn/server.py", line 67, in run  return asyncio.run(self.serve(sockets=sockets))  ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^  File "/usr/local/lib/python3.12/asyncio/runners.py", line 195, in run  return runner.run(main)  ^^^^^^^^^^^^^^^^  File "/usr/local/lib/python3.12/asyncio/runners.py", line 118, in run  return self._loop.run_until_complete(task)  ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^  File "uvloop/loop.pyx", line 1518, in uvloop.loop.Loop.run_until_complete  File "/usr/local/lib/python3.12/site-packages/uvicorn/server.py", line 71, in serve  await self._serve(sockets)  File "/usr/local/lib/python3.12/site-packages/uvicorn/server.py", line 78, in _serve  config.load()  File "/usr/local/lib/python3.12/site-packages/uvicorn/config.py", line 436, in load  self.loaded_app = import_from_string(self.app)  ^^^^^^^^^^^^^^^^^^^^^^^^^^^^  File "/usr/local/lib/python3.12/site-packages/uvicorn/importer.py", line 22, in import_from_string  raise exc from None  File "/usr/local/lib/python3.12/site-packages/uvicorn/importer.py", line 19, in import_from_string  module = importlib.import_module(module_str)  ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^  File "/usr/local/lib/python3.12/importlib/__init__.py", line 90, in import_module  return bootstrap.gcd_import(name[level:], package, level)  ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^  File "<frozen importlib._bootstrap>", line 1387, in gcdimport  File "<frozen importlib._bootstrap>", line 1360, in findand_load  File "<frozen importlib._bootstrap>", line 1331, in findand_load_unlocked  File "<frozen importlib._bootstrap>", line 935, in loadunlocked  File "<frozen importlib._bootstrap_external>", line 999, in exec_module  File "<frozen importlib._bootstrap>", line 488, in callwith_frames_removed  File "/app/main.py", line 6, in <module>  from app.db.database import Base, async_engine  File "/app/app/db/database.py", line 1, in <module>  from sqlalchemy.ext.asyncio import AsyncSession, create_async_engine ModuleNotFoundError: No module named 'sqlalchemy'  위 에러 때문인지 코드에서 아래 에러? 도 뜨네요 uvicorn main:app --reload도 당연 에러 뜨구요..어떤 부분을 확인하면 될까요? ㅠ  

next.js에서 제공하는 Request Memoization 기능은 같은 엔드포인트 경로로 여러 개의 요청이 들어왔을 때 하나의 요청으로 캐싱해주는걸로 알고있습니다. 이와 관련해서 3가지 궁금증이 있습니다.  Request Memoization 기능은 같은 페이지 한정인가요. 아님 프로젝트 전역에 적용되는걸까요?? 예를 들어 /dashboard 와 /home 두 페이지 모두에서 getUserInfo 라는 fetch 함수를 호출한다면 이 경우도 Request Memoization 이 적용되는건가요.만약 같은 엔드포인트지만 넘겨주는 파라미터가 다를 경우도 Request Memoization이 적용되나요?axios를 사용한다면 Request Memoization 기능을 활용할 수 없는걸로 알고있는데 react에서 제공하는 cache 함수를 사용하면 동일한 효과를 기대할 수 있나요?  감사합니다!!

next.js에서 제공하는 Request Memoization 기능은 같은 엔드포인트 경로로 여러 개의 요청이 들어왔을 때 하나의 요청으로 캐싱해주는걸로 알고있습니다. 이와 관련해서 3가지 궁금증이 있습니다.  Request Memoization 기능은 같은 페이지 한정인가요. 아님 프로젝트 전역에 적용되는걸까요?? 예를 들어 /dashboard 와 /home 두 페이지 모두에서 getUserInfo 라는 fetch 함수를 호출한다면 이 경우도 Request Memoization 이 적용되는건가요.만약 같은 엔드포인트지만 넘겨주는 파라미터가 다를 경우도 Request Memoization이 적용되나요?axios를 사용한다면 Request Memoization 기능을 활용할 수 없는걸로 알고있는데 react에서 제공하는 cache 함수를 사용하면 동일한 효과를 기대할 수 있나요?  감사합니다!!

안녕하세요..아래와 같이 에러가뜨는데요;; code: 'MODULE_NOT_FOUND', requireStack: [ '/Users/sungwon/Desktop/Project/Web/company_website/backend/index.js' ]}Node.js v24.4.0[nodemon] app crashed - waiting for file changes before starting....backend > index.js코드 입니다.require("dotenv").config(); const express = require("express"); const mongoose = require("mongoose"); const cookieParser = require("cookie-parser"); const cors = require("cors"); const app = express(); const PORT = 3000; const userRoutes = require("./routes/user"); app.use(express.json()) app.use(express.urlencoded()) app.use(cookieParser()); app.use(cors({ origin: "*", credentials: true, })); app.use("/api/auth", userRoutes); app.get("/", (req, res) => { res.send("Hello world"); }); app.get("/api/check-ip", (req, res) => { const clientIP = req.ip || req.connection.remoteAddress; const blacklistedIPs = JSON.parse(process.env.IP_BLACKLIST || '[]'); console.log("Client IP:", clientIP); console.log("Blacklisted IPs:", blacklistedIPs); if (blacklistedIPs.includes(clientIP)) { return res.status(403).json({ allowed: false, message: "Access denied - IP is blacklisted" }); } res.json({ allowed: true }); }); mongoose .connect(process.env.MONGO_URI) .then(() => console.log("MongoDB와 연결이 되었습니다.")) .catch((error) => console.log("MongoDB와 연결에 실패했습니다: ", error)); app.listen(PORT, () => { console.log("Server is running"); });

social 유저는 기존 회원보다 위험한 유저이므로 회원 정보 수정 페이지로 이동시켜야 한다 라고 하셨는데 이유가 뭔가요??

//app\login.tsx import { initializeKakaoSDK, getKeyHashAndroid } from "@react-native-kakao/core"; const onKakaoLogin = async()=>{ console.log(await getKeyHashAndroid()); try{ const result = await kakaoLogin(); // 로그인 완료될 때까지 대기 console.log("로그인 결과:", result); } catch (error) { console.error("로그인 실패:", error); } };코드를 이렇게 작성해서 콘솔창에 출력된 키 해시를 kakao dev 홈페이지에도 등록했습니다.이 화면까지는 잘 뜨는데, accept and continue를 눌러도 다시 앱으로 돌아가지도 않고 콘솔창에도 access token과 같은 로그인 여부 로그가 안뜹니다..

lean-canvas 프로젝트 생성부터 react-router-dom 설치하기까지 중간중간 보이는 package.json 을 보고 전부 버전을 맞췄는데,react-router 를 통해 home 에서 about, contact 가는 그게 전혀 작동하지 않습니다. 버전에 맞춰서 새로 영상을 찍어주시거나 가능할까요?버전을 맞춰도, 작동이 안돼서 어렵네요.. ㅠㅠ아래는 영상의 package.json 을 보고 버전을 맞춘 코드 입니다.{ "name": "lean-canvas-make-downversion", "private": true, "version": "0.0.0", "type": "module", "scripts": { "dev": "vite", "build": "vite build", "lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0", "lint:fix": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0 --fix", "preview": "vite preview", "format": "prettier --write --cache ." }, "dependencies": { "react": "^18.3.1", "react-dom": "^18.3.1", "react-router-dom": "^6.25.1", "styled-components": "^6.1.12" }, "devDependencies": { "@types/react": "^18.3.3", "@types/react-dom": "^18.3.0", "@vitejs/plugin-react-swc": "^3.5.0", "eslint": "^8.57.0", "eslint-config-prettier": "^10.1.8", "eslint-plugin-react": "^7.34.3", "eslint-plugin-react-hooks": "^4.6.2", "eslint-plugin-react-refresh": "^0.4.7", "prettier": "3.6.2", "vite": "^5.3.4" } }

제목과 같이 npm i react-router-dom@6.25.1로 해서 package.json 에도 "react-router-dom": "^6.25.1", 라고 뜨는데,레이아웃을 만들수가 없습니다 ㅠㅠ처음의 App 컴포넌트는 나오는데, home, about, contact 가 그 밑에 나와야 하는데 나오질 않습니다. ㅠㅠㅠ

react router 사이트에서 최신 스펙에 대한 튜토리얼을 보면, framework mode, data mode, declarative mode 3가지로 나뉘어 있습니다.여기서 이 3가지 방식은 각각의 tutorial 에서 보여주는 install하는 방법도 다르고, 그 안에서 route 생성하고 layout 만드는것도 코드 방식이 다 갈리는 것 같습니다. 제가 react router 강의를 거의 시작하지 못한 상태이고, 자세히 몰라서 확실하게 말을 할순 없지만,router 를 만드는 방식을 보면, 강좌의 버전과 지금 현재 버전은 달라도,data mode의 튜토리얼에서 설명하는 코드 방식이 강좌와 매우 비슷한것 같습니다.ex) import {createBrowserRouter, RouterProvider} from 'react-router-dom' 으로 시작하는 것이 똑같습니다. 이 3가지 모드는 뭐가 다른건가요? 강좌에서 나온 홈페이지에서도 이런 형식은 아니었던것 같은데 혼란스럽습니다.일단 저는 npm i react-router-dom 으로 설치했고, 강좌에 나온 코드를 일단 따라가고는 있는데, 최신스펙과 차이를 어떻게 받아들여야 할지 모르겠습니다. 예를 들어, 최신 스펙에서는 설치코드부터 'npm i react-router'로 뒤에 '-dom'이 붙지 않습니다.그럼에도 router생성 과정에서 import {createBrowserRouter, RouterProvider} from 'react-router-dom' 과 같이 코드가 거의 똑같은데 어떻게 받아들어야 하나요?혹시 강사님은 최신스펙의 react router를 사용하시나요? 그렇다면 강좌에 나온 코드 그대로 최신스펙에서 가져다 써도 문제가 없는지 알 수 있을까요?(경험이 있으시다면, 변경된점에 대해도 알고 계실것 같아서요) 

그랩님, 강의 잘 듣고 있습니다.다름이 아니라, 상품 상세 페이지 에러와 의문점이 있어서 어떻게 해결해야 하는지 궁금한 사항이 있어 질문 드리게 되었습니다.일단 src/main/index.js 소스 코드를 첨부합니다.import './index.css'; import axios from "axios"; import React from 'react'; import {Link} from 'react-router-dom'; function MainPage(){ const [products, setProducts]=React.useState([]); React.useEffect( function(){ axios.get("제 mock 서버 주소 넣었습니다/products") .then(function(result){ const products=result.data.products; setProducts(products); }).catch(function(error){ console.error("에러 발생:",error); }); },[]); return ( <div> <div id="header"> <div id="header-area"> <img src="../images/icons/logo.png" /> </div> </div> <div id="body"> <div id="banner"> <img src="../images/banners/banner1.png" /> </div> <h1>판매되는 상품들</h1> <div id="product-list"> { products.map(function(product, index){ return ( <div className="product-card"> <Link className="product-link" to={`/products/${product.id}`}> <div> <img className="product-img" src={product.imageUrl} /> </div> <div className="product-contents"> <span className="product-name">{product.name} </span> <span className="product-price">{product.price}원 </span> <div className="product-seller"> <img className="product-avatar" src="../images/icons/avatar.png" /> <span>{product.seller}</span> </div> </div> </Link> </div> ); }) } </div> </div> <div id="footer"></div> </div> ); } export default MainPage;2.src/product/index.js 소스 첨부합니다.import {useParams} from 'react-router-dom'; import axios from "axios"; import { useEffect, useState } from 'react'; function ProductPage(){ // const params=useParams(); const {id} = useParams(); const [product, setProduct] = useState(null); useEffect(function(){ axios.get('제 mock 서버 주소 넣었습니다/products/${id}' ) .then(function (result) { setProduct(result.data); // console.log(result); }).catch(function(error){ console.error(error); } ); },[]); console.log(product); // console.log(params); return <h1>상품 상세 페이지 {id} 상품</h1>; } export default ProductPage;-->여기서부터 의문점과 문제점이 발생하게 되니 읽어주시고 해결할 수 있는 방법을 알려주시면 좋겠습니다. 위 소스에서axios.get('제 mock 서버 주소 넣었습니다/products/${id}') 처럼 소스를 달러 중괄호 아이디 입력하면, 아래와 같은 첨부 사진처럼 에러가 납니다. --> 위 에러 첨부 사진은 어떻게 해결해야 할까요?3. 하지만, 위 소스대로 입력 안하면 axios.get('제 mock 서버 주소 넣었습니다/products/1') 하면 제대로 데이터를 오류 없이 아래 첨부 사진처럼 받아 오는 것을 알 수 있습니다. 3-1. 그랩님, 강의 소스에서 처럼 axios.get('제 mock 서버 주소 넣었습니다/products/${id}')해서 하면 위 첨부 사진 처럼 에러가 나는데요, 성공적으로 오류 없이 불러오고 싶은데요, 어떻게 해야 하나요?  단계별로 어떻게 소스를 수정해야하는지 알려주시면 좋겠습니다.확인하시면 답변 부탁 드립니다.

7:27 시점에서, 터미널에서 선생님은,,eyJhbGcioiJOUzI1N,......주소명이 뜹니다만,,,저의 경우, 아래와 같이 몽고DB에 연결이 되었습니다만 뜹니다.... 이 경우 어떻게 해야할가요... [nodemon] starting node index.js[dotenv@17.2.1] injecting env (2) from .env -- tip: 🔐 prevent committing .env to code: https://dotenvx.com/precommitServer is runningMongoDB와 연결이 되었습니다.[nodemon] restarting due to changes...[nodemon] starting node index.js[nodemon] restarting due to changes...[nodemon] starting node index.js[dotenv@17.2.1] injecting env (2) from .env -- tip: ⚙ suppress all logs with { quiet: true }Server is runningMongoDB와 연결이 되었습니다.  아래는 routes폴더에 있는 user.jsconst express = require("express"); const router = express.Router(); const bcrypt = require("bcrypt"); const User = require("../models/User"); const axios = require("axios"); const jwt = require("jsonwebtoken"); router.post("/signup", async (req, res) => { try { const { username, password } = req.body; const existingUser = await User.findOne({ username }); if (existingUser) { return res.status(400).json({ message: "이미 존재하는 사용자입니다." }); } const hashedPassword = await bcrypt.hash(password, 10); const user = new User({ username, password: hashedPassword, }); await user.save(); res.status(201).json({ message: "회원가입이 완료되었습니다." }); } catch (error) { res.status(500).json({ message: "서버 오류가 발생했습니다." }); console.log(error); } }); router.post("/login", async (req, res) => { try { const { username, password } = req.body; const user = await User.findOne({ username }).select("+password"); if(!user) { return res.status("401").json({message: "사용자를 찾을 수 없습니다."}); } if(!user.isActive){ return res .status(401) .json({ message: "비활성화된 계정입니다. 관리자에게 문의 주세요."}); } if(user.isLoggedIn){ return res .status(401) .json({message: "이미 다른 기기에서 로그인되어 있습니다."}); } const isValidPassword = await bcrypt.compare(password, user.password); if(!isValidPassword){ user.failedLoginAttempts += 1; user.lastLoginAttempt = new Date(); if(user.failedLoginAttempts >= 5){ user.isActive = false; await user.save(); return res.status(401).json({ message: "비밀번호를 5회이상 틀려 계정이 비활성화되었습니다.", }); } await user.save(); return res.status(401).json({ message: "비밀번호가 일치하지 않습니다.", remainingAttempts: 5 - user.failedLoginAttempts, }); } user.failedLoginAttempts = 0; user.lastLoginAttempt = new Date(); user.isLoggedIn = true; try { const response = await axios.get("https://api.ipify.org?format=json"); const ipAddress = response.data.ip; user.ipAddress = ipAddress; } catch (ipError) { console.error("IP 주소를 가져오는 중 오류 발생:", ipError.message); } await user.save(); const token = jwt.sign( { userId: user._id, username: user.username }, process.env.JWT_SECRET, { expiresIn: "24h" } ); res.cookie("token", token, { httpOnly: true, secure: "production", sameSite: "strict", maxAge: 24 * 60 * 60 * 1000, }); const userWithoutPassword = user.toObject(); delete userWithoutPassword.password; res.json({ user: userWithoutPassword }); } catch (error) { console.error("서버 오류:", error.message); res.status(500).json({ message: "서버 오류가 발생했습니다." }); } }); router.post("/logout", async (req, res) => { try { const token = req.cookies.token; if (!token) { return res.status(400).json({ message: "이미 로그아웃된 상태입니다." }); } try { const decoded = jwt.verify(token, process.env.JWT_SECRET); const user = await User.findById(decoded.userId); if (user) { user.isLoggedIn = false; await user.save(); } } catch (error) { console.log("토큰 검증 오류: ", error.message); } res.clearCookie("token", { httpOnly: true, secure: "production", sameSite: "strict", }); res.json({ message: "로그아웃되었습니다." }); } catch (error) { console.log("로그아웃 오류: ", error.message); res.status(500).json({ message: "서버 오류가 발생했습니다." }); } }); router.delete("/delete/:userId", async (req, res) => { try { const user = await User.findByIdAndDelete(req.params.userId); if (!user) { return res.status(404).json({ message: "사용자를 찾을 수 없습니다." }); } res.json({ message: "사용자가 성공적으로 삭제되었습니다." }); } catch (error) { res.status(500).json({ message: "서버 오류가 발생했습니다." }); } }); module.exports = router;  env.에 표기한 부분MONGO_URI=mongodb+srv://sungwon5623:cho121101!@sungwon.oirqw5d.mongodb.net/?retryWrites=true&w=majority&appName=Sungwon JWT_SECRET=c21b6ba5372fa2b8 models폴더에 있는 User.jsconst mongoose = require("mongoose"); const userSchema = new mongoose.Schema( { username: { type: String, required: true, trim: true, minlength: 2, maxlength: 30, }, password: { type: String, required: true, select: false, }, isLoggedIn: { type: Boolean, default: false, }, isActive: { type: Boolean, default: true, }, failedLoginAttempts: { type: Number, default: 0, }, lastLoginAttempt: { type: Date, }, ipAddress: { type: String, trim: true, }, createdAt: { type: Date, default: Date.now, }, }, { timestamps: true, } ); const User = mongoose.model("User", userSchema); module.exports = User;

73강 7분 50초 내용입니다. 투두리스트 프로젝트의 List.jsx에서 TodoItem.jsx로 prop을 넘길 때 강의에서는todos.map((todo) => {return (<TodoItem key={todo.id} {...todo} />;}위 처럼 작성하고 있습니다. 저는 props를 spread syntax가 아닌 객체 자체로 한 번에 전달해보려고 아래와 같이 작성했습니다.todos.map((todo) => {return <TodoItem key={todo.id} todo={todo} />;}그런데 이렇게 작성하면 다음과 같은 에러가 발생합니다: Each child in a list should have a unique "key" prop. todos 배열의 각 요소에는 고유한 id가 있다는 것을 확인했고, 동일한 코드에서 todo={todo}를 {...todo}로 변경하면 경고 없이 정상적으로 동작합니다. 저는 단순히 {...todo}는 객체 속성을 각각 개별 props로 넘기고, {todo}는 하나의 객체로 넘기는 차이만 있다고 생각했는데, 이 두 방식의 어떤 차이로 인해 이런 경고가 발생하는지 궁금합니다.