URL 구성 이해하기 프로토콜 : https 호스트명 : www.google.com 포트번호 : 443 패스 : /search 쿼리 파라미터 : q=hello&hl=ko scheme https://www.google.com:443/search?q=hello&hl=ko 주로 프로토콜(어떤 방식으로 자원에 접근할 것인가 하는 약속 규칙) 사용합니다. http, https, ftp 등 userinfo URL에 사용자 정보를 포함해서 인증 및 접근제어를 수행합니다. 보안에 취약하기 때문에 요즘은 거의 사용하지 않습니다. host https://www.google.com:443/search?q=hello&hl=ko 웹 페이지를 요청할 서버의 이름입니다. 도메인명 또는 IP 주소를 직접 사용 가능합니다. port ..

URL / URI / URN 차이점 URI 풀어서 해석하면 통합 자원 식별자라고 합니다.통합 자원 식별자(Uniform Resource Identifier)라고 합니다. Uniform: 리소스를 식별하는 통일된 방식 Resource: 웹브라우저 파일, 이미지, 동영상 등 Identifier: 다른 항목과 구분하는 식별자URI의 존재는 인터넷에서 요구되는 기본조건으로서 인터넷 프로토콜에 항상 붙어 다닙니다. 인터넷 상에서의리소스를 고유하게 식별하고, 위치를 지정하는 문자열입니다. URI는 URL과 URN을 포함합니다. 이들이 나타내는 것은 다음과 같습니다. URI - 자원(Identifier) URL - 자원의 위치(Location) URN - 자원의 이름(Name) URI의 존재는 인터넷에서 요구되는 기..

Virtual DOM이란? Virtual DOM은 DOM 노드트리를 복제한 자바스크립트 객체입니다. class, style 등의 속성은 가지고있지만, DOM api 속성은 가지고 있지 않습니다. 등장배경: DOM을 직접 조작할 때의 비효율성 Web이 발전하면서 복잡도는 계속해서 증가하고, DOM 조작도 빈번하게 일어나게 됩니다. DOM을 직접 조작하는 것은 Virtual DOM을 이용하는 것에 비해 비효율적이라고 합니다. DOM을 조작하여 발생하는 리플로우, 리페인트 작업에서 발생하는 브라우저의 연산이 많아지기 때문에 비효율적입니다. *예를 들어, 30개의 노드를 수정하면 30번의 리렌더링을 하게 됩니다. 특히 리플로우는 전체 픽셀을 다시 계산하는 과정이기 때문에, 리페인트보다 더 많은 부하가 발생합니다..

DOM이란? DOM(Document Object Model: 문서 객체 모델)은 웹페이지에 대한 인터페이스입니다. HTML 문서 내용과 구조가 객체 모델로 변환된 것으로, 다양한 프로그램(ex. javascript)에서 페이지의 콘텐츠, 구조, 스타일을 읽고 조작할 수 있는 API를 제공합니다. DOM의 구조는 노드트리로 표현됩니다. DOM에서 구분해야 할 것 1. DOM은 HTML과 1대1 대응되지 않을 수 있습니다. DOM은 HTML을 객체 모델로 변환한 것이므로, 가진 요소는 동일해야 하지만 다를 수 있습니다. 두 가지 경우가 있습니다. 작성된 HTML 문서가 유효하지 않을 때 DOM을 생성하는 동안, 브라우저는 유효하지 않은 HTML코드를 올바르게 교정합니다. 따라서, 교정 전 HTML 코드는 교..

렌더링 엔진이란? 역할 HTML, CSS, JS, 이미지 등 웹페이지에 포함된 모든 요소를 화면에 보여줍니다. 업데이트가 필요할 때 효율적으로 렌더링 할 수 있도록 자료구조를 생성합니다. *업데이트가 일어나는 환경: 입력, 스크롤, 애니메이션, 데이터 로딩 동작과정 웹 페이지에 접속하게 되면, 네트워크를 통해 해당 웹페이지의 HTML 문서를 얻어옵니다. 이 때 렌더링 엔진은 아래의 다이어그램과 같은 과정을 거쳐 읽어들인 HTML 문서를 해석합니다. 위의 4단계(Critical Rendering Path)는 다음 과정의 각 단계에 순서대로 대응됩니다. 파싱(Parsing) 렌더트리(Render Tree) 구축 레이아웃(Layout)(또는 리플로우(Reflow)) 페인트(Paint) +. 합성(Composi..

브라우저란? 유저가 선택한 자원을 서버로부터 받아와서 표현하는 소프트웨어입니다. *자원: 페이지(HTML) 이외에도 PDF, 이미지, 비디오 등의 콘텐츠들을 포함합니다. *자원의 주소는 URI에 의해 정해집니다. 구성요소 사용자 인터페이스(UI) 사용자가 요청한 페이지를 제외한 모든 부분을 지칭합니다. 브라우저 엔진 UI와 렌더링 엔진 사이의 동작을 제어합니다. 사용자로부터 전달받은 URI에 해당하는 자료가 자료 저장소에 1. 있다면 해당 자료를 렌더링 엔진에 전달합니다. 2. 없다면 URI 값만 렌더링 엔진에 전달합니다. 렌더링 엔진 요청한 콘텐츠를 표시(HTML, PDF, 이미지 등)합니다. *HTML을 요청하면 HTML과 CSS를 파싱하여 화면에 표시합니다. 통신 HTTP 요청과 같은 네트워크 호출..