오늘 공부

프로그래머스에서 'roto'님이 진행하는 '[스터디/9기] 프론트엔드 개발을 위한 자바스크립트(feat. VanillaJS)'를 수강하며 배운 내용을 정리한 글입니다. 3주 차 미션 API를 이용하여 움짤 검색기 만들기 async ~ await 사용하기 검색창에 debounce 적용 검색 히스토리(중복 X, 히스토리를 선택하여 검색) 구현 하기 1. 움짤 검색기 만들기 처음엔 아래와 같은 boilerplate가 주어진다. 간결하지만 검색을 할 수 있는, 실제 작동하는 코드이다. 함수 내 모든 코드가 연결되어 있는데, 한 뭉치지만 하는 일이 많다. ;(function() { document .querySelector('#search-keyword') .addEventListener('keyup', func..

프로그래머스에서 'roto'님이 진행하는 '[스터디/9기] 프론트엔드 개발을 위한 자바스크립트(feat. VanillaJS)'를 수강하며 배운 내용을 정리한 글입니다. 2주차 미션 미션 내용 할 일 추가, 삭제, 완료 기능 추가 InputTodo 컴포넌트화 TodoCount 컴포넌트 추가 Event Delegate 커스텀 이벤트 localStorage에 할 일 저장 구현 결과 미션 진행하며 배운 것 할 일 삭제 시 삭제할 할 일이 todoData 중 어떤 것이지 알기 위해 데이터 속성을 이용했다. this.createTodoHTMLString = ({ text, isCompleted }, index) => { return ` ... Todo 삭제 ` } this.deleteTodoEvent = $targ..

프로그래머스에서 'roto'님이 진행하는 '[스터디/9기] 프론트엔드 개발을 위한 자바스크립트(feat. VanillaJS)'를 수강하며 배운 내용을 정리한 글입니다. 1주차 미션 (필수) TodoList 컴포넌트 작성하기 (추가-1) error 처리하기 (추가-2) 한 페이지에서 TodoList 컴포넌트 여러개 만들어 보기 (추가-3) Todo에 isCompleted 필드 추가하고 완료된 항목에 삭선 처리하기 (추가-4) setState() 함수 만들고 상태변화 시 새로 렌더링하기 학습포인트 컴포넌트의 역할과 구조 이해하기 this 다양한 오류 발생 상황에 대한 error 처리 모든 상태 변화는 setState()에서! 첫 미션은 어렵지 않아서 온라인세션 끝나고 그 날 밤에 다 해서 올렸다. 너무 쉬운..

프로그래머스(Programmers) 예산 - 문제보기 Level3임을 감안하면 쉬운 문제였지만 몇 가지 생각할 점이 있었다. 풀이를 시작하며 low값을 가장 적은 요청금액으로, high값을 가장 높은 요청금액으로 잡고 이분탐색을 실행하였다. 이때, 아래의 1, 2번이 문제가 되었다. 각 지방에서 요청한 예산의 총 합이 정부예산보다 적을 경우 이런 경우 모든 지방이 요청한 만큼 예산을 받을 수 있다. 따라서 예산 상한선은 가장 많은 금액을 요청한 지방의 금액이 된다. 정부예산이 가장 적은 요청금액보다도 적을 경우 처음에 low값을 가장 적은 요청금액으로 잡았기 때문에 위의 경우는 탐색범위에서 벗어난다. low를 1로 변경할까 하였지만 위의 경우를 미리 체크해주고 low값은 그대로 가져가기로 하였다. 각 지..

이분탐색(Binary Search) 입력 : 정렬된 원소리스트, 찾을 값 시간복잡도 : log2 n 이분탐색 과정 정수 배열 int[] array = {2, 5, 8, 10, 15, 16, 19, 20}에서 int key = 8이 몇 번째에 위치해 있는지 찾는다고 가정하자. 가장 먼저 할 일은 탐색 범위를 정하는 것이다. 이 경우에는 주어진 정수 배열 전체를 기준으로 하므로 인덱스 0 ~ 7이 범위가 된다. 탐색 범위가 정해지면 해당 범위의 가운데에 위치한 값을 찾는다. 가운데 값은 탐색 범위의 마지막 인데스에서 첫 인덱스를 뺀 뒤 2로 나눈 수를 인덱스로 가지는 값이다. 이 경우는 (7 - 0) / 2는 3이므로 array[3]의 10이 가운데 값이 된다. key값과 가운데 값(10)을 비교한다. 1)..