주섬주섬 코딩, 소소하지만 꾸준히 쌓아가는 개발 기록...

사용자 동작을 나열하며 간략히 공부해보자. >>> 사용자 동작 시작 1. https://okayoon.tistory.com/ 를 검색한다. 2. DNS(Domain Name System)에서 주소를 검색, 해당 ip 주소를 찾아서 사용자가 입력한 URL과 함께 전달한다. - 이때 캐싱된 DNS 기록이 있는지 먼저 확인한다. 3. 전달받은 ip 주소를 이용하여 웹 브라우저는 웹 서버에게 해당 웹 사이트의 리소스를 요청하고 해상 웹 서버는 리소스를 전달한다. >>>> 전달받은 리소스를 통해 브라우저 렌더링 과정 시작 4. DOM Tree 구축을 위해 HTML을 파싱한다. - DOM Tree는 문서 객체 모델로 모든 요소, 속성, 텍스트 등 (문서노드, 요소노드, 속성노드, 텍스트노드)을 트리 구조로 표현한 ..

shadowDOM HTML, CSS, JS 전반적 특성 때문에 생기는 웹앨 빌드의 취약성을 제거한다. id나 class가 중복되어도 충돌되는지에 대한 여부를 알려주지 않기때문에 버그가 많았다. 스타일이 쌓이고 쌓이다가.. 도저히 안될때면 !important를 통해 스타일을 해결하기도 했다. shadowDOM은 CSS및 DOM을 수정한다. vanilla 자바스크립트에서 CSS를 마크업과 번들로 묶고 세부정보를 숨겨 자체포함 구성요소로 작성할 수 있다. 구성요소 HTML Templates Shadow DOM Custom elements HTML Imports CSS범위, DOM 캡슐화 등이 shadowDOM으로 인해 재사용가능하기 때문에 shadowDOM을 사용하면 웹 컴포넌트로 만들 필요가 없다. 자체적으..