Skip to content

[정리] 6주차 38~44장

Jump to bottom
Markers edited this page Sep 11, 2021 · 3 revisions

38장 브라우저의 렌더링 과정

  • 렌더링 과정
    • 서버로부터 html 파일을 받아온다.
    • 자바스크립트 엔진이 받아온 파일을 바이트로 변환한다.
    • 그후로 문자로 변환하고 토큰으로 변환한다.
    • 노드로 받아온 후 dom 을 만든다.
  • repaint 와 reflow
    • reflow 란? 노드의 삭제 위치 변화 등으로 레이아웃을 변화시키는 과정을 말한다.
    • repaint 란? 렌더 트리를 기반으로 페인트 과정을 하는 것을 말한다. ( css 변화)
html 파싱을 순차적으로 하기 때문에 Script 태그의 위치 중요.
 --> body 요소 아래에 위치 시키는 것이 좋음
 Script 태그의 async, defer 어트리뷰트로 비동기적으로 진행 가능.
 async : 파일 로드 완료 된후 실행. 순서 보장 안함
 defer : DOM 생성 완료 된 후 실행.

39장 DOM

  • HTML 문서의 계측정 구조와 정보를 표현하며 이를 제어할 수 있는 API
  • 프로퍼티와 메서드를 제공하는 트리 자료구조이다.
  • document.getAttribute 함수의 반환값은 항상 문자열이지만, property 값은 그렇지 않을 수도 있다.

40장 이벤트

  • 브라우저는 특정 액션을 감지하여 이벤트를 발생 시키는데 이때 호출 되는 함수를 이벤트 핸들러라고 한다.

  • 이벤트 발생할때 브라우저에게 이벤트 핸들러의 호출을 위임하는 것을 이벤트 핸들러 등록 이라고 한다.

  • 이벤트 핸들러 등록 방법 3가지

    1. 이벤트 핸들러 어트리뷰트 방식
      1. 태그 어트리뷰트에 함수를 정의해서 할당.
    2. 이벤트 핸들러 프로퍼티 방식
      1. 이벤트 타깃(DOM 노드 객체)에 바인딩
    3. addEventListener 메서드 방식

  • 이벤트 전파 : 생성된 이벤트 객체는 이 이벤트를 발생시킨 DOM 요소인 이벤트 타깃을 중심으로 DOM 트리를 통해 전파한다.
    이벤트 캡쳐링 -> 이벤트 타깃 -> 이벤트 버블링 순서로 진행

41장 타이머

  • 호출 스케쥴링이라고도 부른다.

  • 타이머 함수는 호스트객체( ECMAScript 사양이 아님 )

  • 비동기로 처리

  • 디바운스 / 스로틀 : 짧은 시간 간격으로 연속해서 발생하는 이벤트를 그룹화해서 과도한 이벤트 핸들러의 호출 방지하는 기법.

    • 디바운스 : resize 이벤트 처리 또는 input 요소에 입력된 값으로 ajax 요청하는 입력 필드 자동완성 UI 구현, 버튼 중복클릭 방지 처리에 쓰임

    • 스로틀 : scroll 이벤트 처리 또는 무한 스크롤 UI 구현

42장 비동기 프로그래밍

  • 자바스크립트는 싱글 스레드로 동작.

  • 자바스크립트의 동시성은 이벤트 루프가 지원

  • 태스트 큐 : 비동기 함수의 콜백함수 또는 이벤트 핸드러가 일시적으로 보관되는 영역

  • 이벤트 루프 : 콜 스택에 현재 실행중인 실행 컨텍스트가 있는지, 태스크큐에 대기중인 함수가 있는지 반복 확인. 콜 스택이 비어있다면 태스트큐에 대기중인 함수를 순차적으로 이동시켜서 실행.

43장 ajax

  • 자바스크립트를 사용하여 브라우저가 서버에게 비동기 방식으로 데이터를 요청하고, 서버가 응답한 데이터를 수신하여 웹페이지를 동적으로 갱신하는 방식.

  • JSON : 클라이언트와 서버간의 HTTP 통신을 위한 텍스트 데이터 포맷.

44장 REST API

  • 자원, 행위, 표현 3가지 요소 구성.

  • URI는 리소스를 표현, 행위에 대한 정의는 HTTP 요청 메서드로.

  • GET, POST, PUT, PATCH, DELETE ⇒ CRUD구현

Contributor

@jessi68
@Markers

Clone this wiki locally