onUpdate함수를 TodoItem에도 넣어줘야한다는꺼까지 알겠습니다. input의 onChange일때 onChangeCheckbox를 넣어줘야한다는 것도 알겠습니다. 하지만 왜 onChangeCheckbox 함수 내용이 그냥 onUpdate에 id만 넣어주는걸까요?? 이런식으로 id를 반환해주려면 해당 이벤트가 일어났을때 target의 id를 반환해줘야 하는거 아닐까요???? 왜 e를 매개변수로 넣지도 않고 그냥 id만 넣어도 되는걸까요? 강의 내용에 궁금한 점이 있다면 몇 챕터의 몇 분 몇 초인지 알려주시면 더 좋아요 8.6 챕터의 5분 20초입니다!
https://github.com/ksm0584-star/one-bite_react.git 안녕하세요! 초보자도 이해하기 쉽게 잘 설명해주셔서 강의 감사드리며 듣고 있습니다. 처음으로 문제가 생겼는데요 ㅠㅠ index.html에서 favicon으로 변경한 것과 meta 코드를 넣어준 것이 웹에 적용이 되지 않습니다. 분명 저장을 하고 새로고침을 해주어도 개발자 모드로 들어가보면 적용이 하나도 안되어 있어요. 그리고 배포는 되는데 하고 나면 favicon과 meta코드가 초기화 되어 있습니다. 무엇이 문제일까요? 다음 강의에 있는 vercel login도 되지 않습니다. zsh: command not found: vercel 이렇게 뜨네요 ㅠㅠㅠ 답변해주시면 정말 감사하겠습니다!
76. 11.3) Context 분리하기 useMemo 를 이용해서 onCreate, onUpdate, onDelete 를 한번만 생성이 되게 한거는 이해 하는데요, 그럼 이 경우에 기존에 사용했던 useCallback 은 삭제 해도 무방 한가요? const onCreate = (content) => { dispatchFunc({ type : "CREATE", data : { id : idRef.current++, isDone : false, content: content, date : new Date().getTime(), }, }); };
수강생분들의 질문을 기다립니다! - 에러에 해당하는 질문은 "에러가 발생한 상황에 대한 충분한 설명", "에러 메 세지", "에러가 난 코드 스크린샷"을 함께 첨부해주세요. - 언어에 해당하는 질문은 구글링 및 서치 후에 구체적으로 질문해주시면 좋습니다. - 간단한 진로 및 방향성에 대한 질문은 메일로 보내주세요. - 패키지 버전 관리은 실무 환경과 트랜드에 맞추어 강의를 업데이트 하고 있습니다. 강의를 그대로 따라갔는데 에러가 발생한다면 패키지 버전을 강의에서 사용하는 버전과 동일하게 맞춰주세요! - 강의 노트, QA 목록, 공지 사항을 먼저 확인해주세요. - 논리적이고 구체적인 질문은 학습 효과를 올립니다 🙂 노드 버전 20으로 맞추고 강의 node.js 설치된 모듈대로 설치를 했었는데 문법적인 오류가 뜹니다. 이경우는 어떻게 해야되나요?
안녕하세요. 투두리스트 렌더링하기에서 TodoItem에 key를 넣지 않았을때 웹브라우저에서 에러가 발생하고, 강의 화면에 vscode에서도 보면 해당 소스코드 위치에 Missing "key" prop for element in... 이라고 나오는데, 제 경우에는 소스코드 위치에 Missing "key" prop for element in... 이라는 내용이 나오지 않습니다. Eslint 플러그인도 설치했고, 아래와 같이 설정 했는데, 무슨 차이 때문에 이런 현상이 생기는 걸까요? rules: { "no-unused-vars": "off", "react/prop-types": "off", }, 그래서, 검색을 좀 해보았고 rules에 아래와 같이 내용을 추가해 봤는데도, Missing "key" prop for element in... 이 내용이 나오지 않습니다. rules: { "no-unused-vars": "off", "react/prop-types": "off", "react/jsx-key": "true", }, 참고로 저의 package.json은 아래와 같습니다. { "name": "section08", "private": true, "version": "0.0.0", "type": "module", "scripts": { "dev": "vite", "build": "vite build", "lint": "eslint .", "preview": "vite preview" }, "dependencies": { "react": "^19.1.1", "react-dom": "^19.1.1" }, "devDependencies": { "@eslint/js": "^9.33.0", "@types/react": "^19.1.10", "@types/react-dom": "^19.1.7", "@vitejs/plugin-react": "^5.0.0", "eslint": "^9.33.0", "eslint-plugin-react-hooks": "^5.2.0", "eslint-plugin-react-refresh": "^0.4.20", "globals": "^16.3.0", "vite": "^7.1.2" } }
좋은 강의 잘 듣고 있습니다. 다름이아니라, 이전 강의들에 에러들을 다 해결해서 80강을 듣기 전 까지 상품 상세 페이지 구현 후, 상품 상세 페이지 보기까지 에러 없이 잘 되던 것이 80강을 듣고 코드를 작성 후 부터 ' 상품 상세 페이지 ' 가 뜨지를 않고 있습니다. 아래 사진 첨부 합니다. 사진 1. 아래 사진으로 DB Browser for SQLITE에서 이미지를 작성 해 준 뒤 일단 이미지는 잘 받아 옵니다. 참고로, 사진 1 은 VS CODE 폴더(GRAB-MARKET-SERVER)에서 server.js에 소스 order : [['createdAt','DESC']], 입력을 일단 개인적인 이유로 빼었기 떄문에 , 판매되는 상품 에 순서가 바뀌어 있습니다. order : [['createdAt','DESC']] 을 넣게 된다면 상품 순서는 축구공,농구공,키보드,키보드로 화면에 나타나는데요 , 아래 사진과 같아요. 제일 먼저 축구공을 누르게 되면 localhost:3000/products/4라고 뜨기에요, 원래 제대로 되려면, 축구공을 누르면 localhost:3000/products/1로 되어야 하는거 아닌가요? 그리고 위 첨부한 사진 보면 왼쪽과 같이 에러가 발생하는데요, 어떻게 해야 제대로 작동 할까요? 그리고 잘못 소스코드를 입력하고 실행하다보니 키보드가 2개 생성 되었습니다만 , 이것 을 하나만 남기고 싶은데 어떻게 해야 하는지요? -->DB Browser for SQLite에서 삭제하는 방법이 있나요? 위에 사진 1에서 가장 마지막인 4번째의 축구공을 누르면, 위와 그리고 아래와 같은 에러가 발생하며 상품 정보 상세 페이지 . 즉 상품 정보를 받고 있습니다... 만 그대로 멈춰있고 이전 강의 챕터에서 만든 것(상품상세페이지) 불러올 수 없게 되어 질문을 남깁니다. 즉 상품 정보 상세 페이지가 잘 만들어져서 그대로 에러 없이 잘 해왔는데, 에러가 나서 여쭈어봅니다. -추가 질문 : 상품 정보를 받고 있습니다... 페이지 경우는 POSTMAN 가짜 서버(=mock서버)에서랑 관련이 깊은 건가요? POSTMAN(=mock서버)에서 그랩님의 강의를 따라올때, 다른점들이 몇가지 있었는데요(몇가지 다른점은 에러가 있었습니다 .), 그래서 위 에러가 발생하는 건가요? 다른점이 발생한 경우라면 포스트맨 에러 스샷을 추가로 올리겠습니다. 그럼 봐주실 수 있나요? 아니라면 POSTMAN(=mock서버)과 관련 없이 우리는 Node 서버를 구축 했기에, Mock서버인 POSTMAN과 전혀 상관이 없는 건가요? [상품 상세 페이지] 불러오지 못하는 것은 만일 Node 서버의 문제이지, Postman과 상관 없다면,node 서버측에서는 무엇을 고쳐주거나 어떤 소스를 작성해줘야 에러가 해결될까요? 더불어서 79강 강의 2분 56초 부터 3분 32초 보면, POSTMAN 테스트 를 하는 부분이 나오는데, 여기서 아래 사진을 보면[왼쪽 메뉴 get product] Body 부분에서 그랩 강사님 화면과 다르게 뜨는데, 이것은 왜 그런건가요? 어떻게 해야 http://localhost:8080/products/1 , http://localhost:8080/products/2 , http://localhost:8080/products/3 을 제대로 작동하게 할 수 있나요? 마지막으로 [참고 사진]으로 POSTMAN의 잘 작동하는 [get products]사진 첨부해 봅니다. 어떻게 해야 이 모든 에러 를 해결 할 수 있을지에 대해 자세한 답변 부탁드립니다.
다른 수강생분들에게도 문제 해결에 도움을 줄 수 있도록 좋은 질문을 남겨봅시다 :) 1. 질문은 문제 상황을 최대한 표현해주세요. 6강 마지막 화면이랑 7강 첫화면 코드가 달라져서 이 부분은 어떻게 해결하면 될까요?? (안녕하세요->환영합니다) (console.log->alert) 크게 이 두 부분이 다른 것 같습니다. 그냥 이대로 진행하면 될까요? 2. 구체적이고 최대한 맥락을 알려줄 수 있도록 질문을 남겨 주실수록 좋습니다. 그렇지 않으면 답변을 얻는데 시간이 오래걸릴 수 있습니다 ㅠㅠ ex) A라는 상황에서 B라는 문제가 있었고 이에 C라는 시도를 해봤는데 되지 않았다! 3. 먼저 유사한 질문이 있었는지 꼭 검색해주세요!
안녕하세요 강의를 잘 듣고있습니다. 하지만 개념이 잘 이해가 되지 않은 부분들이 있어서 질문드립니다. context 분리하기 강의 부분입니다!!! 이부분에서 이미 전 시간에 만들었던 useCallback으로 선언했던 함수들이 있습니다. 하지만 왜 app컴포넌트의 렌더링으로 인해 또 함수 선언이 되어 usememo를 써야한다고 하셨는지 문의드려요. 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, }); }, []); const memoizedDispatch = useMemo(() => { return { onCreate, onUpdate, onDelete }; }, []); 그동안 다른 컴포넌트에 props를 줄때는 color={color}식으로 주고, 이는 객체형태라고 합니다. 받는 자식 컴포넌트에서는 {color} 이런식으로 구조분해할당을 합니다. 하지만 createContext로 만든 provider value ={} 는 기본적으로 객체형태가 아닌걸까요? 기본적으로 구조분해할당을 하지 않는거같아서 뭐지싶었습니다 <TodoDispatchContext.Provider value={memoizedDispatch}> useEffect, useMemo의 차이점은 무엇인가요? 기본적으로 의존성 배열을 []로 둘때는 처음으로 컴포넌트가 mount 될때만 실행하고 , [todos]를 넣으면 이 변수 state가 바뀔때만 실행하는거같아서 똑같은거같아요
안녕하세요. 1.7) 복합대입 연산자 관련 질문입니다. 예제) num7 -= 20; 부분입니다. 바로 위에 있는 num7 += 20;은 num7에 할당 되어 있는 값에 20만큼 더해서 console result 값은 30이 반환이 될 것이었고, 반환이 되었습니다. 그런 논리라면 num7 -= 20; 이면 단순 수식으로 생각을 하였을 때, 10 -20 = -10이 되어야 하는게 아닌가 싶습니다. num7 -= 20; 에서 20; 이 부분이 앞에 오게 되는 이유가 있을까요? 기본 연산자에서는 정수만 취급하기 때문에 앞뒤의 순서가 바뀐 것일까요? 단순 JS의 구조적인 문제일까요? 이에, 설명하셨던 부분과 약간 상이 한 내용인 거 같아서 질문 남겨드립니다.
// 2. 콜백함수의 활용 function repeat(count, callback){ for(idx=0; idx<count; idx++){ callback(idx); } } repeat(4, function callback(){ console.log(idx * 2)}); repeat(4,(idx)=>{ console.log(idx * 4); }) repeat(5,()=>{ console.log(idx * 5); }) repeat()으로 호출할 때 콜백함수까지 같이 불러오는 부분에 대해 궁금증이 생겼습니다. repeat(인수, 콜백함수)=> 이 부분에서 콜백함수에 매개변수로 idx를 안 넣어도 콘솔창에 결과가 잘 나옵니다. 그런데도 콜백함수 인수를 작성할 때 idx를 꼭 적어줘야 하나요? repeat(4, (idx) // idx를 넣고 메인 함수 콜백 호출 부분인 callback(idx); 에서 idx를 뺏더니 출력결과가 Nan이 나옵니다. repeat(4, () => 이렇게 idx가 없는 호출문? 에서는 정상적으로 값이 잘 나오는데 저 부분은 왜 안나오는지 궁금합니다.
