[TIL] 230531

이세령·2023년 5월 31일
0

TIL

목록 보기
16/118

배운 점

입력란에 자동으로 커서가 위치하게 하는 법

<input
          type="text"
          id="search-input"
          placeholder="검색할 영화 제목을 입력해주세요."
          autofocus
        />

autofocus를 추가하면 된다.

js부분에서 focus()를 사용해보려고 했지만, 스크립트 실행 순서 때문인지 작동이 안되었다.

속성 가져오는 법

getAttribute("속성")

innerText vs textContent vs innerHTML

예제: https://developer.mozilla.org/ko/docs/Web/API/HTMLElement/innerText

  • innerText
    사람이 읽을 수 있는 text
  • textContent
    모든 text 요소를 가져온다.
  • innerHTML
    HTML을 반환한다.

대소문자 구분없이 비교하는 법

소문자나 대문자로 통일해서 비교한다.
toUpperCase() 나 toLowercase() 를 사용한다.

엔터나 버튼이 동시 적용되도록 만들기

처음에 || 연산자를 사용해서 둘 중 하나가 들어오면 수행하게 만들까 했는데, form태그 내에서는 submit을 실행하면 둘 다 입력이 된다.
주의할 점은, preventDefault()를 콜백해서 기본동작인 리로드를 방지해주어야 한다.

검색 동작

생각해본 아이디어
1. forEach문으로 모든 타이틀을 비교해본다.
2. filter나 find로 찾아본다.

const findTitle = function(movies) {
  
  // input값 가져와서 title과 비교하기 
  let search = document.getElementById("search-input").value;
  console.log(typeof search, search);
  // 버튼 클릭이나 엔터 키 입력되었을 때 실행 
  const filtermovie = movies.filter(movie => movie.original_title.toUpperCase() === search.toUpperCase())

  console.log(filtermovie);
}

=> filtermovie에 아무것도 안담긴다.
로그를 찍어서 search가 string이면서 값이 잘 담기는 것을 확인했고, movie.original_title이 잘 찍히는 것도 확인했는데 filtermovie에 아무것도 안담겼다.

movie.original_title.toLowerCase().includes(search)

=> 요소를 참고하는 includes()를 사용해 봤는데도 filtermovie에는 아무것도 안담겼다.

find로 변경해봐도 undefined가 나왔다.

검색 했을 때 오타가 있던 것이였다. 역시 오타가 제일 문제..

filter 사용 시

변수.filter(매개변수 => 리턴할 값)
변수.filter(매개변수 => {return 리턴할 값})

toUpperCase() 등 메소드가 자동완성이 안되는 이유

json() 데이터를 불러왔을 경우에는 string인지, 어떤 타입인지 모르기 때문에 자동완성이 안된다.

부족한 점

  1. JS에서의 동작과정
  2. map, filter 의 사용방법이나 함수 선언 시 화살표 함수 사용하는 법
profile
https://github.com/Hediar?tab=repositories

0개의 댓글

Powered by GraphCDN, the GraphQL CDN