FE 개발을 위한 JS 스터디 - 3주차
프로그래머스에서 'roto'님이 진행하는 '[스터디/9기] 프론트엔드 개발을 위한 자바스크립트(feat. VanillaJS)'를 수강하며 배운 내용을 정리한 글입니다. 3주 차 미션 API를 이용하여 움짤 검색기 만들기 async ~ await 사용하기 검색창에 debounce 적용 검색 히스토리(중복 X, 히스토리를 선택하여 검색) 구현 하기 1. 움짤 검색기 만들기 처음엔 아래와 같은 boilerplate가 주어진다. 간결하지만 검색을 할 수 있는, 실제 작동하는 코드이다. 함수 내 모든 코드가 연결되어 있는데, 한 뭉치지만 하는 일이 많다. ;(function() { document .querySelector('#search-keyword') .addEventListener('keyup', func..
FE 개발을 위한 JS 스터디 - 2주차
프로그래머스에서 'roto'님이 진행하는 '[스터디/9기] 프론트엔드 개발을 위한 자바스크립트(feat. VanillaJS)'를 수강하며 배운 내용을 정리한 글입니다. 2주차 미션 미션 내용 할 일 추가, 삭제, 완료 기능 추가 InputTodo 컴포넌트화 TodoCount 컴포넌트 추가 Event Delegate 커스텀 이벤트 localStorage에 할 일 저장 구현 결과 미션 진행하며 배운 것 할 일 삭제 시 삭제할 할 일이 todoData 중 어떤 것이지 알기 위해 데이터 속성을 이용했다. this.createTodoHTMLString = ({ text, isCompleted }, index) => { return ` ... Todo 삭제 ` } this.deleteTodoEvent = $targ..