개발자R의 삶

Click! 이러한 html 요소들이 있다고 해보자. 보라색 부분을 클릭하면? 노란색 부분을 클릭하면? 버튼을 클릭하면? 어떻게 될까? 보라색 부분을 클릭하면 당연히 hello! 라고 알림창이 뜬다. 노란색 부분을 클릭하면 hi!가 뜨고, 이어서 hello! 가 뜬다. 분명 노란색 div에는 alert('hi!')밖에 없는데 왜 그 부모의 이벤트까지 실행되는걸까? 그게 바로 버블링이다. 이벤트가 발생한 요소부터 루트 요소에 갈 때까지 차례대로 이벤트가 실행된다. 버블링이 있기 때문에 이벤트를 발생시킨 최초의 요소와 이벤트리스너가 있는 원래 요소가 다를 때가 생긴다. 그래서 이벤트의 타겟을 가져올 때 구분해야 하는 점이 있는데.... currentTarget과 target 이다. .addEventListe..

Promise란? 비동기 작업의 최종 성곡 혹은 최종 실패를 나타내는 객체 왜 사용하는가? 비동기 메소드를 동기 메소드처럼 처리할 수 있기 때문 예를 들어 피자를 만드는 프로그램을 개발한다고 가정해보자. /** * 피자만들기 시작! * 3초 후에 피자 도우를 깔고, * 3초 후에 소스를 바르고, * 4초 후에 토핑을 올리고, * 2초 후에 치즈를 올리고, * 4초 후에 오븐에 넣고 * 1분 후에 꺼낸다. */ 이런 프로그램을 만드는데에는 두 가지 방법이 있을 것이다. 1. 콜백을 사용 2. 프로미스를 사용 콜백을 사용했을 때 setTimeout(() =>{ console.log("도우를 깔았습니다.") setTimeout(() => { console.log("소스를 발랐습니다.") setTimeout((..

우선 비동기를 설명하기 전 콜백함수를 먼저 알아야 한다. 콜백함수(Callback)란? * 다른 함수의 인자로 사용되는 함수 * 이벤트에 의해 호출되는 함수 콜백함수의 예 // 다른 함수( setTimeout() )의 인자로 사용되고 있음 setTimeout(() => { console.log("Hello world!") }, 500) function printHello() { console.log("Hello world!") } setTimeout(printHello, 500) //이벤트에 의해 호출되고 있음 CLICK! let objBtn = document.getElementById("my-btn") objBtn.addEventListener("click", () => { console.log("H..

브라우저를 구성하고 있는 요소 렌더링 엔진의 동작 원리 파싱 - HTML 파싱 HTML 파서의 특징 1. 오류에 너그럽다. HTML Tag가 정확하게 쓰여있지 않더라도 브라우저가 자체적으로 수정하여 에러를 제거한다. 2. 파싱 과정이 중단될 수 있다. 외부 태그 (, 등) 를 만나면 파싱을 중단하고 외부 소스를 모두 다운로드하고 해석한 후 다시 시작한다. 3. 파싱이 재 시작된다. 파싱이 중단되면 처음부터 다시 파싱 과정을 거친다. 따라서 파싱을 반복적으로 재시작할 경우 파싱 시간이 오래걸릴 수 있다. 파싱 - CSS 파싱 렌더트리 구축 랜더트리란 DOM 트리와 CSS DOM트리를 조합하여 화면에 어떤 요소들이 나타나야하고, 숨겨져야 하는지를 반영한 트리다. 레이아웃 레이아웃은 노드들의 크기, 위치, 레..