import React, {useState} from "react"; import "./App.css"; export default function App () { const [todoData, setTodoData] = useState([ { id:"1", title:"공부하기", completed: false, }, { id:"2", title:"청소하기", completed: false, } ]); const [Value,setValue] = useState(""); // 첫번째 인수는 변수 두번재 인수는 state를 정하는 변수 const btnStyle ={ color: "#fff", border: "none", padding: "5px 9px", borderRadius: "50%", cursor: "pointer", float:"right", }; const getStyle = (completed) => { return{ padding:"10px", borderBottom:"1px #ccc dotted", textDecoration: completed ? 'line-through' : "none", }; }; const handleClick = (id) =>{ let newTodoData = todoData.filter(data => data.id !== id) console.log("newTodoData",newTodoData) setTodoData(newTodoData); }; const handleChange = (event) => { console.log("event",event.target.Value) setTodoData(event.target.Value); }; const handleSubmit = (event) =>{ console.log("event",event) event.preventDefault(); // reload를 막아줌 // 새로운 할일 데이터 let newTodo ={ id: Date.now(), title : Value, completed: false, }; // 원래 있던 할 일에 새로운 할일을 더해주기 setTodoData(prev => [...prev,newTodo]); setValue(""); }; const handleCompleteChange = (id) => { console.log("todoData",todoData) let newTodoData = todoData.map((data) =>{ if(data.id === id){ data.completed = !data.completed; } return data; }); setTodoData(newTodoData) }; return ( <div className="container"> <div className="todoBlock"> <div className="title"> <h1>할일 목록</h1> </div> {todoData.map((data) => ( <div style={getStyle(data.completed)} key={data.id}> <input type="checkbox" defaultChecked={false} onChange={() => handleCompleteChange(data.id)}/> {data.title} <button style={btnStyle} onClick={() => handleClick(data.id)}>x</button> </div> ))} <form style={{display:'flex'}} onSubmit={handleSubmit}> <input type="text" name="value" style={{flex:'10', pedding:'50'}} placeholder="해야 할 일을 입력하세요." value={Value} onChange={handleChange}/> <input type="submit" value="입력" className="btn" style={{flex:'1'}} /> </form> </div> </div> ); }아래 코드에서 form에 어떠한 글자를 입력하면 Console 창에 왜 Uncaught TypeError: Cannot read properties of undefined (reading 'map')에러가 발생하는지 도저히 모르겠습니다.혹시 아시는분 답변 부탁드립니다.감사합니다.

Re-run all jobs 버튼이 없어서 node.js에서 오류가 발생하는데 혹시 어떻게 해야할까요?

따라 치면서 실습하는데 적용이 안 되길래 삽질 하다가혹시나 싶어서 강의 자료를 다운 받아 npm run start 해 보았는데요그것도 이렇게 적용이 안 되게 보이네요...뭐가 문제일까요? ㅜ.ㅜ

강의 내용 중 useMemo 부분의 실습이 없어서 질문드립니다. Component.js로 컴포넌트를 작성하고App.js에서 컴포넌트를 호출해봤는데요. App.js..<div>{<Component a={1} b={5} />}</div> ... Component.js...useMemo(() => compute(a,b),[a,b]); ...이렇게 작성했을 때 useMemo가 제대로 작동하고 있는지 확인하고 싶은데요. useEffect는 console.log로 확인이 됐는데 useMemo는 어떻게 확인을 할 수 있을까요?(useEffect랑 useMemo는 방식이 달라서 useEffect에 로그를 찍어봤자 useMemo를 확인할 수 없었어요...)

안녕하세요.모달창 을 띄우고 스크롤을 하면 모달창밖에 화면이 스크롤이 되는데 이부분도useRef를 이용해서 막을 수 있을까요??

이러한 API_URL은 어떻게 알 수 있을까요 ? https://www.themoviedb.org 사이트에 정보가 나와있는 걸까요 ?

선생님 강좌 하다보니까 스타일 관련이 좀어려운 부분이 있는데요혹시 스타일 쉽게 구현하는 법이 있나요? 미디어쿼리 z인덱스니 포지션 이런거 한번에 해결해주는 툴은없는지요?

const {data:moviedetail} = await axios.get(`movie/${movieId}`,{params:{append_to_reponse:'videos'}}) setmovie(moviedetail)`movie/${movieId}`,{<---------- 이부분이요 params:{append_to_reponse:'videos'}});선생님 저 윗 부분은1. 중괄호로 params를 묶으신건 어떤걸 의미하는건가요?2.append_to_response:'videos' 이부분은 문법인가요?감사합니다

