검색 기능
아직 CSS 입히기 전인 검색 기능만 완성된 화면이야.
필수 사항은 다 있고 선택 사항으로 검색어 입력 시에 대,소문자 상관없이 검색 가능하도록 할거야.
추가로 검색어치고 엔터치면 검색기능이 작동해.
트러블슈팅
setAtrribute()와 classList.add()
문제- 동적으로 요소를 생성하고 거기에 동적으로 클래스 속성과 속성명을 붙여주려고 classList속성의 add()메서드를 사용했는데 값이 undefind가 떴어.
원인 - classList를 언급해 주지 않았고, 기존에 클래스 속성과 속성명이 없는 상태에서 사용하려고 했어.
먼저 원본 HTML
-HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style></style>
</head>
<body>
<h1>최고 평점 영화 콜렉션</h1>
<h2>영화 검색 :</h2>
<input type="text" id="input" placeholder="영화 제목을 검색해 보세요" />
<button id="searchBtn" type="button">검색</button>
<div id="cards-container"></div>
</body>
</html>
-javascript
1-js
// 2-2. 화면에 보이기
movies.forEach((mainCards, i) => {
const $mainCardsDiv = document.createElement("div");
// 2-3. 생성한 div에 클래스 붙여주기
$mainCardsDiv.setAttribute("class", "card-content");
$mainCardsDiv.innerHTML = `
<div>id : ${mainCards.id}</div>
<img src="https://image.tmdb.org/t/p/w500${mainCards.poster_path}" alt="${mainCards.title}">
<h3>제목 : ${mainCards.title}</h3>
<p>내용 요약 : ${mainCards.overview}</p>
<p class="Rating">Rating : ${mainCards.vote_average}</p>
`;
return $cards.append($mainCardsDiv);
});
// 클래스 속성과 속성명 생성 방법으로 이 2가지를 고려했어
// 결국 사용한 건 1번째 방법이야
2-js
1. $mainCardsDiv.setAttribute("class", "card-content");
//시도 - classList.add를 이용한 클래스명 생성
2. const $newCards = $mainCardsDiv.classList.add("card-content");
1번째 방법인 setAttribute메서드는 원래 기본 요소에 아예 없는 클래스 속성과 속성명을 '생성'하는 데에 쓰고
2번째 방법은 기존에 classList라고 class들이 원래 있는 요소에 class 명을 지정/추가할 때 써.
예를 들어, HTML 기존 요소에 <div class="dooly" ></div>라고 이미 클래스 속성과 속성명이 있어.
css할 때 편하려고 클래스명을 동적으로 생성해주고자 해 그래서 classList.add("ddochi")라고 생성해주면 기존에 있던 class속성에 속성명 ddochi가 추가되서 <div class="dooly ddochi"> 이렇게 한 요소에 클래스가 하나 더 추가하는거야.
dooly는 js에서 쓰면 ddochi는 css클래스로 쓸 수 있겠지.
나같은 경우는 1-js에서 document.createElement(" ")를 이용해서 없는 걸 생성해서 아예 클래스도 없는 기본 요소인 것에서 클래스를 붙이는 것이기 때문에 setAttribute를 써야했는데 classList를 이용해서 기존에 클래스속성이 원래 없는 데도 클래스 속성을 붙이려고하니까 안 붙었던 거야. 게다가 classList도 언급해주지 않아 휴먼에러도 있었지.
대신, 가능하게 사용한다면 위 코드에서
const $mainCardsDiv = document.createElement("div");
// 2-3. 생성한 div에 클래스 붙여주기
$mainCardsDiv.setAttribute("class", "card-content");<=이렇게 기존에 생성됐으니
const $newCards = $mainCardsDiv.classList.add("ddochi"); <=이렇게 추가가 가능해
이런 경우 기존에 클래스명 card-content가 이미 만들어진 셈이니 .add()로 두번째 클래스인 ddochi를 추가할 수 있어.
순수 자바스크립트
-검색 기능을 만들면서 내가 사용한 메소드들이야
document.querySelector("#searchBtn")
document.createElement("div");
element.innerHTML = `<div> </div>`
element.innerHTML = "";
element.append($mainCardsDiv)
=> append와 appendChild와 appendChildren이 있었는데
기능적으로 편하기도 하고 ie까지만 못 썼지 이젠 모든 브라우저에서
사용 가능한 append을 쓰기로 정했어.
document.addEventListener("click", () => { });
//동적으로 새로운 요소 생성하고 새로 생성한 요소에 처음으로 클래스 속성과 속성명 붙여주기
document.createElement("div");
element.setAttribute("class", "card-content");
느낀 점
- HTML, CSS, JQuery 자주 쓰다가 이렇게 순수 자바스크립트로 짜니까 색다르고 정말 재밌게 짠 거 같아.
- 나중에 class함수와 클로저도 써서 수정해 보려고. 효율적인 코드와 가독성있는 코드를 만들고싶어.
*참고 사이트 :
- https://ko.javascript.info/styles-and-classes
'TIL' 카테고리의 다른 글
| [TIL] 24_0104 선택요구사항까지 마치고, (0) | 2024.01.04 |
|---|---|
| [TIL] 24_0103 alert기능 js파일로 따로 만들어서 재사용하기+ import 시행착오 (2) | 2024.01.03 |
| [TIL] 23_1229 js 문법과 검색 기능에 필요한 함수들 (0) | 2023.12.29 |
| [TIL] 23_1228 코드 리뷰, 코드 리팩토링 (0) | 2023.12.28 |
| [TIL] 23_1227 미니 프로젝트를 마치며 (0) | 2023.12.27 |