[개인 프로젝트] 영화 검색 사이트 - (3) 개별 id alert 창 띄우기

liinyeye·2024년 4월 30일

Project

목록 보기

4/44

TIL : Today I Learned

id 를 나타내는 alert 창 띄우기 코드 수정

개인 과제 해설 리뷰로 알게된 점 정리

추가로 이전에 onclick으로 각각의 html코드에 attribute해서 id alert창을 띄우는 방식을 수정해보려고 하는데, 이유는 해당 방식을 사용할 경우 메모리 측면에서 비효율적이기 때문이다. 개인 과제 해설 영상을 바탕으로 코드를 수정하고 새롭게 알게된 내용을 정리해보려고 한다.

id 를 나타내는 alert 창 띄우기 (코드 수정)

이전에 사용했던 fetch함수는 비동기함수로 동기적으로 바꿔주는 것이 필요해 async를 사용해 영화카드 UI를 만드는 renderMovie()함수로 코드를 수정했다. 데이터를 받아오면서 html을 그려주고, 다시 forEach로 data.results를 순회하면서 click이벤트를 실행시켜줬다.

getElementById로 원하는 id값이 들어있는 객체를 가져와서 element에 할당해주고, element에 클릭 이벤트를 작동시켜 movieCardClick()함수 인자로 각각의 아이디값이 들어갈 수 있도록 넣어준다. 그리고 movieCardClick()함수는 반복문에 포함되지 않도록 renderMovie()함수 바깥에서 선언해준다.

오류

처음에는 forEach를 여러 번 반복하지 않기 위해 위의 forEach안에 아래의 이벤트도 같이 넣어려주려고 했지만, 클릭 이벤트 자체가 작동하지 않거나 첫번째 객체만 생성되고 함수에 오류가 생겨 나머지 영화 데이터들도 화면에 보이지 않았다. 튜터님이랑 같이 이런 저런 방법을 고민해봤지만 결국 안에서는 실행되지 않아 어쩔 수 없이 밖으로 빼줬고 이렇게 하니 작동했다.

//fetch로 받아온 데이터로 영화 카드 UI 만들기
const renderMovie = async () => {
  const response = await fetch("https://api.themoviedb.org/3/movie/top_rated?language=en-US&page=1", options);
  const data = await response.json();

  data.results.forEach((element) => {
    document.querySelector(".movies").innerHTML += `
        <div class="movie__box-wrapper">
        <div class="movie__box" id="${element.id}" >
            <div class="movie__contents" token interpolation="('${element.id}')">
                <div class="movie__content">
                    <img class="movie__img" src=${`https://image.tmdb.org/t/p/w400` + element.poster_path} >
                    <h3 class="movie__title" id="card-title">${element.original_title}</h3>
                    <p class="movie__sum">${element.overview}</p>
                </div>
                <div class="rate__box">
                    <span class="movie__rate">${`Rating : ` + element.vote_average}</span>
                </div>
            </div>
        </div>
        </div>
        `;
  });

  data.results.forEach((data) => {
    const element = document.getElementById(`${data.id}`);
    element.addEventListener("click", () => movieCardClick(`${data.id}`));
  });
};

function movieCardClick(id) {
  console.log({ id });
  if (id) {
    alert(`영화 id는 ${id} 입니다.`);
  }
}

renderMovie();

이외 알게된 개념

모듈(module)

특정 관심사에 해당하는 기능을 수행하는 변수와 함수의 모음
관심사의 분리 (재사용성, 유지보수성, 깃 협업능률 향상)
모듈 별로 독립적인 scope 생성
- movie.js 와 search.js 에서 동일한 이름의 변수를 사용해도 관계 없음
스크립트 지연 실행 기본 내장

모듈 스코프에서 정의된 이름은 export/import 구문을 통해 다른 파일에서 사용할 수 있음
모듈은 항상 엄격 모드(use strict)로 실행됨.

type=“module”과 defer 속성

async/await

async 함수는 항상 Promise 를 반환한다.
await 뒤에 있는 건 항상 Promise 다.
await Promise 는 Promise Result를 반환하며 약속이행이 될 때 까지 기다린다.

async function printData() {
	const response = await fetchData();
	// console.log("response: ", response)
	const result = await response.json();
	// console.log("result: ",result);
}

async function fetchData() {
	const result = await fetch('https://jsonplaceholder.typicode.com/posts/1');
	return result;
}

printData();