선생님 안녕하세요? 강의 잘 듣고 있습니다.Styled Component를 이용한 비디오 배너 만들기에서iframe에서 src에 movie.videos.results가 없을 경우 오류가 생깁니다.저는 여기에 옵셔널 체이닝(?.)을 걸어 만약에 movie.videos.results이 없을 경우 undefined를 반환하게 하는 방식으로 해결했습니다. 이렇게 한 경우 오류 페이지가 보이는 대신 동영상을 재생할 수 없다고 뜹니다.이렇게 하는 방법도 괜찮은지, 혹시 더 좋은 방법이 있다면 가르쳐 주세요.감사합니다.src={`https://www.youtube.com/embed/${movie.videos.results[0]?.key}?controls=0&autoplay=1&loop=1&playlist=${movie.videos.results[0]?.key}`}

디비 api 사이트 회원가입이 안됩니다

강의 잘 보고 많이 배우고 있습니다 ! "append_to_response"는 사용자가 다르게 바꿀 수 있는 부분인가요 ? 아니면 axios 속성인가요 ? 

강사님 안녕하세요.   지난 번 TDD 오류가 났고 문제 해결했는데   그 이후로 계속해서 오류가 나지 않고 ok만 뜨고 있네요.   이럴 땐 어떻게 문제를 해결하면 좋을까요? 깃허브에 커밋해주신 코드를 살펴보면서 수정하면 좋을까요..?   접근 방법을 잘 몰라서 문의 드립니다.

안녕하세요 선생님... 아래 부분 이해를 못했는데 다시 한 번 설명 가능하신가요? ㅠㅠ const { data: movieDetail } = await axios.get(`movie/${movieId}`, { params: { append_to_response: "videos" }

str?.length > n ? str.substr(0, n - 1) + "..." : str;   이부분을    (str.length > n) ? str.substr(0, n - 1) + "..." : str;   썼더니 에러가 납니다..  (Cannot read properties of undefined (reading 'length'))   str? -->> 삼항연산자의 시작이라는 건 알겠는데 .. .length의 의미는 뭔가요

안녕하세요 강사님 TDD 작성 중에 맨 아래 About me에서만 에러가 나네요. Blog는 정상적으로 작동하고요. 어떻게 에러를 고쳐야 할까요?        

  안녕하세요 좋은 강의 잘 듣고있습니다. 감사합니다.   useOnClickOutside 함수에서   document.addEventListener("mousedown", listener); document.addEventListener("touchstart", listener); 를 이용해서 모달 창 외부를 클릭했는지 감지하는 것으로 이해했습니다.   그래서 저는 mousedown과 touchstart 대신에 document.addEventListener("click", listener) 을 써도 되지 않을까 싶어서 해봤는데 이렇게 하니까 모달창이 아예 나타나지 않더라구요.   'touchstart' 이벤트 리스너는 없어도 동일하게 동작하는 것 같은데 'click' 'mousedown' 이벤트는 어떤 차이가 있는 것인지 궁금합니다. 감사합니다.  

    여기서 41번째줄 params 빨간줄 지나가도 괜찮나요 실행은 잘되는데 이유가 궁금합니다 undefine이라고 하는데... 잘모르겠네요

사이트에 나와있다면 어디에 나와있는지 알려주시면 감사하겠습니다 !

https://github.com/kkyu0718/react-study/tree/main/react-netflix-clone 코드는 위에 있습니다. 일단은 app.js 가 한번 렌더링되면서 banner도 한번 렌더링 되어야하는데 이렇게 8번이 실행됩니다. 1번 때문에 실행이 안되고 있는 걸수도 있는데 useEffect() 에서의 fetchData가 실행이 되고 있지않아 Uncaught TypeError: Cannot read properties of undefined (reading 'results') 가 발생하는거 같습니다. 코드를 다시 아무리봐도 문제는 없어보이는데 혹시 어떻게 해결해야될까요?     

  useEffect(() => {       first           return () => {         second       }     }, [third]) useEffect를 사용할때 first는 처음 렌더링이 된후에 실행 second는 앱이 종료될때 실행되고 third는 어떠한 state가 변경될때 useEffect를 다시 실행할것인가? 로 이해를 했습니다 여기서 질문이 있는데  nav.js에서는 처음 렌더링후 우리가 스크롤을 하였을때 추가적인 렌더링이 필요하기에 useEffect로 이벤트를 만들었다 라고 이해를 하였는데 Banner.js에서는 백그라운드이미지 경로에 movie.backdrop_path를 넣는데 렌더링 되기전에 useEffect가 먼저 실행이 된것인가요? 먼저 실행이 안되면 movie안에는 아무것도 없지 않나요?  실력이 없어 질문이 일목요연하지 못한점 죄송합니다     추가로 console.log()로 찍어보니 렌더가 되고 useEffect()가 실행이 되어서 setmovie로 스테이트를 set해주고 그래서 스테이트가 바뀌니 다시 렌더가 되고 근데 문제는 처음에 렌더가 될때 movie가 비었기 때문에 에러가 떠야하는데 순서가 위와 같이 나옵니다 렌더 에러 이펙트 렌더가 맞지 않나요?