23.05.29) 개인 프로젝트 - 영화 검색 사이트 만들기 1

💡 프로젝트 개요 [영화 검색 웹사이트] S.A.

🔻프로젝트 소개

1. 프로젝트 명 : FilmHunt

   ("영화 사냥" : "Film"은 영화를 의미하고, "Hunt"는 사냥하다, 찾다라는 뜻을 갖고 있습니다.

     따라서 "FilmHunt"는 영화리스트를 찾아내는 데 초점을 맞춘 영화 검색 사이트를 의미합니다.)

2. 메인페이지 기능 : 검색창에 영화 제목을 검색하면 리스트에 있는 인기 영화를 찾을 수 있습니다.

3. 와이어프레임

🔻필수 요구 사항

1. jQuery 라이브러리 사용없이 순수 바닐라 자바스크립트 사용하기

2. TMDB 오픈 API를 이용하여 인기영화 데이터 가져오기

3. 영화정보 카드 리스트 UI 구현

4. 영화 검색 UI 구헌

5. 하기 기재된 Javascript 문법 요소를 이용하여 구현

• const와 let만을 이용한 변수 선언 필수
• const a = 'test 01'; let b = 'test 02'; var c = 'no way!'; //쓰지 말 것
• 화살표 함수 : 하기 예시 중 1개 이상 사용
  • 일반 화살표 함수
  • let add = (x, y) => { return x + y; } console.log(add(2, 3)); // 5
  • 한 줄로 된 화살표 함수
  • let add = (x, y) => x + y; console.log(add(2, 3)); // 5
  • 매개변수가 하나인 화살표 함수
  • let square = x => x * x; console.log(square(3)); // 9
• 배열 메소드 : 하기 예시 중 2개 이상 사용
  • forEach
  • map
  • filter
  • reduce
  • find
• DOM 제어하기 

6. github 에 작업한 코드 업로드

---

 

📕오늘 공부한 내용

제이쿼리 문법은 사용하지 않고 순수 바닐라 자바스크립트만 사용하는 프로젝트 과제를 받았다.

오픈 api를 이용해 영화 검색 사이트를 만들면 된다. 

*TMDB 주소 (https://www.themoviedb.org/?language=ko)

TMDB에 접속해서 회원가입을 하고 api를 요청하면 된다 

API키 복사하는 방법은 (티스토리-유지광이님 블로그 참조하면 된다. https://ji-gwang.tistory.com/54)

2.The MovieDB API 설정 - 영화사이트 만들기

 

가져오는 방법은 Fetch를 이용해서 가져왔다. 여기서 정말 하루종일 구글링하는데도 헷갈리고

너무 어려워서 머리가 계속 아팠다.. 처음이라 어렵지만 이렇게 과제를 통해 문법을 익히다보면

언젠간 잘할 날이 오겠지..?

 

//Fetch API는 리소스를 가져오기 위한 인터페이스를 제공.
fetch("https://api.themoviedb.org/3/movie/popular?language=ko&page=1", options) //language 한글로 번역 (language=ko)
  //response는 Fetch API의 요청에 대한 응답
  .then((response) => response.json())
  //json메서드는 response를 가져와 response가 완료될 때까지 읽는다(본문 텍스트로 구문 분석한 결과로 해결되는 약속을 반환함)
  .then((response) => {
    //기존에 만든 카드 삭제
    document.querySelector(".card").remove();
    // console.log(response.results); (html과 연결 잘 되었는지 확인)
    response.results.forEach((movie) => {
      // [객체 key - value pair로 .사용해서 값에 접근]
      let template = `<div class="card">
                          <img class="img" src="https://image.tmdb.org/t/p/w500${movie.poster_path}" alt="" />
                          <h2 class="movie_title">${movie.title}</h2>
                          <div class="movie_content">
                            <span class="score">별점 : ${movie.vote_average}</span>
                          </div>
                          <p class="overview">${movie.overview}</p>
                       </div>`;
      document
        // querySelector : (card-box)는 document에서 매치되는 엘리먼트를 갖고 옴
        .querySelector(".card-box")
        // insertAdjacentHTML(position, text) : HTML을 문서(document)에 삽입
        //position : beforeend(자식요소의 마지막 위치) / text : 해당 위치에 삽입될 HTML 요소의 text값
        .insertAdjacentHTML("beforeend", template);
    });
  })
  .catch((err) => console.error(err));

먼저 html과 api가 잘 연결되었는지 console.log(response.results);로 확인하고  

html문서에 미리 만들어둔 카드 양식을 querySelector를 이용해서 value값들을 넣어 영화정보들을 불러오는데 성공했다.

 

자바스크립트에 dom제어 요소인 insertAdjacentHTML 삽입에 대해 자세하게 설명해주신 

(벨로그 -서진님 블로그 참조) https://velog.io/@1106laura/insertAdjacentHTML

JS로 DOM 요소를 삽입할 때 : insertAdjacentHTML

과제를 하면서 주석처리를 꼼꼼하게 해놔야 나중에 내가 코드를 볼 때도 이해할 수 있고

주석처리가 정말 중요하다고 다시 한번 생각했다. 이 문법이 어떻게 쓰이는지 하나하나 다 구글링해서 적었는데

혹시나 주석이 틀린곳이 있다면 튜터님께 한번 여쭤보고 다시 수정해야겠다.