15강 객체 강의 6분 let name = person.name;블록 범위 변수 'name'을 다시 선언할 수 없습니다라고 나옵니다 

안녕하세요,강의 잘 듣고있습니다! 16분 쯤에 montlyData를 만들어서 호출하는 부분인데개발자도구로 체크해봤을때 hooks가 선생님처럼 나오지 않고 저런 함수 형태?로 출력이 되어서 그런지 오류가 나서 진행이 되지 않습니다ㅜ눈알빠지게 찾아봤는데도 잘 모르겠어서 글을 씁니다ㅠㅠ한번 체크 부탁드립니다  //App.jsx 파일입니다 const mockData = [ { id: 1, createdDate: new Date("2024-09-30").getTime(), emotionId: 1, content: '1번 일기' }, { id: 2, createdDate: new Date("2024-09-29").getTime(), emotionId: 2, content: '2번 일기' }, { id: 3, createdDate: new Date("2024-08-02").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.data.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(3); 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}> <DiaryStateContext.Provider value={{ onCreate, onUpdate, onDelete }}> <Routes> <Route path="/" element={<Home />}></Route> <Route path="/new" element={<New />}></Route> <Route path="/diary/:id" element={<Diary />}></Route> <Route path="/edit/:id" element={<Edit />}></Route> <Route path="*" element={<Notfound />}></Route> </Routes> </DiaryStateContext.Provider> </DiaryStateContext.Provider> </> ) } export default App 

리액트 강의를 듣고 스프링부트랑 연동해서 리액트 코드를 짜고 있습니다. 지금 로그인 부분 처리하다가 막혀서 정말 구글링도 해보고 며칠째 하다가 도저히 해결이 안돼서 질문 드립니다.지금 로그인처리가 되면 sessionStorage에 로그인 회원 정보를 담고 navigate함수를 이용해 Main컴포넌트로 보냈습니다. 근데 다른 컴포넌트들에서도 이 로그인회원 정보를 사용하기 위해 최상위컴포넌트인 App컴포넌트에서 sessionStorage.getItem()해서 state값에 저장하고 그걸 context로 하위 컴포넌트들에게 제공했는데 로그인되고 navigate함수로 Main컴포넌트로 가면 context로 저장한 state값이 null이 되고 새로고침해보면 state값이 잘 들어오더라고요ㅠㅠ 비동기함수인것과 관련있을까요??새로고침없이 컴포넌트에서 바로 state값을 이용하고 싶으면 어떻할까요? state값 이용해서 바로 화면에도 렌더링도 해야하는 상황입니다 ㅠㅠ강의와 관련된 내용은 아니지만 프로젝트를 혼자 만들다보니 잘 안되는 부분이 많아 질문드립니다 !

await mongoose.connect(MONGO_URL); // 제거 하시고 사용 하세요 // 버전6부터 해당 옵션을 사용하지 않아도 돼요https://mongoosejs.com/docs/migrating_to_6.html(공식문서) 보세요. 참고하세요

