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로 학습 진행했습니다. 강의 수강에 참고가 되길 바랍니다.

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

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

- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 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로 받는거죠?