First Project(영화비교) Front End-⑤

byungju0624·2020년 12월 31일
0
post-thumbnail

오늘은 기존에 틀만 만들었던 메인 페이지를 서버에 요청해 포스터들을 나열하는 것을 해보려고 한다.
역시나 험난한 여정이었다...

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 },
    });
  };


이런 식으로 받아와 화면에 띄워줬다.

뭔가 두개의 데이터를 갖고 올 수 있는 방법이 있을거같은데 아직 내공이 부족한가보다. 여러가지 방법을 시도해봤지만 안타깝지만 실패....좀더 연구가 필요하다.

오늘은 여기까지...
다음화에 계속

0개의 댓글