본문 바로가기

전체 글

(212)
이벤트 버블링과 캡처링 캡처링과 버블링을 간단히 정의하면 다음과 같다. 캡처링 - window 로부터 이벤트가 발생한 요소까지 이벤트를 전파한다. 버블링 - 이벤트가 발생한 요소부터 window 까지 이벤트를 전파한다. 버블링 버블링과 캡처링 ko.javascript.info 버블링(bubbling)의 원리는 간단합니다. 한 요소에 이벤트가 발생하면, 이 요소에 할당된 핸들러가 동작하고, 이어서 부모 요소의 핸들러가 동작합니다. 가장 최상단의 조상 요소를 만날 때까지 이 과정이 반복되면서 요소 각각에 할당된 핸들러가 동작합니다. 3개의 요소가 FORM > DIV > P 형태로 중첩된 구조를 살펴봅시다. 요소 각각에 핸들러가 할당되어 있습니다. 사례) 테이블의 경우에 테이블 전체(event.currentTarget)에 이벤트를 ..
API, SDK, Library, Framework API API : Application Program Interface all about communication : 다른서비스끼리의 의사소통 방법 응용프로그램에서 운영체제나 프로그래밍언어가 제공하는 기능을 제어할 수 있게 만든 인터페이스 연결, 다리 /naver-map/jamsil 구현과 독립적으로 사양만 정의되어있다 API에 따라 접근권한이 필요할 수 있다 open API : 노출된 API 구성 : 요청, Library 응용 프로그램 개발을 위해 필요한 기능(함수)를 모아놓은 소프트웨어 독립성을 가진다 응용프로그램이 능동적으로 라이브러리를 사용한다 library와 API의 차이점은 구현 로직의 유무이다 SDK SDK : Software Development Kit 소스코드의 모음과 유틸리티 Tool ..
브라우저 렌더링 브라우저의 역할 코드를 읽어서 페이지 그려줌 브라우저의 공통적 구조 (7가지) 브라우저마다 다른 렌더링 엔진 렌더링 엔진의 목표 1) 모든 요소를 화면에 보여준다 2) 업데이트가 필요할 때 효율적으로 렌더링 할 수 있도록 자료구조를 생성한다 동작과정(Critical Rendering Path) 1) html태그를 파싱해서 태그들을 토큰화 2) 브라우저의 랙싱과정으로 토큰이 각 노드로, 노드간의 연관관게로 DOM Tree 생성 3) js, css 필요한 애들을 따로 요청함 4) CCSSOM 스타일규칙을 읽어서 마찬가지로 트리구조로 생성 5) DOM Tree, CSSOM Tree 를 합쳐서 Render Tree 생성 6) 레이아웃 (reflow) : 뷰포트 내에서 요소들의 정확한 크기나 위치를 계산하는 단계..