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

- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요.import axios from "../api/axios"; import React, { useEffect, useState } from 'react' import requests from '../api/requests'; import "./Banner.css" import styled from "styled-components"; export default function Banner() { const [movie, setMovie] = useState([]); const [isClicked, setIsClicked] = useState(false); useEffect(() => { fetchData(); }, []); const fetchData = async() => { //현재 상영중인 영화 정보를 가져오기 (여러 영화) const request = await axios.get(requests.fetchNowPlaying); //여러 영화 중 영화 하나의 ID를 가져오기 const movieId = request.data.results[ Math.floor(Math.random() * request.data.results.length) ].id; //특정 영화의 더 상세한 정보를 가져오기 (비디오 정보도 포함) const {data: movieDetail} = await axios.get(`movie/${movieId}`, { params: {append_to_response: "videos"}, }); setMovie(movieDetail); } const truncate = (str, n) => { return str?.length > n ? str.substr(0, n - 1) + "..." : str; } console.log('movie', movie); if(!isClicked) { return ( <header className="banner" style={{ backgroundImage: `url("https://image.tmdb.org/t/p/original/${movie.backdrop_path}")`, backgroundPosition: "top center", backgroundSize: "cover", }}> <div className="banner__contents"> <h1 className="banner__title"> {movie.title || movie.name || movie.original_name} </h1> <div className="banner__buttons"> <button className="banner__button play" onClick={() => setIsClicked(true)} > Play</button> <button className="banner__button info">More Information</button> </div> <h1 className="banner_description"> {truncate(movie.overview, 100)} </h1> </div> <div className="banner--fadeBottom"></div> </header> ); } else{ return ( <Container> <HomeContainer> <Iframe width="640" height="360" src={`https://www.youtube.com/embed/${movie.videos.results[0].key}?controls=0&autoplay=1&loop=1&mute=1&playlist=${movie.videos.results[0].key}`} title="YouTube video player" allow="autoplay; fullscreen" ></Iframe> </HomeContainer> </Container> ); } } const Iframe = styled.iframe` width: 100%; height: 100%; opacity: 0.65; border: none; &::after { content:""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; }` const Container = styled.div` display: flex; justify-content: center; align-items: center; flex-direction: column; width: 100%; height: 100vh; ` const HomeContainer = styled.div` width: 100vw; height: 100vh;`  

강의대로 따라갔는데 강의처럼 렌더링이 되고 있지 않습니다 ㅠㅠ 어디가 문제일까요chatgpt는 서버가 없다 뭐 이렇다는데 ㅠㅠ 출력 화면  Nav.jsimport React, { useEffect, useState } from 'react' import"./Nav.css" export default function Nav() { const [show, setShow] = useState(false); useEffect(() => { window.addEventListener("scroll", ()=> { console.log('window.scrollY', window.scrollY); if(window.scrollY > 50) { setShow(true); } else { setShow(false); } }) return () => { window.removeEventListener("scroll", ()=> {}); }; }, []); return ( <nav className={`nav ${show && "nav__black"}`}> <img alt = 'Netflix logo' src = "https://upload.wikimedia.org/wikipedia/commons/thumb/0/08/Netflix_2015_logo.svg/960px-Netflix_2015_logo.svg.png" decoding="async" width="799" height="216" srcset="//upload.wikimedia.org/wikipedia/commons/thumb/0/08/Netflix_2015_logo.svg/1198px-Netflix_2015_logo.svg.png 1.5x, //upload.wikimedia.org/wikipedia/commons/thumb/0/08/Netflix_2015_logo.svg/1597px-Netflix_2015_logo.svg.png" className='nav__logo' onClick={() => window.location.reload()} /> <img alt = "User logged" src = "https://occ-0-3077-988.1.nflxso.net/dnm/api/v6/vN7bi_My87NPKvsBoib006Llxzg/AAAABTZ2zlLdBVC05fsd2YQAR43J6vB1NAUBOOrxt7oaFATxMhtdzlNZ846H3D8TZzooe2-FT853YVYs8p001KVFYopWi4D4NXM.png?r=229" className="nav__avatar" /> </nav> ); } Nav.css.nav{ position: fixed; top: 0; width: 100%; height: 30px; z-index: 1; padding: 20px; display: flex; justify-content: space-between; align-items: center; transition-timing-function: ease-in; transition: all 0.5s; } .nav__black { background-color: #111; } .nav__logo{ position: fixed; left: 40px; width: 80px; object-fit: contain; } .nav__avatar { position: fixed; right: 40px; width: 30px; object-fit: contain; }Banner.jsimport axios from "../api/axios"; import React, { useEffect, useState } from 'react' import requests from '../api/requests'; import "./Banner.css" export default function Banner() { const [movie, setMovie] = useState([]); useEffect(() => { fetchData(); }, []); const fetchData = async() => { //현재 상영중인 영화 정보를 가져오기 (여러 영화) const request = await axios.get(requests.fetchNowPlaying); //여러 영화 중 영화 하나의 ID를 가져오기 const movieId = request.data.results[ Math.floor(Math.random() * request.data.results.length) ].id; //특정 영화의 더 상세한 정보를 가져오기 (비디오 정보도 포함) const {data: movieDetail} = await axios.get(`movie/${movieId}`, { params: {append_to_reponse: "videos"} }); setMovie(movieDetail); } const truncate = (str, n) => { return str?. length > n ? str.substr(0, n - 1) + "..." : str; } return ( <header className="banner" style={{ backgroundImage: `url("https://image.tmdb.org/t/p/original/${movie.backdrop_path}")`, backgroundPosition: "top center", backgroundSize: "cover" }}> <div className="banner__contents"> <h1 className="banner__title"> {movie.title || movie.name || movie.original_name} </h1> <div className="banner__buttons"> <button className="banner__button play">Play</button> <button className="banner__button info">More Information</button> </div> <h1 className="banner_description"> {truncate(movie.overview, 100)} </h1> </div> <div className="banner--fadeBottom"></div> </header> ) } Banner.css.banner{ color: white; object-fit: contain; height: 448px; } @media (min-width : 1500px) { .banner{ position: relative; height: 600px; } .banner--fadeBottom{ position: absolute; bottom: 0; width: 100%; height: 40rem; } } @media (max-width : 768px) { .banner__contents{ width: min-content !important; padding-left: 2.3rem; margin-left: 0px !important; } .banner--description{ font-size: 0.8rem !important; width: auto !important; } .info{ text-align: start; padding-right: 1.2rem; } .space{ margin-left: 6px; } }axios.jsimport axios from "axios"; const instance = axios.create({ baseURL: "https://api.themoviedb.org", params: { api_key: "eea00451962aefe6185011d467944242", language: "ko-KR", }, }); export default instance;requests.jsconst requests = { fetchNowPlaying: "movie/now_playing", fetchNetFlixOriginals: "/discover/tv?with_networks=213", fetchTrending: "/trending/all/week", fetchTopRated: "/movie/top_rated", fetchActionMovies: "/discover/movie?with_genres=28", fetchComedyMovies: "/discover/movie?with_genres=35", fetchHorrorMovies: "/discover/movie?with_genres=27", fetchRomanceMovies: "/discover/movie?with_genres=10749", fetchDocumentaries: "/discover/movie?with_genres=99", } export default requests;

PS C:\Users\user\Documents\prepare\front> npm initThis utility will walk you through creating a package.json file.It only covers the most common items, and tries to guess sensible defaults.See npm help init for definitive documentation on these fieldsand exactly what they do.Use npm install <pkg> afterwards to install a package andsave it as a dependency in the package.json file.Press ^C at any time to quit.package name: (front)PS C:\Users\user\Documents\prepare\front>  터미널을열고 저도 패키지 네임 다음 react-nodebird-front를 작성하고 싶은데 어떤방법이 있을까요?

안녕하세요 강사님 좋은 강의 감사드립니다vscode 테마 정보좀 알수있을까요?

반복문 뭔 소린지 모르겠어요 뭔가 영상이 짤린 느낌

안녕하세요강의 잘 듣고 있습니다 도표강의자료 들어가면 파일을 찾지 못했다고 오류가 나옵니다

영상하고 15버전하고 차이가 좀 있는거 같습니다

안녕하세요 제로초님 !강의보고 따라해보고 있는데 화면 새로고침할때깜빡거리는걸 없애고 싶은데 getServerSideProps을 사용해서 상태값을 변경해주면 가능한걸까요??

- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. 안녕하세요, 리액트 학습 중에 궁금한 게 있어서 질문드려요. 기본 path 가 아닌 라우트로 바로 접속을 할때, html을 받으면 라우팅이 이뤄지구 useeffect로 api 요청이 가면서 페이지 렌더링이 이뤄지는건가요?

Lifecycle 사진이 잘 안보입니다. 크게 보여준 사진 필요해요.

뭔가 편집오류인거같네요12초정도에 반복문 사용시 주의사항만 나오고 방복문 사용방법은 안알려줍니다.저야 뭐 대충알아들었는데 초보자분들은 당황스러울듯하네요

--ignore 공백 ./client' ", 에서공백을 해놨는데도 왜 에러가 뜨는지 그 이유를 잘 모르겠습니다

제목 그대로입니다.코드샌드박스 링크좀 어딘가에 달아주시든지, 자료파일에 좀 첨부해주시든지,어떻게 좀 해주세요.화면 스톱 해놓고 일일이 주소창 쳐서 들어가고 있어요.너무 불편해요!질문답변 게시판에 링크 달아놓은거 없는지 검색도 해봤는데 전혀 엉뚱한 대답만 있는 것 같고..  

App.js > QuestionBox > answers ={answers[step]}, QuestionBox.js > answer 왜 App.js에서 prop에 answers라고 쓰고 QuestionBox.js 에서는 answer로 받는거죠?

/*FunctionalComponent.jsx파일*/ import {useEffect,useState} from 'react'; function FunctionalComponent() { console.log('Function Beginning'); const [value, setValue] = useState(0); useEffect(() => { console.log('Function useEffect[]'); return () => { console.log('Function useEffect return[]'); } },[]); useEffect(() => { console.log('Function useEffect[value]'); return () => { console.log('Function useEffect return[value]'); } },[value]); console.log('Function End'); return ( <div> <h1>!FunctionalComponent</h1> <h1>value: {value}</h1> <button onClick={() => { setValue((state) => state + 1) }} > Increase value </button> </div> ); } export default FunctionalComponent /*App.jsx파일*/ import { useState } from 'react' import reactLogo from './assets/react.svg' import viteLogo from '/vite.svg' import './App.css' import axios from 'axios'; import FunctionalComponent from './practice/FunctionalComponent' function App() { return ( <FunctionalComponent /> ) } export default App 

- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. 기능상에 문제가 있는건 아니지만, 계속해서 아래의 에러가 발생합니다.사용하고 있는 버전의 문제일까요?{ "name": "react-todo-app", "version": "0.1.0", "private": true, "dependencies": { "@testing-library/dom": "10.4.0", "@testing-library/jest-dom": "6.6.3", "@testing-library/react": "16.2.0", "@testing-library/user-event": "13.5.0", "react": "^19.0.0", "react-beautiful-dnd": "13.1.1", "react-dom": "^19.0.0", "react-scripts": "5.0.1", "web-vitals": "2.1.4" }, "scripts": { "start": "react-scripts start", "build": "react-scripts build", "test": "react-scripts test", "eject": "react-scripts eject" }, "eslintConfig": { "extends": [ "react-app", "react-app/jest" ] }, "browserslist": { "production": [ ">0.2%", "not dead", "not op_mini all" ], "development": [ "last 1 chrome version", "last 1 firefox version", "last 1 safari version" ] }, "devDependencies": { "autoprefixer": "10.4.20", "postcss": "8.5.3", "tailwindcss": "3.4.17" } }  Lists.jsimport React from 'react'; import List from './List.js' import { DragDropContext, Draggable, Droppable } from 'react-beautiful-dnd'; const Lists = React.memo(({todoData, setTodoData}) => { // console.log('Lists Component') const handleEnd = (result) => { if(!result.destination) return; const newTodoData = Array.from(todoData); const [reorderedItem] = newTodoData.splice(result.source.index, 1); newTodoData.splice(result.destination.index, 0, reorderedItem); setTodoData(newTodoData); } return <div> <DragDropContext onDragEnd={handleEnd}> <Droppable droppableId='todo'> {(provided, snapshot) => ( <div ref={provided.innerRef} {...provided.droppableProps} > {(todoData ?? []).map((data, index) => ( <Draggable key={data.id} draggableId={data.id.toString()} index={index} > {(provided, snapshot) => ( <List key={data.id} id={data.id} title={data.title} completed={data.completed} provided={provided} snapshot={snapshot} todoData={todoData} setTodoData={setTodoData} /> )} </Draggable> ))} {provided.placeholder} </div> )} </Droppable> </DragDropContext> </div>; }) export default Lists; App.jsimport React, {useState} from 'react' import "./App.css" import Lists from './components/Lists' import Form from './components/Form' export default function App() { // console.log('App Component') const [todoData, setTodoData] = useState([ { id: 1, title: '운동하기', completed: false, }, { id: 2, title: '공부하기', completed: false, } ]) const [value, setValue] = useState("") return ( <div className="flex items-center justify-center w-screen h-screen bg-blue-100" > <div className='full p-6 m-4 bg-white rounded shadow md:w-3/4 md:max-w-lg lg:w-3/4 lg:max-w-lg'> <div className="flex justify-between mb-3"> <h1>할 일 목록</h1> </div> <Lists todoData={todoData} setTodoData={setTodoData} /> <Form value={value} setValue={setValue} setTodoData={setTodoData}/> </div> </div> ) }

useEffect의 dependency array에 배열을 넣는 경우 "Maximum update depth exceeded." error가 발생하게 되는데, 이 경우는 어떻게 해야하나요? 예를 들어 아래와 같은 상황이라고 가정하겠습니다.화면에는 테이블 1개만 존재한다.데이터는 unknown[] 형태이다.다른 조건에 의해 데이터의 갯수가 달라지는 경우에만 다시 렌더링한다.코드로 예시를 들면 아래와 같습니다.const [items, setItems] = useState<unknown[]>([]);useEffect(() => void, [items]) 답변주시면 감사합니다.

Recoil과 비슷해 보이는 Jotai로 혼자 바꿔보고 있는 중입니다 ㅠㅠ 근데 이번 강의 코드는 어떻게 바꿔야 하는지 감이 안 와요....