전체 글13 [Javascript] repaint & reflow Reflow란?생성된 DOM 노드의 레이아웃 변경 시 영향을 받는 모든 노드 (부모, 자식)의 수치를 다시 계산하여 레이아웃 트리 (렌더 트리)를 재생성하는 작업- 렌더링 과정에서 레이아웃 단계를 다시 거치는 과정- Reflow를 발생하게하는 속성: width, height, padding, margin, float, position 등 레이아웃에 영향을 주는 모든 속성 Repaint 란?Reflow 과정이 끝나고 재생성된 레이아웃 트리 (렌더 트리)를 다시 레이어에 그리는 작업- 렌더링 과정에서 페인트 단계를 다시 거치는 과정- Repaint를 발생하게 하는 속성: color, border-radius, background, box-shadow 등 시각적으로 보여지는 모든 속성 왜 Reflow와 Rep.. 2025. 1. 29. 브라우저 렌더링, 렌더링 엔진이 하는 일 웹 브라우저의 기본적인 구조- 사용자 인터페이스: 브라우저에서 주소창, 뒤로가기 버튼 등 브라우저에서 제공하는 사용자 인터페이스- 브라우저 엔진: 렌더링 엔진과 사용자 인터페이스를 중개하는 역할- 렌더링 엔진: 웹 페이지 (html, css, js)를 사용자에게 렌더링해서 보여주는 역할- 통신: 다운로드/업로드- UI 백엔드: 브라우저마다 체크버튼 등이 다름. OS에 의존하는 UI 형태- 자료 저장소: 쿠키같이 지속적으로 저장되는 자료의 저장소렌더링 엔진이 하는 일1. 파싱: HTML을 파싱하여 트리 구조의 DOM으로 변환 - 오타 혹은 잘못된 문법을 사용했을 경우 예외 처리 - , 와 같은 태그를 만나면 리소스를 다운로드 - ssss2. 스타일 계산: CSS를 파싱하여 CCSOM으.. 2025. 1. 22. Javascript: this <call, apply, bind> thisthis: 함수를 호출하는 객체this가 존재하는 이유?this를 이용하면 함수를 다른 객체에서도 재사용 할 수 있다.var myDinner = { name: "김치찌개", menu: function(){ console.log("오늘 저녁은 " + myDinner.name); }}myDinner.menu();위와 같은 객체가 있을 때 menu 함수는 myDinner 변수 이름이 수정될 경우나, menu 함수 자체를 다른 객체에서 사용하고 싶을 경우 사용이 불편하다. - 함수 재사용이 불편함ex1) 변수 myDinner의 이름이 yourDinner로 바꾸면 console.log 안의 myDinner도 이름을 변경해야 함.ex2) menu 함수만 사용하고 싶을 때, myD.. 2025. 1. 8. Javascript 타입 (원시타입, 참조타입, 원시래퍼타입) 원시타입 원시 타입은 있는 그대로 저장되는 데이터를 표현한다. 종류: 불리언, 숫자, 문자열, null, undefined typeof를 통해 원시값의 타입을 알 수 있다. 주의할 점으로 null 일 경우 object로 표시된다. (object는 참조타입인데, 이것은 js재단에서 실수라고 인정했다.) var str = "abc"; console.log(typeof str); // string var tmp = null console.log(typeof tmp); // object (주의!) 참조타입 참조 타입은 변수에 값을 직접 저장하지 않고 변수에 저장되는 것은 메모리 안에서 객체의 위치를 가리키는 포인터이다. 무엇이 저장되느냐가 원시타입과 참조타입의 큰 차이점이다. 종류: 객체 {}, 배열 [], 함.. 2023. 2. 7. 이전 1 2 3 4 다음