inflearn logo
강의

講義
知識共有

手を動かしながら学ぶReact A to Z [19バージョン反映]

映画を並べるためのRowコンポーネントを作成する

Row 컴포넌트 생성하기 base_url not defined

351

doubletip1680

投稿した質問数 3

0

안녕하세요 선생님 Row 컴포넌트 생성하기에서
base_url 을 가져오지 못한다는 에러가 나오는데 어떤게 문제인건가요 ?
 
import React, { useEffect, useState } from 'react'
import axios from "../api/axios"

const Row = ({ title, fetchUrl, id, isLargeRow}) => {

const [movies, setMovies] = useState([])

useEffect(()=> {
fetchMovieData()
},[])

const fetchMovieData = async ()=> {
const request = await axios.get(fetchUrl)
setMovies(request.data.results)
}

return (
<section>
<h2>{title}</h2>
<div className="slider">
<div className="slider__arrow-left">
<span className="arrow">
{"<"}
</span>
</div>
<div id={id} className="row__posters" >
{movies.map((movie) =>(
<img
key={movie.id}
className={`row__poster ${isLargeRow && "row__posterLarge"}`}
src={`${BASE_URL}${isLargeRow ? movie.poster_path : movie.backdrop_path}`}
loading="lazy"
alt={movie.name}
/>
))}
</div>
<div className="slider__arrow-right">
<span className="arrow">
{">"}
</span>
</div>
</div>
</section>
)
}

export default Row

Next.js typescript react redux tdd

回答 1

1

imuchgabis3999

코드 이렇게 바꿔보시겠어요?

src={`https://image.tmdb.org/t/p/original/${
                  isLargeRow ? movie.poster_path : movie.backdrop_path
                }`}

0

doubletip1680

감사합니다. 근데 base_url 문제는 해결이 되었는데,

movies를 맵 돌릴수 없다고 나오는데, 콘솔로그 다시 확인해보니 request의 data 가 "" 로 찍히더라고요, 혹시 어느 부분을 확인하면 될까요 ??

1

imuchgabis3999

혹시 axios.js랑 requests.js 올려주실수 있을까요?

추가로 Row 프롭스 잘 전달하셨나요?

<Row title="Trending Now" id="TN" fetchUrl={requests.fetchTrending} />

0

doubletip1680

props 전달할때 오타가 있어서 안나왔었어요. 오타 수정하니 잘 나옵니다.

도움 주셔서 감사합니다!

강의 소스 코드 압축 풀기 오류

0

86

1

런타임 에러 ㅠㅠ

0

102

1

강의대로 따라갔는데 에러보다 api키로 들어간 넷플릭스? 그런게 렌더링 되지 않습니다 ㅠ

0

112

1

안녕하세요 개발과 상관없는 질문입니다만

0

121

1

리액트 라우터 관련

0

111

1

react-beatiful-dnd에서 문제가 발생합니다.

0

108

1

react19에서는 react-beautiful-dnd가 설치되지 않습니다.

0

823

1

useEffect로 사용을 해도 되나요?

0

206

1

넷플릭스 오리지널 제외하고 슬라이드가 동작을 안합니다.

0

200

1

react 19의 useActionState가 더이상 isPending은 지원하지 않는 듯합니다

0

287

2

리액트 dockderfile 작성 시 COPY 질문

0

154

1

next.js에서부터는 react query 필요없는지

0

325

1

기능

0

202

1

오류가 안보여요

0

202

1

CSS

0

222

1

local storage

0

217

1

list컴포넌트 생성하기

0

226

1

검색어 입력 후 초기화하는 방법 궁금합니다!

0

340

1

Banner.css에 대해서

0

459

1

플러그인이 추천을 안해줍니다

0

328

1

마이너스버튼 테스트

0

281

2

리액트 서버 실행 오류

0

1165

2

오류메세지는 확인했는데 어떻게 고쳐야 할지 모르겠습니다 ㅠ

0

302

1

creactStore질문이요

1

289

2