코딩쌀롱

📌 addEventListener의 콜백함수 ✱문제 발생 // class TodoView 안에 있는 메서드 initEvent(todoViewObj) { // 콜백함수가 기명함수일 때 this.addButton.addEventListener("click", this.addList.bind(this)); // 콜백함수가 익명함수일 때 this.listWrapper.addEventListener("click", function({target}) { if(target.nodeName === 'LABEL') { todoViewObj.makeLineThrough(target); } if(target.nodeName === 'I') { todoViewObj.removeListItem(ta..

✏️Event Delegation 캡처링과 버블링을 활용하면 이벤트 핸들링 패턴인 이벤트 위임(event delegation)을 구현할 수 있다. 이벤트 위임은 유사한 여러 요소에 동일한 핸들러를 적용할 때 주로 사용한다. 이벤트 위임을 사용하면 요소마다 핸들러를 할당하지 않고, 요소의 공통 조상에 이벤트 핸들러를 단 하나만 할당해도 여러 요소를 한꺼번에 다룰 수 있다. 컨테이너에 하나의 핸들러를 할당 핸들러의 event.target을 사용해 이벤트가 발생한 요소가 어디인지 알아냄. 원하는 요소에서 이벤트가 발생했다고 확인되면 이벤트를 핸들링. ✱장점 많은 핸들러를 할당하지 않아도 되기 때문에 초기화가 단순해지고 메모리가 절약된다. 요소를 추가하거나 제거할 때 해당 요소에 할당된 핸들러를 추가하거나 제거..

✏️Event Bubbling, Capturing, target 중첩된 요소에서 이벤트가 발생할 때, HTML DOM API의 이벤트 전파(Event Propagation)는 두 가지 방식으로 구분된다. 이 두 가지 방식이 Bubbling, Capturing이다. Bubbling: 이벤트가 발생한 요소부터 window까지 이벤트 전파 (하위 → 상위) Capturing: window로부터 이벤트가 발생한 요소까지 이벤트 전파 (상위 → 하위) 📌 Bubbling 가장 안 쪽의 를 클릭하면 onclick 핸들러 동작 onclick 핸들러 동작 onclick 핸들러 동작 document 객체를 만날 때까지, 각 요소에 할당된 onclick 핸들러 동작 이런 흐름을 이벤트 버블링이라고 부른다. 이벤트가 제일 ..

📌 bind() 문제 발생 let view = new View(); view.addButton.addEventListener("click", view.addList); 클래스의 view.addList 함수 본체에 this는 view 객체를 가리키는데, addEventListener에서 this는 이벤트 target이 되는 element 객체를 가리킨다. 이런 차이로 정상적으로 동작하지 않는 문제가 발생했다. 해결 방법 let view = new View(); view.addButton.addEventListener("click", view.addList.bind(view)); bind()메서드로 this가 가리키는 객체를 직접 지정해줘서 해결했다. 📌 Event Delegation 문제 발생 // cla..

📌 String to Number ( typeof NaN === 'number' → true의 문제 ) // 숫자, [, ] → 이것들만 골라내기 위해 만든 함수 // (boolean값 반환 - 다른 함수에서 filter로 걸러서 배열 만듦) braceNumFilter(item) { return item === '[' || item === ']' || (typeof parseInt(item) === 'number' && isFinite(parseInt(item)) ); } 배열 안에 string 자료형인 숫자 거르기! 1. typeof item === 'number' 처음에 자료형이 string인 거 생각 못하고 이렇게 함. 2. typeof (item * 1) === 'number' typeof Num..

📌 Parsing 언어학에서 파싱(parsing)은 '구문 분석'이라고 부른다. 문장을 구성 성분으로 분해하고 그들 사이의 위계 관계를 분석해 문장 구조를 결정하는 것. CS에서는 일련의 문자열을 의미있는 토큰 단위로 분해하고 이를 parse tree로 변환하는 과정을 말한다. 파서(Parser)는 이러한 파싱을 수행하는 프로그램. 세부적으로 나눈다면, tokenizer lexer parser tokenizer는 input을 알맞은 토큰 단위로 나눠주고, lexer는 나눠진 토큰들을 분석해 문맥적 의미를 부여한다. parser는 분석된 token들을 문법적으로 검사하고, parse tree로 만들어준다. 📌 구조 분해 할당 구조 분해 할당(destructuring). 비구조화라고도 함. 배열이나 객체의 ..

객체: 키가 있는 컬렉션을 저장 배열: 순서가 있는 컬렉션을 저장 ➔ 두 자료구조만으로 부족해서 Map과 Set이 등장. ✏️Map Map은 key가 있는 데이터를 저장한다는 점에서 객체와 유사. 하지만 Map은 key에 다양한 자료형을 허용한다는 점에서 다름. 맵은 키로 객체도 허용한다! (NaN도 허용) let john = {name: "John"}; let visitsCountMap = new Map(); // 고객의 방문 횟수를 세본다고 가정 visitsCountMap.set(john, 123); // john 객체를 맵의 키로 사용 alert(visitsCountMap.get(john)); // 123 📌 Map 메서드, 프로퍼티 new Map() 새로운 맵을 만듦 map.set(key, val..

✏️Hashmap 특정값 → 해시함수 → 인덱스에 저장 해시 테이블은 어떤 특정 값을 받으면 그 값을 해시 함수에 통과시켜 나온 index에 저장하는 자료구조이다. 시간 복잡도가 O(1)이다. 직접 주소 테이블은 값에 접근하기는 편하지만 공간 효율이 좋지 않다는 단점이 있다.(저장된 데이터를 제외하고 나머지 공간은 값은 없지만 메모리 할당된 상태 = 적재율이 낮다) 이 단점을 보완한 것이 해시 테이블이다. 해시 테이블은 직접 주소 테이블처럼 값을 바로 테이블의 인덱스로 사용하는 것이 아니라 해시 함수에 통과시켜서 사용한다. 해시 함수는 임의의 길이를 가지는 임의의 데이터를 고정된 길이의 데이터로 매핑하는 함수이다. 이 때 이 함수가 뱉어내는 결과물을 해시라고 한다. 📌 hash function 아래 과정..

prototype prototype은 말 그대로 객체의 원형. 함수는 객체 → 생성자도 객체 → 객체는 property를 가질 수 있고, prototype이라는 property를 가진다. (생성자 함수의 프로퍼티로 prototype을 갖는다) prototype에 저장된 속성들은 생성자를 통해서 객체가 만들어질 때 그 객체에 연결된다. function Ultra() {} Ultra.prototype.ultraProp = true; function Super() {} var t = new Ultra(); t.ultraProp = 4; Super.prototype = t; function Sub() {} Sub.prototype = new Super(); var o = new Sub(); console.log..

✏️Debugging breakpoint breakpoint(중단점)은 JavaScript의 실행이 중단되는 코드 내 지점을 의미한다. 동작이 의심되는 곳에 breakpoint를 지정해 코드 실행을 확인한다. Watch 표현식을 평가하고 결과를 보여준다. Add Expression 버튼 +를 클릭해 원하는 표현식을 입력한 후 Enter를 누르면 중단 시점의 값을 보여준다. Call stack 코드를 해당 중단점으로 안내한 경로를 역순으로 표시한다. 호출된 함수가 실행된 순서대로 쌓이고, 가장 위에 쌓인 것부터 다시 해제되고 값 을 return한다. Scope 현재 정의된 모든 변수를 출력한다. Local은 함수의 지역변수를 보여준다. Global은 함수 바깥에 정의된 전역 변수를 보여준다. 실행 추적 R..