인라인 스타일 사용 시 style이라는 객체 prop이 매번 달라져 리렌더링이 발생한다고 해주신 부분 관련하여 질문드립니다 부모가 리렌더링되는 상황이라 이와 무관하게 자식의 리렌더링도 유발하게 될텐데요자식 컴포넌트 자체에 memo를 적용하는 경우가 아니라면, useMemo를 쓰더라도 최적화 효과가 없을 것으로 보이는데 맞을까요?

jsx파일의 코드를 수정하면 영상처럼 바로바로 바뀌어야하는데 웹을 클릭하면 새로고침되고 클릭안하면 업뎃이 안돼요

강의 영상 2분에 보면 app.use('/users', require('./routes/users'));가 있는데 전 영상들에서 저런 코드는 없었는데 따로 추가해야하나요 

안녕하세요. 강사님mac os에서 react 실습을 위해 npm create vite@latest 명령으로 프로젝트 생성후npm install 명령어 사용시 아래와 같은 에러가 발생하였습니다. npm error code EEXISTnpm error syscall renamenpm error path /Users/iyyu/.npm/_cacache/tmp/9f07dca7npm error dest /Users/iyyu/.npm/_cacache/content-v2/sha512/49/2e/ac0ddadc45673e1875be27d9e800ecb71c6d19b3093d78eae941b57686d6db724a1416e97affe9b66f3897f6634e1238fad6515f2d530f293983e18230d3npm error errno EEXISTnpm error Invalid response body while trying to fetch https://registry.npmjs.org/json5: EACCES: permission denied, rename '/Users/iyyu/.npm/_cacache/tmp/9f07dca7' -> '/Users/iyyu/.npm/_cacache/content-v2/sha512/49/2e/ac0ddadc45673e1875be27d9e800ecb71c6d19b3093d78eae941b57686d6db724a1416e97affe9b66f3897f6634e1238fad6515f2d530f293983e18230d3'npm error File exists: /Users/iyyu/.npm/_cacache/content-v2/sha512/49/2e/ac0ddadc45673e1875be27d9e800ecb71c6d19b3093d78eae941b57686d6db724a1416e97affe9b66f3897f6634e1238fad6515f2d530f293983e18230d3npm error Remove the existing file and try again, or run npmnpm error with --force to overwrite files recklessly.npm error A complete log of this run can be found in: /Users/iyyu/.npm/_logs/2025-07-05T06_41_32_142Z-debug-0.logiyyu@yuilyongui-MacBookAir session05 % npm install --forcenpm warn using --force Recommended protections disabled.npm error code EEXIST이전에 설치한 npm pakage 버전과 충돌 문제가 발생하는 듯 합니다.해결 방법을 알 수 있을까요?

강사님께 어떻게 직접질문할수있어요??

const함수같은거 기초강의는 어디있나요

리덕스 참조챕터가 어딨어요? 미리듣고오라는데요

결제기능 관련은 혹시 추가하실 계획이 있으신지 궁급합니다.

현재 [그랩마켓] React로 웹 개발하기 -2 듣고 있는데요, 1.그랩 선생님 소스 코드와 동일하게 아래 작성한 index.js 소스 첨부하는데요, 실행하면,1초 동안 잠깐 판매되는 상품들 이미지 없이 전체 페이지 뜨다 바로 아래 첨부한 그림과 같이 에러가 발생 합니다.이 에러는 어떻게 해결 할 수 있을까요?--------2. index.js 소스 아래에 작성 첨부 합니다. import './index.css'; import axios from "axios"; import React from 'react'; function MainPage(){ const [products, setProducts]=React.useState([]); React.useEffect( function(){ axios.get("이곳에는 제 mock 목 서버 주소를 넣었습니다/products") .then(function(result){ const products=result.data.products; setProducts(products); }).catch(function(error){ console.error("에러 발생:",error); }); },[]); return ( <div> <div id="header"> <div id="header-area"> <img src="../images/icons/logo.png" /> </div> </div> <div id="body"> <div id="banner"> <img src="../images/banners/banner1.png" /> </div> <h1>판매되는 상품들</h1> <div id="product-list"> { products.map(function(product, index){ return ( <div className="product-card"> <div> <img className="product-img" src={product.imageUrl} /> </div> <div className="product-contents"> <span className="product-name">{product.name} </span> <span className="product-price">{product.price}원 </span> <span className="product-seller"> <img className="product-avatar" src="../images/icons/avatar.png" /> <span>{product.seller}</span> </span> </div> </div> ); }) } </div> </div> <div id="footer"></div> </div> ); } export default MainPage;질문 하기 전 , 인프런 질문 올라와서 답변 올라온 것 다 적용해 보아도 해결이 안되어 이렇게 여쭈어 보게되었습니다. 무엇이 문제인지, 그리고 해결 방법은 무엇인지 알려 주시면 고맙겠습니다. 

