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;  

- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요.안녕하세요!제가 AWS가 아닌 Azure 서버를 이용하고 있는데, Azure는 어떻게 이용 가능한 지 알 수 있을까요?프로젝트를 수행하고 있는 비전공자라 개념이 많이 부족합니다.운이 좋게 Azure를 쓸 기회를 얻어서 Azure를 이용해서 작업하고 싶은데, 어떻게 사용할 있을 지 알 수 있나 싶어 질문 드립니다.

 디버그 모드가 되는 것 같은데 이유를 모르겠습니다. 뭐라 검색해봐야할까요? 아님 제가 코드 오타가 난걸까요?이전에 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가지 에러가 순서대로 나타내고 있는데요, 어떻게 하면 해당 사항을 해결 할 수 있을까요? 상세하고 자세한 답변 부탁드립니다.감사합니다.

 스무스 스크롤바 이용해서 포트폴리오 사이트 만들고 있어요!그런데 폰으로 확인해보니 스크롤트리거 pin 고정부분은 엄청 부드럽게 작동하고,나머지 부분에선 뻑뻑한데 이유가 뭔지 알 수 있을까요?그리고 강의 너무너무 감사합니다!!덕분에 빠르게 gsap 배우고 있어요!!

이메일로 자료 요청을 했으나 계속 받지 못하고 있습니다.메일 확인 부탁드립니다. (swh0107@gmail.com)

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

좋은 강의 감사합니다! 다음 단계를 어떻게 나아가야 할지 고민을 하고 있는데,, 클로저와 같은 함수형 프로그래밍 언어를 공부하면 좋을까요..?

연산자는 계산을 한 후에 그 값을 알 수 있어야 한다고 알고 있었는데 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] 로 치환되는것 같습니다. 코딩을 할 때 중요할 것 같진 않지만 작동 방식이 궁금해서 질문 드립니다.

인프런 아이디 : patagonia인프런 이메일 : libra10042@gmail.com깃헙 아이디 : libra10042@gmail.com깃헙 username : libra10042

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

인프런 아이디 : cool3797@gmail.com인프런 이메일 : cool3797@gmail.com깃헙 아이디 : cool3797@gmail.com깃헙 username : OtterCue

일곱난쟁이 문제에서, 가짜 난쟁이 둘을 발견 후에 for loop를 멈출 때 splice를 한 arr를 for loop에서 return arr 하면 전체 for loop에서 탈출하는데 그걸 사용해도 되지 않나요?

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

투포인트 알고리즘을 생각하고 풀어봤는데 슬라이딩 알고리즘과 투포인트중에 어떤걸 선택해도 상관 없는건가요 ?/** *@function 최대매출 *@description 최대매출 알고리즘 문제 풀이 */ function solution(m, arr) { let answer = 0; let sum = 0; let lt = 0; let n = arr.length; for (let i = 0; i < m; i++) { sum += arr[i]; } answer = sum; for (rt = m; rt < n; rt++) { sum += arr[rt] - arr[lt++]; if (answer < sum) { answer = sum; } } return answer; } let arr = [12, 15, 11, 20, 25, 10, 20, 19, 13, 15]; console.log(solution(3, arr));

punkwagon@gmail.com 입니다

문제를 보고 제가 직접 먼저 풀어봤는데 답은 맞게 나오는데 , 뭔가 좀 허술한 부분이 있을거 같아서요 ,코드 리뷰좀 부탁드립니다.  function solution(a, b, c) { let cnt = 0; let sum = 0; let lt = (rt = 0); while (lt < a && rt < a) { rt++; sum += c[rt]; if (sum === b) { cnt++; lt++; sum -= c[lt]; } } return cnt; }

// 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 문의하기를 이용해주세요.

package.json을 설치할때 해당파일의 설치 위치가 꼭 server파일의 상위폴더인 TRIP-WIKI폴더여야하나요?server파일안에 설치해도 상관없는건지 상관있으면 무엇이 다른건지 알수 있을까요?

영상 촬영 시기와 현재 크롬 화면이 달라서 질문드립니다. 개발자 모드가 없어서 그런데 등록을 마쳐야 적용 가능할까요?