안녕하세요.. 프록시 사이트 (http://spys.one/free-proxy-list/KR/) 에 있는 프록시 사이트에 대한 정보를 가져와서, sqlite에 저장하는 코드로 테스트 하고 있습니다. 두가지 문제 현사잉 발생하고 있습니다.관련 크롤러 함수를 실행했는데, puppeteer의 브라우저 화면이 안나나나지만, 프록시 사이트 정보를 클로링은 합니다. 현재 headless:false로 해서 브라우저를 기동시키고 있는데, 왜 이런 형상이 발생할 까요?  인터넷 정보를 서치하다 보니, 브라우저 실행시 '--no-sandbox'를 해보하고 해서 해봤더니, 페이지 보이기는 합니다. (이 옵션의 의미는 무엇인지 궁금합니다.)강의 동영상에서 알려주신대로 크롤링 된 사이트에서 latency가 가장 작은 ip를 이용해서 브라우저 실행시 --proxy-server=fastestProxy 로 설정한 후 네이버 IP 확인 페이지를 호출했는데,Error: net::ERR_TIMED_OUT at https://search.naver.com/search.naver?where=nexearch&ssc=tab.nx.all&query=%EB%82%B4%EC%95%84%EC%9D%B4%ED%94%BC%EC%A3%BC%EC%86%8C&sm=tab_she&qdt=0 가 발생하는데, 이는 네이버에서 Proxy서버에서 접근하는 것을 막아서 발생하는 것인가요? 프록시 서버를 사용하지 않고 브라우저를 생성하면, 정상적으로 접근되어서 제 IP 주소를 확인할 수 은 있습니다.강의 처럼 변경된 프록시 서버의 ip를 확인할 수 있는 방법이 무엇인지 알려주시면 좋겠습니다.

function main(value) { value(); } function sub() { console.log("sub"); } main(sub);여기서 main() 을 호출하면 main 함수를 호출하게 되고,main 함수에서는 매개변수로 value를 받고 있는데main(sub)를 호출하게 되면 main() 함수가 실행이 되고,여기서 main 함수 안에 있는 value()는 매개변수로 받은 값이 value라서 value()이렇게 매개변수로 받은 이름으로 함수를 호출하는걸까요? 그럼 만약 매개변수로 aaa를 받았다면 main 함수 안에서 aaa()를 호출하게 되면 동일하게 sub() 함수가 호출되는걸까요? main 함수 안에서 매개변수로 받은 value()를 호출하는것과함수 sub()를 바로 호출하는것과의 장단점이 있을까요? 그리고 main 함수 안에서 value를 호출하는것과 value()를 호출하는것의 차이가 어떤게 있을까요??value()를 호출할때는 매개변수로 받은 콜백함수를 호출해서 실행을 하는걸로 이해를 하고 있는데 value를 호출을 하면 아무런 변화가 없는데 value를 호출하는 경우도 자주 보이던데 이렇게 호출을 하는 이유가 무엇일까요?  

// socket.js socket.on('disconnect', async () => { console.log('chat 네임스페이스 접속 해제'); // /room/방아이디 => URL에서 가져오기. const { referer } = socket.request.headers; const roomId = new URL(referer).pathname.split('/').at('-1'); const currentRoom = chat.adapter.rooms.get(roomId); // 현재 방의 인원이 0이면(방장도 나감) 자동삭제. const userCount = currentRoom?.size || 0; if (userCount === 0) { await removeRoom(roomId); room.emit('removeRoom', roomId); // room 네임스페이스에 이 방이 제거됬다고 알려서 실시간으로 제거할 것임. console.log('방 제거 요청 성공'); } else { // 시스템 메시지 DB 저장 const systemChat = `${socket.request.session.color}님이 퇴장하셨습니다.`; await createChat(roomId, 'system', systemChat); const memberList = [...currentRoom].map((socketId) => { return { color: chat.sockets.get(socketId).request.session.color, socketId, }; }); // 누군가 나가면 그 방의 모든 사람에게 시스템 메시지 및 정보 전달. socket.to(roomId).emit('exit', { user: 'system', chat: systemChat, memberList, }); } }); }); }; 여기서 chat.adapter.rooms.get(roomId) = currentRoom이 Set객체인데 여기 쌓이는 socketId들은 접속한 순서대로 쌓이나요? 그러니까, 시간순 정렬이 되어있는 건가요? 방장 위임하는 기능 구현 중인데 '방에 방장 정보를 저장한다' 이걸 어떻게 해야할 지 모르겠습니다🤔

안녕하세요.. 5-1 페이스북 로그인/로그아웃 관련 강의를 따라 하고 있습니다.puppeteer의 page를 이용해서 로그인 버튼까지는 클릭해서 실행까지는 되는 것 같습니다.그래서 로그인 버튼 클릭후에 사용자에게 로그인 승인 알람 메시지를 처리해야 실질적인 로그인 페이지로 넘어가고 있는 상황입니다. 이럴경우 강의 시간에 알려주신 방법들은 대부분이 타임아웃 오류가 발생합니다. 이 부분을 어떻게 해결해야 할지 방법을 알려 주시면 좋겠습니다. 강의 내용의 모습이랑. 현재시점의 페이스북이 달라서 수정하는 것이 초보자에게는 어렵네요.. 

import "./List.css"; import TodoItem from "./TodoItem"; import { useState } from "react"; const List = ({ todos, deleteTodo, updateTodos }) => { const [filtered, setFiltered] = useState(""); const onChange = (e) => { setFiltered(e.target.value.toUpperCase()); }; const getfiteredData = () => { return todos.filter((todo) => { return todo.content.toUpperCase().includes(filtered); }); }; const filteredTodos = getfiteredData(); return ( <div className="list"> <h4>Todo List 🌱</h4> <input type="text" placeholder="검색어를 입력하세요" onChange={onChange} /> <div className="todoWrapper"> {filtered ? filteredTodos : todos.map((todo) => { return ( <TodoItem {...todo} key={todo.id} deleteTodo={deleteTodo} updateTodos={updateTodos} /> ); })} </div> </div> ); }; export default List; 이렇게 하니까Uncaught Error: Objects are not valid as a React child (found: object with keys {id, isDone, content, date}). If you meant to render a collection of children, use an array instead. at throwOnInvalidObjectType (react-dom_client.js?v=6a67398a:9932:17) at updateSlot (react-dom_client.js?v=6a67398a:10153:15) at reconcileChildrenArray (react-dom_client.js?v=6a67398a:10249:30) at reconcileChildFibers2 (react-dom_client.js?v=6a67398a:10557:24) at reconcileChildren (react-dom_client.js?v=6a67398a:14290:37) at updateHostComponent (react-dom_client.js?v=6a67398a:14805:11) at beginWork (react-dom_client.js?v=6a67398a:15933:22) at beginWork$1 (react-dom_client.js?v=6a67398a:19751:22) at performUnitOfWork (react-dom_client.js?v=6a67398a:19196:20) at workLoopSync (react-dom_client.js?v=6a67398a:19135:13)콘솔에 이런 오류가 뜨더라구요... 객체를 보내지도 않았는데 이렇게 하면 안되는 이유가 있나요?

PS C:\ONEBITE-REACT> npm installnpm error code ENOENTnpm error syscall opennpm error path C:\ONEBITE-REACT\package.jsonnpm error errno -4058npm error enoent Could not read package.json: Error: ENOENT: no such file or directory, open 'C:\ONEBITE-REACT\package.json'npm error enoent This is related to npm not being able to find a file.npm error enoentnpm error A complete log of this run can be found in: C:\Users\imij0\AppData\Local\npm-cache\_logs\2024-09-25T12_36_16_923Z-debug-0.log 지금 이런 에러가 뜨는데 이거 배우기 전에 node.js 깔았는데 이거 굳이 npm install은 안해도 되나요?>적용도 다 해둔 상황이긴 한데 괜찮은건가요?

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

강사님 vs코드 화면에서처럼 오류 메시지 바로 볼 수 있게 하려면 어떻게 하나요?ESlint 설치는 했습니다.터미널에서는 오류 내용 나오는데, 편집창에서 나왔으면 좋겠네요 ㅠ 🚨 아래의 가이드라인을 꼭 읽고 질문을 올려주시기 바랍니다 🚨질문 하시기 전에 꼭 확인해주세요- 질문 전 구글에 먼저 검색해보세요 (답변을 기다리는 시간을 아낄 수 있습니다)- 코드에 오타가 없는지 면밀히 체크해보세요 (Date와 Data를 많이 헷갈리십니다)- 이전에 올린 질문에 달린 답변들에 꼭 반응해주세요 (질문에 대한 답변만 받으시고 쌩 가시면 속상해요 😢)질문 하실때 꼭 확인하세요- 제목만 보고도 무슨 문제가 있는지 대충 알 수 있도록 자세한 제목을 정해주세요 (단순 단어 X)- 질문의 배경정보를 제공해주세요 (이 문제가 언제 어떻게 발생했고 어디까지 시도해보셨는지)- 문제를 재현하도록 코드샌드박스나 깃허브 링크로 전달해주세요 (프로젝트 코드에서 문제가 발생할 경우)- 답변이 달렸다면 꼭 확인하고 반응을 남겨주세요- 강의의 몇 분 몇 초 관련 질문인지 알려주세요!- 서로 예의를 지키며 존중하는 문화를 만들어가요. - 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요.

강의에 음성만 있는데 영상이 없는 강의일까요? 확인해볼수 있는 방법이 없어서 문의드립니다. 감사합니다.

🚨 아래의 가이드라인을 꼭 읽고 질문을 올려주시기 바랍니다 🚨질문 하시기 전에 꼭 확인해주세요- 질문 전 구글에 먼저 검색해보세요 (답변을 기다리는 시간을 아낄 수 있습니다)- 코드에 오타가 없는지 면밀히 체크해보세요 (Date와 Data를 많이 헷갈리십니다)- 이전에 올린 질문에 달린 답변들에 꼭 반응해주세요 (질문에 대한 답변만 받으시고 쌩 가시면 속상해요 😢)질문 하실때 꼭 확인하세요- 제목만 보고도 무슨 문제가 있는지 대충 알 수 있도록 자세한 제목을 정해주세요 (단순 단어 X)- 질문의 배경정보를 제공해주세요 (이 문제가 언제 어떻게 발생했고 어디까지 시도해보셨는지)- 문제를 재현하도록 코드샌드박스나 깃허브 링크로 전달해주세요 (프로젝트 코드에서 문제가 발생할 경우)- 답변이 달렸다면 꼭 확인하고 반응을 남겨주세요아래와 같이 강의 들으면서 코딩 했는데,DiaryList.jsx Home.jsx 아래와 같이 맵 관련 인식이 안되는 오류가 납니다.Uncaught TypeError: data.map is not a function at DiaryList (DiaryList.jsx:17:15)  어디가 잘못된지 모르겠어서 질문드립니다.- 강의의 몇 분 몇 초 관련 질문인지 알려주세요!- 서로 예의를 지키며 존중하는 문화를 만들어가요. - 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요.

안녕하세요.. 3-2강을 따라하고 있습니다. 3-1강에서 발생한 선택자 관련 문제는 docuemnt.querySelector를 이용해서 포스터 이미지 태그의 src를 가져오는 것은 되었습니다.추출된 url을 이용하여 웹브라우저에서 해당 이미지를 확인할 수 있었습니다. 그런데,3-2강에 나와있는대로, axios를 이용하여 해당 이미지를 다운로드 받으려고 하니, 오류가 발생합니다. 오류 내용은 아래 이미지와 같습니다.커뮤니티 게시판에 AxiosError 메시지 걺색을 했는데 결과가 없어서.. 바로 질문 올립니다. 어떻게 해결해야 할까요? 

안녕하세요.. 현재 3-1강을 따라 하고 있씁니다.현재 네이버 영화사이트가 강의시점하고 달라서 현재 url에 맞게 테스트 하면서 따락 가고 있습니다.그런데 지금 네이버가 보여주는 웹사이트에서 영화포스터 이미지를 다운로드 받으려고, css 선택자를 구성하고자 하는데, 잘 안됩니다. 도움을 주시면 좋겠습니다. 현재의 네이버 영화url에서 포스터 이미지는 위의 이미지에서 빨간선에 둘러싸인 이미지라고 판단햇습니다. 요소 선택자로 해당 요소를 선택하니, 제생각에는 '.detail_info a.thumb._item ._img' 라고 생각했는데, 콘솔창에서 .$('.detail_info a.thumb._item img._img')를 입력했더니 null 이 나옵니다. 어떻게 선택자를 구성해야 하는지 알 수 있을까요? 콘솔에서 해당 이미지의 src를 추출되어야 할 텐데.. 이미지가 선택안되어서 계속 오류가 발생합니다.   

안녕하세요.. 최근에 강의를 수강하고 있습니다.2-4강을 따라서 테스트하고 있습니다.그런데 총 10개의 링크를 가져와서 puppeteer를 이용해서 평점값을 가져오는데, 중간에 하나의 결과를 저장하지 않는 오류가 발생합니다. 왜 그럴까요? 처음에는 인덱스 번호 2번이 undefined 되더니, 이번에는 인덱스 7번이 생성이 안되어서 cs 파일 생성시 오류가 발생합니다. 이런 현상은 왜 발생할까요?

어떨 때 useRef를 사용하고 어떨 때 useState를 사용하는지 기준을 모르겠어요. 리렌더링 즉 화면 UI가 변할 때usestate를 사용한다고 생각해도 될까요? Input 값이 비어있으면 폼을 제출 못하고 focus()하는 메서드를 사용할 때 포커스도 화면 UI가 변경된 것일텐데, useref를 사용하는 거 같더라구요 그렇다면 리액트가 변화를 감지해야할 때는 usestate를 사용하고 감지하지 않아도 되는 경우에는 useref를 사용한다고 생각해야할까요?? 마지막으로 keyframe애니메이션을 사용하려면 UI가 변경되었기때문에 usestate로 사용해야하는 걸까요? 아니면 리액트가 그 변화를 감지하지 않아도 되기때문에 useref를 사용해야하는 걸까요?ㅠㅠ 정말 헷갈립니다

안녕하세요!카운터앱 구현하기를 조금 다르게 코드를 짜보았는데, 커스텀훅을 활용법에 익숙하지 않아서, 이렇게 구현하는 방법이 적절한지 감이 안와요.. 바쁘신데 죄송하지만 아래와 같은 커스텀훅 구현방식의 장단점에 대해서 알려주시면 감사하겠습니다! 먼저 useCount.jsx를 아래와 같이 작성하였구요import { useState } from 'react'; function useCount() { const [num, setNum] = useState(0); const onClinkCount = (e) => { setNum(num + Number(e.target.value)) } return [num, onClinkCount]; } export default useCount; 아래는 넘버 조작 부분인 Controller.jsxconst Controller = ({ onClinkCount }) => { return ( <div> <button onClick={onClinkCount} value="-1">-1</button> <button onClick={onClinkCount} value="-10">-10</button> <button onClick={onClinkCount} value="-100">-100</button> <button onClick={onClinkCount} value="+100">+100</button> <button onClick={onClinkCount} value="+10">+10</button> <button onClick={onClinkCount} value="+1">+1</button> </div> ) } export default Controller카운트 넘버 표시부분인 Viewer.jsxconst Viewer = ({ num }) => { return ( <div> <div>현재 카운트:</div> <h1>{num}</h1> </div> ) } export default Viewer그리고 부모 컴포넌트인 App.jsx 입니다.import "./App.css" import Controller from './components/Controller' import Viewer from './components/Viewer' import useCount from './hooks/useCount' function App() { const [num, onClinkCount] = useCount(); return ( <div className='App'> <h1>Simple Counter</h1> <section> <Viewer num={num} /> </section> <section> <Controller onClinkCount={onClinkCount} /> </section> </div> ) } export default App    🚨 아래의 가이드라인을 꼭 읽고 질문을 올려주시기 바랍니다 🚨질문 하시기 전에 꼭 확인해주세요- 질문 전 구글에 먼저 검색해보세요 (답변을 기다리는 시간을 아낄 수 있습니다)- 코드에 오타가 없는지 면밀히 체크해보세요 (Date와 Data를 많이 헷갈리십니다)- 이전에 올린 질문에 달린 답변들에 꼭 반응해주세요 (질문에 대한 답변만 받으시고 쌩 가시면 속상해요 😢)질문 하실때 꼭 확인하세요- 제목만 보고도 무슨 문제가 있는지 대충 알 수 있도록 자세한 제목을 정해주세요 (단순 단어 X)- 질문의 배경정보를 제공해주세요 (이 문제가 언제 어떻게 발생했고 어디까지 시도해보셨는지)- 문제를 재현하도록 코드샌드박스나 깃허브 링크로 전달해주세요 (프로젝트 코드에서 문제가 발생할 경우)- 답변이 달렸다면 꼭 확인하고 반응을 남겨주세요- 강의의 몇 분 몇 초 관련 질문인지 알려주세요!- 서로 예의를 지키며 존중하는 문화를 만들어가요. - 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요.

이 강의에서 MUI에 대한 것도 배우는지 궁금합니다.