대규모 트래픽 환경에서 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초 입니다!

안녕하세요. 강사님.콜백함수 챕터에서 repeat 함수에서 호출하는 Callback 함수에 인수를 하나로 넣어주고 있는데 callback 함수가 어떤 함수 인지 모르는 상태에서 인수가 여러개인 함수를 넣어 준다면 오류가 발생하지 않을까요?callback 함수로 들어오는 인자가 잘못된 경우 안에서 타입 체크등을 하기도 하는지 궁금합니다.

안녕하세요! 강의 잘 듣고 있습니다ㅎㅎ이번 강의에서 React dev tools의 'Highlight updates when components render' 옵션을 통해서 컴포넌트가 언제 리렌더링 되는지 감지하는 방법을 알려주셔서 해당 내용 학습 중에 궁금한게 생겨 질문 드립니다. 해당 옵션을 켜고, 이번 강의의 실습 내용 중에서 input 영역을 input component로 분리하면 다른 component와 어떠한 영향도 주고 받지 않으니까 input을 작성할 때 input 영역만 highlight가 될 거라 예상했는데요,실제로는 형제 컴포넌트도 다 같이 리렌더링 되는 것처럼 보이더라구요. 이 현상이 제 코드의 문제인건지, 다른 이유가 있는건지 궁금합니다. input component를 분리한 App.jsx와 Input.jsx를 아래에 코드로 첨부했습니다.[App.jsx]import { useState, useEffect, useRef } from 'react' import "./App.css" import Viewer from './components/Viewer' import Controller from './components/Controller' import Even from './components/Even' import Input from './components/Input' function App() { const [count ,setCount] = useState(0); const handleClickCount = (addValue) => { setCount(count + addValue) } return ( <div className="App"> <h1>Simple Counter</h1> <section> <Input /> </section> <section> <Viewer count={count} /> {count % 2 === 0 ? <Even /> : null} </section> <section> <Controller onCount={handleClickCount}/> </section> </div> ) } export default App[Input.jsx]import { useState } from "react"; const Input = () => { const [input, setInput] = useState(""); return ( <input value={input} onChange={(e) => { setInput(e.target.value) }} /> ) } export default Input;

저는 vercel과 cloudtype 을 이용해 배포를 했습니다.gitlinkfront-linkbackend-link업무게시판등 backend연동이 잘 되지만, admin에서 문제가 있습니다. 수업에 진행한 아이디와 패스워드로, 진행했고, 오류가 나는 부분들을 계속 수정해 보았으나, 로그인연동이 안되서 문의 드립니다. 데이터는 git에 업로드된 내용으로 확인해 주시면 좋겠습니다.

현재 로컬에서 redis 설치해서 학습 진행 중입니다!맥 환경에서 도커 없이 로컬에 설치된 redis에 redisJson 붙여서 사용하는 방법이 궁금합니다!

redis insight 를 현업에서 모니터링 툴로 많이 사용을 하는 지 궁금합니다!

안녕하세요.저는 현재 고농축 프론트엔드와 백엔드 강의를 모두 수강 중인데요,최근에 ‘완벽한 프론트엔드’ 강의가 새로 생긴 걸 알게 됐습니다.이미 고농축 강의를 수강 중인데도, 완벽한 프론트엔드 강의도 수강하는 게 도움이 될까요?그리고 ‘고농축 프론트엔드’와 ‘완벽한 프론트엔드’의 가장 큰 차이점이 궁금합니다.혹시 고농축 강의를 수강한 사람 입장에서 완벽한 프론트에서 꼭 들어야 하는 파트가 있다면 추천도 부탁드립니다!그리고 혹시 ‘완벽한 프론트엔드’ 강의에 대해 쿠폰을 받을 수 있는지도 문의드립니다.

"Create-투두 추가하기" 강의 11분쯤에 나오는 엔터로도 버튼 실행하기에 관해 질문이 있습니다. onKeyDown 함수를 추가하기전엔 input박스에서 한버튼을 꾹 누르고있으면 연속해서 값이 입력 되었었는데,강의와 같이 onKeyDown 함수를 추가하고 나면 한가지 키를 꾹 누르고 있어도 하나만 입력 됩니다.(ex. E버튼을 꾹 누르는 경우,"EEEEEEEEEEEEE" 이렇게 입력 되었었는데,onKeyDown을 추가하면 "E" 이렇게 하나만 입력됩니다.) 엔터로 버튼을 실행하면서한가지 키를 꾹 눌러서 연속적으로 값도 입력할 수 있는 방법이 있는지 궁금합니다. 감사합니다.

강의 6분쯤에 "" 으로 공백이었던 useState의 초깃값을 "이름"으로 바꿔주면서 value={name} 구문을 추가해주셨는데요, 공백일 때에는 같은 문자열임에도 해당 구문 없이도 잘 작동했는데 "이름"으로 설정했을 때에는 해당 구문이 필요한 이유는 무엇인가요? 지피티에 물어보니 Uncontrolled와 controlled input이라는 새로운 개념을 언급하길래 잘 이해가 안 되어 여쭤봅니다!

해당 오류 발생하여 아래와 같이 power shell에서 RemoteSigned 으로 변경하였습니다..다른 방법이 있을까요 ㅠ