강의 내용과 달라서 따라하기 어렵습니다... https://www.mongodb.com/ko-kr/docs/manual/tutorial/install-mongodb-on-os-x/mongoDB 매뉴얼 보고 설치를 시도했는데요 잘 설치가 된 건지 잘 모르겠습니다...

TypeError: onDelte is not a functiononDelete를 함수로 인식하지 못하고 있다고 합니다. 오탈자가 문제인건지 잘 모르겠습니다....import "./App.css"; import { useReducer, useRef, createContext } from "react"; import { Route, Routes } from "react-router-dom"; import Home from "./pages/Home"; import Diary from "./pages/Diary"; import New from "./pages/New"; import Notfound from "./pages/Notfound"; import Edit from "./pages/Edit"; // 1. "/" : 모든 일기를 조회하는 Home 페이지 // 2. "/new" : 새로운 일기를 작성하는 New 페이지 // 3. "/diary" : 일기를 상세히 조회하는 Diary 페이지 const mockData = [ { id: 1, createdDate: new Date("2024-11-04").getTime(), emotionId: 1, content: "1번 일기 내용", }, { id: 2, createdDate: new Date("2024-11-03").getTime(), emotionId: 2, content: "2번 일기 내용", }, { id: 3, createdDate: new Date("2024-10-07").getTime(), emotionId: 3, content: "3번 일기 내용", }, ]; function reducer(state, action) { switch (action.type) { case "CREATE": return [action.data, ...state]; case "UPDATE": return state.map((item) => { String(item.id) === String(action.id) ? action.data : item; }); case "DELETE": return state.filter((item) => String(item.id) !== String(action.id)); default: return state; } } export const DiaryStateContext = createContext(); export const DiaryDispatchContext = createContext(); function App() { const [data, dispatch] = useReducer(reducer, mockData); const idRef = useRef(4); //기본 일기 추가 const onCreate = (createdDate, emotionId, content) => { dispatch({ type: "CREATE", data: { id: idRef.current++, createdDate, emotionId, content, }, }); }; // 기존 일기 수정 const onUpdate = (id, createdDate, emotionId, content) => { dispatch({ type: "UPDATE", data: { id, createdDate, emotionId, content, }, }); }; // 기존 일기 삭제 const onDelete = (id) => { dispatch({ type: "DELETE", id, }); }; return ( <> <DiaryStateContext.Provider value={data}> <DiaryDispatchContext.Provider value={{ onCreate, onUpdate, onDelete }}> <Routes> <Route path="/" element={<Home />} /> <Route path="/new" element={<New />} /> <Route path="/diary/:id" element={<Diary />} /> <Route path="/edit/:id" element={<Edit />} /> <Route path="*" element={<Notfound />} /> </Routes> </DiaryDispatchContext.Provider> </DiaryStateContext.Provider> </> ); } export default App;  import Header from "../components/Header"; import Button from "../components/Button"; import Editor from "../components/Editor"; import { useParams, useNavigate } from "react-router-dom"; import { useContext } from "react"; import { DiaryDispatchContext } from "../App"; const Edit = () => { const params = useParams(); const nav = useNavigate(); const { onDelte } = useContext(DiaryDispatchContext); const onClickDelete = () => { if (window.confirm("일기를 정말 삭제할까요? 다시 복구되지 않아요!")) { //일기 삭제 로직 //console.log(params.id); onDelte(params.id); nav("/", { replace: true }); } }; return ( <div> <Header title={"일기 수정하기"} leftChild={<Button onClick={() => nav(-1)} text={"< 뒤로 가기"} />} rightChild={ <Button onClick={onClickDelete} text={"삭제하기"} type={"NEGATIVE"} /> } /> <Editor /> </div> ); }; export default Edit;  

 디버그 모드가 되는 것 같은데 이유를 모르겠습니다. 뭐라 검색해봐야할까요? 아님 제가 코드 오타가 난걸까요?이전에 components탭에서 볼 수 있던 값들이 안 보여서 질문드립니다.

