4.24 개인과제 진행중... (개발 인생 처음 해결한 오류)

첫 번째 개인 과제

남들은 꼴랑 이런걸로 뿌듯해?  라고 할 수 있지만 난 매우 뿌듯한 상태이다.

 

완료한거

1. api 적용 완료

2. 만들어둔 카드에 api 값 불러오기

3. 간단한 css 수정 ( 계속 수정 예정)

 

해야될거

1. 검색 스크립트 구현 (제목 입력 -> 해당 카드 출현)

2. 카드 id 값 부여 (카드 클릭 시 id 값 알럿)

 

 

 

 

현재까지 구현

 

 

const options = {     method: 'GET',     headers: {       accept: 'application/json',       Authorization: 'Bearer eyJhbGciOiJIUzI1NiJ9.eyJhdWQiOiI3MjI3NzE0MDM1MzEzNjBiZWU2YmRiNmIwZDUwOGVmMiIsInN1YiI6IjY2Mjc1ZTJiNjNkOTM3MDE4Nzc1NjUyZSIsInNjb3BlcyI6WyJhcGlfcmVhZCJdLCJ2ZXJzaW9uIjoxfQ.qGlRoILTnebygsMdUJdB_cYmdPsxI-EhBB49Aaja0Pg'     }   };     fetch('https://api.themoviedb.org/3/tv/top_rated?language=en-US&page=1', options)     .then(response => response.json())     .then(response => {                           // fetch 불러온거 (API)                     let movie_list = response.results; // 불러온 데이터를 변수에 할당해준다       let temp_html = ``; // temp_html 을 아무런 값도 없이 초기화 한다       movie_list.forEach(doc => {          // 데이터 불러온걸 순회해서 변수들에 넣어준다         let movietitle = doc['name'];  //변수         let overview = doc['overview']; //변수         let image = 'https://image.tmdb.org/t/p/w500' + doc['poster_path']; //변수         let vote_average = doc['vote_average']; //변수         console.log(image) // temp_html 의 += 카드 여러개 만든다는 뜻 // html 요소를 만들어서 각 요소에 데이터를 넣는다.         temp_html += `                                 <li class="item">           <img src=${image} class="card-image">           <div class="cont">             <strong class="card-title">${movietitle}</strong>             <p >${overview}</p>             <p style="color: chartreuse;">grade : ${vote_average}</p>           </div>         </li>         `;         document.getElementById('list_wrap').innerHTML = temp_html;         // 얘가 있어야 적용이 됨, 다큐먼트에 id 값 list_wrap 안에 우리가 만든 temp_html 요소를 넣어준다.         // document = html 전부         // innerHTML = 채워준다               })     })

 

오늘 나를 아주 애먹인 스크립트들..

 

과제는 해야겠고, 강의만 듣자니 시간이 촉박할 것 같아서 강의를 돌려보기도 하고, 주위에 자문도 구하면서 완성했다.

 

다른 값들은 다 변수 선언 한데로 잘 불러와졌었는데, 영화 제목인 title 값만 적용이 안 되더라.. 하..

 

창피하지만 이것 때문에 몇 시간은 날렸다. 그래서 console.log(title) 을 해보니 undefined 가 뜨는 것 아닌가..

 

fetch('https://api.themoviedb.org/3/tv/top_rated?language=en-US&page=1', options)     .then(response => response.json())     .then(response => {                           // fetch 불러온거 (API)                     let movie_list = response.results; // 불러온 데이터를 변수에 할당해준다       let temp_html = ``; // temp_html 을 아무런 값도 없이 초기화 한다       movie_list.forEach(doc => {          // 데이터 불러온걸 순회해서 변수들에 넣어준다         let movietitle = doc['title'];  // @@@@@@@@@@@@@@여기@@@@@@@@@@@@@@@@         let overview = doc['overview']; //변수         let image = 'https://image.tmdb.org/t/p/w500' + doc['poster_path']; //변수         let vote_average = doc['vote_average']; //변수         console.log(image) // temp_html 의 += 카드 여러개 만든다는 뜻 // html 요소를 만들어서 각 요소에 데이터를 넣는다.         temp_html += `                                 <li class="item">           <img src=${image} class="card-image">           <div class="cont">             <strong class="card-title">${movietitle}</strong>             <p >${overview}</p>             <p style="color: chartreuse;">grade : ${vote_average}</p>           </div>         </li>         `;

 

 

@@@@@@@@표시해놓은 곳이 문제였다.

 

 

발제의 이 부분만 보고 doc 을 title 로 지정한것이 문제였다. 어떻게 해결했냐면 ->

 

console.log(dog)

 

dog 을 콘솔 로그로 띄워서 확인해보니 

 

 

6번째 줄의 name 이 보이십니까!!!!!!!!!!!!! 애초에 변수 할당이 잘못됬었다. title 이 아니라 name 이였던 것이다.

 

애초에 확인하고 했었어야 했는데,, 어이없는 실수긴 하지만 바로 잡았으니 됬다!

 

자바 스크립트는 진짜 너무 어렵다.. 너무, 너무...........

 

 

익숙해지는 때가 오겠지.... 열심히 나아가자... 꺾여도 간다..