• 카테고리

    질문 & 답변

  • 세부 분야

    풀스택

  • 해결 여부

    미해결

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

20.05.06 01:17 작성 조회수 158

0

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

course-thumbnail

따라하며 배우는 노드, 리액트 시리즈 - 영화 사이트 만들기

무비앱 시리즈 #4 Landing Page 만들기 (1) ( 따라하며 배우는 리액트 노드 )

강의실 바로가기

답변 6

·

답변을 작성해보세요.

1

John Ahn님의 프로필

John Ahn

지식공유자

2020.05.06

안녕하세요 ^^ 

우선 

''    ``의 차이점도 알려드릴게요.

원래는 '' 이거를 쓰다가 

`` 이게 새로나오게 된것입니다. (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} />
</div>
</Col>
)
}
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} />

</a>

</div>
</Col>
)
}

}
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>

<div style={{ display: 'flex', justifyContent: 'center', margin: '2rem' }}>
<Button onClick={toggleActorView}>Toggle Actor View</Button>

</div>

{!LoadingForMovie ?
<MovieInfo movie={Movie} />
:
<div>loading...</div>
}
<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...</div>
}


</Row>
}
</div>


</div>
)
}

export default MovieDetail

이렇게 바꿔주시면 됩니다 ^^ 

이게  따라서 코드를 입력하다 보면 실수를 많이 하게 됩니다 ~ 

그래서 제가 완성해놓은 코드를 보면서 하시는 것도 추천해 드립니다 ~~!^^ 

코드 보다가 이해안되시는 곳 있으면 질문 주세요 ~ !!! 

혹시 제가 답장이 늦거나 하면 답장이 없으면 이메일로 질문주셔도 됩니다 ~ ^^

0

John Ahn님의 프로필

John Ahn

지식공유자

2020.05.07

이게  댓글에 또 댓글을 달면  알림이 잘안오는것 같아요 ^^ ;; ㅎㅎ   

제가 그 코드를 봤을떄 사실 바꿔야할부분이 조금 많이 있어서  하나하나 설명하기가 조금 애매했던거 같아요 ~ 

그래서   좀 더 조금 조금 하면서 에러가 날떄 바로 질문 주시면  제가  하나 하나 더 잘 설명 해드릴수있을것같아요 ^^  

0

ellen6666님의 프로필

ellen6666

질문자

2020.05.06

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

0

ellen6666님의 프로필

ellen6666

질문자

2020.05.06

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

0

ellen6666님의 프로필

ellen6666

질문자

2020.05.06

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

입니다!

0

John Ahn님의 프로필

John Ahn

지식공유자

2020.05.06

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

이 글과 비슷한 Q&A