본문 바로가기

Front-End94

CH1 블로그 서비스 (1/2) [프론트엔드 성능 최적화 가이드] 프로젝트 켜고(npm start/ npm run server), 크롬의 검사 탭 클릭 이미지 크기 확인: Elements 해당 요소 클릭 후, img의 src 요소에 마우스 올리기 실제 이미지 크기와 화면에 출력되는 이미지 크기는 다르다면, 화면에 출력되는 이미지 크기의 2배를 사용 정적(static) 이미지 API를 통해 받아오는 이미지 직접 이미지 크기 조절 CDN 활용 *CDN: Content Delivery Network로 물리적 거리를 해소 (1) 미국 서버에서 직접 다운로드 하는 대신 (2) 미국 서버를 복제한 한국 서버에서 다운로드 이미지 CDN: 이미지 리사이징, 포맷 변경 이미지 CDN 주소 예시 http://cdn.image.com?src=[img src]&width=크기&height=.. 2023. 6. 19.
31장 RegExp (모던 자바스크립트 Deep Dive) 모던 자바스크립트 Deep Dive 글 목록(스터디) https://hello-kk.tistory.com/780 ● RegExp 메서드 메서드 결과 예시 RegExp.prototype.exec 1. 매칭 결과를 배열로 반환 2. 매칭 결과가 없는 경우 null 반환 ※ 매칭 첫번째 결과만 반환 ["패턴", index: 인덱스, input: "주어진 문장", groups: ] RegExp.prototype.test 1. 매칭 결과를 불리언 값으로 반환 true/false RegExp.prototype.match 1. 매칭 결과를 배열로 반환 ※ g 플래그가 지정되면, 모든 매칭 결과를 반환 ["패턴", "패턴", '패턴"] ● 플래그 ● [ ] 대괄호 : 그룹이 아님. 그 중에 하나 ● \D: 숫자가 아닌.. 2023. 6. 8.
35장 스프레드 문법 36장 디스트럭처링 할당 (모던 자바스크립트 Deep Dive) 모던 자바스크립트 Deep Dive 글 목록(스터디) https://hello-kk.tistory.com/780 ● 스프레드 문법(전개 문법)는 이터러블에 한정. Array, String, Map, Set, DOM 컬렉션(NodeList, HTMLCollection), arguments ● 이터러블이 아닌 일반 객체, 유사 배열 객체는 불가능 ○ 스프레드 문법의 결과는 값이 아니다(개별적인 값의 목록) => 변수에 할당 불가능 ○ Rest 파라미터 vs 스프레드 문법: 반대 개념(똑같이 생김) Rest 파라미터 스프레드 문법 인수들의 목록 => 배열 배열(과 같은 이터러블) => 개별적인 값드의 목록 ● 이터러블을 배열로 변환 => [...이터러블] 기존 방식 ★스프레드 문법★ concat [1,2].c.. 2023. 6. 5.
40장 이벤트 (모던 자바스크립트 Deep Dive) 모던 자바스크립트 Deep Dive 글 목록(스터디) https://hello-kk.tistory.com/780 ● 이벤트 핸들러: 이벤트 발생 시, 브라우저에 의해 호출될 함수 이벤트 핸들러는 (1) 이벤트 타깃에 바인딩 (2) 전파된 이벤트를 캐치할 DOM 노드 객체에 바인딩 ● 발생한 이벤트는 객체! (1) 이벤트 핸들러의 첫 번째 인수로 전달 (2) 매개변수 e, 명시적으로 선언 필수! ● 이벤트 전파 DOM트리 상에 존재하는 DOM 요소 노드에서 발생한 이벤트는 DOM 트리를 통해 전파된다. ● 이벤트를 발생시킨 DOM 요소인 이벤트 타깃을 중심으로, DOM 트리를 통해 전파 (1) 캡쳐링: 이벤트가 상위 요소에서 하위 요소 방향으로 전파 (2) 타깃 단계: 이벤트가 이벤트 타깃에 도달 (3) .. 2023. 5. 28.
39장 DOM (모던 자바스크립트 Deep Dive) 모던 자바스크립트 Deep Dive 글 목록(스터디) https://hello-kk.tistory.com/780 ★DOM 조작에 의해 리플로우, 리페인트 발생 (성능 최적화 고려)★ innerHTML (setter/getter) (1) 모든 자식노드를 삭제한 후 (2) 새롭게 노드를 생성하여 (3) 자식 요소로 추가 삽입 위치 지정 불가 insertAdjacentHTML(위치,HTML문자열) 기존 요소 유지 위치 지정해서 요소 삽입 => 둘다, XSS(크로스 사이트 스크립팅 공격)에 취약 =>마크업 파싱하기 때문 doxument.getElementById() document.createElement('li') document.createTextNode() $li.appendChild() 노드를 생성하면,.. 2023. 5. 25.
39장 DOM(~39.5.2) (모던 자바스크립트 Deep Dive) 모던 자바스크립트 Deep Dive 글 목록(스터디) https://hello-kk.tistory.com/780 DOM(Document Object Model): 노드 객체로 구성된 트리 자료구조 - 이를 제어할 수 있는 API, 즉 프로퍼티와 메서드를 제공하는 트리 자료구조 - DOM이 제공하는 프로퍼티와 메서드를 사용하여 노드에 접근, HTML의 구조와 내용 또는 스타일 등을 동적으로 변경하는 방법을 익히는 것이 중요 Element: Tag? 요소 노드 == 태그 중첩 관계 비선형 자료구조: 하나의 자료 뒤에 여러 개의 자료가 존재할 수 있는 자료구조 DOM API를 통해 (1) 자신의 부모, 형제, 자식 탐색 가능 (2) 자신의 어트리뷰트와 텍스트를 조작 가능 live DOM 컬렉션 객체 : 실시간.. 2023. 5. 22.
38장 브라우저 렌더링 과정/33장 Symbol/48장 모듈 (모던 자바스크립트 Deep Dive) 모던 자바스크립트 Deep Dive 글 목록(스터디) https://hello-kk.tistory.com/780 브라우저의 렌더링 과정 ● HTML 파싱한 결과, CSS 파싱한 직접적인 결과물이 렌더 트리는 아님. 각각 DOM과 CSSOM을 생성. 그리고 DOM과 CSSOM의 결합이 렌더 트리! ● HTML 파싱 과정과 CSS 파싱 과정: 병렬적 X( == 동기적) ● 리플로우(reflow: layout 다시 계산) 노드 추가/삭제, 요소 크기/위치 변경, 윈도우 리사이징 등 ● 리플로우 없이 리페인트만 실행되기도 한다. ● script 태그 위치에 따라 HTML 파싱이 블로킹 되어 DOM 생성이 지연가능하기 때문에, script 태그 위치가 중요하다.(렌더링 시간 단축 및 에러 발생 줄이기) async.. 2023. 5. 18.
37장 Set과 Map (모던 자바스크립트 Deep Dive) 모던 자바스크립트 Deep Dive 글 목록(스터디) https://hello-kk.tistory.com/780 Set: 중복 요소가 없음 Map: 중복 키를 갖는 요소가 없음 Set과 Map의 size는 접근자 프로퍼티. (그렇기에 숫자를 할당해서 값을 바꿀 수 없다) set.size = 10 // 불가능. '접근자' 프로퍼티 forEach 요소가 두개인 이유? Array의 forEach와 인터페이스를 맞췄는데, set은 인덱스가 없음 set 객체는 인덱스가 없지만, 순회하는 순서는 요소가 추가된 순서를 따름 Map과 객체의 결정적인 차이 ! 이터러블! Map과 Set 모두 for ... of 로 순회가 가능 Map.prototype.keys Map.prototype.values Map.prototyp.. 2023. 5. 15.
25장 클래스 (모던 자바스크립트 Deep Dive) 모던 자바스크립트 Deep Dive 글 목록(스터디) https://hello-kk.tistory.com/780 call, apply getPrototypeof // 프로토타입 체인상에 있는 바로 처음 만나는 프로토타입 this instanceof 클래스 // 체인 new 클래스() 이지만, 클래스는 생성자 함수와 같다 '클래스'를 작성하긴 하지만, 모든것은 prototype체인상에 존재한다. (정적 프로퍼티 ?) this를 고려할 때, 클래스이지만 클래스.prototype를 동시에 생각해야 한다. (또, 클래스.prototype.메서드) 기본적으로 클래스의 프로토타입이 동시에 생성된다. Base와 Base.prototype Derived와 Derived.prototype 어떤 메서드가 어떤 객체(클래스.. 2023. 5. 10.

티스토리툴바