문제1 vcs내에 cmd에서는 node -v, npm -v의 버전이 잘 나오는데 bit bash 환경에서는 사진과 같이 오류가 나옵니다 어러번 node.js를 삭제하고 깔아봤는데 계속 이럽니다문제2git bash환경에서 오류가 떠 cmd에서 시도를 해보았습니다.명령프롬프트(cmd)에서는 node, npm, yarn의 버전이 잘 나오지만vsc내에 cmd에서는 나머지의 버전은 잘 나오지만 yarn의 버전이 나오질 않습니다.버전을 모두 확인 후 npx create-next-app를 해야하는데 앞의 문제들 때문에 그런지 npx create-next-app가 실행이 되지 않습니다.초반 세팅 과정 때문에 시간을 너무 잡아먹는 것 같아요 도와주세요 ㅠㅠ 

🚨 아래의 가이드라인을 꼭 읽고 질문을 올려주시기 바랍니다 🚨해당 강의에서 날짜를 해당 월의 1일 0시0분0초부터 말일의 23시 59분 59초 설정해서 범위로 해당되는 값을 찾을 수 있또록 아래와 같이 작성을 하셨는데요beginTime <= item.createdDate && item.createdDate <= endTime궁금한 부분은 날짜를 범위 안에 넣지 않고 같은 연도와 월이 있는 값을 불러오는 방법도 있을 것 같은데 어떤 차이가 있는지 알고 싶습니다.

const TypedNumber = (num : any) => { setNumber((prev) => { if (prev === "0") return num; return prev+ num; }); }; num 타입으로 인해 오류가 나서 any로 지정을 해야만 하는데요.. 강사님 코드에는 any 타입을 지정안해 오류가 아나는데 차이가 뭔가요?

useState대신 useEffect를 사용하는 이유는 이벤트핸들러 동작시 useState는 비동기를 제공하지 않아 setCount가 동작을 마치기 전 console.log가 실행되어 setCount이후 적용되는 count를 console에 찍지 못하고 리렌더링되기 이전의 state만 console에 찍히기 때문에 useState대신 useEffect를 사용한다고 하셔서 혹시나 하고 useEffect대신 useState를 사용하고 대신 이벤트 핸들러에 async await를 적용했더니 useEffect에서 제공하는 기능이 실행되는것을 확인했습니다.여기서 궁금한점은 useState+async await와 useEffect간의 차이점을 알고싶습니다. const onClickHandler = async (value) => { await setCount(count+value) console.log(count) }

학습 링크 어디에서 확인할 수 있나요?

Button.jsx?t=1739152459356:22 Uncaught TypeError: Cannot read properties of undefined (reading 'to') at Button (Button.jsx?t=1739152459356:22:17)An error occurred in the <Button> component. Consider adding an error boundary to your tree to customize error handling behavior. Visit https://react.dev/link/error-boundaries to learn more about error boundaries. Error Component Stack at Button (Button.jsx?t=1739152290133:19:112) at App (<anonymous>) 

안녕하세요.오픈 채팅방에 참여하려 하는데 인원수가 꽉 찬 거 같습니다ㅜㅜ

Uncaught TypeError: Cannot destructure property 'ReactCurrentDispatcher' of 'react__WEBPACK_IMPORTED_MODULE_0___default(...).__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED' as it is undefined. at currentRendererSupportsUseSyncExternalStore (index.js:505:1) at useRecoilValueLoadable (index.js:5353:1) at useRecoilValue (index.js:5372:1) at CompletionPage (index.js:6:1) at react-stack-bottom-frame (react-dom-client.development.js:22428:1) at renderWithHooks (react-dom-client.development.js:5757:1) at updateFunctionComponent (react-dom-client.development.js:8018:1) at beginWork (react-dom-client.development.js:9683:1) at runWithFiberInDEV (react-dom-client.development.js:543:1) at performUnitOfWork (react-dom-client.development.js:15042:1) 이거 오류뜨는데 리엑트 recoil 지원 중단되서 안되는건가요? 해결방법이 있나요?

안녕하세요 Edit페이지 구현하기 강의 부분에서 16:52 부분에 아직 Edit 컴포넌트가 return하기 전인 상태이다. 그래서 마운트 되기 전이기 때문에 nav("/", {replace: true}) 동작할 수 가없다 라는 게 무슨 말인가요?  이 Edit 즉 이 수정페이지로 처음에 화면이 나타난다(마운트)는 이해가 가는데 왜 nav가 실행을 할 수 가없나요?  조금 쉽게 설명을 부탁드리겠습니다 ㅜㅜ

Home.jsx 에서import { useSearchParams } from "react-router-dom"; const Home=()=>{ const [params, setParams]=useSearchParams(); console.log(params.get("value")); return <div>Home</div>; }; export default Home;이렇게 작성했는데 사진과 같이 빨간색 글씨가 뜨는데 어디가 틀린걸까요?? 출력에는 문제가 없습니다

안녕하세요! 해당 강의는 react-rounter-dom v6.22 이던데 혹시 v7로 강의 업데이트 예정이실까요?정환님이 말아주시는 리라돔 v7 강의는 어떨지 하여 기대감에 여쭤봅니다!

npx init ~~ 를 실행하면 에러가 자꾸 발생해서, 웹사이트를 가보니 다운받는 방식이 아예 바뀐 것 같습니다.

  수정페이지, 새일기작성페이지, 등새로고침하면 404 에러가 뜹니다 ㅠㅠ vercel : https://emotion-diary-ochre-six.vercel.app/  확인 부탁드립니다 ㅠㅠ

