[인기 영화 검색 사이트] 제작 프로젝트 #3 - HTML, CSS Layout 세팅 및 JSON 데이터 가공

HTML Layout 세팅

<!-- 상단 메뉴 -->
<header>
  <!-- 상단 좌측 -->
  <div class="leftMenu">
    <h1 id="cineDocsTitle">CineDocs</h1>
  </div>
  <!-- 상단 우측 -->
  <div class="rightMenu">
    <!-- 입력 Form -->
    <form>
      <!-- 입력 창 -->
      <input type="text" id="search_text" placeholder="Search" autofocus />
      <!-- [검색] 버튼 -->
      <button type="button" id="search_btn">검색</button>
    </form>
  </div>
</header>

<!-- 메인 화면 -->
<main>
  <!-- 영화 리스트 출력 -->
  <div class="movie_list"></div>
</main>

CSS Layout 세팅

header {
  display: flex;
  justify-content: space-around;
  align-items: center;
  
  background-color: lightblue;
  border-radius: 5px;
  box-shadow: 0px 0px 3px 0px lightskyblue;
}

h1 {
  letter-spacing: 3px;
  font-family: "Courier New", Courier, monospace;
}

.movie_card, .movie_content, .movie_img {
  padding: 30px;
}

.movie_card {
  display: flex;
  margin: 20px auto;
  
  background-color: whitesmoke;
  border: 1px solid lightgray;
  border-radius: 5px;
  box-shadow: 0px 0px 3px 0px lightblue;
}

JSON 데이터 가공

// 영화 리스트 DOM 지정
const movie_list = document.querySelector(".movie_list");

// fetch를 통해 JSON 형태의 데이터 가공
fetch(url, options)
  .then((res) => res.json())
  .then((data) => {
    // 영화 리스트 배열을 변수로 선언
    const movie_data = data["results"];
  
  	// 각 영화의 정보를 Array.map을 활용하여 HTML 형태의 배열로 저장
    const movie_result = movie_data.map((movie) =>{
      let movie_html = `
    <div class="movie_card">
      <div class="movie_content">
        <h2>${movie.title} (${movie.original_title})</h2>
        <p><strong>개봉일</strong> : ${movie.release_date} / <strong>평점</strong> : ${movie.vote_average}</p>
        <p>${movie.overview}</p>
      </div>
      <div class="movie_img">
        <img src="https://image.tmdb.org/t/p/w185${movie.poster_path}" />
      </div>
    </div>`;
      
      return movie_html;
    });
  
    // movie_result 배열을 HTML에 출력
    movie_result.forEach((movie) => {
      movie_list.innerHTML += movie;
    });
  })
  // 에러 발생 시 에러 출력
  .catch((err) => console.log(err));

결과 화면