Jerry

Reflow와 Repaint는 웹 브라우저가 페이지 렌더링하는 과정에서 발생하는 중요한 개념이다.두 과정은 비슷하게 들릴 수 있지만, 실제로 다르고 서로 다른 시점에 발생한다.    먼저, Reflow(리플로우)란?=> 브라우저가 페이지 레이아웃을 계산하는 과정   페이지에서 임의의 요소가 변경되면 브라우저는 그에 맞게 레이아웃을 새로 계산= 문서의 DOM 트리 다시 계산 -> 그에 따라 요소 크기나 위치 재조정 시점:  페이지 구조, 레이아웃 영향 미치는 변경이 있을 경우- DOM에 새로운 요소가 추가되거나 삭제- 요소의 크기나 위치 변경- 뷰포트 크기나 화면 회전- 폰트 크기나 스타일 변경- CSS Flexbox나 Grid 사용 성능 문제- 비교적 비싼 작업으로, 페이지 크기와 구조가 복잡할수록 ->..

REST 원칙을 적용해 서비스 API 설계한 것  그렇다면, REST란 무엇인가?=> 자원을 이름으로 구분하여 해당 자원의 상태를 주고 받는 모든 것.=>  HTTP URI를 통해 자원 명시=>  HTTP 메서드를 통해 해당 자원에 대한 CRUD 적용하는 것   그렇다면, API란 무엇인가?=>  응용 프로그램에서 사용할 수 있도록 운영 체제나 프로그래밍 언어가제공 기능을 제어할 수 있게 만든 인터페이스=> 프로그램끼리 통신 중재자 역할 REST- REpresentational State Transfer 약자- 전반적 웹 어플리케이션의 상호작용에 사용되는 웹 아키텍처 모델- 웹 통신 체계 범용적 스타일 규정한 아키텍처 API- Application Programming Interface 약자- 기존 응용..

제가 브라우저에 URL을 입력하면 어떤 일이 일어나는지 쉽게 설명해볼게요. 이 과정은 우리가 매일 경험하는 일이지만, 실제로는 여러 단계의 복잡한 흐름이 진행됩니다.사용자가 웹 브라우저 https://www.example.com 입력URL 주소 중 Domain Name(도메인 이름)을 DNS 서버에서 검색DNS 서버에서, 해당 Domain Name과 일치하는 IP 주소 탐색탐색 후, 사용자가 입력한 URL 정보와 함께 전달브라우저는 HTTP Protocol 사용하여, 요청 메시지 생성HTTP 요청 메시지는 TCP/IP 프로토콜 사용하여 서버로 전송서버는,Response 메시지 생성하여다시 브라우저에게 데이터 전송브라우저는, Response 받아 파싱화면에 렌더TIP✨DNS는, https://www.exa..

리액트에 대해서 공부하는 사람이라면 대부분 듣거나 알고 있을 개념인 Props Drilling에 대해서 공부하는 도중..Props Drilling에 대한 해결책으로 여러 라이브러리나 리액트 내부 기능이 존재했다. 리액트에서 제공하는 상태 관리 기능은 Context API이 존재하고,상태 관리 라이브러리에는 Redux, Zustand, Recoil, Jotai 같은 것들이 대표적으로 있다.거의 모든 상태관리 라이브러리들은 이 api를 기반으로 개발되었다고 한다. 먼저, Props Drilling에 대해 알아보았다.기존에 상태 관리하는 기능이나 라이브러리가 없었던 시절(?), 컴포넌트 간에 상태를 공유하기 위해 Prop을 여러 계층을 통해 전달하는 것이 일반적이었다. 즉, Props Drilling은  상위..

캐싱: 캐싱은 자주 사용하는 데이터나 연산 결과를 임시 저장소(Cache)에 저장해, 동일한 요청이 들어왔을 때 저장된 값을 반환하여 성능을 향상시키는 기법 특징주로 디스크 I/O, 네트워크 요청, DB 조회 등과 같은 비싼 연산 비용을 줄이기 위해 사용됨캐시 계층(Cache Layer) 를 두어 속도가 빠른 저장소(RAM, SSD 등)에 데이터를 저장일반적으로 범용적인 데이터 저장소로 활용됨 예시 웹 브라우저 캐시: 방문한 웹사이트의 이미지, CSS, JavaScript 파일을 저장하여 다시 방문할 때 빠르게 로드데이터베이스 캐시: Redis나 Memcached 같은 인메모리 캐시를 사용하여 데이터베이스 조회 부담을 줄임CPU 캐시: 프로세서가 자주 사용하는 데이터를 L1, L2, L3 캐시에 저장하여..