# 브라우저

101개의 포스트
post-thumbnail

브라우저와 동작 원리

브라우저의 주요 기능은 사용자가 선택한 자원을 서버에 요청하고 브라우저에 표시하는 것이다. 자원은 보통 HTML문서지만 PDF나 이미지 또는 다른 형태 일 수 있다. 자원의 주소는 URI(Uniform Resource Identifier)에 의해 정해진다. 브라우저는

6일 전
·
0개의 댓글

브라우저의 첫 번째 일: URL 해독

성공과 실패를 결정하는 1%의 네트워크 원리

2021년 11월 21일
·
0개의 댓글
post-thumbnail

[CS] 브라우저 작동 원리 Day-28

Uniform Resource Locator의 줄임말로, 네트워크 상에서 웹 페이지, 이미지, 동영상 등의 파일이 위치한 정보를 나타냅니다.URL은 scheme, hosts, url-path로 구분됩니다. scheme: 통신 방식(프로토콜)을 결정합니다. (일반적으로

2021년 11월 18일
·
0개의 댓글
post-thumbnail

SVG 구조, 렌더링 성능 알고 쓰기

웹페이지를 구성하면서 이미지나 아이콘을 사용할때 svg를 많이 쓴다. 디바이스 화면에 따라 2x, 3x처럼 최적화된 화질의 이미지를 따로 설정해주는 것은 아주 귀찮고, 벡터 기반으로 되어 있는 svg는 이런 부분을 따로 고려할 필요가 없기 때문이다. 보통은 svg 이미

2021년 11월 10일
·
1개의 댓글
post-thumbnail

브라우저의 렌더링 원리

브라우저 렌더링 원리를 알아봅시다.

2021년 11월 8일
·
0개의 댓글
post-thumbnail

[Day-9] 브라우저 동작원리를 알아야 하는 이유가 무엇인가요?

Next.js에서 SSR을 최적화 하는 각 포인트와 어떻게 해야 하는지에 대한 설명글을 읽고 공부함

2021년 11월 4일
·
0개의 댓글
post-thumbnail

[인터뷰준비] 리페인팅/리플로우

브라우저의 성능을 저하시킬 수 있는 리페인팅/리플로우에 대해 알아보자리플로우와 리페인트는 렌더링과정에서 레이아웃 단계와 페인트 단게를 다시 거치는 과정이다.생성된 DOM노드의 레이아웃 변경 시 영향을 받는 모든 노드(부모, 자식)의 수치를 다시 계산하여 레이아웃 트리(

2021년 10월 27일
·
0개의 댓글
post-thumbnail

[인터뷰준비] BOM & DOM & Node

웹 브라우저의 다양한 기능을 객체처럼 다루는 모델Global Context, 브라우저 창을 나타내는 객체전역변수나 전역함수의 경우 window 프로퍼티처럼 작동한다윈도우 객체 내에 삽입된다는 것이다.덮어쓰면 기존 기능이 사라질 가능성이 있다프로퍼티에는 아래와 같은

2021년 10월 27일
·
0개의 댓글
post-thumbnail

브라우저 작동 원리(1)-개요

브라우저는 가장 많이 사용되는 소프트웨어일 중 하나로, 이 포스팅을 통해 그 작동원리를 설명하고자 합니다브라우저에는IE, Chorome, Firefox, Safari, Opera 같이 많은 종류가 있습니다(최근엔 국내 네이버의 Whale 브라우저도 많이 사용됩니다)하지

2021년 10월 27일
·
0개의 댓글

브라우저 작동 원리(0)-시작하기

로드맵의Internet 파트에는 브라우저와 그 작동 원리라는 주제가 있습니다로드맵을 따라 공부하던 저는 이 주제에 대해 이것 저것 둘러보던 중 브라우저 관련해서 가장 유명한 포스팅 중 하나인 How Browsers Work: Behind the scenes of mod

2021년 10월 27일
·
0개의 댓글
post-thumbnail

TIL-47 브라우저 렌더링 과정

브라우저 렌더링 과정

2021년 10월 26일
·
0개의 댓글
post-thumbnail

dom-to-image와 사파리

나는 이 라이브러리를 그만두겠다!

2021년 10월 25일
·
4개의 댓글
post-thumbnail

JavaScript | 로컬 스토리지 Local Storage

프론트엔드 프로그램을 개발할 때, 자바스크립트를 이용하여 사용자의 입력을 브라우저가 닫혀도 기억하고 싶은 경우가 있다. 이 때 자바스크립트에서 window.localStorage를 사용하면 사용자의 입력을 key/value 쌍으로 저장할 수 있다. 따라서 todo li

2021년 10월 19일
·
0개의 댓글
post-thumbnail

JavaScript로 웹 브라우저 조작하기

HTML의 각 태그들을 객체로 바꾸어 구조화한 DOM을 불러와서 웹 브라우저를 조작할 수 있다.HTML 태그 ⇒ 객체(구조화한 DOM) : 웹 브라우저 조작https://upload.wikimedia.org/wikipedia/commons/thumb/5/5a

2021년 10월 15일
·
0개의 댓글
post-thumbnail

DOM 변화 감지하기 - MutationObserver & ResizeObserver

얼마 전 프로젝트에 Testing-Library를 적용하는 과정에서 MutationObserver is not a constructor라는 에러가 계속 났다. (에러 원인은 버전 충돌이었음) 덕분에 삽질을 오래 했는데, 그 덕분에 좀 자세히 찾아봤던 MutationOb

2021년 10월 13일
·
0개의 댓글
post-thumbnail

02 브라우저 렌더링 101

🛑 해당 포스팅은 패스트캠퍼스 온라인 강의 The RED : 조은의 프론트엔드 실무 가이드 강의 필기 입니다.이 내용들에 대해 이해하고 있어야 SSR과 SPA에 대해 학습하는 것이 비로소 유의미해진다!

2021년 10월 13일
·
0개의 댓글
post-thumbnail

브라우저 저장소

브라우저 저장소 웹스토리지는 HTML5부터 제공되는 기능이다 해당 할 수 있도록 제공하는 기능도메인과 관련된 특정 데이터를 클라이언트 웹브라우저에 저장 쿠키와 비슷한 기능 웹스토리지의 개념은 키/값 쌍으로 데이터를 저장하고, 키를 기반으로 데이터를 조회하는 패턴

2021년 10월 11일
·
0개의 댓글
post-thumbnail

브라우저 최적화

우테코에서 가상돔과 비교 알고리즘, 렌더러 함수를 만드는 미션을 하고 있다. 하다가 갑자기 궁금한 것이 생겼다. 이렇게 element가 있을 때, 첫 번째와 세 번째의 textContent를 변경한다고 생각해보자. 그러면 자바스크립트는 동기적이기 때문에 첫 번째의 te

2021년 10월 9일
·
0개의 댓글
post-thumbnail

브라우저 캐시 지우기, "Ctrl + F5"

보통 웹 페이지 새로고침 할때는 "F5"를 사용한다.그런데, 웹 개발을 할 때 css나 html을 수정한 뒤 웹 서버에 올렸는데 제대로 적용이 되지 않을 때가 빈번하게 있다. 캐시로 인해 새로고침이 제대로 반영되지 않을 때인데, 이유는 페이지를 로드할 때 웹 브라우저에

2021년 10월 5일
·
2개의 댓글
post-thumbnail

브라우저의 렌더링 과정

프로트엔드 개발자는 기본적으로 웹 페이지를 개발하는 사람이다. 따라서 브라우저가 어떻게 화면을 랜더링하는지에 대한 기본적인 이해는 필수이다. 이번 글을 통해서 브라우저의 서버 요청과 응답을 받고, 서버 자원을 통해 웹 페이지를 랜더링하는 과정을 정리하고자 한다. 브라우

2021년 10월 3일
·
0개의 댓글