todo-list 삭제 버튼에 추가한 이벤트가 제대로 적용되는지 확인하려는데 html 파일을 실행하자마자 콘솔에 빨간 불이 들어왔다.미리 버튼을 추가해두고 테스트했을 때는 발생하지 않았는데, 기존에 있던 테스트용 요소들을 모두 지우고 실행했을 때 발생하는 것으로 보아 addEventListener는 버튼이 생기기도 전에 호출되는데 해당 아이디를 가진 object가 없으니 이런 오류가 나는구나 추측이 됐다. 알아야 할 것동적으로 생성한 요소에 이벤트를 추가하기 위해 생각해야하는 것은 다음과 같다.1) addEventListener는 EventTarget 인터페이스의 메서드로, 가장 일반적으로 DOM 객체에 어떤 이벤트가 발생했을 때 어떤 동작을 수행할지 설정하는 기능을 한다.2) createElement..
프로그래머스 대충만든 자판 문제를 풀이하다가 NaN과 논리연산에 의문이 생겨 조금 더 알아보았다! 우선 프로그래머스 문제의 조건은 다음과 같다.1) 자판에 문자가 1개 이상 할당될 수 있고, 두번째에 할당되어있는 문자를 입력하려면 해당 자판을 두번 누르면 된다.2) 문자열 배열이 주어졌을 때 그 문자들을 자판으로 입력하기위해 필요한 '자판을 누르는 최소 수'를 구한다. 내가 접근한 방법1) 자판으로 입력할 수 있는 문자들을 객체의 키로 만들고, 여러 자판을 눌렀을 때 그 문자가 나오는 가장 작은 수를 구해둔다.-> 매번 가장 작은 수를 구하지 않고 저장해뒀다가 활용하기 위함2) 문자열 배열을 돌며 각 문자를 입력하기 위해 필요한 수를 객체에서 찾아 더한다. 궁금했던 부분function solution(k..
DOM (Document Object Model, 문서 객체 모델)DOM은 HTML, XML 문서에 접근하기 위한 인터페이스이다. Javascript와 같은 언어가 문서에 접근할 수 있도록 콘텐츠, 구조, 스타일 요소를 구조화시켜 제공하고, 이를 변경할 수 있도록 한다. Javascript가 DOM을 다루는 대표적인 언어이긴 하지만, 이외의 다른 프로그래밍 언어들도 DOM에 접근하고 사용할 수 있다! DOM은 웹페이지(HTML 문서)를 트리 구조로 표현한다. 즉, 웹페이지는 하나의 최상위 노드(root 노드)에서 시작하는 자식 노드들을 가진다. 노드의 타입은 총 12개이며, 주요 노드는 아래의 4가지이다. DOM 트리의 주요 노드1) document node (문서 노드): DOM 트리 구조의 최상위 ..
탐욕 알고리즘이란?말그대로 Greedy하게, 탐욕스럽게 그 때 그 때의 최적의 상황을 쫓아 문제를 해결하는 방법이다.여러 경우 중 하나를 결정해야할 때 그 순간에 최적이라고 생각되는 것을 선택해나가며 최종 해답에 도달한다. 알고리즘을 적용하기 위한 전제 조건1) 탐욕적 선택 속성 (Greedy Choice Property): 앞의 선택이 이후의 선택에 영향을 주지 않는다.2) 최적 부분 구조 (Optimal Substructure): 문제에 대한 최종 해결 방법은 부분 문제에 대한 최적 문제 해결 방법으로 구성된다. 문제 해결 절차1) 선택 절차 (Selection Procedure): 현재 상태에서의 최적의 해답을 선택한다.2) 적절성 검사 (Feasibility Check): 선택된 해가 문제의 조건..
투포인터 알고리즘이란?배열/리스트에서 두개의 인덱스(포인터)를 사용하여 특정 조건을 만족하는 구간을 효율적으로 탐색하기 위한 알고리즘일반적으로 탐색하는 배열/리스트가 정렬되어 있을 때 사용한다. 사용하는 경우1) 일반적으로 두 인덱스를 탐색범위의 시작과 끝으로 사용하여, 탐색 범위 내에서 특정 조건을 만족하는 요소를 찾거나 조건을 만족하는 부분배열을 찾는 데에 사용한다.2) 동일한 인덱스를 시작으로, 한 인덱스를 고정하고 다른 인덱스를 이동시키다가 특정 조건에서 고정한 인덱스도 이동시키며 탐색하는 방법도 사용할 수 있다. 구현 방식1) 배열의 탐색할 위치에 두 포인터를 설정한다.2) 두 포인터 혹은 그 구간을 탐색하고 조건에 일치하는지 확인한다.3) 조건을 만족시키는 경우 탐색을 종료한다.4) 조건을 ..
최종 결과 구현 목표주어진 데이터 menuItems 를 배열 메서드를 활용해 화면에 표시하기const menuItems = [ { name: '비빔밥', description: '밥 위에 나물, 고기, 고추장 등을 얹고 비벼 먹는 한국 요리' }, { name: '김치찌개', description: '김치와 돼지고기 등을 넣고 끓인 한국의 찌개 요리' }, { name: '불고기', description: '양념한 고기를 구워서 먹는 한국 요리' }, { name: '떡볶이', description: '떡과 어묵을 고추장 양념에 볶아 만든 한국의 간식' }, { name: '잡채', description: '당면과 여러 채소, 고기를 볶아 만든 한국 요리' }]; 추가한 기..