[갠프] js에 써먹은 모든 함수에 대해 (q&a)

1. async 및 await

• 설명: async는 비동기 함수를 정의하는 키워드야. 이 함수 내에서 await를 사용하면, 비동기 작업이 완료될 때까지 기다릴 수 있어.
• 용도: API 호출과 같은 비동기 작업을 쉽게 처리하기 위해 사용해.

2. fetch()

• 설명: 네트워크 요청을 보내고 응답을 받기 위해 사용되는 함수야. Promise를 반환하므로 비동기적으로 작동해.
• 예제: fetch(url)은 주어진 URL에 GET 요청을 보냄.
• 용도: 외부 API에서 데이터를 가져오는 데 사용.

3. await

• 설명: async 함수 내에서만 사용할 수 있는 키워드로, Promise가 해결될 때까지 기다려줌.
• 예제: const response = await fetch(url);는 fetch 요청이 완료될 때까지 기다림.
• 용도: 비동기 작업을 동기적으로 처리할 수 있게 해.

4. response.json()

• 설명: fetch 요청의 응답 객체에서 JSON 데이터를 추출하는 메서드야. 이 메서드도 Promise를 반환하므로 await와 함께 사용해야 해.
• 용도: API에서 받은 JSON 형식의 데이터를 JavaScript 객체로 변환.

5. Array.prototype.forEach()

• 설명: 배열의 각 요소에 대해 주어진 함수를 실행하는 메서드야. 반환값은 없고, 원본 배열을 변경하지 않아.
• 예제: movies.forEach((movie) => { /* 코드 */ });는 movies 배열의 각 영화에 대해 코드를 실행해.
• 용도: 배열의 모든 요소를 반복 처리할 때 사용.

6. document.createElement()

• 설명: 새로운 HTML 요소를 생성하는 메서드야.
• 예제: const movieElement = document.createElement("div");는 <div> 요소를 생성.
• 용도: 동적으로 HTML 요소를 만들 때 사용.

document.createElement()를 사용하는 이유는 여러 가지.
1. 동적 요소 생성
설명: document.createElement()는 자바스크립트를 통해 동적으로 HTML 요소를 생성할 수 있게 해.용도: 페이지가 로드된 후에 사용자 행동이나 데이터에 따라 새로운 요소를 추가해야 할 때 유용해. 예를 들어, 사용자가 버튼을 클릭했을 때 새로운 영화 카드나 댓글을 추가하는 경우.
2. 제어와 유연성
설명: 이 방법을 사용하면 생성한 요소에 다양한 속성이나 클래스를 추가하고, 내용을 설정할 수 있어.용도: HTML 문자열을 직접 조작하는 것보다 더 안전하고 유연하게 요소를 구성할 수 있어. 예를 들어, 생성 후에 스타일이나 이벤트 리스너를 쉽게 추가할 수 있어.
3. XSS 공격 방지
설명: 사용자가 입력한 데이터를 HTML로 삽입할 때, HTML 문자열을 직접 조작하는 것은 보안 취약점을 초래할 수 있어.용도: createElement를 사용하면, DOM에 직접 삽입하기 전에 검증과정을 거칠 수 있어, XSS(크로스 사이트 스크립팅) 공격을 예방할 수 있어.
4. 재사용성
설명: 자바스크립트 함수를 사용해 다양한 경우에 동일한 유형의 요소를 반복적으로 생성할 수 있어.용도: 코드의 재사용성을 높이고, 유지보수를 쉽게 해줘.
5. 템플릿으로 사용
설명: 여러 요소를 동적으로 생성해야 하는 경우, HTML 코드 블록을 템플릿처럼 사용할 수 있어.용도: 동적인 데이터에 따라 같은 구조의 여러 요소를 쉽게 생성할 수 있어.
결론
즉, document.createElement()는 동적인 웹 페이지를 만들고, 더 안전하고 유연하게 요소를 관리하는 데 중요한 역할을 해. 직접 HTML을 수정하는 것보다 더 많은 장점을 제공하는 거야. 필요할 때 적절하게 사용하는 것이 좋지! 

7. element.classList.add()

• 설명: 특정 HTML 요소에 클래스 이름을 추가하는 메서드야.
• 예제: movieElement.classList.add("movie");는 생성한 요소에 movie 클래스를 추가.
• 용도: CSS 스타일을 적용할 때 사용.

8. element.innerHTML

• 설명: HTML 요소의 콘텐츠를 설정하거나 가져오는 프로퍼티야.
• 예제: modalMovieTitle.innerHTML = movie.title;는 모달의 제목을 영화 제목으로 설정.
• 용도: 동적으로 HTML 콘텐츠를 업데이트할 때 사용.

9. document.querySelector()

• 설명: CSS 선택자를 사용하여 문서에서 첫 번째 일치하는 요소를 반환하는 메서드야.
• 예제: const modalWindow = document.querySelector(".modal");는 첫 번째 .modal 클래스를 가진 요소를 찾음.
• 용도: 특정 요소를 선택하여 조작할 때 사용.

10. element.setAttribute()

• 설명: HTML 요소에 속성을 추가하거나 수정하는 메서드야.
• 예제: modalMovieTitle.setAttribute("data-id", movie.id);는 제목 요소에 데이터 속성을 추가.
• 용도: 동적으로 속성을 설정할 때 사용.

11. Array.prototype.filter()

• 설명: 주어진 조건을 만족하는 배열의 모든 요소를 포함하는 새로운 배열을 생성하는 메서드야.
• 예제: const filteredMovies = allMovies.filter((movie) => movie.title.toLowerCase().includes(searchValue));는 제목에 검색어가 포함된 영화만 필터링.
• 용도: 조건에 맞는 요소를 찾을 때 사용.

12. element.addEventListener()

• 설명: 특정 이벤트에 대해 함수를 호출할 수 있게 하는 메서드야. 첫 번째 인자는 이벤트 타입(예: "click"), 두 번째 인자는 이벤트가 발생했을 때 실행할 함수야.
• 예제: modalCloseBtn.addEventListener("click", () => { /* 코드 */ });는 모달 닫기 버튼에 클릭 이벤트를 추가.
• 용도: 사용자 인터랙션을 처리할 때 사용.

13. element.style.display

• 설명: CSS의 display 속성을 통해 요소의 표시 상태를 설정하는 프로퍼티야.
• 예제: modalWindow.style.display = "block";은 모달을 보이게 설정.
• 용도: 요소의 가시성을 제어할 때 사용.

14. document.querySelector("body").classList.add("scroll_disable")

• 설명: body 요소에 scroll_disable 클래스를 추가하여 스크롤을 막는 방식이야.
• 용도: 모달이 열릴 때 배경 스크롤을 막기 위해 사용.