[TIL]231020_오픈API가져오기 2단계

드디어.... 가져왔다 오픈 API 너란놈...🤬

(까먹지 않기 위해 적는 기록)

길을 잃었던 부분😓

HTML에서 class를 부여하고 JS에 getElementsByClassName을 사용한 코드를 적었더니 오픈 API에서 가져온 데이터가 반복되지 않고 한개만 불러와졌다.

const item = document.getElementsByClassName("movieCard")[0]
const title = document.getElementsByClassName("card-title")[0]
const text = document.getElementsByClassName("card-text")[0]
const poster = document.getElementsByClassName("moviePoster")[0]

이렇게 될 경우 HTML에 불러올 자료만큼 복사 붙여넣기를 해야한다는 치명적인 문제...

수정한 코드

const item = document.createElement('div');
const title = document.createElement('h2');
const text = document.createElement('p');
const poster = document.createElement('img');

그런데 여기서 발생한 문제!

여러개의 데이터를 불러오는 것은 성공했지만 처음 내가 부여했던 클래스명으로 설정해둔 css가 전혀 적용되지 않았다.

팀원분께 도움을 요청해서 해결한 결과

const item = document.createElement('div');
item.classList.add("movieCard")
const title = document.createElement('h2');
title.classList.add("card-title")
const text = document.createElement('p');
text.classList.add("card-text")
const poster = document.createElement('img');
poster.classList.add("moviePoster")

📌 여기서 배우게된 방법

• element 만든거나 가져온거에 class 넣기위한 2가지 방법

const div = document.createElement('div');
// 클래스 1개 먹일 때
div.classList.add('font-big');
div.className = "font-big"
// 클래스 여러 개 먹일 때
div.classList.add('font-big');
div.classList.add('color-red');
div.className = "font-big color-red";