const inputRef = useRef() const onSubmit = () => { if(input.name === "" ){ console.log(inputRef.current) inputRef.current.focus() } } return ( <div> <div> <input ref={inputRef} name="name" value={input.name} onChange={onChange} type="text"/> </div> <div> <input ref={inputRef} name="birth" value={input.birth} onChange={onChange} type="date" /> </div> <div> </div> <div> <textarea ref={inputRef} name="bio" value={input.bio} onChange={onChange} > </textarea> </div> <button onClick={onSubmit}>제출</button> </div> )위와같은 코드에서 onSubmit함수내 console.log(inputRef.current)를 해보면 무조건 bio만 출력됩니다. 또한 포커스도 어떤 경우에서든 bio가 있는 textarea쪽으로만 포커싱이 됩니다. 어떤 이유에서 이러한 현상이 발생되는지 궁금합니다.

정말 친절하고 세세한 강의~ 감동 받으면서 잘 듣고 있습니다.한가지 궁금한 점은..강사님은 Vite로 강의하시는데.. Create React App도구를 사용하는 것과 차이가 많이 있을까요?Create React App으로 강의를 들어도 무방한지도 알고 싶습니다.감사합니다^^

import "./TodoItem.css"; import { memo } from "react"; const TodoItem = ({ id, isDone, content, date, onUpdate, onDelete }) => { const onChangeCheckbox = () => { onUpdate(id); }; const onClickDeleteButton = () => { onDelete(id); }; return ( <div className="TodoItem"> <input onChange={onChangeCheckbox} //button이 아닌 input태그이기 때문에 onChange를 사용 readOnly checked={isDone} type="checkbox" /> <div className="content">{content}</div> <div className="date">{new Date(date).toLocaleDateString()}</div> <button onClick={onClickDeleteButton}>삭제</button> </div> ); }; export default memo(TodoItem, (prevProps, nextProps) => { // 반환값에 따라, Props가 바뀌었는지 안바뀌었는지 판단 // T -> Props 바뀌지 않음 -> 리렌더링 X // F -> Props 바뀜 -> 리렌더링 O if (prevProps.id !== nextProps.id) return false; if (prevProps.isDone !== nextProps.isDone) return false; if (prevProps.content !== nextProps.content) return false; if (prevProps.date !== nextProps.date) return false; return true; // 네 개의 값이 바뀌지 않으면 });코드를 따라 치면서 실습을 했는데 위처럼 바꿔도 모든 list가 리렌더링된다고 하이라이트가 뜹니다. 뭐가 문제인지 모르겠습니다ㅜㅜ

안녕하세요 공통 컴포넌트 구현하기 강의 부분에서 Header 컴포넌트에 대해 여쭤볼게 있어 질문을 드립니다. Header컴포넌트가 App컴포넌트에 import 되어 있고 props로 title, leftChild, rightChild가 전달이 되는데 leftChild, rightChild는 버튼이니 만들어 놓은 버튼 컴포넌트를 전달해서 들어갈 내용을 동적으로 바꿔주는건 이해가 되지만 title 부분은 그냥 props로 전달하지 않고 Header 컴포넌트 내부에 그냥 작성을 해도 될것같은데 이렇게 title props로 전달하는 이유가 궁금합니다.

안녕하세요. 수업을 진행하던 도중 오류가 발생하여 문의드립니다. 'npm add mongoose' 를 실행 했는데 Error: EPERM에러가 자꾸 뜨네요. 인터넷에서 찾아가면서 .bin파일을 지워도 보고 npm캐시도 삭제해 보고 oneDrive도 중지 시켜보고 해봤지만 오류가 해결이 안되어서 글 남깁니다.  아래 이미지는 오류 내용 캡쳐했습니다. 

안녕하세요 useEffect에 대해 공부를 하다가 궁금한점이 생겨 질문을 드립니다. 강의처럼 useEffect의 배열에 count를 작성하면 컴포넌트가 마운트 될때 먼저 실행되고 그다음 count가 바뀔때마다 useEffect가 실행이된다... 까지는 이해를 했는데 그럼 의존성 배열에 count를 넣으면 이 count의 값만 바뀔때에만 실행되기 때문에 불필요한 렌더링을 줄여주어서 useEffect를 사용하는건가요?

강사님께서 말씀주신대로 년월 증가처리에 대해서동일하게 코드를 작성하였습니다.<div> <Header title={`${pivotDate.getFullYear()}년 ${pivotDate.getMonth()+1}월`} leftChild={<Button onClick={onDecreaseMonth} text={"<"}/>} rightChild={<Button onClick={onIncreaseMonth} text={">"}/>} /> <DiaryList/> </div>(질문)Home.jsx에서 Button 구성요소 ">" 클릭시에onClick시에 onIncrease 함수객체가 <Button/> 구성요소가 props형태로 함수객체가 전달되고 있습니다.rightChild={<Button onClick={onIncreaseMonth} text={">"}/>}Button 구성요소에는 전달받은 onClick 전달받은함수객체에 대해서 별도 처리가 없어도 되는것인가요?const Button = ({text, type, onClick}) => { console.log("Button onClick : ", onClick) return ( <button onClick={onClick} className={`Button Button_${type}`}> {text} </button> ) }