JEEGOO의 개발 노트

목차 HTTP란? HTTP 메시지 구조 Handshake HTTP 통신 과정 HTTS HTTP(HyperText Transfer Protocol)란? 클라이언트와 서버 간 데이터를 주고받기 위한 규칙이다. 여기서 데이터는 텍스트, 이미지, 동영상 등 모든 종류를 말한다. TCP(Transmission Control Protocol)와 UDP(User Datagram Protocol)방식이 있으며 80포트를 사용한다. TCP는 1:1 연결을 지향하며 신뢰할 수 있는 통신을 제공한다. 양단에 연결을 수립한 뒤 데이터를 전송하고 연결을 종료한다. 반면, UDP는 1:1 혹은 1: 다의 비연결을 지향하며 신뢰할 수 없는 통신을 제공한다. 연결을 수립하는 과정없이 단방향으로 데이터를 전송한다.TCP과 비교했을 때..

목차 CRP 문제를 어떻게 찾지? 최적화 CRP(Critical Rendering Path) CRP은 문서(HTML, CSS 및 JavaScript)를 화면에 표현하기 위해 거치는 일련의 과정을 말한다. 이 과정을 간단하게 설명하면 다음과 같다. HTML문서가 브라우저에 의해 구문 분석될 때 DOM트리와 CSSOM트리를 구성한다. 그 후 DOM, CSSOM 트리를 결합하여 Render 트리를 구성하고 배치(Layout)를 통해 페이지에 그려질 요소들의 크기와 위치를 결정한다. 마지막으로 그리기(Painting)과정을 통해 픽셀이 화면에 그려진다. 자세한 과정이 궁금하다면 [WEB] 웹 브라우저 렌더링과 최적화를 참고. 더 나은 성능과 우수한 사용자 경험을 제공하기 위해서 CRP을 최적화하는 것은 중요하다..

목차 웹 브라우저의 구조 웹 브라우저의 렌더링 과정 재배치(Reflow)와 다시 그리기(Repainting) 최적화 웹 브라우저의 렌더링 과정을 파악하는 것은 웹 개발자로서 꼭 필요하다고 생각한다. Javascript를 통해 요소를 조작하고 스타일을 변경하는 과정에서 재배치(Reflow)와 다시 그리기(Repainting)가 이루어지며 이를 최소화할수록 더 나은 성능과 사용자 경험을 제공하기 때문이다. 웹 브라우저의 구조 사용자 인터페이스 주소 표시줄, 이전/다음 버튼, 북마크 메뉴 등. 요청한 페이지를 보여주는 창을 제외한 나머지 모든 부분이다. 브라우저 엔진 사용자 인터페이스와 렌더링 엔진 사이의 동작을 제어한다. 렌더링 엔진 요청한 콘텐츠를 표시한다. 예를 들어 요청 후 전송받은 문서의 HTML과 ..