(* nodejs 설치를 https://nodejs.org/en/download/ 에 들어가서 Prebuilt Installer 메뉴에서v22.11.0(LTS)를 설치하였습니다.)안녕하세요, 수고가 많으십니다.강의 잘 듣고 공부하다 모르는 부분이 있어 에러사항은 아래에 요약하여 적었습니다.일단 react 시작하기 강의를 듣고 있던 중 처음 부분에서 vscode 터미널에서 명령어 npm install -g create-react-app 입력 후 아래 에러가 발생하여어떻게 해야 해결 할 수 있는지 답을 알고 싶어서 글을 쓰게 되었습니다. 1.첫번째로 vscode 실행 후 npm install -g create-react-app 명령어 입력하니 에러 요약: 경로를 확인하라는문제가 발생하였습니다. 첫번쨰 에러 발생 한 후 vscode를 종료하고 다시 시작하니 또 다시 이번엔 새로운 에러가 발생하였습니다. 에러 요약: 자세한 내용은 마이크로소프트 링크 주소 참조하라는 메시지 에러가 발생하였습니다. 현재까지 2가지 에러가 순서대로 나타내고 있는데요, 어떻게 하면 해당 사항을 해결 할 수 있을까요? 상세하고 자세한 답변 부탁드립니다.감사합니다.

PS C:\Users\Master\inflearn\lecture-frontend-dev-env> npx eslint --initYou can also run this command directly using 'npm init @eslint/config@latest'.@eslint/create-config: v1.4.0√ How would you like to use ESLint? · problems√ What type of modules does your project use? · esm√ Which framework does your project use? · none√ Does your project use TypeScript? · javascript√ Where does your code run? · browserThe config that you've selected requires the following dependencies:eslint, globals, @eslint/js√ Would you like to install them now? · No / Yes√ Which package manager do you want to use? · npm☕Installing...npm WARN idealTree Removing dependencies.eslint in favor of devDependencies.eslintadded 2 packages, changed 1 package, and audited 799 packages in 2s111 packages are looking for funding run npm fund for details 설치가 됐는데 .eslintrc.js파일에 아무것도 안 뜨고 eslint.config.mjs파일이 설치됐어요

PS C:\Users\Master\inflearn\lecture-frontend-dev-env> npm run build> lecture-frontend-dev-env@1.0.0 build> webpack --progress70% building 0/0 modules 0 activeC:\Users\Master\inflearn\lecture-frontend-dev-env\node_modules\babel-loader\lib\cache.js:22const findCacheDirP = import("find-cache-dir");^TypeError: Invalid host defined optionsat Object.<anonymous> (C:\Users\Master\inflearn\lecture-frontend-dev-env\node_modules\babel-loader\lib\cache.js:22:23)at Module._compile (C:\Users\Master\inflearn\lecture-frontend-dev-env\node_modules\v8-compile-cache\v8-compile-cache.js:192:30)at Module._extensions..js (node:internal/modules/cjs/loader:1310:10)at Module.load (node:internal/modules/cjs/loader:1119:32)at Module._load (node:internal/modules/cjs/loader:960:12)at Module.require (node:internal/modules/cjs/loader:1143:19)at require (C:\Users\Master\inflearn\lecture-frontend-dev-env\node_modules\v8-compile-cache\v8-compile-cache.js:159:20)at Object.<anonymous> (C:\Users\Master\inflearn\lecture-frontend-dev-env\node_modules\babel-loader\lib\index.js:19:15)at Module._compile (C:\Users\Master\inflearn\lecture-frontend-dev-env\node_modules\v8-compile-cache\v8-compile-cache.js:192:30)at Module._extensions..js (node:internal/modules/cjs/loader:1310:10)at Module.load (node:internal/modules/cjs/loader:1119:32)at Module._load (node:internal/modules/cjs/loader:960:12)at Module.require (node:internal/modules/cjs/loader:1143:19)at require (C:\Users\Master\inflearn\lecture-frontend-dev-env\node_modules\v8-compile-cache\v8-compile-cache.js:159:20)at loadLoader (C:\Users\Master\inflearn\lecture-frontend-dev-env\node_modules\loader-runner\lib\loadLoader.js:18:17)at iteratePitchingLoaders (C:\Users\Master\inflearn\lecture-frontend-dev-env\node_modules\loader-runner\lib\LoaderRunner.js:169:2)at runLoaders (C:\Users\Master\inflearn\lecture-frontend-dev-env\node_modules\loader-runner\lib\LoaderRunner.js:365:2)at NormalModule.doBuild (C:\Users\Master\inflearn\lecture-frontend-dev-env\node_modules\webpack\lib\NormalModule.js:295:3)at NormalModule.build (C:\Users\Master\inflearn\lecture-frontend-dev-env\node_modules\webpack\lib\NormalModule.js:446:15)at Compilation.buildModule (C:\Users\Master\inflearn\lecture-frontend-dev-env\node_modules\webpack\lib\Compilation.js:739:10)at C:\Users\Master\inflearn\lecture-frontend-dev-env\node_modules\webpack\lib\Compilation.js:981:14at C:\Users\Master\inflearn\lecture-frontend-dev-env\node_modules\webpack\lib\NormalModuleFactory.js:409:6at C:\Users\Master\inflearn\lecture-frontend-dev-env\node_modules\webpack\lib\NormalModuleFactory.js:155:13at AsyncSeriesWaterfallHook.eval [as callAsync] (eval at create (C:\Users\Master\inflearn\lecture-frontend-dev-env\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:6:1)at C:\Users\Master\inflearn\lecture-frontend-dev-env\node_modules\webpack\lib\NormalModuleFactory.js:138:29at C:\Users\Master\inflearn\lecture-frontend-dev-env\node_modules\webpack\lib\NormalModuleFactory.js:346:9at process.processTicksAndRejections (node:internal/process/task_queues:77:11)Node.js v18.18.2

postgres 강의 중 docker compose up을 실행하면 아래와 같이 오류가 뜹니다.version: "3" services: db: image: postgres: latest container_name: postgres restart: always ports: - "5432:5432" environment: POSTGRES_USER: "${DB_USER_ID}" POSTGRES_PASSWORD: "${DB_USER_PASSWORD}" volumes: - ./data:/var/lib/postgresql/datayml 파일은 수업 그대로 위/아래와 같이 작성했는데 4번쨰 줄 postgres 부분이 인식이 안되는것 같아서 이것 때문인지... 구글링을 해봐도 해결 방법을 모르겠습니다! 

혹시 뭐가 문제 일까요..?const express = require('express'); // 내가 설치한 express 모듈을 가져온다. const app = express() // 새로운 express 앱을 만든다. const port = 5000 // 포트 const bodyParser = require('body-parser'); const {User} = require("./models/User"); // User 가져옴 //application/x-www-form-urlencoded app.use(bodyParser.urlencoded({extended:true})) // 바디 파서가 클라이언트에서 오는정보를 서버에서 분석해서 가져올수있게 하는것 //application/josn app.use(bodyParser.json()); // 애는 json타입을 분석해서 가져옴 const mongoose = require('mongoose'); mongoose.connect('mongodb+srv://jin:0000@jin.p3agn.mongodb.net/?retryWrites=true&w=majority&appName=jin',{ useNewUrlParser: true, useUnifiedTopology: true }).then(()=> console.log('MongoDB Connected...')) .catch(err => console.log(err)) app.get('/', (req, res) => { // 앱을 넣은 후에 루트디렉토리에 오면 헬로월드 실행? res.send('Hello World!') }) app.post('/register',(req,res) => { //회원 가입 할때 필요한 정보들을 클라이언트에서 가져오면 // 그것들을 데이터 베이스에 넣어준다. const user = new User(req.body) // user 정보들을 데이터베이스에 넣기위해 req.body로 작성하면됨 // req.body 에는 정보들 있음 user.save((err,userInfo)=>{ // 만약 저장을 할때 err가 있을때 클라이언트한테 json형식으로 알려줌 if(err) return res.json({success:false, err}) // err 메세지 전달 return res.status(200).json({ // status200은 성공했다는 의미 success:true }) }) // save는 몽고디비에서 오는 메서드 // req.body 정보들이 user모델에 저장이됨 }) app.post('/register', async (req, res) => { try { const user = new User(req.body); // user 정보들을 데이터베이스에 넣기위해 req.body로 작성하면됨 // req.body 에는 정보들 있음 const userInfo = await user.save(); // 만약 저장을 할때 err가 있을때 클라이언트한테 json형식으로 알려줌 res.status(200).json({ success: true, userInfo }); } catch (err) { // err 메세지 전달 res.json({ success: false, err }); } }); app.listen(port, () => { console.log(`Example app listening on port ${port}`) //앱을 포트 5000번에서 실행 })  

공통 컴포넌트 만들기 과정에서 Header left right버튼을 넣어서 수정하고 랜더링하는 과정에서 무한 대기로 빠집니다.Header를 삭제하면 랜더링이 잘 되는데, 동일하게 코드를 따라했음에도 Header를 넣으면 "캐시를 기다리는 중"이라는 문구와 함께 대기 상태로 접어듭니다원인을 잘 모르겠습니다 

부록 따라가고 있는데 그대로 소스 코드를 작성해서 실행하면 localhost에 아래와 같이 오류가 뜹니다.오류 메시지가 [id].tsx 파일에 아래와 같이 뜨긴 하는데 강의 중 강사님 화면에도 그렇고 강의 자료에도 똑같이 오류 메시지(빨간 줄)가 있더라구요. next13부터 라우팅 방식이 달라졌다고 하던데 버전 문제인건지...아래 params 오류 제외하고는 모두 동일한 소스 코드를 작성했고 오류도 없습니다.해결 방법이 궁금합니다. **혹시 몰라서 [id].tsx 랑 post.ts 코드 전체 첨부합니다.<id.tsx>import React from 'react' import Head from 'next/head' import { GetStaticPaths, GetStaticProps } from 'next' import { getAllPostIds, getPostData, getSortedPostsData } from '../../lib/post' const Post = ({postData}: { postData: { title: string date: string contentHtml: string } }) => { return ( <div> <Head> <title>{postData.title}</title> </Head> <article> <h1>{postData.title}</h1> <div> {postData.date} </div> <div dangerouslySetInnerHTML={{__html: postData.contentHtml}} /> </article> </div> ) } export default Post export const getStaticPath: GetStaticPaths =async () => { const paths = getAllPostIds(); return{ paths, fallback: false } } export const getStaticProps: GetStaticProps =async ({params}) => { const postData = await getPostData(params.id as string) return { props: { postData } } }<post.ts>import fs from 'fs' import path from 'path' import matter from 'gray-matter' import { remark } from 'remark'; import remarkHtml from 'remark-html/lib'; const postsDirectory = path.join(process.cwd(), 'posts') console.log('process.cwd()', process.cwd()); console.log('postsDirectory.cwd()', postsDirectory); export function getSortedPostsData(){ //Get file names under /posts const fileNames = fs.readdirSync(postsDirectory) console.log('fileNames', fileNames); //fileNames ['pre-rendering.md', 'ssg-ssr.md'] const allPostsData = fileNames.map(fileName => { //Remove ".md" from file name to get id const id = fileName.replace(/\.md$/, '') //Read markdown file as string const fullPath = path.join(postsDirectory, fileName) const fileContents = fs.readFileSync(fullPath, 'utf8') //Use gray-matter to parse the post metadata section const matterResult = matter(fileContents) //Combine the data with the id return{ id, ...(matterResult.data as {date: string; title: string}) } }) //Sort posts by date return allPostsData.sort((a,b) => { if(a.date<b.date){ return 1 } else{ return -1 } }) } export function getAllPostIds(){ const fileNames = fs.readdirSync(postsDirectory); return fileNames.map(fileName => { return { params: { id: fileName.replace(/\.md$/, '') } } }) } export async function getPostData(id: string){ const fullPath = path.join(postsDirectory, `${id}.md`) const fileContents = fs.readFileSync(fullPath, 'utf-8') const matterResult = matter(fileContents); const processedContent = await remark().use(remarkHtml).process(matterResult.content); const contentHtml = processedContent.toString(); return { id, contentHtml, ...(matterResult.data as {date: string; title: string}) } }

연산자는 계산을 한 후에 그 값을 알 수 있어야 한다고 알고 있었는데 spread 연산자는 결과값이라는게 존재하지 않는 것 같습니다. typeof 연산자를 통해서 데이터 타입을 확인하는것도 불가능하고let arr1 = [1, 2, 3];let obj1 = {a:1, b:2, c:3};라 했을 때 console.log(...arr1); 는 출력이 되지만 console.log(...obj1);는 에러가 뜨는 것을 봐서는 연산을 통한 결과값을 적용하는 것이 아니라 그냥 코드 내의 글자 자체가 ...arr1 이 1, 2, 3 또는 arr1[0], arr1[1], arr1[2] 로 치환되는것 같습니다. 코딩을 할 때 중요할 것 같진 않지만 작동 방식이 궁금해서 질문 드립니다.

heroku에 deploy하고나서 openApp하면 데이터가 로드 돼야 하는데 안돼는 이유가 먼지 그리고 axios 통신을 localhost:5000해서 문제인지 궁금합니다.

TodoList에서 checkBox 업데이트를 위한 onUpdate의 props전달?에 대해서 질문이 있습니다 첫 번째, 부모 컴포넌트에서 자식 컴포넌트로 값(변수, 리스트, 함수 등)을 전달하는 것이 props인건지 햇갈립니다 두 번째, onUpdate의 구동방식은 이해되었습니다. 다만 app.jsx가 아니라 List.jsx에서 만들어도 되지 않나? 라는 의문점이 있습니다. 리렌더링 때문일까요? 아님 다른 이유가 있는건지 궁금합니다.

🚨 아래의 가이드라인을 꼭 읽고 질문을 올려주시기 바랍니다 🚨질문 하시기 전에 꼭 확인해주세요- 질문 전 구글에 먼저 검색해보세요 (답변을 기다리는 시간을 아낄 수 있습니다)- 코드에 오타가 없는지 면밀히 체크해보세요 (Date와 Data를 많이 헷갈리십니다)- 이전에 올린 질문에 달린 답변들에 꼭 반응해주세요 (질문에 대한 답변만 받으시고 쌩 가시면 속상해요 😢)질문 하실때 꼭 확인하세요- 제목만 보고도 무슨 문제가 있는지 대충 알 수 있도록 자세한 제목을 정해주세요 (단순 단어 X)- 질문의 배경정보를 제공해주세요 (이 문제가 언제 어떻게 발생했고 어디까지 시도해보셨는지)- 문제를 재현하도록 코드샌드박스나 깃허브 링크로 전달해주세요 (프로젝트 코드에서 문제가 발생할 경우)- 답변이 달렸다면 꼭 확인하고 반응을 남겨주세요- 강의의 몇 분 몇 초 관련 질문인지 알려주세요!- 서로 예의를 지키며 존중하는 문화를 만들어가요. - 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요.todos 콘솔 테스트 📝 ?? 을 사용하면 console 에 Array 를 보여주지만 ?? 을 빼면 undefined 로 보여줍니다. map 오류undefiend 되면서 오류가 발생하는거 같은데 App 에서 Array 를 제대로 넘겼는데 왜 undefined 가 되는걸까요 ?? 

질문이 좀 많습니다. 질문에 비슷한 사례가 있는데 도저히 해결이 안 되어서 다시 여쭤봅니다.에러 메시지는 다음과 같습니다.C:\developing\zeroCho\nodeJs\nodebird\models>node index.js hashtag.js Hashtag old-index.js undefined C:\developing\zeroCho\nodeJs\nodebird\models\index.js:30 model.initiate(sequelize); ^ TypeError: model.initiate is not a function코드 본문입니다.const Sequelize = require('sequelize'); const fs = require('fs'); const path = require('path'); const env = process.env.NODE_ENV || 'development'; const config = require('../config/config')[env]; const db = {}; const sequelize = new Sequelize( config.database, config.username, config.password, config, ); db.sequelize = sequelize; const basename = path.basename(__filename); fs .readdirSync(__dirname) // 현재 폴더의 모든 파일을 조회 .filter(file => { // 숨김 파일, index.js, js 확장자가 아닌 파일 필터링 return (file.indexOf('.') !== 0) && (file !== basename) && (file.slice(-3) === '.js'); }) .forEach(file => { // 해당 파일의 모델 불러와서 init const model = require(path.join(__dirname, file)); console.log(file, model.name); db[model.name] = model; model.initiate(sequelize); // 문제 발생점 }); Object.keys(db).forEach(modelName => { // associate 호출 if (db[modelName].associate) { db[modelName].associate(db); } }); module.exports = db;콘솔 한번 찍어보고 싶은데 해당 오류 때문에 진도를 못 나가고 있네요. 도대체 뭐가 문제인지 모르겠습니다. 

20분 정도에서 말씀주신 내용처럼 콘솔을 찍어보려고 하는데 다음과 같은 에러가 발생했습니다.C:\developing\zeroCho\nodeJs\nodebird\models\index.js:19 file.index(".") !== 0 && file !== basename && file.slice(-3) === ".js" ^ TypeError: file.index is not a function 그래서 일단 코드를 다음과 같이 수정했습니다.[기존 코드: return file.index(".") !== 0 &&...]fs.readdirSync(__dirname) .filter((file) => { return ( !file.startsWith(".") && file !== basename && file.slice(-3) === ".js" );문제는 또 다른 에러가 발생했는데C:\developing\zeroCho\nodeJs\nodebird\models>node index.js hashtag.js Hashtag C:\developing\zeroCho\nodeJs\nodebird\node_modules\sequelize\lib\model.js:662 throw new Error("No Sequelize instance passed"); ^ Error: No Sequelize instance passed at Hashtag.init (C:\developing\zeroCho\nodeJs\nodebird\node_modules\sequelize\lib\model.js:662:13) at Hashtag.initiate (C:\developing\zeroCho\nodeJs\nodebird\models\hashtag.js:5:13) at C:\developing\zeroCho\nodeJs\nodebird\models\index.js:30:11 at Array.forEach (<anonymous>) at Object.<anonymous> (C:\developing\zeroCho\nodeJs\nodebird\models\index.js:25:4) at Module._compile (node:internal/modules/cjs/loader:1469:14) at Module._extensions..js (node:internal/modules/cjs/loader:1548:10) at Module.load (node:internal/modules/cjs/loader:1288:32) at Module._load (node:internal/modules/cjs/loader:1104:12) at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:174:12) 그래서 일단 이것도 modules 폴더 내에서 사용된 initate 메서드를 init으로 변경했습니다.<예시>const Sequelize = require("sequelize"); class Hashtag extends Sequelize.Model { static init(sequelize) { Hashtag.init({ title: { type: Sequelize.STRING(15), allowNull: false, unique: true, }, }); } static associate(db) {} } module.exports = Hashtag; 그랬더니 이번에는 무한 재귀 에러가 발생하였습니다C:\developing\zeroCho\nodeJs\nodebird\models>node index.js hashtag.js Hashtag C:\developing\zeroCho\nodeJs\nodebird\models\hashtag.js:5 Hashtag.init({ ^ RangeError: Maximum call stack size exceeded at Hashtag.init (C:\developing\zeroCho\nodeJs\nodebird\models\hashtag.js:5:13) at Hashtag.init (C:\developing\zeroCho\nodeJs\nodebird\models\hashtag.js:5:13) at Hashtag.init (C:\developing\zeroCho\nodeJs\nodebird\models\hashtag.js:5:13) at Hashtag.init (C:\developing\zeroCho\nodeJs\nodebird\models\hashtag.js:5:13) at Hashtag.init (C:\developing\zeroCho\nodeJs\nodebird\models\hashtag.js:5:13) at Hashtag.init (C:\developing\zeroCho\nodeJs\nodebird\models\hashtag.js:5:13) at Hashtag.init (C:\developing\zeroCho\nodeJs\nodebird\models\hashtag.js:5:13) Node.js v20.18.0 대안은 super.init을 호출하는 것이라고 하는데 제가 지금 해결방향을 제대로 잡고 있는건지 아니면 점점 산으로 가고 있는건지 저 스스로는 판단이 안 됩니다. 사실 이 문제가 전 파트에서 시퀄라이저 진도 나갈 때도 발생했었는데 같은 문제가 다시 발생해서 굉장히 당황스럽습니다.도움 부탁드립니다.

// App.jsx import "./App.css"; import { useState, useRef, useReducer, useCallback, createContext, } from "react"; import Header from "./components/Header"; import Editor from "./components/Editor"; import List from "./components/List"; const mockData = [ { id: 0, isDone: false, content: "React 공부하기", date: new Date().getTime(), }, { id: 1, isDone: false, content: "빨래하기", date: new Date().getTime(), }, { id: 2, isDone: false, content: "노래 연습하기", date: new Date().getTime(), }, ]; function reducer(state, action) { switch (action.type) { case "CREATE": return [action.data, ...state]; case "UPDATE": return state.map((item) => item.id === action.targetId ? { ...item, isDone: !item.isDone } : item ); case "DELETE": return state.filter((item) => item.id !== action.targetId); default: return state; } } export const TodoContext = createContext(); function App() { const [todos, dispatch] = useReducer(reducer, mockData); const idRef = useRef(3); const onCreate = useCallback((content) => { dispatch({ type: "CREATE", data: { id: idRef.current++, isDone: false, content: content, date: new Date().getTime(), }, }); }, []); const onUpdate = useCallback((targetId) => { dispatch({ type: "UPDATE", targetId: targetId, }); }, []); const onDelete = useCallback((targetId) => { dispatch({ type: "DELETE", targetId: targetId, }); }, []); return ( <div className="App"> <Header /> <TodoContext.Provider value={{ todos, onCreate, onUpdate, onDelete }}> <Editor /> <List /> </TodoContext.Provider> </div> ); } export default App; // List.jsx import "./List.css"; import TodoItem from "./TodoItem"; import { useState, useMemo, useContext } from "react"; import { TodoContext } from "../App"; const List = () => { const { todos } = useContext(TodoContext); const [search, setSearch] = useState(""); const onChangeSearch = (e) => { setSearch(e.target.value); }; const getFilteredData = () => { if (search === "") { return todos; } return todos.filter((todo) => todo.content.toLowerCaes().includes(search.toLowerCase()) ); }; const filteredTodos = getFilteredData(); const { totalCount, doneCount, notDoneCount } = useMemo(() => { const totalCount = todos.length; const doneCount = todos.filter((todo) => todo.isDone).length; const notDoneCount = totalCount - doneCount; return { totalCount, doneCount, notDoneCount, }; }, [todos]); return ( <div className="List"> <h4>Todo List 🎯</h4> <div> <div>total: {totalCount}</div> <div>done: {doneCount}</div> <div>notDone: {notDoneCount}</div> </div> <input value={search} onChange={onChangeSearch} placeholder="검색어를 입력하세요" /> <div className="todos_wrapper"> {filteredTodos.map((todo) => { // return <div>{todo.content}</div>; return <TodoItem key={todo.id} {...todo} />; })} </div> </div> ); }; export default List; 안녕하세요.11-2강을 수강하며 코드를 따라 작성하였는데 리스트 검색을 하려고 하면 빈 창으로 바뀝니다.리스트 추가와 삭제는 잘 작동합니다.무엇이 문제일까요?미리 답변 감사합니다 🙇🏻‍♀️ 🚨 아래의 가이드라인을 꼭 읽고 질문을 올려주시기 바랍니다 🚨질문 하시기 전에 꼭 확인해주세요- 질문 전 구글에 먼저 검색해보세요 (답변을 기다리는 시간을 아낄 수 있습니다)- 코드에 오타가 없는지 면밀히 체크해보세요 (Date와 Data를 많이 헷갈리십니다)- 이전에 올린 질문에 달린 답변들에 꼭 반응해주세요 (질문에 대한 답변만 받으시고 쌩 가시면 속상해요 😢)질문 하실때 꼭 확인하세요- 제목만 보고도 무슨 문제가 있는지 대충 알 수 있도록 자세한 제목을 정해주세요 (단순 단어 X)- 질문의 배경정보를 제공해주세요 (이 문제가 언제 어떻게 발생했고 어디까지 시도해보셨는지)- 문제를 재현하도록 코드샌드박스나 깃허브 링크로 전달해주세요 (프로젝트 코드에서 문제가 발생할 경우)- 답변이 달렸다면 꼭 확인하고 반응을 남겨주세요- 강의의 몇 분 몇 초 관련 질문인지 알려주세요!- 서로 예의를 지키며 존중하는 문화를 만들어가요. - 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요.

안녕하세요. 열심히 따라하고있습니다 ^^ 질문 : 로컬 pc 에서 v5 로 프로젝트 생성해서 처음 실행하려는데 에러가 나면서 실행이 안되네요.Strapi v5 훑어보기v4 버전할때는 강의 따라해도 문제없이 잘 됐었습니다. 실행 결과를 보니 db 에는 테이블까지는 생성이 됐었네요. 에러 내용 :C:\dev\strapi5_test> npm run develop> strapi-5-test@0.1.0 develop> strapi develop⠋ Loading Strapi⠋ Building build context[INFO] Including the following ENV variables as part of the JS bundle: - ADMIN_PATH - STRAPI_ADMIN_BACKEND_URL - STRAPI_TELEMETRY_DISABLED✔ Building build context (73ms)✔ Creating admin (489ms)✔ Loading Strapi (1826ms)✔ Generating types (315ms)node:events:497 throw er; // Unhandled 'error' event ^Error: bind EACCES null:5173 at listenOnPrimaryHandle (node:net:1985:18) at rr (node:internal/cluster/child:163:12) at Worker.<anonymous> (node:internal/cluster/child:113:7) at process.onInternalMessage (node:internal/cluster/utils:49:5) at process.emit (node:events:531:35) at process.processEmit [as emit] (C:\dev\strapi5_test\node_modules\signal-exit\index.js:199:34) at emit (node:internal/child_process:951:14) at process.processTicksAndRejections (node:internal/process/task_queues:83:21)Emitted 'error' event on Server instance at: at listenOnPrimaryHandle (node:net:1986:21) at rr (node:internal/cluster/child:163:12) [... lines matching original stack trace ...] at process.processTicksAndRejections (node:internal/process/task_queues:83:21) { errno: -4092, code: 'EACCES', syscall: 'bind', address: null, port: 5173}Node.js v20.18.0C:\dev\strapi5_test>  바쁘시겠지만 시간 괜찮으실때 한번 봐주세요~감사합니다. 

landingpage에서 useEffect로 fetchProducts를 하고 있는데, VSCode development server를 켜놓고 하지 않습니까?근데 vscode에서 save를 할 때 landingpage의 useEffect가 실행되는데, 이게 원래 이런건가요? useEffect는 컴포넌트가 처음 마운트 될 때만 실행되는 것으로 알고 있는데, 개발모드에서 save할 때는 save할 때마다 실행되나요? 궁금하네요.

숙제로 경매 시간을 자유롭게 조정할 수 있게 구현하라고 하셨는데, 처음 사용자가 상품을 생성할 때 경매 종료 시간과 경매 시작 시간을 입력받을 수 있게 만들라는 말씀이실까요? 경매 시작 시간도 조정할 수 있게 하면 sse로 서버 시간을 매초마다 클라이언트에게 보내는 의미가 없을 것 같아 여쭤봅니다!