[TIL 23.05.31] 영화 검색 페이지 만들기1,git hub에 올리기

개인프로젝트 - 영화 검색 페이지 만들기

🚩 [자바스크립트 개인 과제]

• Javascript과정을 마무리하며, JS 문법의 핵심을 적용해 볼 수 있는 영화 검색 사이트를 제작합니다.
• 영화정보 오픈API인 TMDB(The Movie DB)를 사용합니다.

🖤작업기록 ( 영화 api를 가저와서 영화 소개 리스트만들기 )

1. TMDB에서 오픈API가저오기
   (https://www.themoviedb.org/signup?language=ko)

2.html

3.js

fetch('https://api.themoviedb.org/3/movie/top_rated?language=en-US&page=1', options)
  .then(response => response.json())
  .then((response) => {
    document.querySelector('.movie').remove();
    response.results.forEach((movie) => {
      let temp_html = `<div class="movie">
                      <img src="https://image.tmdb.org/t/p/w500${movie.poster_path}" alt="" />
                      <h2 class="movieName">${movie.title}</h2>
                      <p class="overview">${movie.overview}</p>
                      <p class="movieRate">평점 ${movie.vote_average}</p>                      
                    </div>`;
                    
  document.querySelector('#card-wrap')
      .insertAdjacentHTML('beforeend', temp_html);
    });

  })


  .catch((err) => console.error(err));

❗문제 발생😰
console.log를 통해서 확인 했을 때는 분명 연결이 된것으로 보이는데
아무리 해도 해결이 안됨

❗시도한 것들🥹
변수명을 바꿔보고 id값을 넣었다가 class값을 넣었다가 별의별 시도를 다함

❗해결 방법🥰
팀원들과 공유를 통해 도움을 구했다 !

알고보니

option 부분을 누락해서 나타난 실수였다

❗새롭게 알게된 것😎
1)팀원들과의 내용 공유는 정말 중요하다는 것
잘하는 팀원들에 비해 내가 짠 코드는 허접해보이기도 하고 남들에 비해 더딘 속도에 조바심+창피함 때문에 혼자 어떻게든 해보려고 고군분투 했었지만 창피함을 한번에 해결되었다

2) 복사 -붙여넣기를 하더라도 꼼꼼히 할 것
아주 기초적인 부분에서 실수한 것으로 인해 전체 코드가 먹통이 될 수 있다

github에 업로드 하기

❗문제 발생😰
원하는 대로 구현이 되지 않아 홧김에 css를 지워버림

❗시도한 것들🥹
처음부터 다시 하나씩하나씩..

❗해결 방법🥰
깃허브에 이전 버전 없으신가요 ? 라는 말을 듣고 아맞다...

❗새롭게 알게된 것😎
깃허브 업로드를 생활화 하기

아직 구현하지 못한 기능들 ( 검색, 포스터 클릭시 영화 ID 나오게 하기 )이 있지만
일단은 업로드함