자바스크립트-스터디[2021-10-05~완료] (36) 썸네일형 리스트형 45장 프로미스 45.1 비동기 처리를 위한 콜백 패턴의 단점 1. 콜백 헬 2. 에러 처리 한계 45.2 프로미스 생성 45.3 프로미스 후속 처리 메서드 1. then 2. catch 3. finally 45.4 프로미스의 에러처리 45.5 프로미스 체이닝 45.6 프로미스의 정적 메서드 1. resolve, reject 2. all 3. race 4. allSettled 45.7 마이크로 태스트 큐 45.8 fetch 1. get 요청 2. post 요청 3. patch 요청 4. delete 요청 45.1 비동기 처리를 위한 콜백 패턴의 단점 1. 콜백 헬 1) 콜백함수 내부에 비동기 함수가 있으면 순서가 보장되지 않는다. -> 기대대로 순서가 동작되지 않는다. 1-1) 웹 브라우저 원리 1-2) javascri.. 41장 타이머 디바운스(debounce)는 짧은 시간 간격으로 이벤트가 연속해서 발생하면 이벤트 핸들러를 호출하지 않다가 일정시간이 경과한 이후에 이벤트 핸들러가 한 번만 호출되도록 한다. 즉, 디바운스는 짧은 시간 간격으로 발생하는 이벤트를 그룹화해서 마지막에 한 번만 이벤트 핸들러가 호출되도록 한다. resize 이벤트 처리나 input 요소에 입력된 값으로 ajax 요청하는 입력 필드 자동완성 UI 구현, 버튼 중복 클릭 방지 처리 등에 유용하게 사용된다. 39.6 DOM 조작 노아 : 39.2.4 (CSS 선택자를 이용한 노드 취득) 부터 39.3 노드 탐색까지 kei : 39.4 (노드 정보 취득) 부터 39.6.4 까지 데브워니: 39.6.5 (노드 삽입) 부터 39.7.4 까지 널두 : 39.8 (스타일) 부터 40.2.8 까지 39.6 DOM 조작 5. 노드삽입 마지막 노드로 추가 지정한 위치에 노드 삽입 6. 노드 이동 7. 노드 복사 8. 노드 교체 9. 노드 삭제 39.7 어트리뷰트 1. 어트리뷰트 노드 & attribute 프로퍼티 2. HTML 어트리뷰트 조작 3. HTML 어트리뷰트 vs DOM 프로퍼티 4. data 어트리뷰트 & dataset 프로퍼티 39.6 DOM 조작 5. 노드삽입 마지막 노드로 추가 Node.prototype.appendChild .. 38장 브라우저의 렌더링 과정 자바스크립트 : 브라우저 환경에서 동작한다. : 웹페이지, 웹 애플리케이션 클라이언트 사이드 브라우저에서 실행된다. with HTML, CSS 파싱 : 텍스트 문서를 읽고 실행하기 위한 작업 1) 텍스트 문서의 문자열을 토큰으로 분해 2) 파스 트리 구조를 생성한다. 3) 바이트코드를 생성하고 실행한다. 렌더링 문서를 브라우저에 시각적으로 출력 HTML, CSS, 자바스크립트로 작성한 문서를 브라우저에 시각적으로 브라우저 렌더링 과정 브라우저는 HTML, CSS, 자바스트립트, 이미지, 폰트 등 렌더링에 필요한 리소스를 서버에 요청하고 응답을 받는다. 브라우저 렌더링 엔진은 서버로부터 응답된 HTML과 CSS를 통해 DOM과 CSSOM을 생성하고 이들을 결합하여 렌더 트리를 생성한다. 브라우저 자바스크립.. 39장 DOM 널두 : 38장 브라우저 렌더링 데브워니 : 39.1 (노드) 부터 39.2.3 까지 노아 : 39.2.4 (CSS 선택자를 이용한 노드 취득) 부터 39.3 노드 탐색까지 kei : 39.4 (노드 정보 취득) 부터 39.6.4 까지 39.1 노드 1. HTML 요소와 노드 객체 2. 노드 객체의 타입 3. 노드 객체의 상속 구조 392. 요소 노드 취득 1. id를 이용한 요소 노드 취득 2. 태그 이름을 이용한 요소 노드 취득 3. class를 이용한 요소 노드 취득 4. css 선택자를 이용한 요소 노드 취득 5. 특정 요소 노드를 취득할 수 있는지 확인 6. HTMLColletion과 NodeList 39.3 노드 탐색 1. 공백 텍스트 노드 2. 자식 노드 탐색 3. 자식 노드 존재 확인 4... 33장 Symbol Symbol 자료형은 쓸모없어보이는데 왜 있는거죠 var 심볼 = Symbol('설명'); 비밀스런 데이터를 저장하고 싶다 반복문에서 출력 안됨 : enumerable 속성이 false라 반복문에서 출력되지 않는다. 호출하면 불러와짐, 반복문에서만 안 나옴 var 심볼 = Symbol('설명'); 심볼 var person = {name:'KIM'}; person.weight = 100; person//{name: 'KIM', weight: 100} var nick = Symbol('내아이디는 비밀이야'); person[nick] = 'cutewonny'; person//{name: 'KIM', weight: 100, Symbol(내아이디는 비밀이야): 'cutewonny'} for (let key in .. 34장 이터러블 널두 : 33장. 7번째타입 symbol (p.7) + MDN 데브워니 : 34장. 이터러블 (p.11) kei : 35장. 스프레드 문법 (p.6) + MDN 노아 : 36장. 디스트럭처링 할당 + 37장. Set과 Map (p.22) for... of 는 새로 나왔어요 for...in 출력하고 싶으면 쌩코딩: obj.name; obj.age; 신 문법: for of 반복문 특징: iterable한 자료형에만 사용 가능하다 html에 있는 여러 요소를 찾을 수 있다. 34.1 이터레이션 프로토콜 es6에서 도입됨 순회 가능한 데이터 컬렉션을 만들기 위해 에크마 스크립트 사양에 정의하여 미리 약속한 규칙이다. 이전의 순회 가능한 데이터 컬렉션 배열, 문자열, 유사 배열 객체, Dom 컬렉션 등은 통일된 .. 31장 정규표현식 kei : 29장 MATH (4p) + MDN 문서 참조 노아 : 30장 Date (10p) 데브워니 : 31장 RegExp (13p) 널두 : 32장 String (12p) 31장 정규표현식 31.1 정규표현식이란? regular expression 일정한 패턴을 가진 문자열의 집합을 표현하기 위해 사용하는 형식 언어이다. 정규표현식은 자바스크립트의 고유 문법이 아니다. 대부분의 프로그래밍 언어와 코드 에디터에 내장되어 있다. ES3부터 펄pearl 정규표현식 문법으로 도입했다. 대상: 문자열 기능: 패턴 매칭 : 특정한 패턴과 일치하는 문자열을 검색, 추출, 치환 할 수 있는 기능 const tel = '010-9999-8887'; const reg = /^\d{3}-\d{4}-\d{4}$/; reg.. 이전 1 2 3 4 5 다음
