이벤트를 바인딩한 DOM 요소가 삭제되는 경우, 바인딩 된 이벤트는 어떻게 되는지에 대해 알아보도록 하자. 우선, 이 글은 정확한 정보 전달을 위한 글이 아님을 밝힌다. 정보보다는 초짜 개발자가 어떻게 궁금증을 해소하기 위해 고군분투 했는지에 대해 쓴 글이므로 넓은 마음과 아량으로 글을 읽어주면 좋을 것 같다 😂 이 글은 Garbage Collection에 대한 기본적인 내용을 알고 있어야 이해하기 수월하므로 만약 Garbage Collection에 대한 이해가 부족하다면 아래의 글을 읽어보길 추천한다 👍👍👍 자바스크립트의 메모리관리 - JavaScript | MDN 자바스크립트의 메모리관리 C 언어같은 저수준 언어에서는 메모리 관리를 위해 malloc() 과 free()를 사용한다. 반면, 자바스크립트..
1. Custom Confirm 기본 내장 메서드인 window.confirm의 디자인이 투박하여 페어 썬과 커스텀 컨펌창을 만들었다. 최초에 만들었던 커스텀 컨펌은 콜백함수를 사용하여 코드가 비동기적으로 돌아가도록 처리하였다. 하지만 콜백함수를 넘기다 보니 커스텀 컨펌을 호출하는 함수의 코드가 지저분해졌다. 이를 해결하기 위해 크리스의 리뷰를 반영하여 커스텀 컨펌을 프로미스로 바꾸었다. 프로미스를 바꾸면 콜백함수를 넘기지 않아도 커스텀 컨펌 로직을 비동기적으로 실행할 수 있다는 장점이 있다. 단 커스텀 컨펌을 호출하는 함수에서는 async/await 키워드를 사용해야 한다. 커스텀 컨펌을 호출하는 함수 내부에서는 코드가 동기적으로 실행되야하기 때문이다. 콜백을 넘기는 방식에서 프로미스로 커스텀 컨펌을 ..
1. Custom DOM Library DOM API를 통해 요소 노드를 불러오는 것은 꽤나 번거로운 일이다. 이를 해결하기 위해 Lv.1-1 자동차 경주 미션에서 jQuery 스타일로 코드를 작성하는 방법을 익혔다. 그리고 강의 시간에 준이 이보다 더 개선된 형태의 custom DOM library를 만들어봐도 좋을 것 같다는 이야기를 해주었다. 페어였던 카일이 주도하여 custom DOM library를 만들었고 그 코드는 다음과 같다. export const $ = (() => { const constructor = function (selector) { if (!selector) { return; } this.targets = document.querySelectorAll(selector); th..
안녕하세요 :) 이번에는 querySelectorAll나 getElementsByClassName과 같이 여러 개의 요소 노드 객체를 반환할 때 사용되는 객체인 HTMLCollection과 NodeList의 차이에 대해 알아보도록 하겠습니다. 먼저, HTMLCollection과 NodeList는 모두 유사 배열 객체이면서 이터러블입니다. 따라서 둘 다 length 프로퍼티를 가지므로 객체를 배열처럼 접근할 수 있고 반복문을 돌 수 있습니다. 그러나 유사 배열 객체이기 때문에 자바스크립트에서 제공하는 배열 객체의 메소드는 사용할 수 없습니다. (ex. map, forEach, reduce 등등) 다음으로는 HTMLCollection과 NodeList에 대해 하나씩 살펴보도록 하겠습니다. HTMLCollec..
- Total
- Today
- Yesterday
- 리액트 리덕스
- 프론트엔드
- 리액트 props
- 리액트 jsx
- 리액트 리스트 key
- props를 변경하지 못하는 이유
- 인사이트
- Browser Router
- 백준
- 우아한테크코스
- 브라우저 라우터
- 리액트 동작원리
- Python
- 다라쓰
- props를 변경하지 않는 이유
- 리액트 리스트 키
- contentEditable focus
- Redux Thunk
- 리덕스 썽크
- 리액트 키
- 프론트
- 우테코
- mkcert
- React key
- localhost https
- 파이썬
- 해쉬 라우터
- 댓글 모듈
- 1463
- Hash Router
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | |
7 | 8 | 9 | 10 | 11 | 12 | 13 |
14 | 15 | 16 | 17 | 18 | 19 | 20 |
21 | 22 | 23 | 24 | 25 | 26 | 27 |
28 | 29 | 30 | 31 |