✔️오늘 한일!
- JS종합반 5주차까지 2회독 완료
- TMBD Api데이터를 이용한 영화소개 페이지 제작(1)
- Movielist repo를 만들고 3개의 브랜치로 작업 진행 후 merge
발생한 문제 -1
<body>
<header class="main-title">
<h1>NB Camp Best Movie Collection</h1>
</header>
<form class="search">
<label>Search Movie :</label>
<input type="text" id="search-input" placeholder="Enter the title">
<button id="search-btn">Search</button>
</form>
<script src="app.js"></script>
</body>function searchMovie(event) {
let text = document.querySelector('#search-input').value.trim();
let reg = new RegExp(text, "i");
let findMovies = [];
arr[0].forEach((movie) => {
if (reg.test(movie.title)) {
findMovies.push(movie)
}
})
section.innerHTML = ""
findMovies.forEach(arr => {
let temp_html = `<div class="movie-card" id="${arr.id}">
<img class="movie-image" src="https://image.tmdb.org/t/p/w500${arr.poster_path}" alt="...">
<h2>${arr.title}</h2>
<p>${arr.overview}</p>
<p>Vote average ⭐${arr.vote_average}</p>
</div>`
section.innerHTML += temp_html;
})
}
searchBtn.addEventListener('click', searchMovie);영화 검색 버튼을 만들고 클릭 시 검색한 영화가 출력되는 기능을 구현하는 중 검색버튼 클릭 시 1초뒤에 다시 초기화 되는 문제 발생
발생한 문제 -2
<body>
<header class="main-title">
<h1>NB Camp Best Movie Collection</h1>
</header>
<label>Search Movie :</label>
<input type="text" id="search-input" placeholder="Enter the title">
<button id="search-btn">Search</button>
</form>
<section class="card-list">
<script src="app.js"></script>
</body> let temp_html = `<div class="movie-card" id="${id}" >
<img class="movie-image" src="https://image.tmdb.org/t/p/w500${path}" alt="...">
<h2>${title}</h2>
<p>${overview}</p>
<p>Vote average ⭐${star}</p>
</div>`
document.querySelector('.movie-card').append(temp_html);가져온 영화데이터가 하나의 div박스에 전부 붙어버리는 문제 발생
해결방법 -1
function searchMovie(event) {
event.preventDefault();
let text = document.querySelector('#search-input').value.trim();
let reg = new RegExp(text, "i");
let findMovies = [];
arr[0].forEach((movie) => {
if (reg.test(movie.title)) {
findMovies.push(movie)
}
})
section.innerHTML = ""
findMovies.forEach(arr => {
let temp_html = `<div class="movie-card" id="${arr.id}">
<img class="movie-image" src="https://image.tmdb.org/t/p/w500${arr.poster_path}" alt="...">
<h2>${arr.title}</h2>
<p>${arr.overview}</p>
<p>Vote average ⭐${arr.vote_average}</p>
</div>`
section.innerHTML += temp_html;
})
}
searchBtn.addEventListener('click', searchMovie);Button type이 submit이 아닌데도 클릭 시 새로고침되는 문제가 계속 발생되서 혹시 몰라 event.preventDefault()를 추가하니 더이상 새로고침 되지 않고 검색한 영화가 정상 출력되는것을 확인
해결방법 -2
append 대신 .insertAdjacentHTML('beforeend',temp_html)을 사용해도 계속 하나의 div박스에 붙어버려서 위치도 바꿔보고, innerHTML으로 바꿔보기도 했는데도 똑같은 현상이 발생되어서 div박스를 하나의 section으로 묶고 querySelector로 section을 지정하니 정상 출력 확인
<body>
<header class="main-title">
<h1>NB Camp Best Movie Collection</h1>
</header>
<form class="search">
<label>Search Movie :</label>
<input type="text" id="search-input" placeholder="Enter the title">
<button id="search-btn">Search</button>
</form>
<section class="card-list">
</section>
<script src="app.js"></script>
</body> rows.forEach(list => {
let title = list.title;
let overview = list.overview;
let path = list.poster_path;
let star = list.vote_average;
let id = list.id;
let temp_html = `<div class="movie-card" id="${id}">
<img class="movie-image" src="https://image.tmdb.org/t/p/w500${path}" alt="...">
<h2>${title}</h2>
<p>${overview}</p>
<p>Vote average ⭐${star}</p>
</div>`
document.querySelector('.card-list').insertAdjacentHTML('beforeend',temp_html);
});- css는 아직 익숙하지 않아서 그런지 계속해서 충돌이 일어나서 문제가 많았다.
부모&자식 구조에 대해서 좀 더 생각해보고 작업을 시작해야 충돌 문제가 많이 발생하지 않을 것 같다. - 라이브러리를 사용하지 않고 자바스크립트로만 만드는게 처음이라 시행착오도 많았고 html뼈대 자체도 처음부터 만들다보니 웹종반 이후에 했었던 미니프로젝트보다 난이도가 있었다.
-> 아직 완성된 상태는 아니지만 제출까지 시간이 남았으니 css도 좀 더 만져보고 추가 기능을 구현할 수 있다면 필수구현 사항이외에도 추가적으로 구현할 수 있는 기능들이 있는지 생각해보고 추가해봐야겠다!
코린이