기록하는 개발자

브라우저의 렌더링 과정 https://mingmeng030.tistory.com/316 브라우저의 렌더링 과정과 Reflow, Repaint 브라우저의 렌더링 과정 Parsing→Style→Layout→Paint→Composite Parsing(DOM Tree, CSSOM Tree 구성) HTML 파일과 CSS 파일을 파싱해서 각각 Tree를 만든다. 브라우저가 페이지를 렌더링하려면 가장 먼저 받아온 H mingmeng030.tistory.com Parsing(DOM Tree, CSSOM Tree 구성) → Style(Render Tree 구성) → Layout(Render Tree 배치 : Reflow) → Paint(Render Tree 그리기 : Repaint) → Composite Display ..

브라우저의 렌더링 과정 Parsing→Style→Layout→Paint→Composite Parsing(DOM Tree, CSSOM Tree 구성) HTML 파일과 CSS 파일을 파싱해서 각각 Tree를 만든다. 브라우저가 페이지를 렌더링하려면 가장 먼저 받아온 HTML 파일을 해석해야한다. Parsing 단계는 HTML 파일을 해석하여 DOM(Document Object Model) Tree를 구성하는 단계이다. CSS가 포함되어 있다면 CSSOM(CSS Object Model) Tree 구성 작업도 함께 진행한다. Style(Render Tree 구성) Parsing 단계에서 생성된 DOM Tree와 CSSOM Tree를 매칭시켜서 Render Tree를 구성한다. Render Tree는 실제로 화면..

DOM(Document Object Model 문서 객체 모델) HTML 또는 XML 문서에 접근하기 위한 인터페이스로, HTML element들을 Tree 형태로 표현한 것이다. 우리의 IDE에서 작성한 HTML이 아닌, 작성 된 HTML 문서가 브라우저에 의해 해석되어 실제 문서를 나타내는 Node Tree가 DOM이다. DOM tree안에는 각 element에 상응하는 Node가 들어있고, 이러한 DOM은 API(getElementById, querySelector 등)를 제공하여 Javascript로 해당 문서에 노드 추가, 삭제, 변경, 이벤트 처리, 수정 등을 가능하게 한다. IDE에 HTML을 작성해도 최종적으로 결과 화면을 보기 위해서는 브라우저가 필요하다. IDE에 작성된 HTML은 단순..

이번 하반기 면접을 준비할 때 java, javascript 위주로 준비하면서 cs 공부도 했는데 공부할수록 새록새록 기억이 나는게 뇌가 살아나는 느낌.... 공부겸 정리겸 공부했던 cs 지식들을 기록하면 좋을 것 같다. 프로그램, 멀티프로그래밍, 멀티태스킹, 프로세스, 스레드, 멀티스레드, 멀티프로세스, 멀티프로세싱, etc... 이름 비슷한 녀석들의 종류가 참 많다.. 헷갈리는 녀석들을 짚고 넘어가보자 프로그램(Program) & 프로세스(Process) 프로그램(Program) 사전적 의미로는 '어떤 작업을 위해 실행할 수 있는 파일'로 컴퓨터가 실행할 수 있는 명령어들의 집합이다. 프로세스(Process) 컴퓨터에서 실행 중인 프로그램으로 각각의 프로세스는 독립된 메모리 공간을 할당 받으며 명령어..

cookie, session, cache , localstorage, sessionstorage 🤔 개발할 때 사용하는 저장소도 참 다양하다. web storage 정도만 사용해봤는데 쿠키, 세션, 캐시는 개발을 하지 않아도 접해본 용어들일 것이다. 그렇다면 이 저장소들의 차이점은 뭘까? 그 전에, 저장소를 사용해야하는 이유는 뭘까? HTTP (HyperText Transfer Protocol) HTTP는 인터넷에서 데이터를 주고 받을 수 있는 프로토콜로, 클라이언트와 서버는 이 HTTP를 통해 통신한다. 이 HTTP의 특징에는 connectionless(비연결성), stateless(무상태)가 있다. connectionless(비연결성) 실제 요청을 주고 받을 때만 연결을 유지하고, 요청 후 응답이 종..