CS겸 취준까지

기술글을 보고 정리하였음(https://d2.naver.com/helloworld/6204533)이 글은 사용자 입력(input)을 받았을 때 컴포지터가 어떻게 부드러운 상호작용이 이루어지게 하는지 알아보고 있음기술글이 2019년도에 작성된 글이기 때문에 현재와는 많이 다른점이 있을것이기에 이런 흐름으로 만들어졌다고 이해하고 현재와 다른점이 있다는것을 생각하면서 봐야함(크롬에 많은 버전 업데이트가 있었기 때문) 컴포지터가 사용자 입력을 받았을 때▶ 브라우저 관점에서 입력 이벤트'입력 이벤트(input event)'라는 말을 들었을 때 입력란에서 일어나는 값 입력이나 마우스 클릭만 생각할 수 있음하지만 브라우저의 관점에서 입력이란 모든 사용자의 제스처를 의미마우스 휠을 스크롤하는 것도 입력 이벤트이고, 화..

기술글을 보고 정리하였음(https://d2.naver.com/helloworld/5237120)이 글은 렌더러 프로세스가 HTML 문서를 받았을 때 어떤 절차를 거쳐 화면을 구성하는지 설명하고 있음기술글이 2019년도에 작성된 글이기 때문에 현재와는 많이 다른점이 있을것이기에 이런 흐름으로 만들어졌다고 이해하고 현재와 다른점이 있다는것을 생각하면서 봐야함(크롬에 많은 버전 업데이트가 있었기 때문) 렌더러 프로세스의 내부 동작렌더러 프로세스는 여러 측면에서 웹 페이지의 성능에 영향을 끼침 ▶ 렌더러 프로세스는 웹 콘텐츠를 처리메인 스레드와 워커 스레드, 컴포지터 스레드, 래스터 스레드가 있는 렌더러 프로세스렌더러 프로세스는 탭 내부에서 발생하는 모든 작업을 담당렌더러 프로세스의 메인 스레드가 브라우저로 ..

기술글을 보고 정리하였음(https://d2.naver.com/helloworld/2922312)저번에 이어 웹 사이트를 표시하기 위해 각 프로세스와 스레드가 어떻게 통신하는지 좀 더 깊게 알아보고 있음기술글이 2019년도에 작성된 글이기 때문에 현재에는 사용되지 않는 이벤트등이 기재되어있어 이런 흐름으로 페이지 이동을 한다고 생각하면 될듯 (크롬에 많은 버전 업데이트가 있었기 때문)내용을 알기 전에 브라우저 동작과정과 프로세스와 쓰레드에 대한 기본 지식을 가지고 읽어야 이해하기 좋음 내비게이션 과정에서 일어나는 일브라우저의 주소 표시줄에 URL을 입력하면 브라우저가 인터넷에서 데이터를 가져와서 페이지를 표시함이 동작에서 사용자가 사이트를 요청하고 브라우저가 페이지 렌더링을 준비하는 과정(= 내비게이션 ..

개요INP의 정의크롬 개발자 도구를 통한 INP 개선 방법 응답성(페이지가 인터렉션에 얼마나 빠르게 응답하는지)은 사용자에게 매우 중요하다. ✅ INP의 정의📦 INP (Interaction to Next Paint)다음 페이지와의 상호작용이라는 의미의 INP는 반응성을 평가하는 실험 지표로써 페이지에서 발생하는 모든 상호작용을 측정하여 페이지의 전반적인 응답성을 측정하며 이를 통해 시간을 최소화하는 것이 목표이다.INP는 페이지 수명동안의 모든 상호작용 요소를 관찰하고 가장 긴 응답 시간(지연 시간)이 가진 것을 보고한다.INP가 낮으면 페이지의 대다수의 상호작용이 대부분 빠르게 반응한다 -> 좋은 응답성을 가진다. 🎉 지연 시간이란?더보기단일 상호작용의 지연 시간은 상호작용의 일부인 어떠한 이벤트..

브라우저 렌더링 원리를 알아야 하는 이유 C는 직접 운영 체제에서 실행되고, Java는 가상 머신 위에서 실행된다. C는 컴파일 언어로, 소스코드가 기계어로 변환된 후 실행된다. Java는 소스코드가 바이트코드로 컴파일되어 JVM에서 해석 및 실행된다. 반면 JavaScript는 웹 브라우저에서 실행된다. (물론 Node.js를 통해 서버 사이드에서도 실행될 수 있다.) JavaScript를 클라이언트 사이드에서 사용할 경우 웹 브라우저에서 HTML, CSS, JavaScript가 실행되므로 브라우저 렌더링 원리를 이해하는 것은 중요하다. 더보기 -(JVM이란?) JVM은 하드웨어와 운영 체제 사이의 추상화 레이어로 작동하는 소프트웨어이다. 보통 자바 개발 키트(JDK)에 포함되어 컴퓨터에 설치된다. -..

[ 게이트웨이(Gateway) ] 컴퓨터 네트워크에서 서로 다른 통신망, 프로토콜을 사용하는 네트워크 간의 통신을 가능하게 하는 컴퓨터나 소프트웨어를 두루 일컫는 용어. 즉 다른 네트워크로 들어가는 관문(입구) 역할을 하는 네트워크 포인트 넓은 의미로는 종류가 다른 네트워크 간 통로의 역할을 하는 장치 게이트웨이는 서로 다른 네트워크상의 통신 프로토콜(protocol,통신규약)을 적절히 변환해주는 역할을 함 게이트웨이를 지날 때마다 트래픽(traffic)도 증가하기 때문에 속도가 느려질 수 있음 두 컴퓨터가 네트워크 상에서 서로 연결되려면 동일한 통신 프로토콜을 사용해야함 따라서 프로토콜이 다른 네트워크 상의 컴퓨터와 통신하려면 두 프로토콜을 적절히 변환해 주는 변환기가 필요한데 게이트웨이가 바로 이러한..

개요 브라우저의 동작 Virtual DOM React에서의 동작 브라우저의 동작 브라우저의 동작은 VirtualDOM의 등장과 등장 이전의 RealDOM만의 한계점을 설명해주는 부분으로써 동작형태와 이점을 좀 더 이해하기 쉽게 해주기에 기억하면 좋음 브라우저의 랜더링 과정) DOM tree 생성 브라우저의 렌더 엔진이 HTML을 파싱하여 DOM노드로 이루어진 트리를 생성한다. render tree 생성 CSS 파일과 inline 스타일을 파싱하여 CSSOM을 생성 CSSOM과 렌더 엔진에 의해 만들어진 DOM을 합쳐 render tree를 생성 문서의 시각적인 구조를 나타낸다 Layout viewport에서 생성된 render tree의 각 노드가 스크린상에 어느 공간에 위치할지 결정 position, ..

한국소프트웨어진흥원 공개SW지원센터의 문서에서 발췌했습니다. 크로스 브라우징이란? 크로스 브라우징(상호 호환성)이란 표준 웹기술을 채용하여 1. 다른 기종 혹은 플랫폼에 따라 달리 구현되는 기술을 비슷하게 만듦. 2. 어느 한쪽에 최적화되지 않도록 공통 요소를 사용해 웹페이지를 제작하는 기법 모든 웹브라우저에서 100% 똑같이 보이도록 만드는 것은 오해다. OS가 다르고, 기본 글꼴이 다르며 HTML을 렌더링하는 엔진이 다르기 때문에 모든 웹브라우저에서 100% 똑같이 보이게 하는 것은 가능하지 않다. 웹브라우저간 특이성 브라우저의 특이성은 당연히 존재하는 것, 특징을 알아두고 최대한 표현하고자 하는 컨텐츠 형태로 출력하는 것이 중요하다. 1. 모든 브라우저가 HTML, CSS, 자바스크립트 표준안을 충..

▶ 브라우저 저장소가 필요한 이유 웹에서 클라이언트와 서버가 통신할 때 HTTP의 중요한 특징 중 하나로 비연결성이 있음 더보기 비연결성이란 실제로 요청을 주고 받을때만 연결을 유지해 응답을 주고 응답을 주고나면 TCP/IP 연결을 끊음 최소한의 자원으로 서버를 유지 이는 통신을 계속해서 유지하지 않기 때문에 자원 낭비를 줄일 수 있다는 장점이 있지만 통신을 할 때마다 새로운 연결이 계속해서 필요하다는 단점이 있음. 예를 들면 처음 웹 사이트에 방문해서 로그인을 했어도 페이지를 이동할 때마다 새롭게 로그인을 해야하는 문제 등. 이런 경우 개발자는 브라우저 저장소를 이용해서 문제를 해결할 수 있음 ▶ 브라우저 저장소의 종류 1. 쿠키(Cookie) 웹사이트 접속시 개인장치에 다운로드 되고 브라우저에 저장되..

브라우저 렌더링의 원리를 알아보기 전 브라우저에 대해 알아보자. Web browser 인터넷에서 웹 서버의 모든 정보를 볼 수 있도록 하고, 문서 검색을 도와주는 응용 프로그램으로 우리가 일상생활에서 인터넷을 통해 검색을 할 때 주로 네이버나 다음과 같은 사이트에 접속하여 필요한 정보를 검색하게 되는데, 이 때 사이트에 접속할 수 있는 도구를 바로 '브라우저' 혹은 '웹 브라우저' 라고 부른다. 브라우저는 제어판과 같이 컴퓨터에 설치되어 있는 하나의 프로그램으로, 이 프로그램을 다운받고 실행하게되면 주소창을 입력할 수 있는 도구가 나타나게 되는것이다. 브라우저의 주요 기능은 사용자가 참조하고 싶은 웹페이지를 서버에 요청하고, 서버의 응답을 받아 브라우저에 보여주는 것이다. 흔히 사용하는 크롬, 인터넷 익..