반응형 Javascript16 Virtual DOM(가상돔) Virtual DOM 1.브라우저의동작 DOM tree 생성 : 렌더 엔진이 HTML을 파싱하여 DOM 노드로 이루어진 트리생성 render tree생성 : css파일과 inline 스타일을 파싱 DOM + CCSOM 렌더 트리를생성 Layout(reflow) : 각 노드들의 스크린 에서의 좌표에 따라 위치결정 Paint (repaint) : 실제 화면에 그리기 문제는, 변화가 발생하면 렌더트리가 재 생성 된다는것 2.Virtual DOM의 등장 SPA를 사용하면서 즉각적으로 DOM tree를 변경할 일이 많이 생김, 그래서 최적화가 필요해져서 등장하게 된것이 버츄얼 돔이다. DOM 의 사본, 복사본이라고 할 수 있다. 진짜 DOM과같은 속성들 class등을 가지고 있지만 실제 DOM이 가지고 있는 ap.. 2022. 4. 7. 브라우저 렌더링 원리 브라우저 렌더링 브라우저의 동작 원리 HTML 마크업을 처리하고 DOM 트리를 빌드한다. 무엇" 그릴지 결정한다 CSS 마크업을 처리하고 CSSOM 트리를 빌드한다. 어떻게그릴지 결정한다. DOM 및 CSSOM 을 결합하여 렌더링 트리를 형성한다. 화면에 그려질 것만결정 렌더링 트리에서 레이아웃을 실행하여 각 노드의 기하학적 형태를 계산한다. Box-Model을 생성한다. 개별 노드를 화면에 페인트한다.(or 래스터화) 위는 요약적인 설명이고 좀더 구체적으로 보자면 웹 브라우저의 구조 이와같이 브라우저가 구성된다. User INterface는 주소 표시줄, 이전/다음/새로고침 버튼등이있고 웹 페이지를 제외하고 사용자와 상호작용하는 사용자 인터페이스를 말한다. Rendering Engine HTML과 CS.. 2022. 4. 7. 화살표 함수(arrow function) 함수 선언문 : 어디서든 호출가능 자바스크립트 내부 알고리즘, 실행전 초기화 단계에서 호이스팅으로 올라가진다. 함수 위치가 올라가는게 아님! 여튼 쓸 수 있다. sayHello() function sayHello(){ console.log('hello') } 함수 표현식:코드에 도달하면 생성 그 위치 이후에만 사용가능 let sayHello = function(){ console.log('hello') } sayHello() 뭐가 더 좋고 나쁨은 없다. 하지만 신경쓰고 싶지 않으면 함수 선언문을 사용하면 더 자유롭고 편하게 코딩이 가능 화살표 함수 (arrow function) - 보다 간결하게 작성한다 let add = function(num1,num2){ return num1 + num2 } let .. 2022. 4. 6. 이벤트루프(event loop) 자바스크립트는 싱글 스레드 언어이다. 그래서 다른 언어들처럼 무조건 순차적으로 코드가 실행되지않는다. 위그림의 메모리힙에는 함수나, 선언한 변수가 들어간다. 콜스택은 실제로 실행하는 코드를 실행하는 공간이다. 1.console.log('첫번쨰실행') 2.setTimeout(() => {console.log("두 번째 메시지")}, 5000); 3.console.log('세번째실행') 이런식으로 실행하게되면 1 -> 5초뒤2번, ->3 순으로 실행되는게아니라 1 -> 3 -> 5초뒤2번 이렇게 실행되게 된다. 즉 먼저 실행이 완료된 순으로 실행되는것이 자바스크립트의 특성이다. 요약하면 코드의 실행순서만 볼때, 먼저 실행되는순서로 실행이 된다. 다만 위 그림에서도 알 수있듯이 비동기적인 코드들은 전부 콜백큐.. 2022. 4. 6. 스코프, 클로져(Closure) 스코프, 클로져 스코프 변수이름,함수이름,클래스 이름과 같은 식별자가 선언된 위치에 따라 다른 코드에서 자신이 참조될 수 있을지 없는지 결정되는것을 스코프라고한다. 스코프체인 지역스코프에서, 전역 스코프로 현재 참조해야하는곳에 변수가 없으면 점점 외부함수, 전역으로 나가면서 찾아내는것을 스코프체인 이라고한다. 최종적으로 전역에도 없으면 레퍼런스 에러를 출력하다. 그리고 하위에서 상위로는 참조하지만 상위에서 하위로는 참조하지않는다. 스코프 레벨 1.블록레벨 ->if,for,함수.. 2.함수레벨 ->함수만 상위 스코프 함수가 호출되는 시점에결정 ->동적스코프 함수가 정의되는 시점에 결정 ->정적스코프(렉시컬스코프) 자바스크립트 함수는 만들어지면 내부슬롯에 상위 스코프 참조를 저장한다. 클로져 중첩함수가 외부.. 2022. 4. 6. setTimeout() 함수 쿡북 setTimeout() setTimeout(function() { console.log('5초뒤출력!'); }, 5000); 이 코드만 가지고 잘 가져다 쓰도록하자 리액트에서는 useEffect에서도 유용하고 여기저기서 잘 쓰구 있다. 비동기 방식의 자바스크립트에서는 매우 자주 쓰이는 함수다 추가로 clearTimeout()도 알아두자 var settime = setTimeout(function() { }, 5000); clearTimeout(settime); 이와같이 혹시 모를 오류나, 남아있는 시간때문에 삭제하고 중지하기 위해서 사용한다. 그리고 보너스로 일정시간마다 반복하는함수 setInterval()함수도 있다. test = setInterval(function() { alert('일정시간마다 출.. 2022. 4. 2. 이전 1 2 3 다음 반응형
