무료
다른 수강생들이 자주 물어보는 질문이 궁금하신가요?
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 영화 사이트 만들기
localhost접속문제 도와주세요ㅠㅠ
맥 사용자입니다. 아래와같이 db는 연결이 된거 같은데 도저히 localhost연결문제를 해결할수가 없습니다.. ㅓ떻게 하면 좋을까요 도와주세요..
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 영화 사이트 만들기
엔트디자인 사용방법이 있나요.,.
아무리똑같이 쳐도 엔트디자인 적용이 되지 않습니다.. 혹시 깔려있어야 하는게 있나요.. 혹시나해서 npm install antd 도 했는데 적용이 안돼서 진도를 못나가고 있습니다 ㅠㅠ
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 영화 사이트 만들기
안녕하세요! ant design 사용 관련 질문드립니다ㅠㅠ
이것이 antd 홈페이지(https://ant.design/components/dropdown/#components-dropdown-demo-basic)에 나와있는 drop down 메뉴 적용 화면인데 코드를 실제로 적용하면 다음과 같이 적용됩니다. 왜 이렇게 적용되는 것일까요?ㅠㅠ 밑에는 작성한 코드입니다. import React, { useState } from 'react' import { Menu, Dropdown } from 'antd'; import { DownOutlined } from '@ant-design/icons'; function SearchResultList() { const menu = ( <Menu> <Menu.Item key="0"> <a href="http://www.alipay.com/">1st menu item</a> </Menu.Item> <Menu.Item key="1"> <a href="http://www.taobao.com/">2nd menu item</a> </Menu.Item> <Menu.Divider /> <Menu.Item key="3">3rd menu item</Menu.Item> </Menu> ); return ( <div> <Dropdown overlay={menu} trigger={['click']}> <a className="ant-dropdown-link" onClick={e => e.preventDefault()}> Click me <DownOutlined /> </a> </Dropdown> </div> ) } export default SearchResultList
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 영화 사이트 만들기
헤로쿠 배포 문의
선생님! 유튜브 영상 따라하면서 하니 배포는 정상적으로 되었습니다. 그런데, 아래 링크처럼 영화 정보를 못 읽어오는거 같아요. https://fathomless-ravine-00136.herokuapp.com/ 혹시 외부 API를 읽어올 수 있게 따로 셋팅해야하는 게 있을까요??
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 영화 사이트 만들기
안녕하세요!
안녕하세요. 강의를 듣다가 질문이 생겨 글 남깁니다. MovieInfo.js 파일에서 let 변수 선언할 때 let {movie} =props; 처럼 {}를 써주는 이유가 뭔가요?
- 따라하며 배우는 노드, 리액트 시리즈 - 영화 사이트 만들기
히로쿠 배포 테스트
삭제된 글입니다
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 영화 사이트 만들기
안녕하세요. 빨간 밑줄 기능은 확장 프로그램을 설치하신건가요?
안녕하세요. 항상 강의 잘 보고 있습니다. 한 가지 질문이 있습니다. 선생님의 코드 경우에는 9분 33초를 보면 react 를 import 안시켜줘서 <dev>태그에 빨간 밑줄이 그어지는데 저의 코드에서는 그어지지 않습니다. 빨간 밑줄이 그어지도록 하려면 따로 설정을 하거나 확장 프로그램을 설치해야되는건가요?
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 영화 사이트 만들기
favorite list에 영화가 추가되지 않습니다
좋아요 버튼을 눌러도 뒤로 갔다 다시 돌아오면 적용이 안되어있고 favorite page에도 나오지 않네요ㅠㅠ 좋아요 버튼을 누를 땐 console.log에 어떤 값들이 들어가는지 잘 되는데 서버에 저장이 안되는 것 같습니다 ㅠㅠ 아래 에러도 같이 뜨는데 무슨문제일까요? [1] [HPM] Error occurred while trying to proxy request /api/favorite/favorited from localhost:3000 to http://localhost:5000 (ECONNRESET) (https://nodejs.org/api/errors.html#errors_common_system_errors) [1] [HPM] Error occurred while trying to proxy request /api/favorite/favorited from localhost:3000 to http://localhost:5000 (ECONNRESET) (https://nodejs.org/api/errors.html#errors_common_system_errors) [1] [HPM] Error occurred while trying to proxy request /api/favorite/favoriteNumber from localhost:3000 to http://localhost:5000 (ECONNRESET) (https://nodejs.org/api/errors.html#errors_common_system_errors) [1] [HPM] Error occurred while trying to proxy request /api/favorite/favoriteNumber from localhost:3000 to http://localhost:5000 (ECONNRESET) (https://nodejs.org/api/errors.html#errors_common_system_errors) 제 깃헙주소 입니다 : https://github.com/heyoni/react_native/tree/main/boilerplate-mern-stack-master
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 영화 사이트 만들기
localhost:5000이 적용이 안됩니다.
제가 현재 쓰고 있는 버전은 react 16.8인데요 이 버전에서는 proxy설정을 강사님이 해주신대로하면 안먹히는 것 같아요 ㅜㅜ package.json안에 script>start 코드 앞에 set POST=5000을 붙여보고 middleware도 uninstall하고 setupProxy.js도 주석처리해놓았는데 다른 설정들이랑 충돌하는지 안됩니다.. 혹시 해결 방법을 알려주실 수 있을까요.
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 영화 사이트 만들기
504 gateway timeout 에러
이 에러의 원인을 모르겠어요 ㅠㅠ
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 영화 사이트 만들기
무비디테일 페이지 props.match관련입니다.
안녕하세요. 영화 클론 영상 잘보고 배우고있습니다. 무비디테일 페이지에서 props.match를 해서 movieId를 받아 올 때 아래 사진처럼 undifined props가 나와서 헤매고 있습니다. 구글에찾아본대로하자면라우터에서 component={(props)=><MovieDetail {...props} />의 형태로 넘겨받아서 하는데요 저렇게하면 정상적으로 props들이 넘어오지만 App.js안에서 moviedetail은 Auth를 사용하지못해 로그아웃를 눌어도 ladningpage에서는 로그아웃이 되었지만 moviedetail에서는 로그아웃이 안되는 현상도 나옵니다. 왜 props들이 넘어가질 않는 것일까요!...!
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 영화 사이트 만들기
api key 관련해서 질문드립니다.
해당 프로젝트를 깃허브에 바로 푸시할경우 api key가 같이 업로드되게되는데 boilderplate 프로젝트때처럼 환경변수나 이런걸로 api key 관리 할 수 있는 방법이 있을까요? 그런데 .gitignore로 관리하더라도 boilderplate때처럼 깃허브에 푸시하고난 뒤 다운로드하면 결국 api key를 직접 입력해주어야하는게 맞는거죠? 추가적으로 경로와 상관없이 동일한 명칭을 가진 파일은 .gitignore 에 작성시 다 무시되나요?? client 폴더에 common.js가 있고 server 폴더에 common.js 가 존재할 때 제가 확인한바로는 어디에있던 동일한 명칭의 파일은 다 무시되더라구요. 그렇다면 이럴경우 경로를 지정해서 client폴더에 common.js만 .gitignore에 등록되게 하는 방법이 있을까요?? 찾아봐도 다들 파일명만 적네요..
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 영화 사이트 만들기
리렌더링 문제에 대해 질문이 있습니다.
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' import GridCards from '../commons/GridCards' import { Row } from 'antd' function LandingPage() { const [Movies, setMovies] = useState([]) const [MainMovieImage, setMainMovieImage] = useState(null) const [CurrentPage, setCurrentPage] = useState(0) useEffect(() => { const endpoint = `${API_URL}movie/popular?api_key=${API_KEY}&language=en_US&page=1` fetchMovies(endpoint) }, []) const fetchMovies = (endpoint) => { fetch(endpoint) .then(response => response.json()) .then(response => { console.log(response) setMovies([...Movies, ...response.results]) setMainMovieImage(MainMovieImage || response.results[0]) setCurrentPage(response.page) }) } const loadMoreItems = () => { const endpoint = `${API_URL}movie/popular?api_key=${API_KEY}&language=en_US&page=${CurrentPage + 1}` fetchMovies(endpoint) } 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 */} <Row gutter={[16, 16]} > {Movies && Movies.map((movie, index) => ( <React.Fragment key={index}> <GridCards LandingPage image={movie.poster_path ? `${IMAGE_BASE_URL}w500${movie.poster_path}` : null } movieId={movie.id} movieName={movie.original_title} /> </React.Fragment> ))} </Row> </div> <div style={{ display:'flex', justifyContent: 'center'}}> <button onClick={loadMoreItems}>Load More</button> </div> </div> ) } export default LandingPage 밑의 질문도 보고 setMainMovieImage(MainMovieImage || response.results[0]) 으로 바꾸고 나서 load more 버튼을 클릭하면 메인 이미지는 변경되지 않는 것을 확인했습니다. 그런데 여전히 그리드 쪽은 리렌더링되면서 해주신 것처럼 버튼을 누른 자리에서 스크롤이 있고 카드들이 더 생기는 것이 아니라 새로고침처럼 load more 버튼이 있는 제일 밑으로 이동합니다. 이 문제를 수정하려면 어떻게 할 수 있을까요? 아니면 문제를 수정하기 위해 어떤 게 필요할까요?
- 따라하며 배우는 노드, 리액트 시리즈 - 영화 사이트 만들기
그리드가 한줄에 한 이미지씩 밖에 나오지 않습니다
삭제된 글입니다
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 영화 사이트 만들기
api 문서 관련해서 질문드립니다.
좋은 강의 해주셔서 감사합니다. 문서를 보면서 공부하는게 좋다고하여 영화 api 문서 확인하면서 공부해보고있는데요. 강의에서 작성방법과 공식문서에 나와있는 사용방법과 상이한데 강의에서 작성해주신 부분인 'https://image.tmdb.org/t/p/' 이부분에 대해서는 어디서 확인 가능한지 궁금합니다. 그리고 제가 보고 있는 문서는 https://developers.themoviedb.org/3/movies/get-movie-images 이 링크인데 해당문서는 틀린건가요? 이미지를 가져오는 방법인것같은데 제가 찾아본 문서에 있는대로 하면 결과값이 출력되지않네요. 반대로 선생님께서 작성해주신 대로 작성하면 출력이 되고요. 제가 실수한것일 수 있지만 궁금해서 질문드립니다.
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 영화 사이트 만들기
boiler-plate 사용하지 말고..
안녕하세요. 질문이 있어서 올립니다. 제가 프론트단만 구현하고 싶어서 그러는데, boiler-plate를 클론하지 않고, 따로 npx creat-react-app 으로 react프로젝트를 생성한다음 강의를 진행해도 문제가 없을까요??
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 영화 사이트 만들기
들어야되는 강좌 순서가 궁금합니다.
Boiler Plate 강좌를 수강하고 현재 수업을 듣고 있습니다. Boiler Plate에서는 로그인 페이지 생성이나, 로그인 정보를 로컬스토리지에 저장하지 않고 권한부여에 따른 HOC를 수업을 마지막으로 종료되었습니다. 다른 수업도 듣고 현재 수업을 들었어야 더 원활히 진행이 되는 것 같은데 혹시 강좌 순서를 어떻게 해서 듣는 것이 가장 좋은 순서 일까요?
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 영화 사이트 만들기
화면이 짜부가 됬습니다..
그리드가 설정이 되야되는데 안먹히네요.. antd 문제인가해서 모듈도 지워봤는데 먹통입니다. <Row gutter={[16,16]}> {movies && movies.map((movie, index)=>( <React.Fragment key={index}> <GridCards landingPage image={movie.poster_path ? `${IMAGE_BASE_URL}w500${movie.poster_path}`: null} movieId={movie.id} movieName={movie.original_title} /> </React.Fragment> ))} </Row> const GridCards = (props) => { return ( <Col lg={6} md={8} xs={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> ) }
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 영화 사이트 만들기
MainImage.js의 background 설정은 직접 만드신건가요?
<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', backgroundPosition:'center, center', width:'100%', position:'relative' }}> 이 부분은 직접 만드신건가요? 아니면 Document 를 참고하신건가요?
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 영화 사이트 만들기
로딩속도가 느린경우는 보통 무엇이 문제인가요?
안녕하세요. npm run dev를 실행하면 어플리케이션이 로딩되기까지 몇십초가 걸리는데요, 원래 이런 것인가요? 아님 제 컴퓨터나 코드 어딘가에 문제가 있는 것일까요? ㅠㅠ