본문 바로가기

STUDY36

Reflow와 Repaint가 실행되는 시점 Reflow와 Repaint가 실행되는 시점Reflow: 레이아웃이 변경될 때 발생하며, 브라우저가 요소들의 크기와 위치를 다시 계산하는 과정입니다.   - DOM 엘리먼트 추가, 제거, 또는 변경.   - CSS 스타일 변경이나 클래스 추가로 레이아웃이 변경될 때.   - 엘리먼트의 크기를 변경하면 다른 요소에도 영향을 미칠 수 있습니다.   - CSS 애니메이션과 트랜지션은 각 프레임에서 Reflow를 발생시킵니다.   - `offsetWidth`, `offsetHeight` 속성 사용 시, Reflow가 트리거되어 값을 계산합니다.   - 유저 인터랙션(hover 효과, 텍스트 입력, 창 크기 조정 등)이 Reflow를 유발할 수 있습니다. Repaint: 요소의 가시성이나 스타일이 변경될 때 발생.. 2024. 9. 6.
주소창에 google.com을 입력하면 일어나는 일?! 주소창에 `google.com`을 입력했을 때 일어나는 과정을 단계별로 알아보자! 1. 사용자가 URL 입력   사용자가 브라우저 주소창에 `google.com`을 입력합니다. 브라우저는 사용자가 입력한 문자열을 처리하여 적절한 요청을 준비합니다. 이 과정에서 브라우저는 입력된 값이 URL인지, 검색어인지 구분합니다. 2. DNS 조회   브라우저는 입력된 도메인 이름(`google.com`)에 해당하는 IP 주소를 알아내기 위해 DNS(Domain Name System) 서버에 요청을 보냅니다.     - 브라우저 캐시 → 운영체제 캐시 → 라우터 캐시 → ISP(인터넷 서비스 제공자) 캐시 순으로 DNS 조회가 이루어집니다.    - 만약 캐시에 해당 정보가 없다면, DNS 서버가 도메인의 IP 주소.. 2024. 9. 6.
그릿지 테스트 회고: 2주간의 여정 그릿지 테스트란? 그릿지에서 주최한 시뮬레이션 챌린지이다.개발 가이드라인, 화면 설계서, 피그마 에셋, API 등이 제공되었고, 주어진 기간 내에 핵심 기능을 구현하는 것이 목표였다. 인스타그램과 유사한 여행 기록 SNS로, 로그인, 소셜 로그인(카카오), 회원가입, 게시글 작성/조회, 결제 시스템 등의 기능을 2주 동안 구현하는 챌린지이다. 챌린지에서 구현하게 되는 기능은 크게 3가지였다.유저 관련 기능: 로그인, 소셜 로그인, 회원가입게시물 관련 기능: 게시물 CRUD, 댓글 CRUD결제 기능: 아임포트를 이용한 결제 구현umc동아리 디스코드 공지방에서 이 챌린지 모집글을 보게되었는데, 친구가 먼저 같이 하자고했다.실제 실무와 비슷한 환경에서 내 실력을 테스트해 보고 싶었고, 이 경험이 취업 준비에 .. 2024. 9. 4.
웹 브라우저의 렌더링 과정 이해하기 우리가 웹사이트에 접속할 때, 브라우저는 복잡한 과정을 통해 웹페이지를 화면에 표시합니다. 이 과정은 '렌더링'이라고 불리며, 여러 단계로 나누어져 있습니다. 웹 브라우저가 어떻게 웹페이지를 렌더링하는지 알아보겠습니다. 1. HTML 파싱과 DOM 생성첫 번째 단계는 서버로부터 HTML 문서를 받아오는 것입니다. 브라우저는 이 HTML 문서를 바탕으로 'DOM(Document Object Model)'을 생성합니다. DOM은 HTML 문서의 구조를 트리 형태로 표현한 것으로, 각 노드는 HTML 요소를 나타냅니다. 예를 들어, ``나 `` 같은 태그들이 각각 DOM의 노드가 됩니다. 2. CSS 파싱과 스타일 계산다음 단계는 CSS를 파싱하는 것입니다. 브라우저는 HTML 파일 내의 `` 태그 또는 링크.. 2024. 8. 30.

티스토리툴바