무료
다른 수강생들이 자주 물어보는 질문이 궁금하신가요?
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 영화 사이트 만들기
선생님 데이터를 가져오는 부분, 전달하는 부분에 대해서 질문이 있습니다.
안녕하세요. 현재 강의를 먼저 보고, 혼자 만들어 보는 방식으로 공부를 진행중입니다. 공부중 Favorite 페이지를 구현함에 있어서 문제가 생겼습니다. 먼저 선생님께서는 props에서, userFrom은 localStorage에서, movieId는 match에서 가져오시고, movieInfo부분은 useEffect에서 movie state에 담아 전달하셨지만, 저는 movieId는 movie state에서, userFrom은 auth가 동작할 때 props로 전달해 준 user.userData에 있는 id 정보로 전달해 주려고 했습니다. 여기서 문제가 발생했는데, favorite컴포넌트에서 axios로 데이터를 전달할 때, 데이터가 전달되지 않았습니다. movieDetail.js에서 movie state나, props.user.userData의 값이 비동기 통신을 통해서 받아오기 때문에 favorite의 useEffect가 props를 전달받기 전에 먼저 실행되어 발생하는 문제로 보였는데, 이런 문제는 어떻게 해결하면 좋을까요? favorite.js의 useEffect 부분을 다음과 같이 변경하니깐 정상 작동은 하는거 같지만... 더 좋은 방법이 있을거 같아서 질문드립니다! (서버단 코드는, request를 그대로 console.log찍도록 했습니다.) 추가적으로, 다음 코드에서 setMovie 후 로그로 data를 찍으면 api에서 가져온 데이터가 잘 나오지만, movie를 찍으면 빈 객체가 나오는데, 이 부분에 대해서도 왜 이러는지 궁금증이 생겨서 질문합니다. 똑같이 클론코딩했다면 할 필요가 없는 질문인데, 혼자 해보다가 생긴 궁금증이라 죄송스럽기도 하네요. 항상 감사합니다.
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 영화 사이트 만들기
favorite list에서 remove
안녕하세요, 14강 favoritepage에서 remove버튼을 누르면 지워지고 화면이 리로드되는 부분에서 질문이 있습니다. 두개의 방법 중에 처음에 말씀하신 FavoriteList에서 해당값을 지우는 방법으로 코드를 짜보았습니다. console에 확인했는데 FavoriteList는 변경이 잘 되었습니다. 그런데 화면은 그대로 입니다. 화면에 바뀐것을 바로 보여주는 것을 어떻게 해야할지 모르겠습니다. 아래는 제가 짜본 코드의 일부입니다. const [FavoriteList, setFavoriteList] = useState([]); const onClickDelete = (movieId) => { Axios.get(`${FAVORITE_SERVER}/removeFromFavorite/${movieId}`).then( (res) => { if (res.data.success) { let idx = FavoriteList.findIndex((elem) => { return elem.movieId == movieId; }); FavoriteList.splice(idx, 1); setFavoriteList(FavoriteList); } else { alert("리스트에서 지우는데 실패했습니다."); } } ); }; 어떻게 해야하나요?
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 영화 사이트 만들기
console.log를 찍고 싶어요..
1. [nodemon] app crashed - waiting for file changes before starting... #4번 따라하는 도중 console.log가 안찍혀요.. 아래 버그좀 잡고 싶습니다. 2.
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 영화 사이트 만들기
상단 메인이미지
안녕하세요. 페이지 상단에 메인 이미지 관련해서 질문드립니다. 백그라운드 이미지에 관련된 코드는 강의 그대로 따라했습니다. <div className="main__image" style={{ background: `linear-gradient(to bottom, rgba(0,0,0,0) 39%,rgba(0,0,0,0) 41%,rgba(0,0,0,0.65) 100%), url('${props.image}'), #1c1c1c`, height: "500px", backgroundSize: "100%, cover", backgroundPosition: "center, center", width: "100%", position: "relative", }} > 이때 아래와 같이 LandingPage는 잘 뜹니다. 그런데 똑같은 코드를 가지고 있는 MainImage 컴포넌트를 MovieDetail에서 사용했는데 디테일 페이지는 다음과 같습니다. 이렇게 꽉 채워지지 않고 이미지가 두번나오게 되는데 왜그런걸까요?ㅠㅠ CSS를 아주 잘 알지는 못해서 이리저리 검색해봤는데 도무지 모르겠습니다.
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 영화 사이트 만들기
질문있습니다!!!
안녕하세요 :) !!! mainimage에서 이미지불러오는데 이미지가 화면에 표시되지않습니다. props로 로그찍어보고 거기에 나오는 주소로 검색하면 이미지가 잘나오는데 왜 안뜨는지 궁금해요...ㅠㅠ title 명도 분명 가져오는데 안가져오더라구요! -- LandingPage.js import React,{useEffect,useState} from 'react' import { FaCode } from "react-icons/fa"; import {API_URL,API_KEY,IMAGE_BASE_URL} from '../../Config' import MainImage from './Sections/MainImage' function LandingPage() { const[Movies,setMovies]=useState([]) const [MainMovieImage,setMainMovieImage]=useState(null) useEffect(()=>{ const endpoint=`${API_URL}movie/popular?api_key=${API_KEY}&language=en-US&page=1`; fetch(endpoint) .then(response=>response.json()) .then(response=>{ console.log(response) setMovies([...response.results]) setMainMovieImage(response.results[0]) }) },[]) return ( <div style={{width:'100%',margin:'0'}}> {/* Main Image */} {MainMovieImage && <MainImage image={`${IMAGE_BASE_URL}w1280${MainMovieImage.backdrop_path}`} title={MainMovieImage.original_title} text={MainMovieImage.overview} /> } <div style={{ width:'85%', margin:'1rem auto'}}> <h2>Movies by latest</h2> <hr/> /* Movie Grid Cards */ </div> <div style={{ display:'flex', justifyContent:'center'}}> <button>Load More</button> </div></div> ); }; export default LandingPage -- MainImage.js import React from 'react'; function MainImage(props){ return( <div style={{background:`linear-gradient(to bottom,rgba(0,0,0,0) 39%,rgba(0,0,0,0) 41% rgba(0,0,0,0.65) 100%), url("${props.image}"),#1c1c1c`, height:'500px', backgroundSize:'100%,cover', backgroundPostition:'center,center', width:'100%', position:'relative' }}> <div> <div style={{position:'absolute', maxWidth:'500px', bottom:'2rem', marginLeft:'2rem'}}> <h2 style={{color:'white'}}>{props.title} </h2> <p style={{color:'white',fontSize:'1rem'}}>{props.text}</p> </div> </div> </div> ) } export default MainImage
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 영화 사이트 만들기
선생님 안녕하세요! 질문이 있습니다:)
gridcard.js까지 모두 만들었습니다. 개발자 모드에서도 오류가 안뜨고 콘솔에도 오류가 없는데 화면상에 아무런 이미지도 뜨지 않습니다..! 이럴 경우는 뭐가 문제인지 모르겠어서 질문드립니다! 항상 감사합니다:)
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 영화 사이트 만들기
페이지네이션 관한 질문인데요
loadmore 버튼을 눌럿을때 page=2 이런식으로 불러오자나요? 페이지 단위로 영화 정보를 불러오는게아니라 예를들어 스크롤을 내렷을때 영화정보를 5개씩 추가로 불러오게하려면 어떻게 해야할까요??
- 따라하며 배우는 노드, 리액트 시리즈 - 영화 사이트 만들기
질문좀 드려요!
삭제된 글입니다
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 영화 사이트 만들기
혹시 이렇게 했을 때와 강사님 코드와 비교해서 장단점이 있을까요?
useEffect에서 Page state가 업데이트 될 때마다 fetch를 실행하는 방법으로 만들었습니다 강사님 코드와 비교해서 장단점이 있을까요? function LandingPage() { const [Movies, setMovies] = useState([]); const [MainMovieImage, setMainMovieImage] = useState(null); const [Page, setPage] = useState(1); useEffect(() => { const endpotion = `${BASE_URL}/movie/popular?api_key=${API_KEY}&language=ko&page=${Page}`; fetch(endpotion) .then((res) => { return res.json(); }) .then((data) => { console.log(data); setMovies([...Movies, ...data.results]); if (Page === 1) { setMainMovieImage(data.results[0]); } }); }, [Page]); const loadMoreHandler = () => { setPage(Page + 1); }; return ( <> <div style={{ width: "100%", margin: "0" }}> {/* MAIN IMAGE */} {MainMovieImage && ( <MainImage image={`${IMAGE_BASE_URL}/w1280/${MainMovieImage.backdrop_path}`} title={MainMovieImage.title} desc={MainMovieImage.overview} /> )} <div style={{ width: "85%", margin: "1rem auto" }}> <h2>Movies by latest</h2> <hr /> {/* Movie Grid Cards */} <Row gutter={[16, 16]}> {Movies && Movies.map((movie, i) => { return ( <div key={i}> <GridCards image={ movie.poster_path ? `${IMAGE_BASE_URL}/w500/${movie.poster_path}` : null } movieId={movie.id} movieName={movie.title} /> </div> ); })} </Row> </div> <div style={{ display: "flex", justifyContent: "center" }}> <button onClick={loadMoreHandler}>Load More</button> </div> </div> </> ); }
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 영화 사이트 만들기
profilie_path가 null 일때, 처리에 대해!
안녕하세요! 항상 감사합니다!! 이미지를 불러오는 과정에서 profile_path가 null 인 부분을 어떻게 처리할까 고민을 하던 중에 일단은 아래처럼 placeholder를 이용해서 저렇게 대체했는데 조금 다르게, profile_path가 null인 이미지들은 <GridCards> 컴포넌트에 넣지 않는 방식으로 처리하려고 시도해봤습니다. if문으로 profile_path가 null 일때와 그렇지 않을때로 나눠서 여러 시도를 해봤지만 잘 안돼서 질문드립니다. 어떤식으로 처리해야 null값인 것들은 거르고 나머지를 <GridCards>에 넣을 수 있을까요?
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 영화 사이트 만들기
missing script : dev
안녕하세요. 덕분에 양질의 수업을 무료로 잘 받고 있습니다. 다름이 아니라 영상 1분 50초정도에 터미널에서 npm run dev 를 입력하여 어플리케이션을 여시는데, 저는 입력을 하여도 제목과 같은 오류메세지만 나오네요 ㅠㅜ 어떤 문제일까요...?
- 따라하며 배우는 노드, 리액트 시리즈 - 영화 사이트 만들기
Uncaught (in promise) SyntaxError: Unexpected token < in JSON at position 0이 브라우저 콘솔에 뜹니다.
삭제된 글입니다
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 영화 사이트 만들기
안녕하세요, 질문이 있습니다.
콘솔창에 아래와 같은 에러가 계속해서 발생하는데 혹시 그 원인을 알 수 있을까요 ? index.js:1 Warning: Updating a style property during rerender (background) when a conflicting property is set (backgroundPosition) can lead to styling bugs. To avoid this, don't mix shorthand and non-shorthand properties for the same value; instead, replace the shorthand with separate values. in div (at MainImage.js:5) in MainImage (at MovieDetail.js:31) in div (at MovieDetail.js:29) in MovieDetail (at auth.js:38) in AuthenticationCheck (created by Context.Consumer) in Route (at App.js:24) in Switch (at App.js:20) in div (at App.js:19) in Suspense (at App.js:17) in App (at src/index.js:29) in Router (created by BrowserRouter) in BrowserRouter (at src/index.js:28) in Provider (at src/index.js:21)
- 해결됨따라하며 배우는 노드, 리액트 시리즈 - 영화 사이트 만들기
자동완성
강의와 관련있는 질문을 남겨주세요.• 강의와 관련이 없는 질문은 지식공유자가 답변하지 않을 수 있습니다. (사적 상담, 컨설팅, 과제 풀이 등)• 질문을 남기기 전, 비슷한 내용을 질문한 수강생이 있는지 먼저 검색을 해주세요. (중복 질문을 자제해주세요.)• 서비스 운영 관련 질문은 인프런 우측 하단 ‘문의하기’를 이용해주세요. (영상 재생 문제, 사이트 버그, 강의 환불 등) 질문 전달에도 요령이 필요합니다.• 지식공유자가 질문을 좀 더 쉽게 확인할 수 있게 도와주세요.• 강의실 페이지(/lecture) 에서 '질문하기'를 이용해주시면 질문과 연관된 수업 영상 제목이 함께 등록됩니다.• 강의 대시보드에서 질문을 남길 경우, 관련 섹션 및 수업 제목을 기재해주세요. • 수업 특정 구간에 대한 질문은 꼭 영상 타임코드를 남겨주세요! 구체적인 질문일수록 명확한 답을 받을 수 있어요.• 질문 제목은 핵심 키워드를 포함해 간결하게 적어주세요.• 질문 내용은 자세하게 적어주시되, 지식공유자가 답변할 수 있도록 구체적으로 남겨주세요.• 정확한 질문 내용과 함께 코드를 적어주시거나, 캡쳐 이미지를 첨부하면 더욱 좋습니다. 기본적인 예의를 지켜주세요.• 정중한 의견 및 문의 제시, 감사 인사 등의 커뮤니케이션은 더 나은 강의를 위한 기틀이 됩니다. • 질문이 있을 때에는 강의를 만든 지식공유자에 대한 기본적인 예의를 꼭 지켜주세요. • 반말, 욕설, 과격한 표현 등 지식공유자를 불쾌하게 할 수 있는 내용은 스팸 처리 등 제재를 가할 수 있습니다. useEffect만 쳐도 useEffect( () => { },input)이렇게 완성되도록 어떻게 설정하나요? ctrl+스페이스 눌려도 useEffect까지만 완성됩니다. 윈도우 사용자입니다. 감사합니다.
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 영화 사이트 만들기
안녕하세요, 질문이 있습니다
기본 강의를 다 끝내고 강의를 시작하려고 boiler-plate로 올려주신 깃허브 주소에서 파일으 받아서 보니 기본 강의에서 작성하신 것과 차이가 있는것 같습니다 혹시 강의에서 사용하신다는 링크롤 ㄹ올려주신 boiler-plate에 관한 강의도 있나요? 항상 좋은 강의 감사드립니다:)
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 영화 사이트 만들기
favorite 버튼 관련된 질문
favorite 버튼은 만들었고 버튼을 누르면 버튼이 바뀌지 않고 add to favorite 그대로 있습니다 또 콘솔창에는 MongooseServerSelectionError: Could not connect to any servers in your MongoDB Atlas cluster. One common reason is that you're trying to access the database from an IP that isn't whitelisted. Make sure your current IP address is on your Atlas cluster's IP whitelist 이러한 메시지가 있는데 이미 mongodb에 ip 화이트리스트를 저장해놓은 상태라 무엇이 문제인지 잘 모르겠습니다 버튼 문제와 관련이 있는 사항일까요?
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 영화 사이트 만들기
선생님 질문있습니다.
const LandingPage = ()=>{ const [movies, setMovies] = useState([]); const [MainMovieImage,setMainMovieImage] = useState(null); const [loading, setLoading] = useState(false); const [error, setError] = useState(null); const [currentPage,setCurrentPage]= useState(0); useEffect(() => { const URL = `${API_URL}movie/popular?api_key=${API_KEY}&language=en-US&page=1` fetchMovie(URL); }, []); const fetchMovie = async (URL) => { try { setError(null); setMovies(null); setLoading(true); const response = await axios.get(URL); setMovies([...movies, ...response.data.results]); setMainMovieImage(response.data.results[0]); setCurrentPage(response.data.page) console.log(response.data); // 데이터는 response.data 안에 들어있습니다. } catch (e) { setError(e); } setLoading(false); }; if (loading) return <div>로딩중..</div>; if (error) return <div>에러가 발생했습니다</div>; const loadmore=()=>{ const URL = `${API_URL}movie/popular?api_key=${API_KEY}&language=en-US&page=${currentPage+1}` fetchMovie(URL); } loadmore 버튼을 누를때마다 리렌더링이 됩니다. 또 mainimage도 다음 page result[0]껄로 바뀌는데 리렌더링을 하지 않을 방법이 있을가요??
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 영화 사이트 만들기
GridCards antd Row Col 에서 에러가 발생합니다.
강의와 관련있는 질문을 남겨주세요.• 강의와 관련이 없는 질문은 지식공유자가 답변하지 않을 수 있습니다. (사적 상담, 컨설팅, 과제 풀이 등)• 질문을 남기기 전, 비슷한 내용을 질문한 수강생이 있는지 먼저 검색을 해주세요. (중복 질문을 자제해주세요.)• 서비스 운영 관련 질문은 인프런 우측 하단 ‘문의하기’를 이용해주세요. (영상 재생 문제, 사이트 버그, 강의 환불 등) 질문 전달에도 요령이 필요합니다.• 지식공유자가 질문을 좀 더 쉽게 확인할 수 있게 도와주세요.• 강의실 페이지(/lecture) 에서 '질문하기'를 이용해주시면 질문과 연관된 수업 영상 제목이 함께 등록됩니다.• 강의 대시보드에서 질문을 남길 경우, 관련 섹션 및 수업 제목을 기재해주세요. • 수업 특정 구간에 대한 질문은 꼭 영상 타임코드를 남겨주세요! 구체적인 질문일수록 명확한 답을 받을 수 있어요.• 질문 제목은 핵심 키워드를 포함해 간결하게 적어주세요.• 질문 내용은 자세하게 적어주시되, 지식공유자가 답변할 수 있도록 구체적으로 남겨주세요.• 정확한 질문 내용과 함께 코드를 적어주시거나, 캡쳐 이미지를 첨부하면 더욱 좋습니다. 기본적인 예의를 지켜주세요.• 정중한 의견 및 문의 제시, 감사 인사 등의 커뮤니케이션은 더 나은 강의를 위한 기틀이 됩니다. • 질문이 있을 때에는 강의를 만든 지식공유자에 대한 기본적인 예의를 꼭 지켜주세요. • 반말, 욕설, 과격한 표현 등 지식공유자를 불쾌하게 할 수 있는 내용은 스팸 처리 등 제재를 가할 수 있습니다. 나름 styled-components를 섞어가며 코드를 작성중이었습니다. 지금 문제는 Col lg={6} md={8} xs={24} << 이 안먹는것같습니다. 모두 width :100%하면 Row 한줄을 꽉 차지하는데 어느 부분에서 문제가 발생한걸까요 하루종일 찾고있습니다..ㅠㅠ import React from 'react'; import {Col} from 'antd'; function GridCards(props){ return( <Col xs={6} md={8} lg={24}> <div style={{position:'relative'}}> <a href={`/movie/${props.movieId}`}> <img style={{width:'100%',height:'320px'}} src={props.image} alt={props.movieName}/> </a> </div> </Col> ); }; export default GridCards; import React,{useState,useEffect} from 'react'; import axios from 'axios'; import {API_URL,API_KEY,IMAGE_URL} from '../components/Config'; import MainImage from '../components/Section/MainImage'; import styled from 'styled-components'; import GridCards from '../components/common/GridCards'; import { Row } from 'antd'; const MainImageBlock=styled.div` width:100%; margin:0; `; const LadingInfo=styled.div` width:85%; margin:1rem auto; h2{ margin-bottom:1rem; text-align:center; } hr{ margin-bottom:1rem; } `; const LandingPage = ()=>{ const [movies, setMovies] = useState([]); const [MainMovieImage,setMainMovieImage] = useState(null); const [loading, setLoading] = useState(false); const [error, setError] = useState(null); useEffect(() => { const fetchMovie = async () => { try { setError(null); setMovies(null); setLoading(true); const response = await axios.get(`${API_URL}movie/popular?api_key=${API_KEY}&language=en-US&page=1`); setMovies([...response.data.results]); setMainMovieImage(response.data.results[0]); console.log(response.data.results[0].id); // 데이터는 response.data 안에 들어있습니다. } catch (e) { setError(e); } setLoading(false); }; fetchMovie(); }, []); if (loading) return <div>로딩중..</div>; if (error) return <div>에러가 발생했습니다</div>; return( <> <MainImageBlock> {MainMovieImage && <MainImage image={`${IMAGE_URL}w1280${MainMovieImage.backdrop_path}`} title={MainMovieImage.original_title} text={MainMovieImage.overview} /> } <LadingInfo> <h2>Movies by latest</h2> <hr/> {/* Grid Cards */} <Row gutter={[16, 16]}> {movies && movies.map((movie,index)=> ( <React.Fragment key={index}> <GridCards image={movie.poster_path ? `${IMAGE_URL}w500${movie.poster_path}`:null} movieId={movie.id} movieName={movie.original_title} /> </React.Fragment> ))} </Row> </LadingInfo> <div style={{display:'flex', justifyContent:'center'}}> <button>Load more</button> </div> </MainImageBlock> </> ); }; export default LandingPage;
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 영화 사이트 만들기
image 주소 undefined 오류 관련하여 문의 드립니다.
에러 관련하여 질문 드립니다. # 오류 내용 - https://image.tmdb.org/t/p/w1280undefined 404 - MovieDetail.js MainImage 컴포넌트에서 props으로 image url을 맞게 입력 했는데 자꾸 404 에러가 나옵니다ㅠ 화면에서 이미지 노출은 잘 되고 있습니다! # 참고 - https://github.com/kimsojung318/movie-app Github 주소 첨부하오니 확인 후 답변 부탁 드립니다..!
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 영화 사이트 만들기
강사님 좋은강의 좋은코드 잘봤습니다. 혹시 현업에서도..
현재 리액트와 노드를 사용하는 현업에서도 강의 처럼 비슷하게 코드가 작성이 되나요? 기업에서 몽고DB를 안쓰고 오라클을 많이쓰는 걸로 알 고있는데 혹시 sql문을 쓰게될경우 nosql 쓸때와 코드자체가 많이 달라지나요?