# browser
DOM 노드와 프로퍼티 (DOM Node & Property)
DOM 노드는 종류에 따라 각각 다른 프로퍼티를 지원한다.예를 들어 태그는 링크 관련 프로퍼티, 태그는 입력 관련 프로퍼티를 제공한다.각각의 DOM 노드는 상속하는 클래스의 종류에 따라 내장 클래스가 달라진다.DOM Node ClassEventTarget 루트에
DOM 트리와 선택, 탐색 (DOM Tree, Query, Traversing)
브라우저의 렌더링 엔진은 웹 문서를 로드한 후 파싱하여 브라우저가 이해할 수 있는 구조로 구성하고 메모리에 적재하는데, 이를 DOM이라고 한다.모든 요소와 요소의 속성, 텍스트를 각각의 객체로 만들고 트리 구조를 구성한다.자바스크립트를 통해 모든 객체에 접근할 수 있고
자바스크립트 호스트 환경 JavaScript Host Environment
자바스크립트가 돌아가는 플랫폼을 호스트(host)라고 부른다.각 플랫폼마다 특정한 기능을 제공하는데, 이를 호스트 환경(host environment)이라고 한다.아래 그림과 같이, JavaScript 랭귀지 코어를 기반으로 플랫폼에서 객체와 함수를 추가로 제공한다.브
Cookie, Local Storage, Session Storage
HTTP에는 쿠키라는 개념이 존재하는데 이것은 서버가 사용자의 웹 브라우저에 전송하는 작은 데이터 조각들을 의미한다. 특징쿠키는 클라이언트에 저장된다. 이름, 만료일, 값, 경로정보가 들어있다. 브라우저가 종료되면 삭제된다.텍스트 파일이며 한개에 4KB, 최대 400개
MPA와 SPA를 알아보자!
오늘은 리액트 튜터님의 JavaScript로 하는 SPA 특강이 있었다.평소에도 SPA 좋은 거 알겠는데 그래서 어떻게 하는거지? 하는 궁금증이 있었는데, 오늘 가려운 부분을 긁은 듯한 상쾌함이 생겼다.배운 내용과 추가로 조사한 내용을 알아보도록 하자.MPA(Multi
[JavaScript/Browser] DOM | 이벤트(Event), 이벤트 핸들러(Event handler)
이벤트(Event)와 이벤트 핸들러(Event handler)를 알아보자
[번역] 자바스크립트의 메모리 관리 설명
JavaScript에서 변수, 함수, 객체 등이 어디에서 어떻게 저장되고 사용되는지, 그리고 더 이상 필요하지 않을 때 어떻게 수집되는지를 간략히 설명한 글입니다.
Chrome Lighthouse를 활용한 웹 최적화
Chrome 개발자도구 중 Lighthouse를 활용해 이미지와 코드 스플릿팅을 통해 웹 성능을 개선한 후기를 공유한다.
브라우저의 Layer 기능 활용 (*복잡한 z-index 문제 해결/스태킹 컨텍스트)
회사 프로젝트는 mvc+템플릿 엔진으로 구성되어 있고 서버는 spring 템플릿 엔진은 thymeleaf를 사용하고 있다.메인페이지를 개편하는 작업도중 기존에 불필요하게 z-index 남용으로 렌더링오더에 문제가 있어이를 전부 수정하는 과정에서 브라우저 디버깅 기능중
브라우저 Clipboard 접근(JS 복사-붙여넣기)
시스템 클립보드에 접근해 복사-붙여넣기를 하는 것을 구현하려면 clipboard.js 라이브러리를 사용하면 편할 것이다.군대가 라이브러리를 사용하지 못하는 환경이라 바닐라로 구현할 일이 생겨서 한 번 정리해 보았다.클립보드에 특정 값을 복사시키는 법,클립보드에 복사되어
Cookie VS LocalStorage VS SesseionStorage 정리
이번 주에 강의할 주제는 Cookie와 WebStoarge인 LocalStorage와 SessionStorage다.이번엔 빠르게 핵심만 정리하려고 한다.HTTP는 stateless하다는 특성을 갖고 있기 때문이다.여기서 stateless는 상태를 저장하지 않는다는 뜻인
Event Loop
Procee프로세스란 프로그래밍을 동작하는 최고의 단위Thread쓰레드란 프로그램안에서 동시에 여러개가 수행될 수 있는 작은 일꾼 단위자바스크립트는 single Threaded 언어이다.Memory Heap : 할당 된 데이터를 저장하는 곳call stack : 함수들
.jpg)
[Web] 브라우저 렌더링 과정과 브라우저 성능 사이의 관계
💡 브라우저가 렌더링을 위해 거치는 과정파싱 - 스타일 - 레이아웃 - 페인트 - 합성 - 렌더 순서로 진행된다.과정을 거친 후 DOM이나 CSS에 변화가 생길 경우 레이아웃(Reflow) / 페인트(Repaint) 과정을 수행한다.브라우저가 HTML을 읽어들이는 과
웹 사이트 성능 측정, Web Vitals
웹 사이트의 성능과 사용자 경험의 품질을 정량적으로 측정하는 지표인 Google의 Web Vitals에 대해 살펴봅니다.
