본문 바로가기

분류 전체보기235

[React][Virtual Dom][Fiber]에 대해 알아보자 목차 이전걸 참고하면 이해하는데 도움이 됩니다.참고https://be-senior-developer.tistory.com/189 브라우저의 랜더링에 대해 자세히 알아보자목차 브라우저의 정의웹상에 존재하는 페이지들의 HTML 언어를 해석해서 사용자의 컴퓨터 화면에 출력해 주는 프로그램그렇다면 웹브라우저의 구조는 어떻게 되어있을까? 다음그림을 통해 쉽be-senior-developer.tistory.com virtual Dom이란? DOM을 추상화한 가상의 객체로, Virtual DOM은 Real DOM 객체와 동일한 속성을 가지고 있는 가벼운 사본이다.  주요한 특징으로는 다음과 같다.React에는 모든 DOM 객체에 대응하는 가상의 DOM 객체가 있다.React는 실제 DOM 객체에 접근하여 조작하는 대.. 2024. 9. 16.
[백준][스위핑] 1931 회의실 배정 c++구현 목차https://www.acmicpc.net/problem/1931문제 문제 접근 방향생각보다 아이디어가 잘 떠오르지 않았다. 하지만 N이 100000이라는 것을 보아 O(N) 시간으로 탐색해야 한다는 것을유추할 수 있다. 또한 경우를 줄이기 위해 정렬을 해야 한다는 것 또한 유추할 수 있다. 다음과 같이 3가지 정렬 기준이 나올 수 있다. 1. 시작점 기준으로 정렬하기바로 반례가 나온다. 경우에서 제외시켜 준다. 2. 사이 크기로 정렬하기이것 또한 반례가 바로 나온다. 3. 끝점 기준으로 정렬하기이것은 반례가 안보인다. 한번 시도해볼 가치가 충분하다.  코드 구현#include #include #include#include#include using namespace std;typedef long lo.. 2024. 9. 15.
브라우저의 랜더링에 대해 자세히 알아보자 목차 브라우저의 정의웹상에 존재하는 페이지들의 HTML 언어를 해석해서 사용자의 컴퓨터 화면에 출력해 주는 프로그램그렇다면 웹브라우저의 구조는 어떻게 되어있을까? 다음그림을 통해 쉽게 구조를 볼 수 있다.      사용자 인터페이스: 주소 표시줄, 이전/다음 버튼, 북마크 등 페이지 뷰 이외의 다른 부분브라우저 엔진: 사용자 인터페이스와 렌더링 엔진 사이 동작을 제어렌더링 엔진: HTML, CSS를 파싱해 화면에 요청한 컨텐츠를 표시통 신: HTTP요청과 같은 네트워크 호출에 사용됨JS 엔진: 자바스크립트 코드를 해석하고 실행UI 백엔드: 기본적인 위젯(콤보 박스 등)을 그림자료 저장소: 자료를 저장하는 계층으로 쿠키 등을 저장하는 웹 데이터베이스그 중 우리가 자세히 살펴볼 내용은 렌더링 엔진이다. 랜더.. 2024. 9. 14.
불변성이 중요해요! 그게 머죠? 너무 막연한데요.. 목차  오늘은 리액트에서 빠질 수 없는 불변성이라는 개념을 정리하고자 한다. 불변성의 정의 불변성의 의미는 상태를 변경하지 않는 것이라는 간단한 정의로 설명된다. 이렇게 말하면 정말 와닫지 않는다.그렇다면 불변성이 이야기하고 있는 상태의 변경이라는 것이 정확히 어떤 행위를 의미하는 것일까? 단순히 프로그램의 변수를 변경하거나 재할당 하지 않는 것을 이야기하는 것일까? 사실 불변성이 이야기하는 상태의 변경이라는 것은 단순한 변수의 재할당을 이야기하는 것이 아니다. 정확히 말하면 메모리에 저장된 값을 변경하는 모든 행위를 의미하며, 여기에 변수의 재할당과 같은 행위도 포함되는 것이다.   그렇다면 우리가 변수를 재할당하지만 않는다면 불변이라는 개념을 지킬 수 있는 것일까? 답을 알기 위해서는 다음의 개념을 .. 2024. 9. 14.
728x90

티스토리툴바