Programming Language/javascript

(1회독)기초부터 완성까지, 프론트엔드 - 7~9장

김크리 2022. 8. 30. 05:10

학습할 내용

DOM
BOM
바인딩
웹 스토리지, 로컬 스토리지 life cycle
브라우저 렌더링

7장.BOM 과 DOM

DOM(Document Object Model, DOM) 문서 객체 모델

  • HTML 문서용 API로 화면에 나타나는 요소, 요소의 속성을 조작할 수 있다.
  • DOM을 통해 자바스크립트는 웹 페이지에 대한 정보를 얻을 수 있다.
  • W3C, WHATWG 에서 표준을 볼 수 있다.DOM 트리
  • 문서를 노드의 계층적(hierarchical)인 트리 구조로 나타낸다.
  • 최상위 노드를 root라고 하며, HTML에서는이 root 노드이다.

노드(Node)

  • 노드 인터페이스, DOM 요소에 대한 객체 형태의 기본 데이터 타입
  • EventTarget : 노드 인터페이스의 계층구조 최상위, 이벤트 발생시 타겟
  • Element : DOM 요소의 기본 클래스
  • Test, Comment, HTMLElement, HTMLBodyElement, HTMLAhchorElement, SVGElement, HTMLInputElement 등으로 노드의 계층 구조가 만들어져 있다.
  • instanceof를 통해 노드 계층의 상속 여부를 확인할 수 있다.

<select>

 <option>1</option>

 <option>2</option>

 <option>3</option>

</select>

<script>

const select = document.querySelector('select'); //현재 작성한 DOM 에서 select 요소 첫번째를 가져온다.



console.log(select instanceof HTMLSelectElement); //true

console.log(select instanceof HTMLElement); //true

console.log(select instanceof Node); //true

console.log(select instanceof HTMLInputElement); //false

</script>
  • DOM 트리에서 갖는 계층관계를 노드에서는 프로퍼티로 제공한다.
  • 모두 읽기 전용으로 반환한다
  • parentNode, childnodes, firstChild, lastChild, nextSibling, previousSibling
  • appendChild(), insertBefore(), append(), prepend(), after(), before()을 사용하여 노드를 이동하거나 새로운 노드를 추가할 수 있다.
  • removeChild(), remove() 를 사용하여 DOM 트리 내의 노드를 제거할 수 있다.
  • 마우스, 키보드 등 입력장치에 따른 이벤트가 존재하며 브라우저마다 상이한 메소드가 존재한다.
  • 자세한 DOM 트리내 노드를 다루는 메소드, 요소에 대한 설명은 MDN에서 확인 할 수 있다.

BOM(Browser Object Model, 브라우저 객체 모델)

  • 브라우저에서 자바스크립트가 구동되기 위한 환경과 기능을 제공하는데, 이를 window 인터페이스를 사용하여 활용할 수 있다.
  • window 객체에는 DOM, BOM, Javascript가 하위에 있다.
  • history 객체로 go,back,pushState 등의 명력어를 사용할 수 있으며, 보안상의 이유로 방문자 기록은 볼 수 없다.

Web Storage

  • 클라이언트 측에 이름:값 쌍의 맵 데이터를 저장하는 메커니즘
  • 쿠키와 다르게 브라우저에 저장되는 데이터이며, 서버에 전송되지 않는다.
  • 브라우저에 따라 용량이 다르다.
  • localStorage
    • origin이 같을 경우, 여러 탭과 창에서 공유된다.
    • 세션 이후에도 지속되는 저장소용으로, 컴퓨터를 종료하거나 브라우저를 종료하더라도 지속된다.
  • sessionStorage
    • origin 별로 스토리지를 관리한다.
    • 한 탭에서 페이지의 세션이 유지되는 동안만 origin 별로 스토리지를 관리한다.
    • localStorage보다 제한적이다.

8장. 브라우저 렌더링 과정

  • 작성한 코드가 브라우저에 나타나는 과정을 브라우저 렌더링이라고 한다.
  • 모든 브라우저는 가각ㄱ의 탭을 독립적인 프로세스로 처리하여 별도르 엔더린 인스턴스를 유지한다.렌더링 과정URL 입력 - 브라우저 프로세스 작업 - 네트워크 스레드가 적절한 프로토콜로 요청 처리 - 응답 도착 - 응답의 타입 파악 - 네트워크 스레드가 UI스레드에 작업 준비 노티 - 데이터와 렌더러 프로세스를 통해 페이지 렌더링 - 렌더링 완료 - 브라우저 프로세스 로딩 완료 - UI 스레드 로딩 표시 중지

9장. 네트워크 통신

