24.01.02(3주차 강의, 개인과제)

TIL

• 오늘 한 분량

javascript 3주차 강의, 및 개인과제 80%

        function searchMovie() {

            console.log("작동확인")

            const searchInput = document.getElementById('searchInput').value.toLowerCase();

            const cards = document.querySelectorAll('.card');

            const displayArray = Array.from(cards).map(card => {

                const title = card.querySelector('.movieTitle').textContent.toLowerCase();

                return { card, shouldDisplay: title.includes(searchInput) };

            });

            displayArray.forEach(movieName => {

                movieName.card.style.display = movieName.shouldDisplay ? 'flex' : 'none';

            });

            // cards.forEach(card => {

            //     const title = card.querySelector('.movieTitle').textContent.toLowerCase();

            //     card.style.display = title.includes(searchInput) ? 'flex' : 'none'; 처음 만든거, 근데 map 안썼어서 다시

            //  

        }

필요 기능 구현은 다 해놓은 상태. 혹시 모르니 재검토 할 예정.

• 느낀것

 처음엔 forEach로 구현을 했다가(주석처리한부분) 필수조건에 forEach,map,filter,find,reduce 중 두가지를 써서 구현하라는 조건이 있어서 map메서드를 써서 코드를 짜놨음. 
확실히 복습을 많이 해야 겠다 라고 느꼇습니다.. 처음 머릿속에서 짜논걸 바꿔야 한다 생각하니 막막해지는 느낌이 들었습니다. 공부량이 부족해서 이런 느낌을 받은것 같아 공부량을 좀 더 늘릴 예정입니다. 

• 해결 방법
  
  처음 forEach 로 만들때 
  
  title.includes(searchInput) ? card.style.display === 'flex' : card.style.display === 'none';
  이런식으로 코드를 짰었는데 왜 안되는지도 모르고,
  card.style.display = title.includes(searchInput) ? 'flex' : 'none';
  이런식으로 바꾸면 되길래 왜 되는지도 몰라서, 튜터님에게 조언을 구하니 
  
  처음에 저런식으로 짜면 아무런 일을 안하는 거라고 하셨음. 원래 생각은 앞 항의 조건을 확인하고 그 조건이 참이라면 display 를 flex로 거짓이라면 none 으로 바꿀려고 했는데 저런식으로 짜면 flex인지 확인만 한 느낌. 
  이런식으로 바꾸면 됐음 이러면 display 값을 flex로 반환 또는 none으로 반환하는게 됨.