본문 바로가기

분류 전체보기

(96)
모던 자바스크립트 Deep Dive 38장 브라우저의 렌더링 과정 파싱? 구문 분석 syntax analysis. 텍스트 문서를 토큰으로 분해하여 트리 구조의 자료구조의 파스 트리를 생성하는 과정을 말한다. 렌더링? 브라우에 시각적으로 출력하는 것을 말한다. 브라우저의 렌더링 과정 HTML, CSS, 자바스크립트, 이미지, 폰트 등... 필요한 리소스를 서버로부터 응답 받는다. HTML과 CSS를 파싱하여서 DOM과 CSSOM을 생성하고 이들을 결합하여 렌더 트리를 생성한다. AST 생성하고 이를 바이트코드로 변환한다. DOM API를 통해서 DOM이나 CSSOM을 변경할 수 있다. 렌더 트리를 기반으로 레이아웃을 계산(리플로우)하고 화면에 HTML 요소를 페인팅한다. (리플로우와 리페인팅은 성능에 악영향을 주는 작업) HTTP 1.1 : 커넥션당 하나의 요청과 응답만..
모던 자바스크립트 Deep Dive 37장 Set과 Map Set 객체는 중복되지 않는 유일한 값들의 집합으로서, 수학적 집합을 구현하기 위한 자료구조이다. 요소 개수 확인 : Set.prototype.size 프로퍼티 이용 add 메서드는 연속적으로 호출 가능하다. const set = new Set(); set.add(1).add(2); console.log(set); // Set(2) {1, 2} NaN === NaN은 다르다고 평가되지만, Set객체는 둘을 같다고 평가한다.(Map도 마찬가지) const set = new Set(); console.log(NaN === NaN); // false console.log(0 === -0); // true // NaN과 NaN을 같다고 평가하여 중복 추가를 허용하지 않는다. set.add(NaN).add(NaN..
모던 자바스크립트 Deep Dive 34장~36장 이러터블/스프레드 문법/디스트럭처링 할당 이러터블이 Symbol.iterator 메서드를 호출하면 이터레이터 프로토콜을 준수한 이터레이터를 반환한다. next 메서드를 호출하면 value, done 프로퍼티를 가진 이터레이터 리절트 객체를 반환한다. for ...of 문은 some 과는 다르게, done 프로퍼티가 true가 될 때까지 반복한다. Rest 파라미터와 스프레드 문법은 서로 반대의 개념이다. // Rest 파라미터는 인수들의 목록을 배열로 전달받는다. function foo(...rest) { console.log(rest); // 1, 2, 3 -> [ 1, 2, 3 ] } // 스프레드 문법은 배열과 같은 이터러블을 펼쳐서 개별적인 값들의 목록을 만든다. // [1, 2, 3] -> 1, 2, 3 foo(...[1, 2, 3])..
모던 자바스크립트 Deep Dive 33장 Symbol Symbol을 생성할 때는 new 연산자와 함께 호출하지 않는다. Symbol.for 메서드는 전역 레지스트리에서 해당 키와 일치하는 심벌 값을 검색한다. 검색에 성공하면 실벌 값을 반환하고 실패하면 새로운 심벌 값을 생성한다. keyFor 메서드는 심벌 값을 추출한다. Symbol.for 메서드로 생성된 값은 레지스트리에서 관리되지 않는다. const mySymbol = Symbol("mySymbol"); const s1 = Symbol.for("mySymbol"); const s2 = Symbol.for("mySymbol2"); keyFor(mySymbol2); 심벌은 언제 사용할까? 심벌의 목적은 중복되지 않는 상수 값을 생성하는 것과 기존 코드에 영향을 주지 않고 프로퍼티를 추가하기 위해 도입되었..
[서평] 찐 UXer가 알려주는 UX/UI 실무 가이드 찐 UXer가 알려주는 UX/UI 실무 가이드 저자 조은정, 그림 스튜디오 브랄셀 출판사 한빛미디어 출판일 2022.03.15 쪽수 321 프론트 개발 일을 하고 있기 때문에 평소 UI/UX에 대해서 관심이 많던 터라 이 책을 선택하게 되었다. 하고 있는 업무에도 도움이 될 것이라고 생각했다. 책을 읽기 전, 내가 생각하는 UX는 사용자 경험을 살린 UI 기획.. 정도였다. 책을 읽고서 UX/UI에 대한 잘못된 생각을 바로잡을 수 있었다. 정리하자면, UX 기획은 소비자를 파악하기 위한 것이고 하고 싶은 것이다. 반면, UI 기획은 사용자를 파악하기 위한 것이고 해야 하는 것이다. 더 자세한 내용은 책에서... 찐 실무 가이드란 제목답게, UI/UX 기획의 실무 과정을 자세히 알려주고 있다. 유관 부서들..
모던 자바스크립트 Deep Dive 32장 String String 도 원시 타입이기 때문에 String 래퍼 객체를 생성한다. String 래퍼 객체는 length 프로퍼티와 인덱스를 가지므로 유사 배열 객체다. 'Hello'.length; // -> 5 '안녕하세요!'.length; // -> 6 String 메서드 문자열은 변경 불가능한 원시 값이기 때문에 String 래퍼 객체도 읽기 전용 객체로 제공된다. String 메서드는 언제나 새롱운 문자열을 반환한다. String.prototype.indexOf 인수로 전달받은 문자열에서 대상 문자열이 위치한 인덱스를 반환한다. 검색에 실패하면 -1을 반환한다. const str = 'Hello World'; // 문자열 str에서 'l'을 검색하여 첫 번째 인덱스를 반환한다. str.indexOf('l')..

728x90