const searchEl = document.querySelector('.search')
const searchInputEl = searchEl.querySelector('input')

searchEl.addEventListener('click', function () {
  searchInputEl.focus() // 강제 포커싱
})

searchInputEl.addEventListener('focus', function() {
  searchEl.classList.add('focused') // search 요소 클래스명에 ' focused' 추가
  searchInputEl.setAttribute('placeholder', '통합검색') // 검색창에 placeholder 추가 
})

searchInputEl.addEventListener('blur', function() { // 'blur' : 포커스 해제 시
  searchEl.classList.remove('focused') // search 요소 클래스명에서 ' focused' 삭 제
  searchInputEl.setAttribute('placeholder', '') // 포커스 해제시 placeholder 삭제
})

위 코드는 js로 데이터 제어 실습을 하면서 실제로 DOM API를 통해서 html을 제어하는 코드 일부 이미지입니다. 이를 통해 Html에 좀 더 역동적인 동작을 부여할 수 있다는 것을 배웠습니다! 이런 동작들을 편리하게 제공해주는 라이브러리인 'lodash'를 6주차에 정리해보았습니다!

lodash 유용한 메소드

lodash는 default 통로로 가져오는 방법으로 { } 으로 감싸지 않고 할당받는 변수명을 자유롭게 쓸 수 있다. 통상적으로 언더바 ( _ )를 사용한다.

_ . uniq( arr ) -> arr

중복 요소를 제외한 배열을 리턴한다. (=집합)

_ . uniqBy(arr, identity) -> arr

중복을 구별할 식별자를 통해 arr의 중복을 제거한 배열을 반환한다.

_ . unionBy(...arr, indentity) -> arr

식별자를 토대로 중복을 제거하여 합친 배열을 반환한다.

_ . find(collection, identity, fromIndex=0)

콜렉션에 0번 인덱스부터 식별자 조건에 부합하는 요소를 탐색하고, 가장 먼저 탐색되는 요소를 반환한다.

_ . findIndex(collection. identity, fromindex=0)

find와 로직이 같고 반환하는 값만 요소가 아닌 해당 인덱스를 반환한다.

_ . remove(collection, indentity)

식별자 조건에 부합하는 모든 요소를 콜렉션에서 지운다.

lodash documentation