무료
다른 수강생들이 자주 물어보는 질문이 궁금하신가요?
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 영화 사이트 만들기
무비디테일 메인 이미지 css가 안됩니다.
는 1:1 문의하기를 이용해주세요.
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 영화 사이트 만들기
강의 다 끝내고, 깃헙에 배포를 하려는데
안녕하세요. 강의 들으며 많이 배웠습니다. 코딩 하나하나 다 해보고, 깃헙에 배포도 해보고싶어서 빌드를 하려는데, 계속 안되서요... 아래 에러 내용 공유합니다. 감사합니다. > react-boiler-plate@1.0.0 build D:\React\react-movieapp-main\react-movieapp-main > react-scripts build Could not find a required file. Name: index.html Searched in: D:\React\react-movieapp-main\react-movieapp-main\public npm ERR! code ELIFECYCLE npm ERR! errno 1 npm ERR! react-boiler-plate@1.0.0 build: `react-scripts build` npm ERR! Exit status 1 npm ERR! npm ERR! Failed at the react-boiler-plate@1.0.0 build script. npm ERR! This is probably not a problem with npm. There is likely additional logging output above. npm ERR! A complete log of this run can be found in: npm ERR! C:\Users\soneu\AppData\Roaming\npm-cache\_logs\2021-10-21T08_21_30_419Z-debug.log npm ERR! code ELIFECYCLE npm ERR! errno 1 npm ERR! react-boiler-plate@1.0.0 predeploy: `npm run build` npm ERR! Exit status 1 npm ERR! npm ERR! Failed at the react-boiler-plate@1.0.0 predeploy script. npm ERR! This is probably not a problem with npm. There is likely additional logging output above. npm ERR! A complete log of this run can be found in: npm ERR! C:\Users\soneu\AppData\Roaming\npm-cache\_logs\2021-10-21T08_21_30_447Z-debug.log PS D:\React\react-movieapp-main\react-movieapp-main>
- 해결됨따라하며 배우는 노드, 리액트 시리즈 - 영화 사이트 만들기
#8강 중 이해가 안돼는 부분 질문
#8 강의 진행 중, GridCards.js에 if문을 활용하여 props.landingPage 가 true일때 landingpage에서 특정 영화로 넘어가는 부분을 return하고 false일때 특정 영화 페이지에서 출연 배우들로 넘어가는 부분을 return하는 것으로 이해했는데요, 그런데 제 코드에서는 그렇게 하면 landingPage에서 영화 포스터를 클릭해도 넘어가지지가 않고, 현상을 고치려고 노력중 if(!props.landingPage)로 조건문을 뒀더니 정상적으로 작동합니다. 제 생각으론 도저히 이해가 안돼는데 왜 이런 영상과 반대인 현상이 나타날까요? 깃: https://github.com/ParkSeYun98/MovieSiteApp
- 해결됨따라하며 배우는 노드, 리액트 시리즈 - 영화 사이트 만들기
4강 진행 중 질문
github : https://github.com/ParkSeYun98/MovieSiteApp 수업에 잘 따라가면서 에러는 발생하지 않았습니다. 다만 작동시켰을 때 , 이런 식으로 MainImage는 나타나지 않고 흰 바탕 만 존재하고 아래 title과 text는 정상 출력 돼는 것 같습니다. 어떤 문제일까요?
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 영화 사이트 만들기
Favorite 부분에 데이터값을 넣어주지 못한거 같습니다.
데이터 값을 넣어주지 못해서 movietitle 부분이 오류가 나는것 같은데 , MovieDetail 에 Favorite 부분 에서 넣어주지 못한거 같다고 생각이 듭니다. 어떤식으로 데이터를 넣어야 하는지 여쭤봅니다.
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 영화 사이트 만들기
영화포스터 클릭시 해당 movieDetail 기능이 실행되지 않습니다.
영화포스터 클릭시 해당 movieDetail 기능이 실행되지 않습니다. 제 깃허브 주소입니다. 코드를 한 번 봐주실 수 있나요 ? https://github.com/minseon6371/node-react-movie-site
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 영화 사이트 만들기
cd client -> npm install 오류
- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. 강의 #2에서 cd client로 디렉토리 체인지 후 npm install 하면 무한 로딩 뜨는 오류가 발생됩니다. 어떻게 해결방안이 있을까요? 이것을 설치하지 않으면 다음단계로 못 넘어갈것 같은데요 ㅜㅜ
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 영화 사이트 만들기
선생님 질문이 있습니다.
안녕하세요. 강의 잘 보고 있습니다! 다름이 아니라, LandingPage.js 와 MainImage.js 를 보고 따라했는데, MainImage.js에 prop으로 인자를 받는데, console.log로 prop의 인자를 확인하면, 값이 undifined로 뜹니다. 예를들어 LandingPage.js 에서 <MainImage title={MainMovieImage.original_title}/> 이런식으로 하면, 값이 undifined가 나옵니다. LandingPage.js 에서 function LandingPage() {...} 부분에서 console.log(response.results)를 하면 이때는 또 값이 잘 나오네요.. 뭐가 문제일까요?
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 영화 사이트 만들기
landingpage에서 mainimage 부분과 grid card부분에서 에러가 나네요...
아래 그림과 같이 landingpage의 mainimage 부분은 검은 화면으로 나오고 grid cards 부분은 엑박으로 뜹니다.. 코드를 강사님과 똑같이 진행 했는데 어느 부분에서 잘못된건지 모르겠습니다... 아래는 landingpage의 mainImage 코드부분과 mainimage.js 코드본입니다. 그리고 아래는 ladingpages.js의 grid card부분 코드와 gridcard.js코드 부분입니다.
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 영화 사이트 만들기
NavBar Logo 수정 질문!
안녕하세요 강사님! 다름이 아니라 알려주신대로 image 를 import 하여 NavBar.js 파일에서 사용해보려고 했는데 , 다음과 같이 사용했을 때 로고가 제대로 삽입되지 않고 페이지에 오류가 발생하는데 css 부분의 문제인것 같습니다. NavBar.js 파일의 가장 div 인 menu 의 style 을 이것저것 건드려보았을때 position:'fixed' 를 position:'statie' 등으로 변경하면 이미지가 때때로 나올때도 있지만, 어떻게 기존 강의영상 처럼 Movieapp이라고 적힌 로고를 그곳에 삽입 할 수 있는지 도저히 모르겠어서 질문드립니다 ㅠㅠ NavBar.js 파일 소스와 깃헙 주소 모두 첨부드리니 답변주시면 감사하겠습니다!! https://github.com/OHYUNBEOM/React-Node_ver2 import React, { useState } from 'react'; import LeftMenu from './Sections/LeftMenu'; import RightMenu from './Sections/RightMenu'; import { Drawer, Button, Icon } from 'antd'; import './Sections/Navbar.css'; import mainlogo from '../../../assets/images/mainlogo.png'; function NavBar() { const [visible, setVisible] = useState(false) const showDrawer = () => { setVisible(true) }; const onClose = () => { setVisible(false) }; return ( <nav className="menu" style={{ position: 'fixed', zIndex: 5, width: '100%' }}> <div className="menu__logo"> <a href="/"> <img src={mainlogo}/> </a> </div> <div className="menu__container"> <div className="menu_left"> <LeftMenu mode="horizontal" /> </div> <div className="menu_rigth"> <RightMenu mode="horizontal" /> </div> <Button className="menu__mobile-button" type="primary" onClick={showDrawer} > <Icon type="align-right" /> </Button> <Drawer title="Basic Drawer" placement="right" className="menu_drawer" closable={false} onClose={onClose} visible={visible} > <LeftMenu mode="inline" /> <RightMenu mode="inline" /> </Drawer> </div> </nav> ) } export default NavBar
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 영화 사이트 만들기
NavBar 질문
안녕하세요 강사님! 다름이 아니라 boiler-plate 클론 이후 Movie-App 만들기 까지 완료하였는데요, NavBar 의 메인 로고 부분의 이미지를 변경해보고 싶어서 다른 이미지를 삽입하고자 하는데 도대체 어디 부분을 건드려야 할지 잘 모르겠습니다!!기존에 movie-app-ko 파일에는 components파일에 assets/images 라는 폴더가 있고, 내부에 movieapp 의 이미지가 저장되어있는데 이 저장된 이미지를 어느부분에서 사용하시고 있는지 전혀 모르겠습니다...!! img src 를 통해서 새로운 이미지를 삽입해보려고 하면 계속 오류가 생겨서... 답변 부탁드립니다!!
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 영화 사이트 만들기
GridCards props 에러
좋은 강의 감사합니다!! GridCards 이미지가 계속 안 떠서 console.log로 props를 찍어보면 자꾸 {image: undefined, movieId: undefined..} 이렇게 떠서 질문 목록을 확인하다 setState(...[response.results])로 바뀌니까 되더라구요 LandingPage에서 useEffect로 데이터를 받아서 state에 담을? 때 setMovies([response.results])라고 작성하셨는데 response.resultes가 [(20) {...},{...},...] 이미 배열 안에 객체가 들어있는 형태잖아요. 그럼 Movies state가 [[(20) {...},{...},...]] 이 형태가 되는 거 아닌가요..? 그래서 저는 setMovies(response.results) 이렇게 했는데 이것도 잘 작동하는데 뭐가 답인지 헷갈리네요ㅜㅜ
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 영화 사이트 만들기
배열 분해가 제대로 되지 않아요
디테일 섹션에 다른 정보도 넣어보고 싶어요 props는 객체형태이고 그 안에 있는 장르 정보는 배열형태로 되어 있던대 map함수를 쓰면 계속 에러가 납니다 해결책 알려주시면 감사하겠습니다! (TypeError: Cannot read property 'map' of undefined)
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 영화 사이트 만들기
Header/Footer 내용
안녕하세요~ boiler-plate 강의 듣고 지금 강의로 넘어왔는데요 메인페이지 위에 헤더부분은 따로 만드신건가요? 그 부분이 안나온 것 같아서요ㅜㅜ 또 강의에서 antd 다운받은 것 까진 했는데 실제 레이아웃과 연결시켜주는 부분도 제가 놓친걸까요??
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 영화 사이트 만들기
MainImage 내의 스타일링 사라지는 문제
(이미지 올리려고 5번 새로 썼는데 안되서 글로만 남깁니다) 안녕하세요 선생님! 강의 정말 잘 듣고 있습니다. LandingPage에서 MainImage로 볼 수 있는 영화 포스터 이미지는 처음 로딩됐을 때 창을 줄이면 같이 줄어들고, width 안에 꽉 차 있습니다 더 보기 버튼을 눌러 새로운 영화 목록을 받아오거나, Detail 페이지로 넘어가면 이미지가 창을 줄여도 너비가 고정되고, 바둑판식으로 반복됩니다 확인해보니 CSS의 스타일링이 사라지는 문제인데, 원인이 무엇인지, 어떻게 해결할 수 있는지 궁금합니다! <처음 MainImage의 스타일링> <div style="background: linear-gradient(rgba(0, 0, 0, 0) 39%, rgba(0, 0, 0, 0) 41%, rgba(0, 0, 0, 0.65) 100%) center center / 100% no-repeat, url("https://image.tmdb.org/t/p/w1280/8s4h9friP6Ci3adRGahHARVd76E.jpg") center center / cover, rgb(28, 28, 28); width: 100%; height: 500px; position: relative;"> <더 보기 버튼을 누르거나 Detail 페이지로 이동했을 때 MainImage의 스타일링> <div style="background: linear-gradient(rgba(0, 0, 0, 0) 39%, rgba(0, 0, 0, 0) 41%, rgba(0, 0, 0, 0.65) 100%), url("https://image.tmdb.org/t/p/w1280/3OwaKVZf3A2NdnarqKbwzFEhKir.jpg"), rgb(28, 28, 28); width: 100%; height: 500px; position: relative;> 감사합니다.
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 영화 사이트 만들기
서버 쪽에 404 에러가 나오네요
강사님 github에서 그대로 가져와서 mongodb연결도 잘 했습니다. 4번째 강의까지는 잘 됬던것 같은데 이번 강의부터 이런 에러가 뜨네요. 뭐가 문제인지 한번 봐주실 수 있나요? ㅠㅠ unibook1283/movieApp (github.com) 어 그런데 react 페이지에서 회원가입/로그인은 잘 되네요 몽고디비에 데이터도 들어오고
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 영화 사이트 만들기
안녕하세요 선생님 에러가나서 질문드립니다.
아래 캡처처럼 npm run dev 를 쳤는데 저렇게 나옵니다. 몽고db가 제대로 연결이안된건지 아니면 dependency가 제대로 설치가안된건지 잘모르겠네요. 그리고 제가 몽고db url을 다른작업하는것들도 있어서 localhost:3005로 했는데 상관없는거죠? 보시고 답변주시면 감사합니다!
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 영화 사이트 만들기
FavoritePage에서 Runtime을 받아오질 못합니다.
코드를 쭉 확인해보니까 addToFavorite을 눌러서 몽고db에 추가를 할때 runtime이 db에 저장이 안되는거 같은데요 router.post('/addToFavorite', (req,res) => { console.log(req.body) const favorite = new Favorite(req.body); console.log(favorite) favorite.save((err,doc) => { if(err) return res.status(400).send(err); return res.status(200).json({success:true, doc}) }) }) req.body: { movieId: '602223', userFrom: '60f6908e5da3b93ee0080c1c', movieTitle: 'The Forever Purge', moviePost: '/tehpKMsls621GT9WUQie2Ft6LmP.jpg', movieRuntime: 103 }여기서는 런타임을 받아오는데 favorite: { _id: 60fac8252363cd3448230525, movieId: '602223', userFrom: 60f6908e5da3b93ee0080c1c, movieTitle: 'The Forever Purge', moviePost: '/tehpKMsls621GT9WUQie2Ft6LmP.jpg' }favorite에서는 런타임이 없습니다. 뭐가 문제인가요
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 영화 사이트 만들기
find와 findOne의 차이가 궁금합니다.
userSchema에서 유저를 찾을땐 findOne을 쓰셨고, 이번강의에서는 find를 쓰셨는데 차이가 뭔지 헷갈리네요 ㅠㅠ
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 영화 사이트 만들기
실행은 잘 되는데 console에 이런 에러가 뜹니다
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:26) in div (at MovieDetail.js:24) in MovieDetail (at auth.js:38) in AuthenticationCheck (created by Context.Consumer) in Route (at App.js:25) in Switch (at App.js:21) in div (at App.js:20) in Suspense (at App.js:18) in App (at src/index.js:31) in Router (created by BrowserRouter) in BrowserRouter (at src/index.js:30) in Provider (at src/index.js:23) 충돌하는 속성 으로 인해 rerender하는 동안 스타일속성을 업데이트하면 스타일 버그가 발생 할 수 있다는거 같은데 무슨 말인지 모르겠습니다.