# Web APIs
이벤트위임과 데이터속성
이벤트 위임을 활용해서 코드를 개선할 수 있다.현재 코드는 버튼을 클릭하거나 엔터키를 입력하면 아이템을 추가한다. 아이템을 추가하는 코드가 중복되어 사용되기 때문에 form 을 이용해서 개선할 수 있다.우선 HTML 코드에 form 태그를 추가하였다. form 태그를
이벤트 막기
event.preventDefault() 는 HTML 태그의 기본 이벤트를 막아주는 메서드이다.a 태그를 눌렀을 때, 링크로 이동하지 않게 할 경우form 안의 내용을 submit 이벤트로 보낼 때, 새로고침이 실행되지 않게 할 경우submit 의 경우에는 제출과 동시
이벤트 처리
쉽게 말해서 사용자가 HTML 요소에 일으키는 행위라고 생각하면 된다. 브라우저를 클릭하거나 키보드를 누르거나 페이지를 스크롤하거나 비디오를 실행시키는 등, 여러가지 이벤트가 존재한다. 관련 설명은 MDN 사이트에 자세히 나와있으니 참고하면 되겠다.이벤트란? : mdn
DOM 조작하기
HTML의 구조나 내용 또는 스타일 등을 동적으로 조작하려면 먼저 요소 노드를 취득해야 한다. 텍스트 노드는 요소 노드의 자식 노드이고, 어트리뷰트 노드는 요소 노드와 연결되어 있기 때문에 텐스트 노드나 어트리뷰트 노트를 조작하고자 할 때도 마찬가지다.요소 노드를 취득
성능 보장 렌더링 순서
앞서 살펴보았던 브라우저 렌더링 과정을 크게 두 개의 구성으로 나눠볼 수 있다.constructionDOM / CSSOMRender treeoperationlayout : 요소의 위치와 크기를 계산하는 것paint : 레이어 작업이 수행되는 것composition :
DOM
HTML 요소는 렌더링 엔진에 의해 파싱 되어 DOM을 구성하는 요소인 노드 객체 로 변환된다. 이때 HTML 요소의 어트리뷰트는 어트리뷰트 노드로, HTML 요소의 텍스트 콘텐츠는 텍스트 노드로 변환된다.DOM을 구성하는 노드 객체는 자신의 구조와 정보를 제어할 수
Window load
파싱은 텍스트 문서를 읽어서 파스 트리 ( DOM tree, CSSOM tree ) 로 생성하는 과정을 의미한다.렌더링은 파싱된 것을 브라우저에 시각적으로 출력하는 것을 말한다.브라우저는 HTML, CSS, JS, 이미지, 폰트 파일 등 렌더링에 필요한 리소스를 요청하
윈도우 스크롤링 APIs
window 창에 있는 document를 지정된 크기만큼 스크롤한다.window.scrollBy(0, 100);특정 좌표로 스크롤한다.window.scrollTo(0, 100); y축이 100px 인 곳으로 스크롤 엘리먼트의 위치로 스크롤한다.element.scro
브라우저 좌표
Element.getBoundingClientRect() 은 브라우저 위에 존재하는 요소의 위치 및 넓이, 높이 값들을 가지고 있는 DOMRect 객체를 반환한다. 여기서 중요한 점은 엘리먼트의 bottom과 right는 css에서의 bottom과 right와 다르다는
윈도우 사이즈
모니터 사이즈이다.window.screen.width window.screen.height 브라우저와 탭, 주소창을 포함한 크기브라우저의 전체 사이즈라고 생각하면 된다.window.outerWidth window.outerHeught탭, 주소창을 제외한 스크롤 영역을
브라우저 구조분석
브라우저는 Global Object인 Window라는 객체가 있고, 이를 크게 세가지의 객체로 분류할 수 있다.DOMdocumentBOMnavigatorlocationfetchstorageJavaScriptArrayMapDateDOM과 관련된 설명은 추후에 알아보자.
Web APIs(4)
브라우저 히스토리(세션 기록) 정보를 반환하거나 제어합니다..length: 등록된 히스토리 개수.scrollRestoration: 히스토리 탐색시 스크롤 위치 복원 여부 확인 및 지정.state: 현재 히스토리에 등록된 데이터(상태).back(): 뒤로 가기.forwa
Web APIs(3)
현재 페이지 정보를 반환하거나 제어합니다..href: 전체 URL 주소.protocol: 프로토콜.hostname: 도메인 이름.pathname: 도메인 이후 경로.host: 포트 번호를 포함한 도메인 이름.port: 포트 번호.hash: 해시 정보(페이지의 ID).a
Web APIs(2)
CooKie(쿠키)도메인 단위로 저장표준안 기준, 사이트당 최대 20개 및 4KB로 제한영구 저장 불가능domain: 유효 도메인 설정path: 유효 경로 설정expires: 만료 날짜(UTC Date) 설정max-age: 만료 타이머(s) 설정Storage(스토리지)
Web APIs
Web APIs 1. Console > .log(), .warn(), .error(), .dir() 콘솔에 메시지나 객체를 출력합니다. .log(): 일반 메시지 .warn(): 경고 메시지 .error(): 에러 메시지 .dir(): 속성을 볼 수 있는 객체를 출력
Webpack을 사용하는 코드에서 Web Worker의 스크립트 파일의 경로 설정 문제
Webpack에서 Worker API를 사용할 때는 Worker 생성과 URL 생성을 모두 인라인으로 작성해야 한다.
[JavaScript] 자바스크립트 런타임 환경
자바스크립트 런타임 환경은 자바스크립트 엔진, WEB APIs, Callback Queue, Event Loop으로 구성되어 있다.이 글을 쓰기에 앞서 자바스크립트에 대해 간단하게 설명하고 넘어가겠다. 자바스크립트 런타임에 앞서 이해하고 넘어가야 할 콜스택과 Non-B
[JS] Event loop
자바스크립트 엔진은 크게 Memory Heap 과 Call Stack으로 나눌 수 있다.변수를 선언하여 오브젝트, 문자열, 숫자등을 할당하게 되면 데이터들은 전부 메모리 힙에 저장된다. 메모리 힙은 구조적으로 정돈된 자료구조가 아니기 때문에 자료들이 여기저기 흩어져 저
브라우저의 비동기 함수 작동 원리
: JavaScript 코드를 해석하고 실행하는 인터프리터Safari의 Webkit, Chrome의 V8 등...JavaScript 엔진은 Memory Heap과 Call Stack으로 이루어져 있다.: 메모리 할당이 일어나는 곳으로 변수, 객체 등이 저장되는 곳: 코