tmdb api 가져오기

api 를 가져올때  const 를 쓰는 이유 

const는 변수를 선언하는 방법 중 하나로, 상수(constant)로 선언된 변수는 재할당할 수 없습니다. API 키, URL, 설정 객체 등 변경되지 않는 값을 저장할 때 사용됩니다.

 

const apiKey = "apikey";
const baseUrl = "https://api.themoviedb.org/3";

 

 

위의 코드는 API 키와 기본 URL을 상수로 선언하여 나중에 코드에서 재사용할 수 있도록 합니다. 이 값들은 한 번 설정되면 변하지 않으므로 const로 선언하는 것이 적절합니다.

---

 

 

 

querySelector

역할

querySelector 메서드는 주어진 CSS 선택자 문자열과 일치하는 문서 내의 첫 번째 요소를 반환합니다. 이 메서드는 특정 요소를 선택하고 해당 요소를 조작할 수 있도록 해줍니다. 

 

const searchInput = document.querySelector("#search-input");

 

 

 

querySelector는 HTML 문서 내에서 id가 search-input인 요소를 선택합니다. 이 요소는 검색 입력 필드입니다. 선택한 요소를 변수에 저장하여 나중에 해당 요소를 조작할 수 있습니다.

 

const moviesContainer = document.querySelector(".movies");

 

 

---

appendChild method는 특정 부모 노드의 자식 노드 목록 끝에 새로운 자식 노드를 추가합니다. 이 메서드는 새로운 요소를 기존의 HTML 구조에 동적으로 추가할 때 사용됩니다.

 

const moviesContainer = document.querySelector(".movies");
const movieCard = document.createElement("div");
movieCard.classList.add("movie-card");
moviesContainer.appendChild(movieCard);

 

 

querySelector로 movies 클래스를 가진 요소를 선택합니다.

createElement로 새로운 div 요소를 생성합니다.

classList.add로 생성한 div 요소에 movie-card 클래스를 추가합니다.

appendChild로 생성한 div 요소를 movies 클래스를 가진 요소의 자식으로 추가합니다.

 

 

 

 

---

 

• const는 변하지 않는 값을 저장하는 데 사용됩니다.
• if 및 if else는 조건에 따라 다른 코드를 실행하는 데 사용됩니다.
• fetchAndDisplayMovies 함수는 영화 데이터를 가져와 화면에 표시하는 기능을 모듈화하여 코드의 재사용성과 가독성을 높입니다.
• querySelector는 특정 HTML 요소를 선택하는 데 사용되고, appendChild는 선택한 요소에 새로운 자식 요소를 추가하는 데 사용됩니다.