TIL 14일차 (20240111)

🍩오늘 할 일

• api 정보 가져온 영화 카드 만들기
• 검색창 구현 (대소문자 구별없이, 엔터키도 버튼과 동일 반응 나타내기)
• 메인 페이지 css

🚩 영화 카드 만들기

영화진흥원 open api의 경우 필요한 정보가 들어있는 배열(weeklyBoxOfficeList)가 boxOfficeResult 안에 들어있었다. 그래서 그 안에 접근하기 위해서는 각 배열의 이름을 각각 '[]' 안에 넣어야했는데, 나는 한 개의 [] 안에 넣다보니 movieList가 제대로 만들어지지 않았다. 이 부분을 까먹지 말아야겠다.

그리고 항상 실수 하는 부분이지만 문자열에 ""을 붙이지 않아서 에러가 종종 난다. 오늘도 또 났다. 기초적인 부분이지만 항상 실수가 나므로 유념해두어야겠다.

🚩 영화 검색 기능 구현

2차 피드백 중 두 가지를 이때 해결했다.
하나는 검색창을 빈칸으로 두었을 때 reload없이 아래의 검색 기능 함수들을 else에 할당하는 점
다른 하나는 for문 안에 filter와 또 for문을 돌려서 순회를 과도하게 하는 점

첫 문제는 else에 아래에 있던 코드를 집어넣어 수행했다.

if(movieNameInput===""){
  alert("내용을 입력하지 않았습니다.");
}else{
  const cardNameArr = [];
  for (let i = 0; i < cardArr.length; i++) {
    cardNameArr[i] = cardArr[i].getElementsByTagName('h2')[0].innerText;
    cardNameArr[i].indexOf(movieNameInput)>-1? cardArr[i].style = 'display:inline-block': cardArr[i].style = 'display:none';
       } ...

두번째는 for문을 하나로 만들고, 한글이기에 filter을 제외하였다. 위의 else에 들어있는 함수가 그것! filter을 제외하고 삼항연산자를 넣었다. 확실히 if보다 코드가 짧아졌다.
사실 개인 과제때는 급하게 하느라 코드들을 잘 보지 못했는데, 이번에 복습하면서 많은 것을 배웠다. 특히 indexOf에 대해서 알게 되었는데, 있으면 인덱스를, 없으면 -1을 도출한다는 점을 배웠고, 삼항연산자와 함께 활용할 수 있어서 뿌듯했다.

그나저나 다른 문법 조건들은 어떻게 활용할 수 있을지 조금 걱정이 된다.