npm create vite@latest . --template react 실행시면 설치 옵션에 바닐라랑 리액트가 있는데 리액트를 설치하는 거죠?그 다음에 나오는 옵션에선 타입스크립트랑 자바스크립트가 있는데 그것도 그냥 하나씩만 있는 게 아니고 js+SWC 이런 것도 있는데 뭐 설치해요?  

대규모 트래픽 환경에서 broadcasting을 잘 처리하는 방법이 궁금합니다.만약 파드가 60개가 띄워져 있고 60명의 유저가 각 파드에 한 명씩 room에 배치되었다고 할 때, a 유저의 메시지를 60명의 유저에게 보여져야 한다고 가정해 보겠습니다.이때, 한 파드에 유저 모두가 room에 들어와 있는 게 아니라 각 파드 별로 room에 유저가 한 명씩 배치되어 있다고 하면, 모든 유저에게 broadcast를 해야 할텐데 어떻게 해야 효율적으로 처리할 수 있을까요? 만약 단일 메시지만 전달해야 한다면, redis pub/sub 구조로 충분히 처리할 수 있을 것 같은데 streaming으로 작은 chunk 단위로 메시지를 보내야 하는 경우는 redis network bandwitdh를 가뿐히 뛰어넘을 것 같습니다.room의 기준이 되는 id를 hash화하여 특정 파드에 클라이언트의 socket 연결을 고정하는 방법도 사용하나요?예를 들어, room의 기준이 되는 id를 hash화 한 후에 한 채팅방 세션에 속한 유저들이 한 파드에 Socket 연결을 몰아서 이어버린다면, broadcasting을 하지 않아도 될 것 같은데 이런 접근법은 많이 쓰이는지 궁금합니다. 감사합니다!

// src/App.jsx import { useState } from 'react' import viteLogo from '/vite.svg' import reactLogo from './assets/react.svg' import './App.css' function App() { const [count, setCount] = useState(0) return ( <div className="App flex items-center justify-center h-screen"> <h1 className="text-3xl font-bold underline"> Hello world </h1> </div> ) } export default App

마지막까지 다했는데 크롬 개발자도구에 redux란이 없습니다. 그리고 강의영상에선 아래코드에서 코드를 작성하면 젤 위에 import쪽도 자동 생성되던데 그건 혹시 어떻게 하는건가요

https://github.com/nature1339/react_shoppingmall  

쇼핑몰기능중 찜하기 기능은 어떻게 구현하나요

Recoil 지원 중단 문제로 강의에 나온 Recoil 관련 내용을 Jotai 라이브러리로 대체했습니다.여러 수강생 분들이 같은 문제를 겪는 듯해서 제가 사용한 코드를 공유합니다.recoil 제거 & jotai 설치npm uninstall recoil npm install jotaiatom.js 변환 코드: jotai 의 atom 에선 key 값이 없습니다.import {atom} from "jotai"; const testState = atom(['a', 'b', 'c', 'd']); export default testState;testWithComma.js: 마찬가지로 키 값이 없으며, 좀 더 단순하게 사용 가능합니다.import {atom} from "jotai"; import testState from "./atom.js"; const testWithComma = atom((get) => { const abcdArr = get(testState) return abcdArr.join(','); }) export default testWithComma;CompletionPage.jsx: useRecoilValue -> useAtomValue 로 변경하시면 됩니다.const testValue = useAtomValue(testWithComma); Jotai 와 Zustand 중 고민하다가 Jotai가 Recoil과 더 유사하다고 하여 우선 Jotai로 학습 진행했습니다. 강의 수강에 참고가 되길 바랍니다.

 제 노트북이 램이 8G인데 Ubuntu 설치해서 이용가능할까요?

리코일 에러 나시는분들 보세요 최근에 강의 시작하셨으면 리액트가 19로 설치되셨을탠데 리코일이 리액트 18까지만 지원하고있습니다. 원활하게 나머지 진행하시기위해서  npm install react@18 react-dom@18 --save으로 react18로 버전 낮춰주시면 나머지 진행 가능하십니다.

강의하다 줌으로 설명가능한지좀 정확히 알려주세요. 이 선생님 정책이 어떻게 되는데요. 직접 연락할 메일이라도 알려주세요

import "./List.css"; {import Todoitem from "./Todoitem"; const List = ({ todos }) => { return ( <div className="List"> <h4>Todo List🎉</h4> <input placeholder="검색어를 입력하세요"></input> <div className="todos_wrapper"> {todos.map((todo) => { return <div>todo</div>; })} </div> </div> ); }; export default List;  <질문> {todos.map((todo) => { return <div>todo</div>; })} {todos.map((todo) =>{ ....})} 빨간줄 친 todo는 어디서 나온건지 이해가 되지 않습니다 8.5) Read -투두리스트 렌더링하기 강의1분 46초 입니다!