HTTP (HyperText Transfer Protocol)

  • 하이퍼미디어 문서를 전송하기 위한 프로토콜
  • http: 로 시작하는 URL로 접근
  • 메시지 request/response 로 통신
  • 보안이 강화된 HTTPS(HyperText Transfer Protocol over SSL)을 주로 사용
    • 기본 포트 445
    • https: 로 시작하는 URL 통해 접근
  • 2015년 HTTP/2가 표준화 되었으며, TCP대신 UDP를 사용하는 HTTP/3도 활발하게 사용 중
  • HTTP 상태코드
    코드 내용
    1xx 서버에서 요청을 수신하였으나, 처리중 혹은 정보를 알려줄 필요가 없는 경우
    2xx 요청 성공
    3xx 요청을 마치기 위해 다른 위치로 리다이렉트
    4xx 클라이언트 오류
    5xx 서버 오류
  • 메서드
    • 클라이언트 요청 메서드를 통해 웹 서버에 전송할 HTTP 요청의 목적, 종류를 나타낼 수 있다.
    • safe : 읽기 전용(GET, OPTIONS, HEAD)
    • 멱등성(Idempotent) : 동일한 요청을 여러번 보내도 동일한 동작을 하고 서버의 상태 또한 동일하다. safe한 메서드는 멱등성을 가진다.(GET, HEAD, PUT, DELETE)
    • Cacheable : 응답을 저장해 향수 재사용 할 수 있는 것(GET, POST, PUT, PATCH, DELETE, OPTIONS)
  • 헤더
    • 서버와 클라이언트 사이에 body 외의 추가적인 정보를 교환
    • 대소문자 구분 X
    • Entity, General, Request, Response 헤더로 구분
  • 쿠키
    • 서버가 사용자의 웹 브라우저에 전송하는 기록 정보 파일
    • 상태가 없는 HTTP에서 서버에 동일한 정보 재요청시 쿠키 정보를 같이 전송한다.
    • 이름:값 쌍으로 정보 기록
    • 만료기간, 도메인, secure, httpOnly 등을 기록교차 출처 리소스 공유(Cross Origin Resource Sharing, CORS)
    • 통신하는 두 서비스의 URL의 프로토콜, 포트, 호스트가 모두 같을 때 동일 출처라고 부른다.
    • 자바스크립트가 출처가 다른 자원과 상호작용 하는 것을 제한하는 보안 방식이다.
    • 브라우저마다 상이한 정책을 가지고 있다.
    • 외부 API를 사용하거나 클라이언트/API 서버를 분리하는 경우가 많아지며 해당 정책을 보완하기 위해 출처를 서버에 알려주는 HTTP 헤더가 추가되었다.
    • Access-Control-Allow-Origin 의 값을 비교하여 브라우저에서 해당 응답이 유효한지 판단한다.JSON(Javascript Object Notation)
  • 문자 기반의 데이터 교환 방식
  • 키:값 형식으로 되어있다
  • .json 확장자 포멧
  • javascript와 일부 변수 형식이 다르다.
    • Boolean, Number, String 타입은 기본 값으로 변환
      • 문자열화 될 때 객체 속성은 순서가 보장 되지 않는다.
    • 배열의 경우 순서가 보장된다.
    • undefined, Symbol 타입은 객체 안에 있을 경우 생략된다.
    • undefined, Symbol 타입은 배열 안에 존재할 경우 null로 변환된다.
    • NaN, Infinity의 경우 null로 표현된다. 
      {
"key":"value",
"array":[
    {"key":"value"},
    {"key2":"value2"}
]
}
      Ajax(Asynchronous Javascript Ans XML)
  • 브라우저와 웹 서버 간에 통신을 하여 리소스를 가져올 수 있는 API
  • http, ftp 등 여러 프로토콜 사용 가능
  • XMLHttpRequest 옵션으로 비동기/동기 방식 사용
  • Promise
    • 중첩된 콜백 함수를 매개변수로 사용하여 발생하는 콜백 지옥(callback hell), 파멸의 피라미드(pyramid of dooom)를 줄이기 위해 생성된 ES2015에서 도입된 객체
    • 비동시 처리 시점을 명확하게 표현할 수 있다.
    • 비동기 작업 이후 결과(성공/실패)를 처리할 수 있다. 
      const promise = new Promise((resolve, reject) => {
setTimeout(() =>{
    const random = Math.floor(Math.random() * 10);
    if(random % 2){
        resolve('홀수');
    } else {
        reject(new Error('짝수'));
    }
},100);
});
promise.then((result)=>{})
promise.catch((error)=>{})
proimise.finally(()=>{})
  • async, await를 통해 promise 사용을 쉽게 할 수 있다.
  • async 를 함수 앞에 붙이면 promise를 반환한다
  • await를 사용한 코드는 async 함수 내에서만 사용되며, 함수 실행을 중지하고 promise 가 이행될때까지 기다린다.웹소켓(WebSocket)
  • 서버, 브라우저에서 지원 여부를 확인해야 한다.
  • HTTP 1.1 버전 이상
  • GET 메서드를 이용하여 요청

참고

저작자표시 비영리