23.05.11 내일배움캠프 A03조 미니프로젝트 03

이어서 영화 소개 페이지를 만들었다.

 

오늘의 목표는 영화 포스터 하나마다 태그를 달아 같은 태그들끼리 나타나는 것을 구현하고 싶었다...

 

싶었다..

 

근데 곰곰히 생각해보니 이런 기능이 나오려면 우선 검색기능을 배워야 할 것같았다.

그래서 검색을 배워보았는데..

 

다양한 문제들과 그 문제 해결을 적어보고자 한다.

 

1.

첫번째로 갑자기 포스터들이 대빵만하게 창 전체를 차지하고 들어와서 난감했다.

html div를 잘 나누어봤더니 다시 원래크기로 돌아왔다.

비슷한 문제를 과거의 다른 사람도 겪었나보다.

 

https://spartacodingclub.kr/community/fastqna/all/634f9965b9e1b40ed5c932b0/%5Bjquery%5D.append()%EB%A5%BC%20%EC%9D%B4%EC%9A%A9%ED%95%98%EC%97%AC%20temp_html%EC%9D%84%20html%ED%99%94%20%ED%95%98%EC%97%AC%20%EC%B9%B4%EB%93%9C%20%EB%B6%99%EC%97%AC%EB%84%A3%EA%B8%B0%20%EC%8B%9C%20%EC%B9%B4%EB%93%9C%EA%B0%80%20%ED%95%9C%EC%9E%A5%EC%94%A9%20%ED%81%AC%EA%B2%8C%20%EB%B6%99%EC%8A%B5%EB%8B%88%EB%8B%A4.

 

이 무지막지한 링크를 참고해보자.

 

2. 갑자기 팝업창이?? 

 

포스터들 뒤에 넘어갔다. z-index를 사용하는 것 까지 알아내었는데

<style> 파트에 들어있는 것은 팀원이 알려주어 수정하였다. 완료!

 

3.  지옥같은 검색기능 구현

 

DB에 들어있는 내용들을 바탕으로 어떻게 정보들을 검색하고 나타나게 할 수 있는지

짱구를 굴리며 구글링을 해보았다.

 

JS에 indexof라는 기능이 있었는데, 입력된 정보와 같으면 '표시'를 하고

아니면 '숨김'을 하는 기능이었다.

 

 function filter() {
        let search = document.getElementById("search").value.toLowerCase();
        let listInner = document.getElementsByClassName("myposters");

        for (let i = 0; i < listInner.length; i++) {
            title = listInner[i].getElementsByClassName("card-title");
            tag = listInner[i].getElementsByClassName("mycomment");

            if (title[0].innerHTML.toLowerCase().indexOf(search) != -1 ||
                tag[0].innerHTML.toLowerCase().indexOf(search) != -1
            ) {
                listInner[i].style.display = "block"
            } else {
                listInner[i].style.display = "none"
            }
        }
    }

완벽히 이해는 가지 않았지만

예문을 조금씩 바꾸어가며 코드를 대략적으로 이해할 수 있었다.

ElemetsByClassName이라든지,

!=가 -1이면 display를 하고 아니면 숨긴다든지 하는 과정들을 익히게 된 것 같다.

나중에 써먹을 일이 있을듯 하니 잘 기억해두자.

 

블로그나 웹에서 찾은 예문을 우선 따와서 라이브서버에다 박아보자.

그리고 조금씩 바꾸어보자. 그것이 참 도움이 되었다.

 

style.display 부분에서도 무척이나 헤맸었는데, block으로 잡아주니 원래의 형태를 잘 유지해주었다.

 

그리고 div를 잘 나누어 사진까지 다 한번에 나타나고 사라지게 만들었다. 힘들었다... 이 간단한 것을 찾느라..

 

<div class="card-body">
	<img src="${image}"
	class="card-img-top">
	<h5 class="card-title">${title}</h5>
	<p>${star_repeat}</p>
	<p> class="mycomment">${comment}</p>
	</div>

저 img src가 다른 class에 있으면 이미지는 그대로 남아있다!

 

조금 더 자세히 쓰고싶지만, 시간이 부족하다고 한다 (내가)

 

팀원들도 착착 무언가를 해내고 있다. 아주 작은 프로젝트가 곧 마무리될 것이다.

 

내일도 파이팅!! 내일은 정말 호스팅을 해보자!!