#event

Frontend › JavaScript

사용자 입력 장치가 만드는 DOM 이벤트. 클릭 한 번이 만드는 mousedown·mouseup·click 순서, button과 보조키(Ctrl·Cmd), mouseover·mouseout과 mouseenter·mouseleave의 차이와 relatedTarget, 마우스·터치·펜을 한 코드로 받는 포인터 이벤트(pointerId·pointercancel·touch-action·포인터 캡처·포인터 락), HTML 드래그 앤 드롭 API와 직접 만드는 드래그, key와 code·자동 반복·IME 조합을 다루는 키보드 이벤트를 정리한다.

• #javascript
• #dom
• #pointer
• #browser

Frontend › JavaScript

문서가 열리고 닫히는 동안 일어나는 이벤트. DOMContentLoaded가 기다리는 것과 기다리지 않는 것, load와 readyState, 떠날 때의 beforeunload·pagehide·visibilitychange와 숨은 탭의 rAF 정지·타이머 제한, 피해야 할 unload, sendBeacon·keepalive로 마지막 데이터 보내기, 스크립트·이미지의 load·error 이벤트와 crossorigin 속성으로 다른 출처 스크립트의 오류 정보 얻기를 정리한다.

• #javascript
• #browser
• #performance
• #frontend

Frontend › JavaScript

JavaScript로 폼을 다루는 DOM API. document.forms와 form.elements로 컨트롤 찾기(라디오 묶음, fieldset, form.name 단축 표기의 함정), value·checked·select의 옵션 다루기, focus·blur와 버블링하는 focusin·focusout, change·input·beforeinput·클립보드 이벤트의 차이, 폼 submit 이벤트를 듣는 이유를 정리한다. 제출 동작 자체는 폼 제출 노트에 있다.

• #javascript
• #dom
• #form
• #frontend

Frontend › JavaScript

DOM 이벤트는 캡처 → 타깃 → 버블 순서로 트리를 오간다. 핸들러를 붙이는 세 방법(HTML 속성·on 속성·addEventListener)과 handleEvent 객체, target과 currentTarget의 차이, 전파·기본 동작 제어와 stopPropagation 대신 defaultPrevented로 알리기, 부모 하나로 자식 이벤트를 받는 이벤트 위임과 data 속성 행동 패턴, once·passive·signal 옵션, Event·CustomEvent 생성과 dispatchEvent의 동기 실행, 바깥 클릭 감지 패턴을 정리한다.

• #javascript
• #dom
• #browser
• #frontend

Frontend › JavaScript

JavaScript로 DOM 요소를 선택·탐색하고(live·static 컬렉션, 표 탐색 속성), 노드의 내용(innerHTML+=의 함정, outerHTML 대입, textContent)을 다루고, 속성(property)과 어트리뷰트(attribute)의 동기화 규칙, 클래스와 인라인 스타일·계산된 스타일을 읽고 쓰고, 요소를 만들어 원하는 위치에 넣고 지우는 방법. 문자열 HTML을 넣는 법과 위험, 리플로우를 줄이는 일괄 삽입까지 다룬다.

• #javascript
• #dom
• #browser
• #frontend

Frontend › JavaScript

DOM 트리의 변화(자식 추가·삭제, 속성, 텍스트)를 지켜보다 모아서 알려 주는 MutationObserver. observe 옵션(childList·subtree·attributes·characterData·attributeFilter·oldValue), MutationRecord의 내용, 서드파티 스크립트가 넣는 DOM에 반응하기와 동적으로 들어온 콘텐츠를 한곳에서 처리하는 쓰임, takeRecords·disconnect, 마이크로태스크로 전달되는 특성과 무한 루프 주의, 폐기된 뮤테이션 이벤트를 정리한다.

• #javascript
• #dom
• #browser
• #frontend

Frontend › React

JSX 속성으로 핸들러 함수를 넘기는 React의 이벤트 처리 방식과 DOM 이벤트와의 차이.

• #react
• #frontend

Backend › Architecture

데이터가 여러 서비스·저장소에 흩어질 때 쓰는 패턴을 모았다. DB 변경을 로그에서 읽어 퍼뜨리는 CDC, 상태 대신 이벤트를 저장하는 이벤트 소싱, 읽기·쓰기 모델을 나누는 CQRS, 인덱스 테이블, 최종 일관성을 만드는 네 가지 방법(이벤트·백그라운드 동기화·사가·CQRS), 이벤트와 스키마의 호환성 규칙(Avro, 스키마 레지스트리)까지 다룬다.

• #backend
• #architecture
• #database
• #msa

Computer Science

명령을 기억해 입력하는 CLI와 가능한 동작을 화면에 보여 주는 GUI의 차이, 데스크톱 GUI의 공통 구조인 WIMP(창·아이콘·메뉴·포인터)와 데스크톱 메타포, 재사용 부품인 위젯, GUI 프로그램의 실행 모델인 이벤트 기반 프로그래밍, WYSIWYG를 정리하고, Java Swing을 예로 GUI 툴킷의 컴포넌트 트리·레이아웃 관리자·리스너(옵저버)·UI 스레드 하나만 화면을 바꾸는 EDT 규칙을 다룬다.

• #computer-science
• #ui
• #ux
• #cli
• #java