오늘은 기존에 틀만 만들었던 메인 페이지를 서버에 요청해 포스터들을 나열하는 것을 해보려고 한다.
역시나 험난한 여정이었다...
1.서버 요청
일단 백엔드에서 작성한 코드를 가져왔다. 그리고 마이그레이션을 하고 데이터베이스를 받아왔다.
내 컴퓨터에는 백엔드에서 받아온 value가 없기 때문이다.
위와 같이 데이터베이스를 생성해줬다. 벡엔트팀 진짜 너무 고생했어요ㅜㅜ😃
getMovieList = async () => {
let movieList = await axios.get("https://localhost:4000/movie/getList");
movieList = movieList.data;
console.log("data is " + JSON.stringify(movieList.data));
this.setState({ movieList });
};그리고 client에서 GET요청을 했다. 여기까지는 순조로웠다.
이렇게 목록을 가져올 수 있었다. 그래서 금방하겠네 했는데 어떻게 해도 영화가 나열이 되지 않았다.
찾던 중 블로그 하나를 찾았고 그 블로그에 있는 대로 한번 작성해봤다. 되면 좋고 안되면 다시 해보면 되니까!!
그 결과는 .......
하하하하하 두둥!!! 드디어 이걸 해냈다!!! 이걸로 오전 오후 시간 다 날렸지만 어찌나 감격스럽던지...
<div className={styles.main}>
{this.state.movieList.length === 5 ? (
this.state.movieList.map((movie) => {
return (
<>
<div>
<img
src={movie.poster}
className={styles.poster}
id={movie.id}
onClick={this.handleMovieSelect}
value={movie.poster}
></img>
</div>
</>
);
})
) : (
<button onClick={this.getMovieList}>영화보기</button>
)}
</div>위에서 받아온 내용들을
super(props);
this.state = {
movieList: [],
items: [],
};위에 써있는 movieList라는 배열에 담아주었고 그 담아준 데이터들을 map으로써 빙글빙글 돌리고 하나씩 출력이 되게끔 만들어줬다. 그리고 나서 두 영화를 클릭했을때 넘어가는 기능을 구현하려고 했으나 실패하고 하나만 일단 넘기는 것을 구현해보았다. 이것도 한참 해메다가 찾았는데 우리가 원하는 로직은 영화를 클릭시 아래와 같은 페이지로 넘어가게 하면서 그 클릭한 데이터를 갖고 가는 거였다.
localhost:3000/moviecompare찾아보니 밑에 있는 코드를 작성하면 영화를 클릭하면 items에 담긴 e.target의 src(url소스)를 같이 보내줄 수있었다.
handleMovieSelect = (e) => {
this.props.history.push({
pathname: "/moviecompare",
state: { items: e.target.src },
});
};
이런 식으로 받아와 화면에 띄워줬다.
뭔가 두개의 데이터를 갖고 올 수 있는 방법이 있을거같은데 아직 내공이 부족한가보다. 여러가지 방법을 시도해봤지만 안타깝지만 실패....좀더 연구가 필요하다.
오늘은 여기까지...
다음화에 계속
