안녕하세요 api 질문드립니다

Question

강의대로 따라하는 도중에 api/users/auth 부분에서 에러가 나면서 그림이 다 안나오더라구요..영화 title이랑 설명은 제대로 나오는데 이미지가 안나옵니다ㅠㅠㅠ터미널 창에 에러는 [HPM] Error occurred while trying to proxy request /api/users/auth from localhost:3000 to http://localhost:5000/ 이런식으로 나옵니다! stackoverflow에서 하라는 대로 다 해봤는데 여전히 이미지가 나오지 않아서 문의드립니다...

John Ahn · Answer

안녕하세요 ^^ 우선 '' ``의 차이점도 알려드릴게요. 원래는 '' 이거를 쓰다가 `` 이게 새로나오게 된것입니다. (ES2015) 그래서 이름은 template literals 이나 template strings라고 부르는데 back ticks라고도 부릅니다. 이것은 ''보다 많은 편리한 점을 제공하는데요 대표적으로 보면 ''를 쓸때는 const userInfo = 'User info: ' + name + ' ' + surname + ' ' + telephone; ``를 쓸때는 const userInfo = `User info: ${name} ${surname} ${telephone}`; 이렇게 굳이 + + 를 사용하지 않고서도 구현이 가능해집니다 ^^ 우선 첫번째 LandingPage.js const endpoint = ' ${API_URL}movie/popular?api_key=${API_KEY}&language=en-US&page=1 ' ; => const endpoint = `${ API_URL } movie/popular?api_key= ${ API_KEY } &language=en-US&page=1 ` ; 이렇게 해주세요 ~ 두번째 GridCard.js < a href = { ' /movie/${movieId} ' } > => < a href = { ` /movie/ ${ movieId }` } > 아 하다 보니깐 조금 많아서 전체 복사 붙여놓기 할게요 ^^ ;;; GridCard.js import React from ' react ' import { Card , Col , Row } from ' antd '; import { Image_URL } from ' ../Config '; function GridCard ( props ) { let { actor , key , image , movieId , movieName , characterName } = props const POSTER_SIZE = ' w154 ' ; if (actor) { return ( < Col key = { key } lg = { 6 } md = { 8 } xs = { 24 } > < div style = {{ position : ' relative ' }} > < img style = {{ width : ' 100% ' , height : ' 320px ' }} alt = { characterName } src = { props . image } /> ) } else { return ( < Col key = { key } lg = { 6 } md = { 8 } xs = { 24 } > < div style = {{ position : ' relative ' }} > < a href = { ` /movie/ ${ movieId }` } > < img style = {{ width : ' 100% ' , height : ' 320px ' }} alt = { movieName } src = { image } /> ) } } export default GridCard MovieDetail.js import React , { useEffect , useState } from ' react ' import { API_URL , API_KEY , Image_URL } from ' ../../Config '; import MainImage from ' ../LandingPage/section/MainImage '; import MovieInfo from ' ./section/MovieInfo '; import GridCard from ' ../../Common/GridCard '; import { Row , Button } from ' antd '; import Favorite from ' ./section/Favorite '; function MovieDetail ( props ) { const [ Movie , setMovie ] = useState ([]) const [ Casts , setCasts ] = useState ([]) const [ ActorToggle , setActorToggle ] = useState ( false ) const [ LoadingForCasts , setLoadingForCasts ] = useState ( true ) const [ LoadingForMovie , setLoadingForMovie ] = useState ( true ) let movieId = props . match . params . movieId useEffect ( () => { let endpointInfo = `${ API_URL } movie/ ${ movieId } ?api_key= ${ API_KEY }` fetch (endpointInfo) . then ( result => result . json ()) . then ( result => { console . log (result) setMovie (result) setLoadingForMovie ( false ) let endpointForCasts = `${ API_URL } movie/ ${ movieId } /credits?api_key= ${ API_KEY }` ; fetch (endpointForCasts) . then ( result => result . json ()) . then ( result => { console . log (result) setCasts (result . cast) } ) setLoadingForCasts ( false ) } ) . catch ( error => console . error ( ' Error: ' , error) ) }, []) const toggleActorView = () => { setActorToggle ( ! ActorToggle) } return ( < div > < MainImage image = { `${ Image_URL } w1280 ${ Movie . backdrop_path }` } title = { Movie . original_title } text = { Movie . overview } /> < div style = {{ width : ' 85% ' , margin : ' 1rem auto ' }} > < div style = {{ display : ' flex ' , justifyContent : ' flex-end ' }} > < Favorite movieInfo = { Movie } movieId = { movieId } userFrom = { localStorage . getItem ( ' userId ' ) } /> < div style = {{ display : ' flex ' , justifyContent : ' center ' , margin : ' 2rem ' }} > < Button onClick = { toggleActorView } > Toggle Actor View { ! LoadingForMovie ? < MovieInfo movie = { Movie } /> : < div > loading... } < br /> { ActorToggle && < Row gutter = { [ 16 , 16 ] } > { ! LoadingForCasts ? Casts . map ( ( cast , index ) => ( cast . profile_path && < GridCard actor image = { cast . profile_path ? `${ Image_URL } w500 ${ cast . profile_path }` : null } characterName = { cast . characterName } /> )) : < div > loading... } } ) } export default MovieDetail 이렇게 바꿔주시면 됩니다 ^^ 이게 따라서 코드를 입력하다 보면 실수를 많이 하게 됩니다 ~ 그래서 제가 완성해놓은 코드를 보면서 하시는 것도 추천해 드립니다 ~~!^^ 코드 보다가 이해안되시는 곳 있으면 질문 주세요 ~ !!! 혹시 제가 답장이 늦거나 하면 답장이 없으면 이메일로 질문주셔도 됩니다 ~ ^^

John Ahn · Answer

이게  댓글에 또 댓글을 달면  알림이 잘안오는것 같아요 ^^ ;; ㅎㅎ    제가 그 코드를 봤을떄 사실 바꿔야할부분이 조금 많이 있어서  하나하나 설명하기가 조금 애매했던거 같아요 ~  그래서   좀 더 조금 조금 하면서 에러가 날떄 바로 질문 주시면  제가  하나 하나 더 잘 설명 해드릴수있을것같아요 ^^

ellen6666 · Answer

그런데  [HPM] Error occurred while trying to proxy request /api/users/auth from localhost:3000 to http://localhost:5000/   이 에러가 계속 뜨네요ㅠㅠㅠuser의 api가 잘못된건가요??

ellen6666 · Answer

!!!!!감사합니다ㅠㅠㅠ정말 감사합니다!

ellen6666 · Answer

넵! 깃헙주소는  https://github.com/yusejeong/React/tree/master/boilerplate-mern-stack-master 입니다!

John Ahn · Answer

안녕하세요 ellen님 ~  아마 서버에 문제가 있는것 같은데  혹시 github에 소스 올리셨으면 그 주소를 알려주시면 소스를 직접 봐보겠습니다 ~ !