Web/JavaScript12 [모던 자바스크립트] 38장 브라우저의 렌더링 과정 ** 본 글은 모던 자바스크립트 Deep Dive 도서 내용을 정리한 것임을 밝힙니다. 웹 애플리케이션의 클라이언트 사이드 자바스크립트는 브라우저에서 HTML, CSS와 함께 실행된다. 브라우저가 HTML, CSS, 자바스크립트로 작성된 텍스트 문서를 어떻게 파싱(해석)하여 브라우저에 렌더링(출력)하는지 살펴보자. 브라우저는 다음과 같은 과정을 거쳐 렌더링을 수행한다. HTML, CSS, 자바스크립트, 이미지, 폰트 파일 등 렌더링에 필요한 리소스를 요청하고 서버로부터 응답을 받는다. 브라우저의 렌더링 엔진은 응답된 HTML, CSS를 파싱하여 DOM, CSSOM을 생성하고 이들을 결합하여 렌더 트리를 생성한다. 브라우저의 자바스크립트 엔진은 응답된 자바스크립트를 파싱하여 AST를 생성하고 바이트코드로 .. 2023. 8. 6. [모던 자바스크립트] 26장 ES6 함수의 추가 기능 ** 본 글은 모던 자바스크립트 Deep Dive 도서 내용을 정리한 것임을 밝힙니다. 26.1 함수의 구분 ES6 이전까지 자바스크립트의 함수는 별다른 구분 없이 다양한 목적으로 사용되었다. ES6 이전의 함수는 다음과 같이 활용될 수 있었다. 자바스크립트의 함수는 일반적인 함수로서 호출할 수 있다. new 연산자와 함께 호출하여 인스턴스를 생성할 수 있는 생성자 함수로서 호출할 수 있다. 객체에 바인딩되어 메서드로서 호출할 수도 있다. ES6 이전의 함수는 동일한 함수라도 다양한 형태로 호출할 수 있다. var foo = function () { return 1; }; // 일반적인 함수로서 호출 foo(); // -> 1 // 생성자 함수로서 호출 new foo(); // -> foo {} // 메.. 2023. 7. 25. [모던 자바스크립트] 16장 프로퍼티 어트리뷰트 ** 본 글은 모던 자바스크립트 Deep Dive 도서 내용을 정리한 것임을 밝힙니다. 16.1 내부 슬롯과 내부 메서드 앞으로 프로퍼티 어트리뷰트를 이해하기 위해서는 내부 슬롯과 내부 메서드의 개념에 대해 알아야 한다. 내부 슬롯과 내부 메서드는 자바스크립트 엔진의 구현 알고리즘을 설명하기 위해 ECMAScript 사양에서 사용하는 의사 프로퍼티와 의사 메서드다. ECMAScript 사양에 등장하는 이중 대괄호( [[…]] )로 감싼 이름들이 내부 슬롯과 내부 메서드다. 조금 쉽게 이해해보자면 ECMAScript 문서에서 자바스크립트 내부의 동작을 설명하기 위한 가상 메서드이다. 내부 슬롯과 내부 메서드는 ECMAScript 사양에 정의된 대로 구현되어 자바스크립트 엔진에서 실제로 동작하지만 개발자가 .. 2023. 7. 24. [모던 자바스크립트] 15장 let, const 키워드와 블록 레벨 스코프 ** 본 글은 모던 자바스크립트 Deep Dive 도서 내용을 정리한 것임을 밝힙니다. ES5 까지 변수를 선언할 수 있는 유일한 방법은 var 키워드를 사용하는 것이었다. var 키워드로 선언된 변수는 다음과 같은 특징이 있다. 15.1 var 키워드로 선언한 변수의 문제점 var 키워드로 선언된 변수는 다음과 같은 특징이 있다. 15.1.1 변수 중복 선언 허용 var 키워드로 선언한 변수는 중복 선언이 가능하다. var x = 1; var y = 1; // var 키워드로 선언된 변수는 같은 스코프 내에서 중복 선언을 허용한다. // 초기화 문이 있는 변수 선언은 var 키워드가 없는 것 처럼 동작한다. var x = 100; // 초기화 문이 없는 변수 선언문은 무시한다. var y; consol.. 2023. 7. 24. 페이지를 떠날 때 안정적으로 요청 보내기 - sendBeacon 웹소켓을 활용한 실시간 게임을 제작했다. 사용자가 페이지를 새로고침 하거나 브라우저를 닫았을 때, 서버 단에 사용자가 퇴장한다고 알리는 요청을 보내야 했다. 요청을 안정적으로 전송하기 위해서 Navigator에서 제공하는 sendBeacon을 사용하기로 했다. 일반적인 API 요청은 사용자가 브라우저를 닫을 때 요청이 전송되는 것을 보장하지 않는다. sendBeacon으로 전송된 요청은 실제 에이전트에 의해 대기열에 존재하기 때문에 네트워크에 연결이 되어있기만 하면 데이터가 전송된다. [참고 문서] Navigator: sendBeacon() method - Web APIs | MDN The navigator.sendBeacon() method asynchronously sends an HTTP POST .. 2023. 5. 21. [JavaScript] Prototype Prototype : 반복적으로 쓰일 수 있도록 속성과 함수를 정의하는 것 "JS는 Proto를 기반으로 하는 언어이다" == 객체지향 프로그래밍을 할 수 있는 한 가지 방식으로서 행동을 재사용하는 것 == 기존의 객체를 재사용하는 것 프로토타입 Demo 다음과 같은 파일을 만든다. JS 파일과 HTML 파일을 연결하고, JS 파일에 다음과 같이 코드를 작성하고 서버를 실행시키면, 프로토타입을 상속한 객체가 출력되는 것을 확인할 수 있다. => JS에서 모든 Object는 Object라는 Proto를 상속한다. console.log(x.__proto__ === y.__proto__) // true => x, y는 동일한 object proto를 상속하고 있기 때문에 true를 반환한다. Prototype.. 2023. 3. 6. JavaScript - 동기와 비동기 동기 (Synchronous) " 모든 일을 순서대로 하나씩 처리하는 것" 순서대로 처리한다 == 이전 작업이 끝나야 다음 작업 시작 요청과 응답을 동기식으로 처리한다면? -> 요청을 보내고 응답이 올 때까지 기다렸다가 다음 로직 처리 비동기 (Asynchronous) " 작업을 시작한 후 결과를 기다리지 않고 다음 작업을 처리하는 것 (병렬적) " 시간이 필요한 작업들은 요청을 보낸 뒤 응답이 빨리 오는 작업부터 처리 ex) 메일 전송 버튼을 눌러 놓고 다른 작업을 수행할 수 있음 비동기를 사용하는 이유 == 사용자 경험 "동기식 처리는 특정 로직이 실행되는 동안 다른 로직 실행을 차단하기 때문에 마치 프로그램이 응답하지 않는 듯한 사용자 경험을 만들게 됨" => 비동기로 처리한다면 먼처 처리되는 부분.. 2022. 10. 26. JavaScript 심화 - Event Event : 프로그래밍하고 있는 시스템에서 일어나는 사건 혹은 발생인데, 우리가 원한다면 그것들에 어떠한 방식으로 응답할 수 있도록 시스템이 말해주는 것 ex) 사용자가 버튼을 클릭한다면 우리는 그 사건에 대한 결과를 응답 받기를 원할 수 있음 Event Object : 네트워크 활동이나 사용자와의 상호작욕 같은 사건의 발생을 알리기 위한 객체 - 사용자의 행동이나, 특정 메서드를 호출함으로써 만들어질 수 있음 DOM 요소는 Event를 "받고" 받은 Event를 "처리"할 수 있음 -> Event 처리는 주로 addEventListener() 라는 처리기를 사용해 다양한 html 요소에 "부착"하게 됨 "대상에 특정 Event가 발생하면, 할 일을 등록하자" EventTarget.addEventLis.. 2022. 10. 24. JavaScript 심화 - DOM Browser APIs : 웹 브라우저에 내장된 API로, 웹 브라우저가 현재 컴퓨터 환경에 관한 데이터를 제공 하거나, 오디오를 재생하는 등 여러가지 유용하고 복잡한 일을 수행할 수 있게 함 종류 DOM Geolocation API : 지리정보 WebGL : 그래픽 DOM (Document Object Model) : 문서 객체모델 API 문서의 구조화된 표현을 제공하며 프로그래밍 언어가 DOM 구조에 접근할 수 있는 방법을 제공 문서 구조, 스타일, 내용 등을 쉽게 변경 HTML 콘텐츠를 추가, 제거, 변경하고, 동적으로 페이지에 스타일을 추가하는 등 HTML/CSS를 조작할 수 있음 - HTML 문서를 구조화 하여 각 요소를 객체 취급 - 단순한 속성 접근, 메서드 활용 뿐만 아니라 프로그래밍 언어.. 2022. 10. 24. JavaScript 기초- Object Object : 객체는 속성의 집합이며, 중괄호 내부에 key와 value 쌍으로 표현 key는 문자열 타입만 가능 -> 띄어쓰기 등의 구분자가 있으면 따옴표로 묶어서 value는 모든 타입 가능 객체 요소 접근은 점(.) 또는 대괄호([])로 가능 -> key 이름에 띄어쓰기 값은 구분자가 있으면 대괄호 접근만 가능 const myInfo = { name : 'Tom', phoneNumber: '123456', 'apple product' : { airpot : 'airpot pro', iphone : '12', }, } console.log(myInfo.name) // Tom console.log(myInfo['name']) // Tom // console.log(myInfo.'apple produc.. 2022. 10. 19. 이전 1 2 다음
