본문 바로가기
728x90

① 기본

 (17)
웹브라우저 렌더링 원리 브라우저는 어떻게 렌더링할까? 웹사이트가 어떻게 우리 눈앞에 오는지는 지지난번 포스팅에서 살펴보았습니다. 이번에는 웹브라우저가 서버에서 받은 자원을 어떻게 렌더링해서 우리에게 보여주는지 살펴보겠습니다. 브라우저의 구성 요소 User Interface : 사용자의 눈에 보이고, 사용자가 브라우저를 컨트롤 할 수 있는 인터페이스. 예를 들면, 새로고침 버튼, 주소입력창, 뒤로가기 버튼 등이 있습니다. Browser engine : 사용자 인터페이스와 렌더링엔진 사이의 동작을 컨트롤합니다. 예를 들어, 사용자가 주소창에 URL을 입력하고 엔터를 누르면, 해당 요청을 Redering engine에 전달합니다. Rendering engine : 요청받은 내용을 Networking을 이용해 server에 요청하고,..
자바스크립트와 브라우저의 관계 동적인 웹사이트를 위한 언어의 탄생 넷스케이프 브라우저는 모자이크 브라우저에 비하면 이미지가 들어가 조금 더 사용자들에게 fancy한 느낌을 주었지만, 여전히 갈증을 느낀 Marc Andereeson은 웹사이트를 더욱 동적으로 만들고자 했다. 이에 프로그래밍 언어를 브라우저에 추가하고자, Brendan Eich를 영입해 sheme script를 변형해 새로운 언어를 만들었다. 짧은 시간안에 Mocha(1994년)라는 언어를 개발하고 추후 LiveScript로 이름을 바꾼다. 넷스케이프 브라우저 안에 LiveSctipt Interpreter 엔진을 탑재해 내놓게 되고, 이로서 개발자들이 LiveScript를 배워 코드를 작성하면 넷스케이프 브라우저가 해석해 DOM을 조작하는 등의 동적 브라우저를 만들 수 ..
웹브라우저란? 웹브라우저란 웹페이지를 보여주는 창문이다. 이 한 문장으로 비개발자에게는 웹브라우저를 간단 명료하게 설명해 줄 수 있을 것 같다. 모든 웹페이지는 브라우저라는 창을 통해서만 볼 수 있고, 크롬·파이어폭스·오페라 등등 은 각기 다른 기능을 가진 창틀에 해당한다. 웹브라우저는 웹페이지를 다운 받아 렌더링해 사용자에게 보여주는 역할을 한다. 프론트엔드 개발자라면, 다양한 회사들이 만들어낸 웹브라우저가 각기 다른 기능을 가진 창틀이라는 점에 주목해야 한다. 현재는 브라우저들이 웹표준을 지키고자 하여 호환성이 많이 좋아졌지만, 왜 저마다 브라우저가 다르게 보이는 지 알고, 클라이언트를 개발해야만 서로 다른 창틀을 이용하는 사람들에게 내 제품을 완성도 있게 보여줄 수 있다. 브라우저가 작동하는 깊은 원리를 배우기에..
html 특수문자 코드 마크업 하다보면 자주 사용하는 html 특수문자 코드 HTML 마크업을 하다보면 '' 같은 특수문자 사용이 필요하다. HTML 마크업을 위해 이미 예약된 문자들(ex. 태그를 위한 ''), 키보드로 표시할 수 없는 문자(ex. ⓒ, ∞ 등)를 표현하기 위해 엔티티 코드를 사용한다. 아래는 개발자들이 자주 사용하는 엔티티 코드이다. 유니 코드 문자 이름 상징 > 보다 큰 / / 삭감 " " 인용 ' ' 아포스트로피 & & 앰퍼샌드 © © 저작권 ® ® 등록 상표 ° ° 정도 « « 왼쪽을 가리키는 이중 각도 » » 오른쪽을 가리키는 이중 각도 공백 공백 정리 모든 HTML 문자 참조 목록은 World Wide Web Consortium에서 관리한다. 자료 출처 [HTML Character ..
ES11 자주 사용하는 문법 정리 옵셔널 체이닝 연산자(Optional chaining) ?. 는 연결된 객체 체인 내에 깊숙이 위치한 속성 값을 읽을 수있다. ?. 연산자는 . 체이닝 연산자와 유사하게 작동하지만, 만약 참조가 nullish(null 또는 undefined)이라면, 에러가 발생하는 것 대신에 표현식의 리턴 값을 undefined로 단락된다. 함수 호출에서 사용될 때, 만약 주어진 함수가 존재하지 않는다면, undefined를 리턴한다. const adventurer = { name: 'Alice', cat: { name: 'Dinah' } }; const dogName = adventurer.dog?.name; console.log(dogName); // expected output: undefined console.l..
ES6 자주 사용하는 문법 정리 단축 속성명(Shorthand property names) 객체의 속성값이 변수로 할당되어 있다면, 변수 이름만 적을 수 있다. let a = "foo", b = 42, c = {} // 객체의 속성값이 변수로 할당되어 있다면, let object = {a: a, b: b, c: c}; let es6 = { a, b, c }; // 변수 이름만 적을 수 있다. console.log(object.a === es6.a); // true 중복된 속성명(Duplicate property names) ECMAScript 5 엄격 모드 코드에서, 중복된 속성명은 SyntaxError로 간주됐습니다. 런타임에 중복을 가능케 하는 속성 계산명 도입으로, ECMAScript 2015는 이 제한을 제거했습니다. var a..
ES5 자주 사용하는 문법 정리 Array.isArray() Array.isArray() 메서드는 인자가 Array인지 판별합니다. Array.isArray([1, 2, 3]); // true Array.isArray(Array.prototype); // true Array.prototype은 스스로도 배열입니다 Array.isArray({foo: 123}); // false Array.isArray('foobar'); // false Array.isArray(undefined); // false // instanceof vs isArray // Array 객체를 판별할 때, Array.isArray는 iframe을 통해서도 작동하기 때문에 instanceof 보다 적합합니다. // 아래 코드를 실행하면 지원하지 않는 환경에서도 Arr..
728x90

티스토리툴바