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

1

John Ahn

지식공유자

안녕하세요 ^^

우선

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

원래는 '' 이거를 쓰다가

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

지식공유자

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

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

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

0

ellen6666

질문자

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

0

ellen6666

질문자

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

0

ellen6666

질문자

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

입니다!

0

John Ahn

지식공유자

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

인프런 커뮤니티 질문&답변